Context Navigation

root/afridex/js/rounded_corners.js @ 8

Revision 1, 46.6 kB (checked in by admin, 18 years ago)

Line
1
2	/****************************************************************
3	* *
4	* curvyCorners *
5	* ------------ *
6	* *
7	* This script generates rounded corners for your divs. *
8	* *
9	* Version 1.2.9 *
10	* Copyright (c) 2006 Cameron Cooke *
11	* By: Cameron Cooke and Tim Hutchison. *
12	* *
13	* *
14	* Website: http://www.curvycorners.net *
15	* Email: info@totalinfinity.com *
16	* Forum: http://www.curvycorners.net/forum/ *
17	* *
18	* *
19	* This library is free software; you can redistribute *
20	* it and/or modify it under the terms of the GNU *
21	* Lesser General Public License as published by the *
22	* Free Software Foundation; either version 2.1 of the *
23	* License, or (at your option) any later version. *
24	* *
25	* This library is distributed in the hope that it will *
26	* be useful, but WITHOUT ANY WARRANTY; without even the *
27	* implied warranty of MERCHANTABILITY or FITNESS FOR A *
28	* PARTICULAR PURPOSE. See the GNU Lesser General Public *
29	* License for more details. *
30	* *
31	* You should have received a copy of the GNU Lesser *
32	* General Public License along with this library; *
33	* Inc., 59 Temple Place, Suite 330, Boston, *
34	* MA 02111-1307 USA *
35	* *
36	****************************************************************/
37
38	// Browser detection
39	var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1;
40	var isMoz = document.implementation && document.implementation.createDocument;
41	var isSafari = ((navigator.userAgent.toLowerCase().indexOf('safari')!=-1)&&(navigator.userAgent.toLowerCase().indexOf('mac')!=-1))?true:false;
42
43	/*
44	Usage:
45
46	newCornersObj = new curvyCorners(settingsObj, "classNameStr");
47	newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
48	*/
49	function curvyCorners()
50	{
51	// Check parameters
52	if(typeof(arguments[0]) != "object") throw newCurvyError("First parameter of curvyCorners() must be an object.");
53	if(typeof(arguments[1]) != "object" && typeof(arguments[1]) != "string") throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name.");
54
55	// Get object(s)
56	if(typeof(arguments[1]) == "string")
57	{
58	// Get elements by class name
59	var startIndex = 0;
60	var boxCol = getElementsByClass(arguments[1]);
61	}
62	else
63	{
64	// Get objects
65	var startIndex = 1;
66	var boxCol = arguments;
67	}
68
69	// Create return collection/object
70	var curvyCornersCol = new Array();
71
72	// Create array of html elements that can have rounded corners
73	if(arguments[0].validTags)
74	var validElements = arguments[0].validTags;
75	else
76	var validElements = ["div"]; // Default
77
78	// Loop through each argument
79	for(var i = startIndex, j = boxCol.length; i < j; i++)
80	{
81	// Current element tag name
82	var currentTag = boxCol[i].tagName.toLowerCase();
83
84	if(inArray(validElements, currentTag) !== false)
85	{
86	curvyCornersCol[curvyCornersCol.length] = new curvyObject(arguments[0], boxCol[i]);
87	}
88	}
89
90	this.objects = curvyCornersCol;
91
92	// Applys the curvyCorners to all objects
93	this.applyCornersToAll = function()
94	{
95	for(var x = 0, k = this.objects.length; x < k; x++)
96	{
97	this.objects[x].applyCorners();
98	}
99	}
100	}
101
102	// curvyCorners object (can be called directly)
103	function curvyObject()
104	{
105	// Setup Globals
106	this.box = arguments[1];
107	this.settings = arguments[0];
108	this.topContainer = null;
109	this.bottomContainer = null;
110	this.masterCorners = new Array();
111	this.contentDIV = null;
112
113	// Get box formatting details
114	var boxHeight = get_style(this.box, "height", "height");
115	var boxWidth = get_style(this.box, "width", "width");
116	var borderWidth = get_style(this.box, "borderTopWidth", "border-top-width");
117	var borderColour = get_style(this.box, "borderTopColor", "border-top-color");
118	var boxColour = get_style(this.box, "backgroundColor", "background-color");
119	var backgroundImage = get_style(this.box, "backgroundImage", "background-image");
120	var boxPosition = get_style(this.box, "position", "position");
121	var boxPadding = get_style(this.box, "paddingTop", "padding-top");
122
123	// Set formatting propertes
124	this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1)? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight));
125	this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1)? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth));
126	this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1)? borderWidth.slice(0, borderWidth.indexOf("px")) : 0));
127	this.boxColour = format_colour(boxColour);
128	this.boxPadding = parseInt(((boxPadding != "" && boxPadding.indexOf("px") !== -1)? boxPadding.slice(0, boxPadding.indexOf("px")) : 0));
129	this.borderColour = format_colour(borderColour);
130	this.borderString = this.borderWidth + "px" + " solid " + this.borderColour;
131	this.backgroundImage = ((backgroundImage != "none")? backgroundImage : "");
132	this.boxContent = this.box.innerHTML;
133
134	// Make box relative if not already absolute and remove any padding
135	if(boxPosition != "absolute") this.box.style.position = "relative";
136	this.box.style.padding = "0px";
137
138	// If IE and height and width are not set, we need to set width so that we get positioning
139	if(isIE && boxWidth == "auto" && boxHeight == "auto") this.box.style.width = "100%";
140
141	// Resize box so that it stays to the orignal height
142
143
144	// Remove content if box is using autoPad
145	if(this.settings.autoPad == true && this.boxPadding > 0)
146	this.box.innerHTML = "";
147
148	/*
149	This method creates the corners and
150	applies them to the div element.
151	*/
152	this.applyCorners = function()
153	{
154	/*
155	Create top and bottom containers.
156	These will be used as a parent for the corners and bars.
157	*/
158	for(var t = 0; t < 2; t++)
159	{
160	switch(t)
161	{
162	// Top
163	case 0:
164
165	// Only build top bar if a top corner is to be draw
166	if(this.settings.tl \|\| this.settings.tr)
167	{
168	var newMainContainer = document.createElement("DIV");
169	newMainContainer.style.width = "100%";
170	newMainContainer.style.fontSize = "1px";
171	newMainContainer.style.overflow = "hidden";
172	newMainContainer.style.position = "absolute";
173	newMainContainer.style.paddingLeft = this.borderWidth + "px";
174	newMainContainer.style.paddingRight = this.borderWidth + "px";
175	var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0);
176	newMainContainer.style.height = topMaxRadius + "px";
177	newMainContainer.style.top = 0 - topMaxRadius + "px";
178	newMainContainer.style.left = 0 - this.borderWidth + "px";
179	this.topContainer = this.box.appendChild(newMainContainer);
180	}
181	break;
182
183	// Bottom
184	case 1:
185
186	// Only build bottom bar if a top corner is to be draw
187	if(this.settings.bl \|\| this.settings.br)
188	{
189	var newMainContainer = document.createElement("DIV");
190	newMainContainer.style.width = "100%";
191	newMainContainer.style.fontSize = "1px";
192	newMainContainer.style.overflow = "hidden";
193	newMainContainer.style.position = "absolute";
194	newMainContainer.style.paddingLeft = this.borderWidth + "px";
195	newMainContainer.style.paddingRight = this.borderWidth + "px";
196	var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0);
197	newMainContainer.style.height = botMaxRadius + "px";
198	newMainContainer.style.bottom = 0 - botMaxRadius + "px";
199	newMainContainer.style.left = 0 - this.borderWidth + "px";
200	this.bottomContainer = this.box.appendChild(newMainContainer);
201	}
202	break;
203	}
204	}
205
206	// Turn off current borders
207	if(this.topContainer) this.box.style.borderTopWidth = "0px";
208	if(this.bottomContainer) this.box.style.borderBottomWidth = "0px";
209
210	// Create array of available corners
211	var corners = ["tr", "tl", "br", "bl"];
212
213	/*
214	Loop for each corner
215	*/
216	for(var i in corners)
217	{
218	// FIX for prototype lib
219	if(i > -1 < 4)
220	{
221	// Get current corner type from array
222	var cc = corners[i];
223
224	// Has the user requested the currentCorner be round?
225	if(!this.settings[cc])
226	{
227	// No
228	if(((cc == "tr" \|\| cc == "tl") && this.topContainer != null) \|\| ((cc == "br" \|\| cc == "bl") && this.bottomContainer != null))
229	{
230	// We need to create a filler div to fill the space upto the next horzontal corner.
231	var newCorner = document.createElement("DIV");
232
233	// Setup corners properties
234	newCorner.style.position = "relative";
235	newCorner.style.fontSize = "1px";
236	newCorner.style.overflow = "hidden";
237
238	// Add background image?
239	if(this.backgroundImage == "")
240	newCorner.style.backgroundColor = this.boxColour;
241	else
242	newCorner.style.backgroundImage = this.backgroundImage;
243
244	switch(cc)
245	{
246	case "tl":
247	newCorner.style.height = topMaxRadius - this.borderWidth + "px";
248	newCorner.style.marginRight = this.settings.tr.radius - (this.borderWidth*2) + "px";
249	newCorner.style.borderLeft = this.borderString;
250	newCorner.style.borderTop = this.borderString;
251	newCorner.style.left = -this.borderWidth + "px";
252	break;
253
254	case "tr":
255	newCorner.style.height = topMaxRadius - this.borderWidth + "px";
256	newCorner.style.marginLeft = this.settings.tl.radius - (this.borderWidth*2) + "px";
257	newCorner.style.borderRight = this.borderString;
258	newCorner.style.borderTop = this.borderString;
259	newCorner.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
260	newCorner.style.left = this.borderWidth + "px";
261	break;
262
263	case "bl":
264	newCorner.style.height = botMaxRadius - this.borderWidth + "px";
265	newCorner.style.marginRight = this.settings.br.radius - (this.borderWidth*2) + "px";
266	newCorner.style.borderLeft = this.borderString;
267	newCorner.style.borderBottom = this.borderString;
268	newCorner.style.left = -this.borderWidth + "px";
269	newCorner.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px";
270	break;
271
272	case "br":
273	newCorner.style.height = botMaxRadius - this.borderWidth + "px";
274	newCorner.style.marginLeft = this.settings.bl.radius - (this.borderWidth*2) + "px";
275	newCorner.style.borderRight = this.borderString;
276	newCorner.style.borderBottom = this.borderString;
277	newCorner.style.left = this.borderWidth + "px"
278	newCorner.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px";
279	break;
280	}
281	}
282	}
283	else
284	{
285	/*
286	PERFORMANCE NOTE:
287
288	If more than one corner is requested and a corner has been already
289	created for the same radius then that corner will be used as a master and cloned.
290	The pixel bars will then be repositioned to form the new corner type.
291	All new corners start as a bottom right corner.
292	*/
293	if(this.masterCorners[this.settings[cc].radius])
294	{
295	// Create clone of the master corner
296	var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);
297	}
298	else
299	{
300	// Yes, we need to create a new corner
301	var newCorner = document.createElement("DIV");
302	newCorner.style.height = this.settings[cc].radius + "px";
303	newCorner.style.width = this.settings[cc].radius + "px";
304	newCorner.style.position = "absolute";
305	newCorner.style.fontSize = "1px";
306	newCorner.style.overflow = "hidden";
307
308	// THE FOLLOWING BLOCK OF CODE CREATES A ROUNDED CORNER
309	// ---------------------------------------------------- TOP
310
311	// Get border radius
312	var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth);
313
314	// Cycle the x-axis
315	for(var intx = 0, j = this.settings[cc].radius; intx < j; intx++)
316	{
317	// Calculate the value of y1 which identifies the pixels inside the border
318	if((intx +1) >= borderRadius)
319	var y1 = -1;
320	else
321	var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx+1), 2))) - 1);
322
323	// Only calculate y2 and y3 if there is a border defined
324	if(borderRadius != j)
325	{
326	if((intx) >= borderRadius)
327	var y2 = -1;
328	else
329	var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius,2) - Math.pow(intx, 2)));
330
331	if((intx+1) >= j)
332	var y3 = -1;
333	else
334	var y3 = (Math.floor(Math.sqrt(Math.pow(j ,2) - Math.pow((intx+1), 2))) - 1);
335	}
336
337	// Calculate y4
338	if((intx) >= j)
339	var y4 = -1;
340	else
341	var y4 = Math.ceil(Math.sqrt(Math.pow(j ,2) - Math.pow(intx, 2)));
342
343	// Draw bar on inside of the border with foreground colour
344	if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner, -1, this.settings[cc].radius);
345
346	// Only draw border/foreground antialiased pixels and border if there is a border defined
347	if(borderRadius != j)
348	{
349	// Cycle the y-axis
350	for(var inty = (y1 + 1); inty < y2; inty++)
351	{
352	// Draw anti-alias pixels
353	if(this.settings.antiAlias)
354	{
355	// For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs
356	if(this.backgroundImage != "")
357	{
358	var borderFract = (pixelFraction(intx, inty, borderRadius) * 100);
359
360	if(borderFract < 30)
361	{
362	this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);
363	}
364	else
365	{
366	this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);
367	}
368	}
369	else
370	{
371	var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, borderRadius));
372	this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius, cc);
373	}
374	}
375	}
376
377	// Draw bar for the border
378	if(this.settings.antiAlias)
379	{
380	if(y3 >= y2)
381	{
382	if (y2 == -1) y2 = 0;
383	this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, 0);
384	}
385	}
386	else
387	{
388	if(y3 >= y1)
389	{
390	this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0);
391	}
392	}
393
394	// Set the colour for the outside curve
395	var outsideColour = this.borderColour;
396	}
397	else
398	{
399	// Set the coour for the outside curve
400	var outsideColour = this.boxColour;
401	var y3 = y1;
402	}
403
404	// Draw aa pixels?
405	if(this.settings.antiAlias)
406	{
407	// Cycle the y-axis and draw the anti aliased pixels on the outside of the curve
408	for(var inty = (y3 + 1); inty < y4; inty++)
409	{
410	// For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs
411	this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius);
412	}
413	}
414	}
415
416	// END OF CORNER CREATION
417	// ---------------------------------------------------- END
418
419	// We now need to store the current corner in the masterConers array
420	this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
421	}
422
423	/*
424	Now we have a new corner we need to reposition all the pixels unless
425	the current corner is the bottom right.
426	*/
427	if(cc != "br")
428	{
429	// Loop through all children (pixel bars)
430	for(var t = 0, k = newCorner.childNodes.length; t < k; t++)
431	{
432	// Get current pixel bar
433	var pixelBar = newCorner.childNodes[t];
434
435	// Get current top and left properties
436	var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
437	var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
438	var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));
439
440	// Reposition pixels
441	if(cc == "tl" \|\| cc == "bl"){
442	pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px"; // Left
443	}
444	if(cc == "tr" \|\| cc == "tl"){
445	pixelBar.style.top = this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px"; // Top
446	}
447
448	switch(cc)
449	{
450	case "tr":
451	pixelBar.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px";
452	break;
453
454	case "tl":
455	pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs(this.settings[cc].radius -pixelBarHeight -pixelBarTop - this.borderWidth) + "px";
456	break;
457
458	case "bl":
459	pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius -pixelBarLeft -1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) -this.borderWidth) + "px";
460	break;
461	}
462	}
463	}
464	}
465
466	if(newCorner)
467	{
468	// Position the container
469	switch(cc)
470	{
471	case "tl":
472	if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
473	if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
474	if(this.topContainer) this.topContainer.appendChild(newCorner);
475	break;
476
477	case "tr":
478	if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
479	if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
480	if(this.topContainer) this.topContainer.appendChild(newCorner);
481	break;
482
483	case "bl":
484	if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
485	if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
486	if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
487	break;
488
489	case "br":
490	if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
491	if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
492	if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
493	break;
494	}
495	}
496	}
497	}
498
499	/*
500	The last thing to do is draw the rest of the filler DIVs.
501	We only need to create a filler DIVs when two corners have
502	diffrent radiuses in either the top or bottom container.
503	*/
504
505	// Find out which corner has the biiger radius and get the difference amount
506	var radiusDiff = new Array();
507	radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius)
508	radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius);
509
510	for(z in radiusDiff)
511	{
512	// FIX for prototype lib
513	if(z == "t" \|\| z == "b")
514	{
515	if(radiusDiff[z])
516	{
517	// Get the type of corner that is the smaller one
518	var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r");
519
520	// First we need to create a DIV for the space under the smaller corner
521	var newFiller = document.createElement("DIV");
522	newFiller.style.height = radiusDiff[z] + "px";
523	newFiller.style.width = this.settings[smallerCornerType].radius+ "px"
524	newFiller.style.position = "absolute";
525	newFiller.style.fontSize = "1px";
526	newFiller.style.overflow = "hidden";
527	newFiller.style.backgroundColor = this.boxColour;
528	//newFiller.style.backgroundColor = get_random_color();
529
530	// Position filler
531	switch(smallerCornerType)
532	{
533	case "tl":
534	newFiller.style.bottom = "0px";
535	newFiller.style.left = "0px";
536	newFiller.style.borderLeft = this.borderString;
537	this.topContainer.appendChild(newFiller);
538	break;
539
540	case "tr":
541	newFiller.style.bottom = "0px";
542	newFiller.style.right = "0px";
543	newFiller.style.borderRight = this.borderString;
544	this.topContainer.appendChild(newFiller);
545	break;
546
547	case "bl":
548	newFiller.style.top = "0px";
549	newFiller.style.left = "0px";
550	newFiller.style.borderLeft = this.borderString;
551	this.bottomContainer.appendChild(newFiller);
552	break;
553
554	case "br":
555	newFiller.style.top = "0px";
556	newFiller.style.right = "0px";
557	newFiller.style.borderRight = this.borderString;
558	this.bottomContainer.appendChild(newFiller);
559	break;
560	}
561	}
562
563	// Create the bar to fill the gap between each corner horizontally
564	var newFillerBar = document.createElement("DIV");
565	newFillerBar.style.position = "relative";
566	newFillerBar.style.fontSize = "1px";
567	newFillerBar.style.overflow = "hidden";
568	newFillerBar.style.backgroundColor = this.boxColour;
569	newFillerBar.style.backgroundImage = this.backgroundImage;
570
571	switch(z)
572	{
573	case "t":
574	// Top Bar
575	if(this.topContainer)
576	{
577	// Edit by Asger Hallas: Check if settings.xx.radius is not false
578	if(this.settings.tl.radius && this.settings.tr.radius)
579	{
580	newFillerBar.style.height = topMaxRadius - this.borderWidth + "px";
581	newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px";
582	newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px";
583	newFillerBar.style.borderTop = this.borderString;
584
585	if(this.backgroundImage != "")
586	newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
587
588	this.topContainer.appendChild(newFillerBar);
589	}
590
591	// Repos the boxes background image
592	this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px";
593	}
594	break;
595
596	case "b":
597	if(this.bottomContainer)
598	{
599	// Edit by Asger Hallas: Check if settings.xx.radius is not false
600	if(this.settings.bl.radius && this.settings.br.radius)
601	{
602	// Bottom Bar
603	newFillerBar.style.height = botMaxRadius - this.borderWidth + "px";
604	newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px";
605	newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px";
606	newFillerBar.style.borderBottom = this.borderString;
607
608	if(this.backgroundImage != "")
609	newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px";
610
611	this.bottomContainer.appendChild(newFillerBar);
612	}
613	}
614	break;
615	}
616	}
617	}
618
619	/*
620	AutoPad! apply padding if set.
621	*/
622	if(this.settings.autoPad == true && this.boxPadding > 0)
623	{
624	// Create content container
625	var contentContainer = document.createElement("DIV");
626
627	// Set contentContainer's properties
628	contentContainer.style.position = "relative";
629	contentContainer.innerHTML = this.boxContent;
630	contentContainer.className = "autoPadDiv";
631
632	// Get padding amounts
633	var topPadding = Math.abs(topMaxRadius - this.boxPadding);
634	var botPadding = Math.abs(botMaxRadius - this.boxPadding);
635
636	// Apply top padding
637	if(topMaxRadius < this.boxPadding)
638	contentContainer.style.paddingTop = topPadding + "px";
639
640	// Apply Bottom padding
641	if(botMaxRadius < this.boxPadding)
642	contentContainer.style.paddingBottom = botMaxRadius + "px";
643
644	// Apply left and right padding
645	contentContainer.style.paddingLeft = this.boxPadding + "px";
646	contentContainer.style.paddingRight = this.boxPadding + "px";
647
648	// Append contentContainer
649	this.contentDIV = this.box.appendChild(contentContainer);
650	}
651	}
652
653	/*
654	This function draws the pixles
655	*/
656	this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius)
657	{
658	// Create pixel
659	var pixel = document.createElement("DIV");
660	pixel.style.height = height + "px";
661	pixel.style.width = "1px";
662	pixel.style.position = "absolute";
663	pixel.style.fontSize = "1px";
664	pixel.style.overflow = "hidden";
665
666	// Max Top Radius
667	var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius);
668
669	// Dont apply background image to border pixels
670	if(image == -1 && this.backgroundImage != "")
671	{
672	pixel.style.backgroundImage = this.backgroundImage;
673	pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) -this.borderWidth) + "px";
674	}
675	else
676	{
677	pixel.style.backgroundColor = colour;
678	}
679
680	// Set opacity if the transparency is anything other than 100
681	if (transAmount != 100)
682	setOpacity(pixel, transAmount);
683
684	// Set the pixels position
685	pixel.style.top = inty + "px";
686	pixel.style.left = intx + "px";
687
688	newCorner.appendChild(pixel);
689	}
690	}
691
692	// ------------- UTILITY FUNCTIONS
693
694	// Inserts a element after another
695	function insertAfter(parent, node, referenceNode)
696	{
697	parent.insertBefore(node, referenceNode.nextSibling);
698	}
699
700	/*
701	Blends the two colours by the fraction
702	returns the resulting colour as a string in the format "#FFFFFF"
703	*/
704	function BlendColour(Col1, Col2, Col1Fraction)
705	{
706	var red1 = parseInt(Col1.substr(1,2),16);
707	var green1 = parseInt(Col1.substr(3,2),16);
708	var blue1 = parseInt(Col1.substr(5,2),16);
709	var red2 = parseInt(Col2.substr(1,2),16);
710	var green2 = parseInt(Col2.substr(3,2),16);
711	var blue2 = parseInt(Col2.substr(5,2),16);
712
713	if(Col1Fraction > 1 \|\| Col1Fraction < 0) Col1Fraction = 1;
714
715	var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction)));
716	if(endRed > 255) endRed = 255;
717	if(endRed < 0) endRed = 0;
718
719	var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction)));
720	if(endGreen > 255) endGreen = 255;
721	if(endGreen < 0) endGreen = 0;
722
723	var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction)));
724	if(endBlue > 255) endBlue = 255;
725	if(endBlue < 0) endBlue = 0;
726
727	return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);
728	}
729
730	/*
731	Converts a number to hexadecimal format
732	*/
733	function IntToHex(strNum)
734	{
735	base = strNum / 16;
736	rem = strNum % 16;
737	base = base - (rem / 16);
738	baseS = MakeHex(base);
739	remS = MakeHex(rem);
740
741	return baseS + '' + remS;
742	}
743
744
745	/*
746	gets the hex bits of a number
747	*/
748	function MakeHex(x)
749	{
750	if((x >= 0) && (x <= 9))
751	{
752	return x;
753	}
754	else
755	{
756	switch(x)
757	{
758	case 10: return "A";
759	case 11: return "B";
760	case 12: return "C";
761	case 13: return "D";
762	case 14: return "E";
763	case 15: return "F";
764	}
765	}
766	}
767
768
769	/*
770	For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
771	line. Returns a number between 0 and 1
772	*/
773	function pixelFraction(x, y, r)
774	{
775	var pixelfraction = 0;
776
777	/*
778	determine the co-ordinates of the two points on the perimeter of the pixel that the
779	circle crosses
780	*/
781	var xvalues = new Array(1);
782	var yvalues = new Array(1);
783	var point = 0;
784	var whatsides = "";
785
786	// x + 0 = Left
787	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2)));
788
789	if ((intersect >= y) && (intersect < (y+1)))
790	{
791	whatsides = "Left";
792	xvalues[point] = 0;
793	yvalues[point] = intersect - y;
794	point = point + 1;
795	}
796	// y + 1 = Top
797	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2)));
798
799	if ((intersect >= x) && (intersect < (x+1)))
800	{
801	whatsides = whatsides + "Top";
802	xvalues[point] = intersect - x;
803	yvalues[point] = 1;
804	point = point + 1;
805	}
806	// x + 1 = Right
807	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2)));
808
809	if ((intersect >= y) && (intersect < (y+1)))
810	{
811	whatsides = whatsides + "Right";
812	xvalues[point] = 1;
813	yvalues[point] = intersect - y;
814	point = point + 1;
815	}
816	// y + 0 = Bottom
817	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2)));
818
819	if ((intersect >= x) && (intersect < (x+1)))
820	{
821	whatsides = whatsides + "Bottom";
822	xvalues[point] = intersect - x;
823	yvalues[point] = 0;
824	}
825
826	/*
827	depending on which sides of the perimeter of the pixel the circle crosses calculate the
828	fraction of the pixel inside the circle
829	*/
830	switch (whatsides)
831	{
832	case "LeftRight":
833	pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2);
834	break;
835
836	case "TopRight":
837	pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2);
838	break;
839
840	case "TopBottom":
841	pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2);
842	break;
843
844	case "LeftBottom":
845	pixelfraction = (yvalues[0]*xvalues[1])/2;
846	break;
847
848	default:
849	pixelfraction = 1;
850	}
851
852	return pixelfraction;
853	}
854
855
856	// This function converts CSS rgb(x, x, x) to hexadecimal
857	function rgb2Hex(rgbColour)
858	{
859	try{
860
861	// Get array of RGB values
862	var rgbArray = rgb2Array(rgbColour);
863
864	// Get RGB values
865	var red = parseInt(rgbArray[0]);
866	var green = parseInt(rgbArray[1]);
867	var blue = parseInt(rgbArray[2]);
868
869	// Build hex colour code
870	var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue);
871	}
872	catch(e){
873
874	alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
875	}
876
877	return hexColour;
878	}
879
880	// Returns an array of rbg values
881	function rgb2Array(rgbColour)
882	{
883	// Remove rgb()
884	var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
885
886	// Split RGB into array
887	var rgbArray = rgbValues.split(", ");
888
889	return rgbArray;
890	}
891
892	/*
893	Function by Simon Willison from sitepoint.com
894	Modified by Cameron Cooke adding Safari's rgba support
895	*/
896	function setOpacity(obj, opacity)
897	{
898	opacity = (opacity == 100)?99.999:opacity;
899
900	if(isSafari && obj.tagName != "IFRAME")
901	{
902	// Get array of RGB values
903	var rgbArray = rgb2Array(obj.style.backgroundColor);
904
905	// Get RGB values
906	var red = parseInt(rgbArray[0]);
907	var green = parseInt(rgbArray[1]);
908	var blue = parseInt(rgbArray[2]);
909
910	// Safari using RGBA support
911	obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity/100 + ")";
912	}
913	else if(typeof(obj.style.opacity) != "undefined")
914	{
915	// W3C
916	obj.style.opacity = opacity/100;
917	}
918	else if(typeof(obj.style.MozOpacity) != "undefined")
919	{
920	// Older Mozilla
921	obj.style.MozOpacity = opacity/100;
922	}
923	else if(typeof(obj.style.filter) != "undefined")
924	{
925	// IE
926	obj.style.filter = "alpha(opacity:" + opacity + ")";
927	}
928	else if(typeof(obj.style.KHTMLOpacity) != "undefined")
929	{
930	// Older KHTML Based Browsers
931	obj.style.KHTMLOpacity = opacity/100;
932	}
933	}
934
935	/*
936	Returns index if the passed value is found in the
937	array otherwise returns false.
938	*/
939	function inArray(array, value)
940	{
941	for(var i = 0; i < array.length; i++){
942
943	// Matches identical (===), not just similar (==).
944	if (array[i] === value) return i;
945	}
946
947	return false;
948	}
949
950	/*
951	Returns true if the passed value is found as a key
952	in the array otherwise returns false.
953	*/
954	function inArrayKey(array, value)
955	{
956	for(key in array){
957
958	// Matches identical (===), not just similar (==).
959	if(key === value) return true;
960	}
961
962	return false;
963	}
964
965	// Cross browser add event wrapper
966	function addEvent(elm, evType, fn, useCapture) {
967	if (elm.addEventListener) {
968	elm.addEventListener(evType, fn, useCapture);
969	return true;
970	}
971	else if (elm.attachEvent) {
972	var r = elm.attachEvent('on' + evType, fn);
973	return r;
974	}
975	else {
976	elm['on' + evType] = fn;
977	}
978	}
979
980	// Cross browser remove event wrapper
981	function removeEvent(obj, evType, fn, useCapture){
982	if (obj.removeEventListener){
983	obj.removeEventListener(evType, fn, useCapture);
984	return true;
985	} else if (obj.detachEvent){
986	var r = obj.detachEvent("on"+evType, fn);
987	return r;
988	} else {
989	alert("Handler could not be removed");
990	}
991	}
992
993	// Formats colours
994	function format_colour(colour)
995	{
996	var returnColour = "#ffffff";
997
998	// Make sure colour is set and not transparent
999	if(colour != "" && colour != "transparent")
1000	{
1001	// RGB Value?
1002	if(colour.substr(0, 3) == "rgb")
1003	{
1004	// Get HEX aquiv.
1005	returnColour = rgb2Hex(colour);
1006	}
1007	else if(colour.length == 4)
1008	{
1009	// 3 chr colour code add remainder
1010	returnColour = "#" + colour.substring(1, 2) + colour.substring(1, 2) + colour.substring(2, 3) + colour.substring(2, 3) + colour.substring(3, 4) + colour.substring(3, 4);
1011	}
1012	else
1013	{
1014	// Normal valid hex colour
1015	returnColour = colour;
1016	}
1017	}
1018
1019	return returnColour;
1020	}
1021
1022	// Returns the style value for the property specfied
1023	function get_style(obj, property, propertyNS)
1024	{
1025	try
1026	{
1027	if(obj.currentStyle)
1028	{
1029	var returnVal = eval("obj.currentStyle." + property);
1030	}
1031	else
1032	{
1033	/*
1034	Safari does not expose any information for the object if display is
1035	set to none is set so we temporally enable it.
1036	*/
1037	if(isSafari && obj.style.display == "none")
1038	{
1039	obj.style.display = "";
1040	var wasHidden = true;
1041	}
1042
1043	var returnVal = document.defaultView.getComputedStyle(obj, '').getPropertyValue(propertyNS);
1044
1045	// Rehide the object
1046	if(isSafari && wasHidden)
1047	{
1048	obj.style.display = "none";
1049	}
1050	}
1051	}
1052	catch(e)
1053	{
1054	// Do nothing
1055	}
1056
1057	return returnVal;
1058	}
1059
1060	// Get elements by class by Dustin Diaz.
1061	function getElementsByClass(searchClass, node, tag)
1062	{
1063	var classElements = new Array();
1064
1065	if(node == null)
1066	node = document;
1067	if(tag == null)
1068	tag = '*';
1069
1070	var els = node.getElementsByTagName(tag);
1071	var elsLen = els.length;
1072	var pattern = new RegExp("(^\|\s)"+searchClass+"(\s\|$)");
1073
1074	for (i = 0, j = 0; i < elsLen; i++)
1075	{
1076	if(pattern.test(els[i].className))
1077	{
1078	classElements[j] = els[i];
1079	j++;
1080	}
1081	}
1082
1083	return classElements;
1084	}
1085
1086	// Displays error message
1087	function newCurvyError(errorMessage)
1088	{
1089	return new Error("curvyCorners Error:\n" + errorMessage)
1090	}

Note: See TracBrowser for help on using the browser.

Download in other formats: