Subversion Repositories Applications.papyrus

Rev

Rev 1318 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1318 alexandre_ 1
/*
2
	Copyright (c) 2004-2006, The Dojo Foundation
3
	All Rights Reserved.
4
 
5
	Licensed under the Academic Free License version 2.1 or above OR the
6
	modified BSD license. For more information on Dojo licensing, see:
7
 
8
		http://dojotoolkit.org/community/licensing.shtml
9
*/
10
 
1422 alexandre_ 11
 
12
 
1318 alexandre_ 13
dojo.provide("dojo.widget.Rounded");
14
dojo.widget.tags.addParseTreeHandler("dojo:rounded");
15
dojo.require("dojo.widget.*");
16
dojo.require("dojo.widget.ContentPane");
17
dojo.require("dojo.html.style");
18
dojo.require("dojo.html.display");
19
dojo.require("dojo.gfx.color");
20
dojo.deprecated("dojo.widget.Rounded will be removed in version 0.5; you can now apply rounded corners to any block element using dojo.lfx.rounded.", "0.5");
21
dojo.widget.defineWidget("dojo.widget.Rounded", dojo.widget.ContentPane, {isSafari:dojo.render.html.safari, boxMargin:"50px", radius:14, domNode:"", corners:"TR,TL,BR,BL", antiAlias:true, fillInTemplate:function (args, frag) {
22
	dojo.widget.Rounded.superclass.fillInTemplate.call(this, args, frag);
23
	dojo.html.insertCssFile(this.templateCssPath);
24
	if (this.domNode.style.height <= 0) {
25
		var minHeight = (this.radius * 1) + this.domNode.clientHeight;
26
		this.domNode.style.height = minHeight + "px";
27
	}
28
	if (this.domNode.style.width <= 0) {
29
		var minWidth = (this.radius * 1) + this.domNode.clientWidth;
30
		this.domNode.style.width = minWidth + "px";
31
	}
32
	var cornersAvailable = ["TR", "TL", "BR", "BL"];
33
	var cornersPassed = this.corners.split(",");
34
	this.settings = {antiAlias:this.antiAlias};
35
	var setCorner = function (currentCorner) {
36
		var val = currentCorner.toLowerCase();
37
		if (dojo.lang.inArray(cornersPassed, currentCorner)) {
38
			this.settings[val] = {radius:this.radius, enabled:true};
39
		} else {
40
			this.settings[val] = {radius:0};
41
		}
42
	};
43
	dojo.lang.forEach(cornersAvailable, setCorner, this);
44
	this.domNode.style.margin = this.boxMargin;
45
	this.curvyCorners(this.settings);
46
	this.applyCorners();
47
}, curvyCorners:function (settings) {
48
	this.box = this.domNode;
49
	this.topContainer = null;
50
	this.bottomContainer = null;
51
	this.masterCorners = [];
52
	var boxHeight = dojo.html.getStyle(this.box, "height");
53
	if (boxHeight == "") {
54
		boxHeight = "0px";
55
	}
56
	var boxWidth = dojo.html.getStyle(this.box, "width");
57
	var borderWidth = dojo.html.getStyle(this.box, "borderTopWidth");
58
	if (borderWidth == "") {
59
		borderWidth = "0px";
60
	}
61
	var borderColour = dojo.html.getStyle(this.box, "borderTopColor");
62
	if (borderWidth > 0) {
63
		this.antiAlias = true;
64
	}
65
	var boxColour = dojo.html.getStyle(this.box, "backgroundColor");
66
	var backgroundImage = dojo.html.getStyle(this.box, "backgroundImage");
67
	var boxPosition = dojo.html.getStyle(this.box, "position");
68
	this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1) ? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight));
69
	this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1) ? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth));
70
	this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1) ? borderWidth.slice(0, borderWidth.indexOf("px")) : 0));
71
	var test = new dojo.gfx.color.Color(boxColour);
72
	this.boxColour = ((boxColour != "" && boxColour != "transparent") ? ((boxColour.substr(0, 3) == "rgb") ? this.rgb2Hex(boxColour) : boxColour) : "#ffffff");
73
	this.borderColour = ((borderColour != "" && borderColour != "transparent" && this.borderWidth > 0) ? ((borderColour.substr(0, 3) == "rgb") ? this.rgb2Hex(borderColour) : borderColour) : this.boxColour);
74
	this.borderString = this.borderWidth + "px" + " solid " + this.borderColour;
