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.lfx.rounded");
14
dojo.require("dojo.lang.common");
15
dojo.require("dojo.html.common");
16
dojo.require("dojo.html.style");
17
dojo.require("dojo.html.display");
18
dojo.require("dojo.html.layout");
19
dojo.lfx.rounded = function (settings) {
20
	var options = {validTags:settings.validTags || ["div"], autoPad:settings.autoPad != null ? settings.autoPad : true, antiAlias:settings.antiAlias != null ? settings.antiAlias : true, radii:{tl:(settings.tl && settings.tl.radius != null) ? settings.tl.radius : 5, tr:(settings.tr && settings.tr.radius != null) ? settings.tr.radius : 5, bl:(settings.bl && settings.bl.radius != null) ? settings.bl.radius : 5, br:(settings.br && settings.br.radius != null) ? settings.br.radius : 5}};
21
	var nodes;
22
	if (typeof (arguments[1]) == "string") {
23
		nodes = dojo.html.getElementsByClass(arguments[1]);
24
	} else {
25
		if (dojo.lang.isArrayLike(arguments[1])) {
26
			nodes = arguments[1];
27
			for (var i = 0; i < nodes.length; i++) {
28
				nodes[i] = dojo.byId(nodes[i]);
29
			}
30
		}
31
	}
32
	if (nodes.length == 0) {
33
		return;
34
	}
35
	for (var i = 0; i < nodes.length; i++) {
36
		dojo.lfx.rounded.applyCorners(options, nodes[i]);
37
	}
38
};
39
dojo.lfx.rounded.applyCorners = function (options, node) {
40
	var top = null;
41
	var bottom = null;
42
	var contentNode = null;
43
	var fns = dojo.lfx.rounded._fns;
44
	var width = node.offsetWidth;
45
	var height = node.offsetHeight;
46
	var borderWidth = parseInt(dojo.html.getComputedStyle(node, "border-top-width"));
47
	var borderColor = dojo.html.getComputedStyle(node, "border-top-color");
48
	var color = dojo.html.getComputedStyle(node, "background-color");
49
	var bgImage = dojo.html.getComputedStyle(node, "background-image");
50
	var position = dojo.html.getComputedStyle(node, "position");
51
	var padding = parseInt(dojo.html.getComputedStyle(node, "padding-top"));
52
	var format = {height:height, width:width, borderWidth:borderWidth, color:fns.getRGB(color), padding:padding, borderColor:fns.getRGB(borderColor), borderString:borderWidth + "px" + " solid " + fns.getRGB(borderColor), bgImage:((bgImage != "none") ? bgImage : ""), content:node.innerHTML};
53
	if (!dojo.html.isPositionAbsolute(node)) {
54
		node.style.position = "relative";
55
	}
56
	node.style.padding = "0px";
57
	if (dojo.render.html.ie && width == "auto" && height == "auto") {
58
		node.style.width = "100%";
59
	}
60
	if (options.autoPad && format.padding > 0) {
61
		node.innerHTML = "";
62
	}
63
	var topHeight = Math.max(options.radii.tl, options.radii.tr);
64
	var bottomHeight = Math.max(options.radii.bl, options.radii.br);
65
	if (options.radii.tl || options.radii.tr) {
66
		top = document.createElement("div");
67
		top.style.width = "100%";
68
		top.style.fontSize = "1px";
69
		top.style.overflow = "hidden";
70
		top.style.position = "absolute";
71
		top.style.paddingLeft = format.borderWidth + "px";
72
		top.style.paddingRight = format.borderWidth + "px";
73
		top.style.height = topHeight + "px";
74
		top.style.top = (0 - topHeight) + "px";
75
		top.style.left = (0 - format.borderWidth) + "px";
76
		node.appendChild(top);
77
	}
78
	if (options.radii.bl || options.radii.br) {
79
		bottom = document.createElement("div");
80
		bottom.style.width = "100%";
81
		bottom.style.fontSize = "1px";
82
		bottom.style.overflow = "hidden";
83
		bottom.style.position = "absolute";
84
		bottom.style.paddingLeft = format.borderWidth + "px";
85
		bottom.style.paddingRight = format.borderWidth + "px";
86
		bottom.style.height = bottomHeight + "px";
87
		bottom.style.bottom = (0 - bottomHeight) + "px";
88
		bottom.style.left = (0 - format.borderWidth) + "px";
89
		node.appendChild(bottom);
90
	}
91
	if (top) {
92
		node.style.borderTopWidth = "0px";
93
	}
94
	if (bottom) {
95
		node.style.borderBottomWidth = "0px";
96
	}
97
	var corners = ["tr", "tl", "br", "bl"];
98
	for (var i = 0; i < corners.length; i++) {
99
		var cc = corners[i];
100
		if (options.radii[cc] == 0) {
101
			if ((cc.charAt(0) == "t" && top) || (cc.charAt(0) == "b" && bottom)) {
102
				var corner = document.createElement("div");
103
				corner.style.position = "relative";
104
				corner.style.fontSize = "1px;";
105
				corner.style.overflow = "hidden";
106
				if (format.bgImage == "") {
107
					corner.style.backgroundColor = format.color;
108
				} else {
109
					corner.style.backgroundImage = format.bgImage;
110
				}
111
				switch (cc) {
112
				  case "tl":
113
					corner.style.height = topHeight - format.borderWidth + "px";
114
					corner.style.marginRight = options.radii[cc] - (format.borderWidth * 2) + "px";
115
					corner.style.borderLeft = format.borderString;
116
					corner.style.borderTop = format.borderString;
117
					corner.style.left = -format.borderWidth + "px";
118
					break;
119
				  case "tr":
120
					corner.style.height = topHeight - format.borderWidth + "px";
121
					corner.style.marginLeft = options.radii[cc] - (format.borderWidth * 2) + "px";
122
					corner.style.borderRight = format.borderString;
123
					corner.style.borderTop = format.borderString;
124
					corner.style.backgroundPosition = "-" + (topHeight - format.borderWidth) + "px 0px";
125
					corner.style.left = format.borderWidth + "px";
126
					break;
127
				  case "bl":
128
					corner.style.height = bottomHeight - format.borderWidth + "px";
129
					corner.style.marginRight = options.radii[cc] - (format.borderWidth * 2) + "px";
130
					corner.style.borderLeft = format.borderString;
131
					corner.style.borderBottom = format.borderString;
132
					corner.style.left = format.borderWidth + "px";
133
					corner.style.backgroundPosition = "-" + format.borderWidth + "px -" + (format.height + (bottomHeight + format.borderWidth)) + "px";
134
					break;
135
				  case "br":
136
					corner.style.height = bottomHeight - format.borderWidth + "px";
137
					corner.style.marginLeft = options.radii[cc] - (format.borderWidth * 2) + "px";
138
					corner.style.borderRight = format.borderString;
139
					corner.style.borderBottom = format.borderString;
140
					corner.style.left = format.borderWidth + "px";
141
					corner.style.backgroundPosition = "-" + (bottomHeight + format.borderWidth) + "px -" + (format.height + (bottomHeight + format.borderWidth)) + "px";
142
					break;
143
				}
144
			}
145
		} else {
146
			var corner = document.createElement("div");
147
			corner.style.height = options.radii[cc] + "px";
148
			corner.style.width = options.radii[cc] + "px";
149
			corner.style.position = "absolute";
150
			corner.style.fontSize = "1px";
151
			corner.style.overflow = "hidden";
152
			var borderRadius = Math.floor(options.radii[cc] - format.borderWidth);
153
			for (var x = 0, j = options.radii[cc]; x < j; x++) {
154
				var y1 = Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((x + 1), 2))) - 1;
155
				if ((x + 1) >= borderRadius) {
156
					var y1 = -1;
157
				}
158
				var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(x, 2)));
