/* Copyright (c) 2004-2006, The Dojo Foundation All Rights Reserved. Licensed under the Academic Free License version 2.1 or above OR the modified BSD license. For more information on Dojo licensing, see: http://dojotoolkit.org/community/licensing.shtml */ dojo.provide("dojo.lfx.rounded"); dojo.require("dojo.lang.common"); dojo.require("dojo.html.common"); dojo.require("dojo.html.style"); dojo.require("dojo.html.display"); dojo.require("dojo.html.layout"); /* Port of curvyCorners, by Cameron Cooke and Tim Hutchison. * Original port done by Brian Lucas. * Refactor and function by trt. */ dojo.lfx.rounded = function(/* object */settings /* ... */){ // summary // Creates a set of rounded corners based on settings. var options={ validTags:settings.validTags || ["div"], // tags we can apply this to autoPad:settings.autoPad!=null ? settings.autoPad : true, // automatically pad antiAlias:settings.antiAlias!=null ? settings.antiAlias : true, // anti-alias corners radii:{ // corner 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 } }; // get the node list to operate on. var nodes; if(typeof(arguments[1]) == "string"){ // a CSS classname was passed, grab a node list. nodes=dojo.html.getElementsByClass(arguments[1]); } else if(dojo.lang.isArrayLike(arguments[1])){ // we assume that the second argument is an array of nodes to apply this to. nodes=arguments[1]; for(var i=0; i0){ node.innerHTML=""; } var topHeight=Math.max(options.radii.tl, options.radii.tr); var bottomHeight=Math.max(options.radii.bl, options.radii.br); // build the containers. if(options.radii.tl || options.radii.tr){ top = document.createElement("div"); top.style.width="100%"; top.style.fontSize="1px"; top.style.overflow="hidden"; top.style.position="absolute"; top.style.paddingLeft=format.borderWidth+"px"; top.style.paddingRight=format.borderWidth+"px"; top.style.height=topHeight+"px"; top.style.top=(0-topHeight)+"px"; top.style.left=(0-format.borderWidth)+"px"; node.appendChild(top); } if(options.radii.bl || options.radii.br){ // bottom bottom = document.createElement("div"); bottom.style.width="100%"; bottom.style.fontSize="1px"; bottom.style.overflow="hidden"; bottom.style.position="absolute"; bottom.style.paddingLeft=format.borderWidth+"px"; bottom.style.paddingRight=format.borderWidth+"px"; bottom.style.height=bottomHeight+"px"; bottom.style.bottom=(0-bottomHeight)+"px"; bottom.style.left=(0-format.borderWidth)+"px"; node.appendChild(bottom); } // turn off the borders if(top){ node.style.borderTopWidth = "0px"; } if(bottom){ node.style.borderBottomWidth = "0px"; } // do the corners var corners = ["tr", "tl", "br", "bl"]; for(var i=0; i= borderRadius){ var y1=-1; } var y2=Math.ceil(Math.sqrt(Math.pow(borderRadius,2)-Math.pow(x,2))); if(x >= borderRadius){ y2=-1; } var y3=Math.floor(Math.sqrt(Math.pow(j,2)-Math.pow((x+1),2)))-1; if((x+1) >= j){ y3=-1; } var y4=Math.ceil(Math.sqrt(Math.pow(j, 2)-Math.pow(x, 2))); if(x >= j){ y4=-1; } // start drawing if(y1 > -1){ fns.draw(x, 0, format.color, 100, (y1+1), corner, -1, j, topHeight, format); } // cycle the y-axis for(var y=(y1+1); y= y2){ if(y2 == -1){ y2 = 0; } fns.draw(x, y2, format.borderColor, 100, (y3-y2+1), corner, 0, 0, topHeight, format) } else { if(y3 >= y1){ fns.draw(x, (y1+1), format.borderColor, 100, (y3-y1), corner, 0, 0, topHeight, format); } } for(var y=(y3+1); y0 ? 0:-1), options.radii[cc], topHeight, format); } } else { y3=y1; } } // reposition pixels if not the bottom right. if(cc != "br"){ for(var t=0, k=corner.childNodes.length; t0){ var content=document.createElement("div"); content.style.position="relative"; content.innerHTML=format.content; content.className="autoPadDiv"; if(topHeight < format.padding){ content.style.paddingTop = Math.abs(topHeight-format.padding)+"px"; } if(bottomHeight < format.padding){ content.style.paddingBottom = Math.abs(bottomHeight-format.padding)+"px"; } content.style.paddingLeft=format.padding+"px"; content.style.paddingRight=format.padding+"px"; node.appendChild(content); } }; var count=0; // helper methods. dojo.lfx.rounded._fns={ blend:function(clr1, clr2, frac){ var c1={ r:parseInt(clr1.substr(1,2),16), g:parseInt(clr1.substr(3,2),16), b:parseInt(clr1.substr(5,2),16) }; var c2={ r:parseInt(clr2.substr(1,2),16), g:parseInt(clr2.substr(3,2),16), b:parseInt(clr2.substr(5,2),16) }; if(frac>1||frac<0){ frac=1; } 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) ]; for(var i=0; i=y && intersect < (y+1)){ whatsides="Left"; xval[point]=0; yval[point++]=intersect-y; } intersect=Math.sqrt((Math.pow(r,2)-Math.pow(y+1,2))); if(intersect >=x && intersect < (x+1)){ whatsides += "Top"; xval[point]=intersect-x; yval[point++]=1; } intersect=Math.sqrt((Math.pow(r,2)-Math.pow(x+1,2))); if(intersect >= y && intersect < (y+1)){ whatsides += "Right"; xval[point]=1; yval[point++] = intersect-y; } intersect=Math.sqrt((Math.pow(r,2)-Math.pow(y,2))); if(intersect >=x && intersect < (x+1)){ whatsides += "Bottom"; xval[point]=intersect-x; yval[point]=1; } switch(whatsides){ case "LeftRight": return Math.min(yval[0],yval[1]) + ((Math.max(yval[0],yval[1])-Math.min(yval[0],yval[1]))/2); case "TopRight": return 1-(((1-xval[0])*(1-yval[1]))/2); case "TopBottom": return Math.min(xval[0],xval[1]) + ((Math.max(xval[0],xval[1])-Math.min(xval[0],xval[1]))/2); case "LeftBottom": return (yval[0]*xval[1])/2; default: return 1; } }, draw:function(x, y, color, opac, height, corner, image, radius, top, format){ var px=document.createElement("div"); px.style.height=height+"px" px.style.width="1px"; px.style.position="absolute"; px.style.fontSize="1px"; px.style.overflow="hidden"; if(image==-1 && format.bgImage!=""){ px.style.backgroundImage=format.bgImage; px.style.backgroundPosition="-"+(format.width-(radius-x)+format.borderWidth) +"px -"+((format.height+top+y)-format.borderWidth)+"px"; } else { px.style.backgroundColor=color; } if(opac!=100){ dojo.html.setOpacity(px, (opac/100)); } px.style.top=y+"px"; px.style.left=x+"px"; corner.appendChild(px); }, getRGB:function(clr){ var ret="#ffffff"; if(clr!="" && clr!="transparent"){ if(clr.substr(0,3)=="rgb"){ var t=clr.substring(4, clr.indexOf(")")); t=t.split(","); for(var i=0; i