75
	this.backgroundImage = ((backgroundImage != "none") ? backgroundImage : "");
76
	if (boxPosition != "absolute") {
77
		this.box.style.position = "relative";
78
	}
79
	this.applyCorners = function () {
80
		for (var t = 0; t < 2; t++) {
81
			switch (t) {
82
			  case 0:
83
				if (this.settings.tl.enabled || this.settings.tr.enabled) {
84
					var newMainContainer = document.createElement("DIV");
85
					with (newMainContainer.style) {
86
						width = "100%";
87
						fontSize = "1px";
88
						overflow = "hidden";
89
						position = "absolute";
90
						paddingLeft = this.borderWidth + "px";
91
						paddingRight = this.borderWidth + "px";
92
						var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0);
93
						height = topMaxRadius + "px";
94
						top = 0 - topMaxRadius + "px";
95
						left = 0 - this.borderWidth + "px";
96
					}
97
					this.topContainer = this.box.appendChild(newMainContainer);
98
				}
99
				break;
100
			  case 1:
101
				if (this.settings.bl.enabled || this.settings.br.enabled) {
102
					var newMainContainer = document.createElement("DIV");
103
					with (newMainContainer.style) {
104
						width = "100%";
105
						fontSize = "1px";
106
						overflow = "hidden";
107
						position = "absolute";
108
						paddingLeft = this.borderWidth + "px";
109
						paddingRight = this.borderWidth + "px";
110
						var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0);
111
						height = botMaxRadius + "px";
112
						bottom = 0 - botMaxRadius + "px";
113
						left = 0 - this.borderWidth + "px";
114
					}
115
					this.bottomContainer = this.box.appendChild(newMainContainer);
116
				}
117
				break;
118
			}
119
		}
120
		if (this.topContainer) {
121
			this.box.style.borderTopWidth = "0px";
122
		}
123
		if (this.bottomContainer) {
124
			this.box.style.borderBottomWidth = "0px";
125
		}
126
		var corners = ["tr", "tl", "br", "bl"];
127
		for (var i in corners) {
128
			var cc = corners[i];
129
			if (!this.settings[cc]) {
130
				if (((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null)) {
131
					var newCorner = document.createElement("DIV");
132
					newCorner.style.position = "relative";
133
					newCorner.style.fontSize = "1px";
134
					newCorner.style.overflow = "hidden";
135
					if (this.backgroundImage == "") {
136
						newCorner.style.backgroundColor = this.boxColour;
137
					} else {
138
						newCorner.style.backgroundImage = this.backgroundImage;
139
					}
140
					switch (cc) {
141
					  case "tl":
142
						with (newCorner.style) {
143
							height = topMaxRadius - this.borderWidth + "px";
144
							marginRight = this.settings.tr.radius - (this.borderWidth * 2) + "px";
145
							borderLeft = this.borderString;
146
							borderTop = this.borderString;
147
							left = -this.borderWidth + "px";
148
						}
149
						break;
150
					  case "tr":
151
						with (newCorner.style) {
152
							height = topMaxRadius - this.borderWidth + "px";
153
							marginLeft = this.settings.tl.radius - (this.borderWidth * 2) + "px";
154
							borderRight = this.borderString;
155
							borderTop = this.borderString;
156
							backgroundPosition = "-" + this.boxWidth + "px 0px";
157
							left = this.borderWidth + "px";
158
						}
159
						break;
160
					  case "bl":
161
						with (newCorner.style) {
162
							height = botMaxRadius - this.borderWidth + "px";
163
							marginRight = this.settings.br.radius - (this.borderWidth * 2) + "px";
164
							borderLeft = this.borderString;
165
							borderBottom = this.borderString;
166
							left = -this.borderWidth + "px";
167
						}
168
						break;
169
					  case "br":
170
						with (newCorner.style) {
171
							height = botMaxRadius - this.borderWidth + "px";
172
							marginLeft = this.settings.bl.radius - (this.borderWidth * 2) + "px";
173
							borderRight = this.borderString;
174
							borderBottom = this.borderString;
175
							left = this.borderWidth + "px";
176
						}
177
						break;
178
					}
179
				}
180
			} else {
181
				if (this.masterCorners[this.settings[cc].radius]) {
182
					var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);
183
				} else {
184
					var newCorner = document.createElement("DIV");
185
					with (newCorner.style) {
186
						height = this.settings[cc].radius + "px";
187
						width = this.settings[cc].radius + "px";
188
						position = "absolute";
189
						fontSize = "1px";
190
						overflow = "hidden";
191
					}
192
					var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth);
193
					for (var intx = 0, j = this.settings[cc].radius; intx < j; intx++) {
194
						if ((intx + 1) >= borderRadius) {
195
							var y1 = -1;
196
						} else {
197
							var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx + 1), 2))) - 1);