159
				if (x >= borderRadius) {
160
					y2 = -1;
161
				}
162
				var y3 = Math.floor(Math.sqrt(Math.pow(j, 2) - Math.pow((x + 1), 2))) - 1;
163
				if ((x + 1) >= j) {
164
					y3 = -1;
165
				}
166
				var y4 = Math.ceil(Math.sqrt(Math.pow(j, 2) - Math.pow(x, 2)));
167
				if (x >= j) {
168
					y4 = -1;
169
				}
170
				if (y1 > -1) {
171
					fns.draw(x, 0, format.color, 100, (y1 + 1), corner, -1, j, topHeight, format);
172
				}
173
				for (var y = (y1 + 1); y < y2; y++) {
174
					if (options.antiAlias) {
175
						if (format.bgImage != "") {
176
							var fract = fns.fraction(x, y, borderRadius) * 100;
177
							if (fract < 30) {
178
								fns.draw(x, y, format.borderColor, 100, 1, corner, 0, options.radii[cc], topHeight, format);
179
							} else {
180
								fns.draw(x, y, format.borderColor, 100, 1, corner, -1, options.radii[cc], topHeight, format);
181
							}
182
						} else {
183
							var clr = fns.blend(format.color, format.borderColor, fns.fraction(x, y, borderRadius));
184
							fns.draw(x, y, clr, 100, 1, corner, 0, options.radii[cc], topHeight, format);
185
						}
186
					}
187
				}
