| /* |
| 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; i<nodes.length; i++){ nodes[i]=dojo.byId(nodes[i]); } |
| } |
| if(nodes.length == 0) return; // don't bother. |
| |
| //////////////////////////////////////////////////////////////////// |
| for(var i=0; i<nodes.length; i++){ |
| dojo.lfx.rounded.applyCorners(options, nodes[i]); |
| } |
| }; |
| |
| // can call this directly if one wants. |
| dojo.lfx.rounded.applyCorners = function(/* object */options, /* HTMLElement */node){ |
| // summary |
| // Rounds corners based on options to passed node. |
| var top = null; |
| var bottom = null; |
| var contentNode = null; |
| var fns=dojo.lfx.rounded._fns; |
| |
| // node details |
| var width = node.offsetWidth; |
| var height = node.offsetHeight; |
| var borderWidth = parseInt(dojo.html.getComputedStyle(node, "border-top-width")); |
| var borderColor = dojo.html.getComputedStyle(node, "border-top-color"); |
| var color = dojo.html.getComputedStyle(node, "background-color"); |
| var bgImage = dojo.html.getComputedStyle(node, "background-image"); |
| var position = dojo.html.getComputedStyle(node, "position"); |
| var padding = parseInt(dojo.html.getComputedStyle(node, "padding-top")); |
| |
| // formatting details |
| // TODO: use Dojo equivilents for these if exists. |
| 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 |
| }; |
| |
| if(!dojo.html.isPositionAbsolute(node)){ node.style.position="relative"; } |
| node.style.padding="0px"; |
| if(dojo.render.html.ie && width=="auto" && height=="auto"){ node.style.width="100%"; } |
| if(options.autoPad && format.padding>0){ |
| 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<corners.length; i++){ |
| var cc=corners[i]; |
| if(options.radii[cc]==0){ |
| // fill up the space with a div. |
| if((cc.charAt(0)=="t"&&top) || (cc.charAt(0)=="b"&&bottom)){ |
| var corner=document.createElement("div"); |
| corner.style.position="relative"; |
| corner.style.fontSize="1px;"; |
| corner.style.overflow="hidden"; |
| if(format.bgImage==""){ |
| corner.style.backgroundColor=format.color; |
| } else { |
| corner.style.backgroundImage=format.bgImage; |
| } |
| switch(cc){ |
| case "tl":{ |
| corner.style.height=topHeight-format.borderWidth+"px"; |
| corner.style.marginRight=options.radii[cc]-(format.borderWidth*2)+"px"; |
| corner.style.borderLeft=format.borderString; |
| corner.style.borderTop=format.borderString; |
| corner.style.left=-format.borderWidth+"px"; |
| break; |
| } |
| case "tr":{ |
| corner.style.height=topHeight-format.borderWidth+"px"; |
| corner.style.marginLeft=options.radii[cc]-(format.borderWidth*2)+"px"; |
| corner.style.borderRight=format.borderString; |
| corner.style.borderTop=format.borderString; |
| corner.style.backgroundPosition="-"+(topHeight-format.borderWidth)+"px 0px"; |
| corner.style.left=format.borderWidth+"px"; |
| break; |
| } |
| case "bl":{ |
| corner.style.height=bottomHeight-format.borderWidth+"px"; |
| corner.style.marginRight=options.radii[cc]-(format.borderWidth*2)+"px"; |
| corner.style.borderLeft=format.borderString; |
| corner.style.borderBottom=format.borderString; |
| corner.style.left=format.borderWidth+"px"; |
| corner.style.backgroundPosition="-"+format.borderWidth+"px -"+(format.height+(bottomHeight+format.borderWidth))+"px"; |
| break; |
| } |
| case "br":{ |
| corner.style.height=bottomHeight-format.borderWidth+"px"; |
| corner.style.marginLeft=options.radii[cc]-(format.borderWidth*2)+"px"; |
| corner.style.borderRight=format.borderString; |
| corner.style.borderBottom=format.borderString; |
| corner.style.left=format.borderWidth+"px"; |
| corner.style.backgroundPosition="-"+(bottomHeight+format.borderWidth)+"px -"+(format.height+(bottomHeight+format.borderWidth))+"px"; |
| break; |
| } |
| } |
| } |
| } else { |
| // NB: this version will not do the caching they built into the |
| // current version of curvyCorners. |
| var corner=document.createElement("div"); |
| corner.style.height=options.radii[cc]+"px"; |
| corner.style.width=options.radii[cc]+"px"; |
| corner.style.position="absolute"; |
| corner.style.fontSize="1px"; |
| corner.style.overflow="hidden"; |
| |
| var borderRadius=Math.floor(options.radii[cc] - format.borderWidth); |
| for(var x=0, j=options.radii[cc]; x<j; x++){ |
| // figure out y coords |
| var y1=Math.floor(Math.sqrt(Math.pow(borderRadius,2)-Math.pow((x+1),2)))-1; |
| if((x+1) >= 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; y++){ |
| if(options.antiAlias){ |
| if(format.bgImage != ""){ |
| var fract=fns.fraction(x, y, borderRadius)*100; |
| if(fract < 30){ |
| fns.draw(x, y, format.borderColor, 100, 1, corner, 0, options.radii[cc], topHeight, format); |
| } else { |
| fns.draw(x, y, format.borderColor, 100, 1, corner, -1, options.radii[cc], topHeight, format); |
| } |
| } else { |
| var clr=fns.blend(format.color, format.borderColor, fns.fraction(x, y, borderRadius)); |
| fns.draw(x, y, clr, 100, 1, corner, 0, options.radii[cc], topHeight, format); |
| } |
| } |
| } |
| |
| // bar for the border |
| if(options.antiAlias){ |
| if(y3 >= 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); y<y4; y++){ |
| fns.draw(x, y, format.borderColor, (fns.fraction(x, y, j)*100), 1, corner, (format.borderWidth>0 ? 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; t<k; t++){ |
| var bar=corner.childNodes[t]; |
| var barTop = parseInt(dojo.html.getComputedStyle(bar, "top")); |
| var barLeft = parseInt(dojo.html.getComputedStyle(bar, "left")); |
| var barHeight = parseInt(dojo.html.getComputedStyle(bar, "height")); |
| |
| // reposition. |
| if(cc.charAt(1)=="l"){ |
| bar.style.left = (options.radii[cc]-barLeft-1)+"px"; |
| } |
| if(cc=="tr"){ |
| bar.style.top = (options.radii[cc]-barHeight-barTop)+"px"; |
| bar.style.backgroundPosition="-"+Math.abs((format.width-options.radii[cc]+format.borderWidth)+barLeft) |
| +"px -"+Math.abs(options.radii[cc]-barHeight-barTop-format.borderWidth)+"px"; |
| } else if (cc=="tl"){ |
| bar.style.top = (options.radii[cc]-barHeight-barTop)+"px"; |
| bar.style.backgroundPosition="-"+Math.abs((options.radii[cc]-barLeft-1)-format.borderWidth) |
| +"px -"+Math.abs(options.radii[cc]-barHeight-barTop-format.borderWidth)+"px"; |
| } else { |
| bar.style.backgroundPosition="-"+Math.abs((options.radii[cc]+barLeft)+format.borderWidth) |
| +"px -"+Math.abs((format.height+options.radii[cc]+barTop)-format.borderWidth)+"px"; |
| } |
| } |
| } |
| } |
| |
| if(corner){ |
| // position the container. |
| var psn=[]; |
| if(cc.charAt(0)=="t"){ psn.push("top"); } |
| else { psn.push("bottom"); } |
| if(cc.charAt(1)=="l"){ psn.push("left"); } |
| else { psn.push("right"); } |
| |
| if(corner.style.position=="absolute"){ |
| for(var z=0; z<psn.length; z++){ corner.style[psn[z]]="0px"; } |
| } |
| |
| if(psn[0]=="top"){ |
| if(top){ top.appendChild(corner); } |
| } else { |
| if(bottom){ bottom.appendChild(corner); } |
| } |
| } |
| } |
| |
| // draw fillers. |
| var diff={ |
| t: Math.abs(options.radii.tl - options.radii.tr), |
| b: Math.abs(options.radii.bl - options.radii.br) |
| }; |
| for(var z in diff){ |
| var smaller=(options.radii[z+"l"]<options.radii[z+"r"] ? z+"l":z+"r"); |
| var filler=document.createElement("div"); |
| filler.style.height=diff[z]+"px"; |
| filler.style.width=options.radii[smaller]+"px"; |
| filler.style.position="absolute"; |
| filler.style.fontSize="1px"; |
| filler.style.overflow="hidden"; |
| filler.style.backgroundColor=format.color; |
| switch(smaller){ |
| case "tl":{ |
| filler.style.bottom="0px"; |
| filler.style.left="0px"; |
| filler.style.borderLeft=format.borderString; |
| top.appendChild(filler); |
| break; |
| } |
| case "tr":{ |
| filler.style.bottom="0px"; |
| filler.style.right="0px"; |
| filler.style.borderRight=format.borderString; |
| top.appendChild(filler); |
| break; |
| } |
| case "bl":{ |
| filler.style.top="0px"; |
| filler.style.left="0px"; |
| filler.style.borderLeft=format.borderString; |
| bottom.appendChild(filler); |
| break; |
| } |
| case "br":{ |
| filler.style.top="0px"; |
| filler.style.right="0px"; |
| filler.style.borderRight=format.borderString; |
| bottom.appendChild(filler); |
| break; |
| } |
| } |
| |
| var fillBar=document.createElement("div"); |
| fillBar.style.position="relative"; |
| fillBar.style.fontSize="1px"; |
| fillBar.style.overflow="hidden"; |
| fillBar.style.backgroundColor=format.color; |
| fillBar.style.backgroundImage=format.bgImage; |
| if(z=="t"){ |
| if(top){ |
| if(options.radii.tl && options.radii.tr){ |
| fillBar.style.height=(topHeight-format.borderWidth) + "px"; |
| fillBar.style.marginLeft=(options.radii.tl-format.borderWidth)+"px"; |
| fillBar.style.marginRight=(options.radii.tr-format.borderWidth)+"px"; |
| fillBar.style.borderTop=format.borderString; |
| if(format.bgImage!=""){ |
| fillBar.style.backgroundPosition="-"+(topHeight+format.borderWidth)+"px 0px"; |
| } |
| } |
| top.appendChild(fillBar); |
| } |
| } else { |
| if(bottom){ |
| if(options.radii.bl && options.radii.br){ |
| fillBar.style.height=(bottomHeight-format.borderWidth) + "px"; |
| fillBar.style.marginLeft=(options.radii.bl-format.borderWidth)+"px"; |
| fillBar.style.marginRight=(options.radii.br-format.borderWidth)+"px"; |
| fillBar.style.borderBottom=format.borderString; |
| if(format.bgImage!=""){ |
| fillBar.style.backgroundPosition="-"+(bottomHeight+format.borderWidth)+"px -" |
| + (format.height + (topHeight+format.borderWidth))+"px"; |
| } |
| } |
| bottom.appendChild(fillBar); |
| } |
| } |
| } |
| |
| // finally, set up the padding. |
| if(options.autoPad && format.padding>0){ |
| 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<ret.length; i++){ |
| var n=ret[i].toString(16); |
| if(n.length<2){ n="0"+n; } |
| ret[i]=n; |
| } |
| return "#"+ret.join(""); |
| }, |
| fraction:function(x, y, r){ |
| var frac=0; |
| var xval=[]; |
| var yval=[]; |
| var point=0; |
| var whatsides=""; |
| |
| var intersect=Math.sqrt((Math.pow(r,2)-Math.pow(x,2))); |
| if(intersect >=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<t.length; i++){ |
| var n=parseInt(t[i]).toString(16); |
| if(n.length<2){ n = "0"+n; } |
| t[i]=n; |
| } |
| ret = "#"+t.join(""); |
| } |
| else if(clr.length==4){ |
| 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); |
| } |
| else { |
| ret = clr; |
| } |
| } |
| return ret; |
| } |
| }; |