198
						}
199
						if (borderRadius != j) {
200
							if ((intx) >= borderRadius) {
201
								var y2 = -1;
202
							} else {
203
								var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(intx, 2)));
204
							}
205
							if ((intx + 1) >= j) {
206
								var y3 = -1;
207
							} else {
208
								var y3 = (Math.floor(Math.sqrt(Math.pow(j, 2) - Math.pow((intx + 1), 2))) - 1);
209
							}
210
						}
211
						if ((intx) >= j) {
212
							var y4 = -1;
213
						} else {
214
							var y4 = Math.ceil(Math.sqrt(Math.pow(j, 2) - Math.pow(intx, 2)));
215
						}
216
						if (y1 > -1) {
217
							this.drawPixel(intx, 0, this.boxColour, 100, (y1 + 1), newCorner, -1, this.settings[cc].radius);
218
						}
219
						if (borderRadius != j) {
220
							if (this.antiAlias) {
221
								for (var inty = (y1 + 1); inty < y2; inty++) {
222
									if (this.backgroundImage != "") {
223
										var borderFract = (this.pixelFraction(intx, inty, borderRadius) * 100);
224
										if (borderFract < 30) {
225
											this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);
226
										} else {
227
											this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);
228
										}
229
									} else {
230
										var pixelcolour = dojo.gfx.color.blend(this.boxColour, this.borderColour, this.pixelFraction(intx, inty, borderRadius));
231
										this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius);
232
									}
233
								}
234
							}
235
							if (y3 >= y2) {
236
								if (y1 == -1) {
237
									y1 = 0;
238
								}
239
								this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, this.settings[cc].radius);
240
							}
241
							var outsideColour = this.borderColour;
242
						} else {
243
							var outsideColour = this.boxColour;
244
							var y3 = y1;
245
						}
246
						if (this.antiAlias) {
247
							for (var inty = (y3 + 1); inty < y4; inty++) {
248
								this.drawPixel(intx, inty, outsideColour, (this.pixelFraction(intx, inty, j) * 100), 1, newCorner, ((this.borderWidth > 0) ? 0 : -1), this.settings[cc].radius);
249
							}
250
						}
251
					}
252
					this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
253
				}
254
				if (cc != "br") {
255
					for (var t = 0, k = newCorner.childNodes.length; t < k; t++) {
256
						var pixelBar = newCorner.childNodes[t];
257
						var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
258
						var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
259
						var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));
260
						if (cc == "tl" || cc == "bl") {
261
							pixelBar.style.left = this.settings[cc].radius - pixelBarLeft - 1 + "px";
262
						}
263
						if (cc == "tr" || cc == "tl") {
264
							pixelBar.style.top = this.settings[cc].radius - pixelBarHeight - pixelBarTop + "px";
265
						}
266
						var value;
267
						switch (cc) {
268
						  case "tr":
269
							value = (-1 * (Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) - (Math.abs(this.settings[cc].radius - pixelBarHeight - pixelBarTop - this.borderWidth))));
270
							pixelBar.style.backgroundPosition = value + "px";
271
							break;
272
						  case "tl":
273
							value = (-1 * (Math.abs((this.settings[cc].radius - pixelBarLeft - 1) - this.borderWidth) - (Math.abs(this.settings[cc].radius - pixelBarHeight - pixelBarTop - this.borderWidth))));
274
							pixelBar.style.backgroundPosition = value + "px";
275
							break;
276
						  case "bl":
277
							value = (-1 * (Math.abs((this.settings[cc].radius - pixelBarLeft - 1) - this.borderWidth) - (Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) - this.borderWidth))));
278
							pixelBar.style.backgroundPosition = value + "px";
279
							break;
280
						}
281
					}
282
				}
283
			}