188
				if (options.antiAlias) {
189
					if (y3 >= y2) {
190
						if (y2 == -1) {
191
							y2 = 0;
192
						}
193
						fns.draw(x, y2, format.borderColor, 100, (y3 - y2 + 1), corner, 0, 0, topHeight, format);
194
					} else {
195
						if (y3 >= y1) {
196
							fns.draw(x, (y1 + 1), format.borderColor, 100, (y3 - y1), corner, 0, 0, topHeight, format);
197
						}
198
					}
199
					for (var y = (y3 + 1); y < y4; y++) {
200
						fns.draw(x, y, format.borderColor, (fns.fraction(x, y, j) * 100), 1, corner, (format.borderWidth > 0 ? 0 : -1), options.radii[cc], topHeight, format);
201
					}
202
				} else {
203
					y3 = y1;
204
				}
205
			}
206
			if (cc != "br") {
207
				for (var t = 0, k = corner.childNodes.length; t < k; t++) {
208
					var bar = corner.childNodes[t];
209
					var barTop = parseInt(dojo.html.getComputedStyle(bar, "top"));
210
					var barLeft = parseInt(dojo.html.getComputedStyle(bar, "left"));
211
					var barHeight = parseInt(dojo.html.getComputedStyle(bar, "height"));
212
					if (cc.charAt(1) == "l") {
213
						bar.style.left = (options.radii[cc] - barLeft - 1) + "px";
214
					}
215
					if (cc == "tr") {
216
						bar.style.top = (options.radii[cc] - barHeight - barTop) + "px";
217
						bar.style.backgroundPosition = "-" + Math.abs((format.width - options.radii[cc] + format.borderWidth) + barLeft) + "px -" + Math.abs(options.radii[cc] - barHeight - barTop - format.borderWidth) + "px";
218
					} else {
219
						if (cc == "tl") {
220
							bar.style.top = (options.radii[cc] - barHeight - barTop) + "px";
221
							bar.style.backgroundPosition = "-" + Math.abs((options.radii[cc] - barLeft - 1) - format.borderWidth) + "px -" + Math.abs(options.radii[cc] - barHeight - barTop - format.borderWidth) + "px";
222
						} else {
223
							bar.style.backgroundPosition = "-" + Math.abs((options.radii[cc] + barLeft) + format.borderWidth) + "px -" + Math.abs((format.height + options.radii[cc] + barTop) - format.borderWidth) + "px";
224
						}
225
					}
226
				}
227
			}
228
		}
229
		if (corner) {
230
			var psn = [];
231
			if (cc.charAt(0) == "t") {
232
				psn.push("top");
233
			} else {
234
				psn.push("bottom");
235
			}
236
			if (cc.charAt(1) == "l") {
237
				psn.push("left");
238
			} else {
239
				psn.push("right");
240
			}
241
			if (corner.style.position == "absolute") {
242
				for (var z = 0; z < psn.length; z++) {
243
					corner.style[psn[z]] = "0px";
244
				}
245
			}
246
			if (psn[0] == "top") {
247
				if (top) {
248
					top.appendChild(corner);
249
				}
250
			} else {
251
				if (bottom) {
252
					bottom.appendChild(corner);
253
				}
254
			}
255
		}
256
	}
257
	var diff = {t:Math.abs(options.radii.tl - options.radii.tr), b:Math.abs(options.radii.bl - options.radii.br)};