284
			if (newCorner) {
285
				switch (cc) {
286
				  case "tl":
287
					if (newCorner.style.position == "absolute") {
288
						newCorner.style.top = "0px";
289
					}
290
					if (newCorner.style.position == "absolute") {
291
						newCorner.style.left = "0px";
292
					}
293
					if (this.topContainer) {
294
						this.topContainer.appendChild(newCorner);
295
					}
296
					break;
297
				  case "tr":
298
					if (newCorner.style.position == "absolute") {
299
						newCorner.style.top = "0px";
300
					}
301
					if (newCorner.style.position == "absolute") {
302
						newCorner.style.right = "0px";
303
					}
304
					if (this.topContainer) {
305
						this.topContainer.appendChild(newCorner);
306
					}
307
					break;
308
				  case "bl":
309
					if (newCorner.style.position == "absolute") {
310
						newCorner.style.bottom = "0px";
311
					}
312
					if (newCorner.style.position == "absolute") {
313
						newCorner.style.left = "0px";
314
					}
315
					if (this.bottomContainer) {
316
						this.bottomContainer.appendChild(newCorner);
317
					}
318
					break;
319
				  case "br":
320
					if (newCorner.style.position == "absolute") {
321
						newCorner.style.bottom = "0px";
322
					}
323
					if (newCorner.style.position == "absolute") {
324
						newCorner.style.right = "0px";
325
					}
326
					if (this.bottomContainer) {
327
						this.bottomContainer.appendChild(newCorner);
328
					}
329
					break;
330
				}
331
			}
332
		}
333
		var radiusDiff = [];
334
		radiusDiff["t"] = this.settings.tl.enabled && this.settings.tr.enabled ? Math.abs(this.settings.tl.radius - this.settings.tr.radius) : 0;
335
		radiusDiff["b"] = this.settings.bl.enabled && this.settings.br.enabled ? Math.abs(this.settings.bl.radius - this.settings.br.radius) : 0;
336
		for (var z in radiusDiff) {
337
			if (radiusDiff[z]) {
338
				var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius) ? z + "l" : z + "r");
339
				var newFiller = document.createElement("DIV");
340
				with (newFiller.style) {
341
					height = radiusDiff[z] + "px";
342
					width = this.settings[smallerCornerType].radius + "px";
343
					position = "absolute";
344
					fontSize = "1px";
345
					overflow = "hidden";
346
					backgroundColor = this.boxColour;
347
				}
348
				switch (smallerCornerType) {
349
				  case "tl":
350
					with (newFiller.style) {
351
						bottom = "0px";
352
						left = "0px";
353
						borderLeft = this.borderString;
354
					}
355
					this.topContainer.appendChild(newFiller);
356
					break;
357
				  case "tr":
358
					with (newFiller.style) {
359
						bottom = "0px";
360
						right = "0px";
361
						borderRight = this.borderString;
362
					}
363
					this.topContainer.appendChild(newFiller);
364
					break;
365
				  case "bl":
366
					with (newFiller.style) {
367
						top = "0px";
368
						left = "0px";
369
						borderLeft = this.borderString;
370
					}
371
					this.bottomContainer.appendChild(newFiller);
372
					break;
373
				  case "br":
374
					with (newFiller.style) {
375
						top = "0px";
376
						right = "0px";
377
						borderRight = this.borderString;
378
					}
379
					this.bottomContainer.appendChild(newFiller);
380
					break;
381
				}
382
			}
383
			var newFillerBar = document.createElement("DIV");
384
			with (newFillerBar.style) {
385
				position = "relative";
386
				fontSize = "1px";
387
				overflow = "hidden";
388
				backgroundColor = this.boxColour;
389
			}
390
			switch (z) {
391
			  case "t":
392
				if (this.topContainer) {
393
					with (newFillerBar.style) {
394
						height = topMaxRadius - this.borderWidth + "px";
395
						marginLeft = this.settings.tl.radius - this.borderWidth + "px";
396
						marginRight = this.settings.tr.radius - this.borderWidth + "px";
397
						borderTop = this.borderString;
398
					}
399
					this.topContainer.appendChild(newFillerBar);
400
				}
401
				break;
402
			  case "b":
403
				if (this.bottomContainer) {
404
					with (newFillerBar.style) {
405
						height = botMaxRadius - this.borderWidth + "px";
406
						marginLeft = this.settings.bl.radius - this.borderWidth + "px";
407
						marginRight = this.settings.br.radius - this.borderWidth + "px";
408
						borderBottom = this.borderString;
409
					}
410
					this.bottomContainer.appendChild(newFillerBar);
411
				}
412
				break;
413
			}
414
		}
415
	};