258
	for (var z in diff) {
259
		var smaller = (options.radii[z + "l"] < options.radii[z + "r"] ? z + "l" : z + "r");
260
		var filler = document.createElement("div");
261
		filler.style.height = diff[z] + "px";
262
		filler.style.width = options.radii[smaller] + "px";
263
		filler.style.position = "absolute";
264
		filler.style.fontSize = "1px";
265
		filler.style.overflow = "hidden";
266
		filler.style.backgroundColor = format.color;
267
		switch (smaller) {
268
		  case "tl":
269
			filler.style.bottom = "0px";
270
			filler.style.left = "0px";
271
			filler.style.borderLeft = format.borderString;
272
			top.appendChild(filler);
273
			break;
274
		  case "tr":
275
			filler.style.bottom = "0px";
276
			filler.style.right = "0px";
277
			filler.style.borderRight = format.borderString;
278
			top.appendChild(filler);
279
			break;
280
		  case "bl":
281
			filler.style.top = "0px";
282
			filler.style.left = "0px";
283
			filler.style.borderLeft = format.borderString;
284
			bottom.appendChild(filler);
285
			break;
286
		  case "br":
287
			filler.style.top = "0px";
288
			filler.style.right = "0px";
289
			filler.style.borderRight = format.borderString;
290
			bottom.appendChild(filler);
291
			break;
292
		}
293
		var fillBar = document.createElement("div");
294
		fillBar.style.position = "relative";
295
		fillBar.style.fontSize = "1px";
296
		fillBar.style.overflow = "hidden";
297
		fillBar.style.backgroundColor = format.color;
298
		fillBar.style.backgroundImage = format.bgImage;
299
		if (z == "t") {
300
			if (top) {
301
				if (options.radii.tl && options.radii.tr) {
302
					fillBar.style.height = (topHeight - format.borderWidth) + "px";
303
					fillBar.style.marginLeft = (options.radii.tl - format.borderWidth) + "px";
304
					fillBar.style.marginRight = (options.radii.tr - format.borderWidth) + "px";
305
					fillBar.style.borderTop = format.borderString;
306
					if (format.bgImage != "") {
307
						fillBar.style.backgroundPosition = "-" + (topHeight + format.borderWidth) + "px 0px";
308
					}
309
				}
310
				top.appendChild(fillBar);
311
			}
312
		} else {
313
			if (bottom) {
314
				if (options.radii.bl && options.radii.br) {
315
					fillBar.style.height = (bottomHeight - format.borderWidth) + "px";
316
					fillBar.style.marginLeft = (options.radii.bl - format.borderWidth) + "px";
317
					fillBar.style.marginRight = (options.radii.br - format.borderWidth) + "px";
318
					fillBar.style.borderBottom = format.borderString;
319
					if (format.bgImage != "") {
320
						fillBar.style.backgroundPosition = "-" + (bottomHeight + format.borderWidth) + "px -" + (format.height + (topHeight + format.borderWidth)) + "px";
321
					}
322
				}
323
				bottom.appendChild(fillBar);
324
			}
325
		}
326
	}
327
	if (options.autoPad && format.padding > 0) {
328
		var content = document.createElement("div");
329
		content.style.position = "relative";
330
		content.innerHTML = format.content;
331
		content.className = "autoPadDiv";
332
		if (topHeight < format.padding) {
333
			content.style.paddingTop = Math.abs(topHeight - format.padding) + "px";
334
		}
335
		if (bottomHeight < format.padding) {
336
			content.style.paddingBottom = Math.abs(bottomHeight - format.padding) + "px";
337
		}
338
		content.style.paddingLeft = format.padding + "px";
339
		content.style.paddingRight = format.padding + "px";
340
		node.appendChild(content);
341
	}