416
	this.drawPixel = function (intx, inty, colour, transAmount, height, newCorner, image, cornerRadius) {
417
		var pixel = document.createElement("DIV");
418
		pixel.style.height = height + "px";
419
		pixel.style.width = "1px";
420
		pixel.style.position = "absolute";
421
		pixel.style.fontSize = "1px";
422
		pixel.style.overflow = "hidden";
423
		if (image == -1 && this.backgroundImage != "") {
424
			pixel.style.backgroundImage = this.backgroundImage;
425
			pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + cornerRadius + inty) - this.borderWidth) + "px";
426
		} else {
427
			pixel.style.backgroundColor = colour;
428
		}
429
		if (transAmount != 100) {
430
			dojo.html.setOpacity(pixel, transAmount);
431
		}
432
		pixel.style.top = inty + "px";
433
		pixel.style.left = intx + "px";
434
		newCorner.appendChild(pixel);
435
	};
436
}, pixelFraction:function (x, y, r) {
437
	var pixelfraction = 0;
438
	var xvalues = [];
439
	var yvalues = [];
440
	var point = 0;
441
	var whatsides = "";
442
	var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x, 2)));
443
	if ((intersect >= y) && (intersect < (y + 1))) {
444
		whatsides = "Left";
445
		xvalues[point] = 0;
446
		yvalues[point] = intersect - y;
447
		point = point + 1;
448
	}
449
	var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y + 1, 2)));
450
	if ((intersect >= x) && (intersect < (x + 1))) {
451
		whatsides = whatsides + "Top";
452
		xvalues[point] = intersect - x;
453
		yvalues[point] = 1;
454
		point = point + 1;
455
	}
456
	var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x + 1, 2)));
457
	if ((intersect >= y) && (intersect < (y + 1))) {
458
		whatsides = whatsides + "Right";
459
		xvalues[point] = 1;
460
		yvalues[point] = intersect - y;
461
		point = point + 1;
462
	}
463
	var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y, 2)));
464
	if ((intersect >= x) && (intersect < (x + 1))) {
465
		whatsides = whatsides + "Bottom";
466
		xvalues[point] = intersect - x;
467
		yvalues[point] = 0;
468
	}
469
	switch (whatsides) {
470
	  case "LeftRight":
471
		pixelfraction = Math.min(yvalues[0], yvalues[1]) + ((Math.max(yvalues[0], yvalues[1]) - Math.min(yvalues[0], yvalues[1])) / 2);
472
		break;
473
	  case "TopRight":
474
		pixelfraction = 1 - (((1 - xvalues[0]) * (1 - yvalues[1])) / 2);
475
		break;
476
	  case "TopBottom":
477
		pixelfraction = Math.min(xvalues[0], xvalues[1]) + ((Math.max(xvalues[0], xvalues[1]) - Math.min(xvalues[0], xvalues[1])) / 2);
478
		break;
479
	  case "LeftBottom":
480
		pixelfraction = (yvalues[0] * xvalues[1]) / 2;
481
		break;
482
	  default:
483
		pixelfraction = 1;
484
	}
485
	return pixelfraction;
486
}, rgb2Hex:function (rgbColour) {
487
	try {
488
		var rgbArray = this.rgb2Array(rgbColour);
489
		var red = parseInt(rgbArray[0]);
490
		var green = parseInt(rgbArray[1]);
491
		var blue = parseInt(rgbArray[2]);
492
		var hexColour = "#" + this.intToHex(red) + this.intToHex(green) + this.intToHex(blue);
493
	}
494
	catch (e) {
495
		alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
496
	}
497
	return hexColour;
498
}, intToHex:function (strNum) {
499
	var base = strNum / 16;
500
	var rem = strNum % 16;
501
	var base = base - (rem / 16);
502
	var baseS = this.makeHex(base);
503
	var remS = this.makeHex(rem);
504
	return baseS + "" + remS;
505
}, makeHex:function (x) {
506
	if ((x >= 0) && (x <= 9)) {
507
		return x;
508
	} else {
509
		switch (x) {
510
		  case 10:
511
			return "A";
512
		  case 11:
513
			return "B";
514
		  case 12:
515
			return "C";
516
		  case 13:
517
			return "D";
518
		  case 14:
519
			return "E";
520
		  case 15:
521
			return "F";
522
		}
523
	}
524
}, rgb2Array:function (rgbColour) {
525
	var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
526
	var rgbArray = rgbValues.split(", ");
527
	return rgbArray;
528
}});
529