342
};
343
var count = 0;
344
dojo.lfx.rounded._fns = {blend:function (clr1, clr2, frac) {
345
	var c1 = {r:parseInt(clr1.substr(1, 2), 16), g:parseInt(clr1.substr(3, 2), 16), b:parseInt(clr1.substr(5, 2), 16)};
346
	var c2 = {r:parseInt(clr2.substr(1, 2), 16), g:parseInt(clr2.substr(3, 2), 16), b:parseInt(clr2.substr(5, 2), 16)};
347
	if (frac > 1 || frac < 0) {
348
		frac = 1;
349
	}
350
	var ret = [Math.min(Math.max(Math.round((c1.r * frac) + (c2.r * (1 - frac))), 0), 255), Math.min(Math.max(Math.round((c1.g * frac) + (c2.g * (1 - frac))), 0), 255), Math.min(Math.max(Math.round((c1.b * frac) + (c2.b * (1 - frac))), 0), 255)];
351
	for (var i = 0; i < ret.length; i++) {
352
		var n = ret[i].toString(16);
353
		if (n.length < 2) {
354
			n = "0" + n;
355
		}
356
		ret[i] = n;
357
	}
358
	return "#" + ret.join("");
359
}, fraction:function (x, y, r) {
360
	var frac = 0;
361
	var xval = [];
362
	var yval = [];
363
	var point = 0;
364
	var whatsides = "";
365
	var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x, 2)));
366
	if (intersect >= y && intersect < (y + 1)) {
367
		whatsides = "Left";
368
		xval[point] = 0;
369
		yval[point++] = intersect - y;
370
	}
371
	intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y + 1, 2)));
372
	if (intersect >= x && intersect < (x + 1)) {
373
		whatsides += "Top";
374
		xval[point] = intersect - x;
375
		yval[point++] = 1;
376
	}
377
	intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x + 1, 2)));
378
	if (intersect >= y && intersect < (y + 1)) {
379
		whatsides += "Right";
380
		xval[point] = 1;
381
		yval[point++] = intersect - y;
382
	}
383
	intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y, 2)));
384
	if (intersect >= x && intersect < (x + 1)) {
385
		whatsides += "Bottom";
386
		xval[point] = intersect - x;
387
		yval[point] = 1;
388
	}
389
	switch (whatsides) {
390
	  case "LeftRight":
391
		return Math.min(yval[0], yval[1]) + ((Math.max(yval[0], yval[1]) - Math.min(yval[0], yval[1])) / 2);
392
	  case "TopRight":
393
		return 1 - (((1 - xval[0]) * (1 - yval[1])) / 2);
394
	  case "TopBottom":
395
		return Math.min(xval[0], xval[1]) + ((Math.max(xval[0], xval[1]) - Math.min(xval[0], xval[1])) / 2);
396
	  case "LeftBottom":
397
		return (yval[0] * xval[1]) / 2;
398
	  default:
399
		return 1;
400
	}
401
}, draw:function (x, y, color, opac, height, corner, image, radius, top, format) {
402
	var px = document.createElement("div");
403
	px.style.height = height + "px";
404
	px.style.width = "1px";
405
	px.style.position = "absolute";
406
	px.style.fontSize = "1px";
407
	px.style.overflow = "hidden";
408
	if (image == -1 && format.bgImage != "") {
409
		px.style.backgroundImage = format.bgImage;
410
		px.style.backgroundPosition = "-" + (format.width - (radius - x) + format.borderWidth) + "px -" + ((format.height + top + y) - format.borderWidth) + "px";
411
	} else {
412
		px.style.backgroundColor = color;
413
	}
414
	if (opac != 100) {
415
		dojo.html.setOpacity(px, (opac / 100));
416
	}
417
	px.style.top = y + "px";
418
	px.style.left = x + "px";
419
	corner.appendChild(px);
420
}, getRGB:function (clr) {
421
	var ret = "#ffffff";
422
	if (clr != "" && clr != "transparent") {
423
		if (clr.substr(0, 3) == "rgb") {
424
			var t = clr.substring(4, clr.indexOf(")"));
425
			t = t.split(",");
426
			for (var i = 0; i < t.length; i++) {
427
				var n = parseInt(t[i]).toString(16);
428
				if (n.length < 2) {
429
					n = "0" + n;
430
				}
431
				t[i] = n;
432
			}
433
			ret = "#" + t.join("");
434
		} else {
435
			if (clr.length == 4) {
436
				ret = "#" + clr.substring(1, 2) + clr.substring(1, 2) + clr.substring(2, 3) + clr.substring(2, 3) + clr.substring(3, 4) + clr.substring(3, 4);
437
			} else {
438
				ret = clr;
439
			}
440
		}
441
	}
442
	return ret;
443
}};
444