plekit/niftycorner/niftycube.js

   1 /* Nifty Corners Cube - rounded corners with CSS and Javascript\r
   2 Copyright 2006 Alessandro Fulciniti (a.fulciniti@html.it)\r
   3 \r
   4 This program is free software; you can redistribute it and/or modify\r
   5 it under the terms of the GNU General Public License as published by\r
   6 the Free Software Foundation; either version 2 of the License, or\r
   7 (at your option) any later version.\r
   8 \r
   9 This program is distributed in the hope that it will be useful,\r
  10 but WITHOUT ANY WARRANTY; without even the implied warranty of\r
  11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\r
  12 GNU General Public License for more details.\r
  13 \r
  14 You should have received a copy of the GNU General Public License\r
  15 along with this program; if not, write to the Free Software\r
  16 Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA\r
  17 */\r
  18 \r
  19 var niftyOk=(document.getElementById && document.createElement && Array.prototype.push);\r
  20 var niftyCss=false;\r
  21 \r
  22 String.prototype.find=function(what){\r
  23 return(this.indexOf(what)>=0 ? true : false);\r
  24 }\r
  25 \r
  26 var oldonload=window.onload;\r
  27 if(typeof(NiftyLoad)!='function') NiftyLoad=function(){};\r
  28 if(typeof(oldonload)=='function')\r
  29     window.onload=function(){oldonload();AddCss('/plekit/niftycorner');NiftyLoad()};\r
  30 else window.onload=function(){AddCss('/plekit/niftycorner');NiftyLoad()};\r
  31 \r
  32 /* xxx local change : pass a path as parameter */\r
  33 function AddCss(path){\r
  34 niftyCss=true;\r
  35 var l=CreateEl("link");\r
  36 l.setAttribute("type","text/css");\r
  37 l.setAttribute("rel","stylesheet");\r
  38 l.setAttribute("href",path+"/niftyCorners.css");\r
  39 l.setAttribute("media","screen");\r
  40 document.getElementsByTagName("head")[0].appendChild(l);\r
  41 }\r
  42 \r
  43 function Nifty(selector,options){\r
  44 if(niftyOk==false) return;\r
  45 if(niftyCss==false) AddCss('/plekit/niftycorner');\r
  46 var i,v=selector.split(","),h=0;\r
  47 if(options==null) options="";\r
  48 if(options.find("fixed-height"))\r
  49     h=getElementsBySelector(v[0])[0].offsetHeight;\r
  50 for(i=0;i<v.length;i++)\r
  51     Rounded(v[i],options);\r
  52 if(options.find("height")) SameHeight(selector,h);\r
  53 }\r
  54 \r
  55 function Rounded(selector,options){\r
  56 var i,top="",bottom="",v=new Array();\r
  57 if(options!=""){\r
  58     options=options.replace("left","tl bl");\r
  59     options=options.replace("right","tr br");\r
  60     options=options.replace("top","tr tl");\r
  61     options=options.replace("bottom","br bl");\r
  62     options=options.replace("transparent","alias");\r
  63     if(options.find("tl")){\r
  64         top="both";\r
  65         if(!options.find("tr")) top="left";\r
  66         }\r
  67     else if(options.find("tr")) top="right";\r
  68     if(options.find("bl")){\r
  69         bottom="both";\r
  70         if(!options.find("br")) bottom="left";\r
  71         }\r
  72     else if(options.find("br")) bottom="right";\r
  73     }\r
  74 if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}\r
  75 v=getElementsBySelector(selector);\r
  76 for(i=0;i<v.length;i++){\r
  77     FixIE(v[i]);\r
  78     if(top!="") AddTop(v[i],top,options);\r
  79     if(bottom!="") AddBottom(v[i],bottom,options);\r
  80     }\r
  81 }\r
  82 \r
  83 /* local addition\r
  84  * accept element rather than selectors */\r
  85 function pleRounded(element,options){\r
  86 var i,top="",bottom="",v=new Array();\r
  87 if(options!=""){\r
  88     options=options.replace("left","tl bl");\r
  89     options=options.replace("right","tr br");\r
  90     options=options.replace("top","tr tl");\r
  91     options=options.replace("bottom","br bl");\r
  92     options=options.replace("transparent","alias");\r
  93     if(options.find("tl")){\r
  94         top="both";\r
  95         if(!options.find("tr")) top="left";\r
  96         }\r
  97     else if(options.find("tr")) top="right";\r
  98     if(options.find("bl")){\r
  99         bottom="both";\r
 100         if(!options.find("br")) bottom="left";\r
 101         }\r
 102     else if(options.find("br")) bottom="right";\r
 103     }\r
 104 if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}\r
 105     FixIE(element);\r
 106     if(top!="") AddTop(element,top,options);\r
 107     if(bottom!="") AddBottom(element,bottom,options);\r
 108 }\r
 109 \r
 110 \r
 111 function AddTop(el,side,options){\r
 112 var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;\r
 113 d.style.marginLeft="-"+getPadding(el,"Left")+"px";\r
 114 d.style.marginRight="-"+getPadding(el,"Right")+"px";\r
 115 if(options.find("alias") || (color=getBk(el))=="transparent"){\r
 116     color="transparent";bk="transparent"; border=getParentBk(el);btype="t";\r
 117     }\r
 118 else{\r
 119     bk=getParentBk(el); border=Mix(color,bk);\r
 120     }\r
 121 d.style.background=bk;\r
 122 d.className="niftycorners";\r
 123 p=getPadding(el,"Top");\r
 124 if(options.find("small")){\r
 125     d.style.marginBottom=(p-2)+"px";\r
 126     btype+="s"; lim=2;\r
 127     }\r
 128 else if(options.find("big")){\r
 129     d.style.marginBottom=(p-10)+"px";\r
 130     btype+="b"; lim=8;\r
 131     }\r
 132 else d.style.marginBottom=(p-5)+"px";\r
 133 for(i=1;i<=lim;i++)\r
 134     d.appendChild(CreateStrip(i,side,color,border,btype));\r
 135 el.style.paddingTop="0";\r
 136 el.insertBefore(d,el.firstChild);\r
 137 }\r
 138 \r
 139 function AddBottom(el,side,options){\r
 140 var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color;\r
 141 d.style.marginLeft="-"+getPadding(el,"Left")+"px";\r
 142 d.style.marginRight="-"+getPadding(el,"Right")+"px";\r
 143 if(options.find("alias") || (color=getBk(el))=="transparent"){\r
 144     color="transparent";bk="transparent"; border=getParentBk(el);btype="t";\r
 145     }\r
 146 else{\r
 147     bk=getParentBk(el); border=Mix(color,bk);\r
 148     }\r
 149 d.style.background=bk;\r
 150 d.className="niftycorners";\r
 151 p=getPadding(el,"Bottom");\r
 152 if(options.find("small")){\r
 153     d.style.marginTop=(p-2)+"px";\r
 154     btype+="s"; lim=2;\r
 155     }\r
 156 else if(options.find("big")){\r
 157     d.style.marginTop=(p-10)+"px";\r
 158     btype+="b"; lim=8;\r
 159     }\r
 160 else d.style.marginTop=(p-5)+"px";\r
 161 for(i=lim;i>0;i--)\r
 162     d.appendChild(CreateStrip(i,side,color,border,btype));\r
 163 el.style.paddingBottom=0;\r
 164 el.appendChild(d);\r
 165 }\r
 166 \r
 167 function CreateStrip(index,side,color,border,btype){\r
 168 var x=CreateEl("b");\r
 169 x.className=btype+index;\r
 170 x.style.backgroundColor=color;\r
 171 x.style.borderColor=border;\r
 172 if(side=="left"){\r
 173     x.style.borderRightWidth="0";\r
 174     x.style.marginRight="0";\r
 175     }\r
 176 else if(side=="right"){\r
 177     x.style.borderLeftWidth="0";\r
 178     x.style.marginLeft="0";\r
 179     }\r
 180 return(x);\r
 181 }\r
 182 \r
 183 function CreateEl(x){\r
 184 return(document.createElement(x));\r
 185 }\r
 186 \r
 187 function FixIE(el){\r
 188 if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false)\r
 189     el.style.display="inline-block";\r
 190 }\r
 191 \r
 192 function SameHeight(selector,maxh){\r
 193 var i,v=selector.split(","),t,j,els=[],gap;\r
 194 for(i=0;i<v.length;i++){\r
 195     t=getElementsBySelector(v[i]);\r
 196     els=els.concat(t);\r
 197     }\r
 198 for(i=0;i<els.length;i++){\r
 199     if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight;\r
 200     els[i].style.height="auto";\r
 201     }\r
 202 for(i=0;i<els.length;i++){\r
 203     gap=maxh-els[i].offsetHeight;\r
 204     if(gap>0){\r
 205         t=CreateEl("b");t.className="niftyfill";t.style.height=gap+"px";\r
 206         nc=els[i].lastChild;\r
 207         if(nc.className=="niftycorners")\r
 208             els[i].insertBefore(t,nc);\r
 209         else els[i].appendChild(t);\r
 210         }\r
 211     }\r
 212 }\r
 213 \r
 214 function getElementsBySelector(selector){\r
 215 var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c;\r
 216 if(selector.find("#")){ //id selector like "tag#id"\r
 217     if(selector.find(" ")){  //descendant selector like "tag#id tag"\r
 218         s=selector.split(" ");\r
 219         var fs=s[0].split("#");\r
 220         if(fs.length==1) return(objlist);\r
 221         f=document.getElementById(fs[1]);\r
 222         if(f){\r
 223             v=f.getElementsByTagName(s[1]);\r
 224             for(i=0;i<v.length;i++) objlist.push(v[i]);\r
 225             }\r
 226         return(objlist);\r
 227         }\r
 228     else{\r
 229         s=selector.split("#");\r
 230         tag=s[0];\r
 231         selid=s[1];\r
 232         if(selid!=""){\r
 233             f=document.getElementById(selid);\r
 234             if(f) objlist.push(f);\r
 235             return(objlist);\r
 236             }\r
 237         }\r
 238     }\r
 239 if(selector.find(".")){      //class selector like "tag.class"\r
 240     s=selector.split(".");\r
 241     tag=s[0];\r
 242     selclass=s[1];\r
 243     if(selclass.find(" ")){   //descendant selector like tag1.classname tag2\r
 244         s=selclass.split(" ");\r
 245         selclass=s[0];\r
 246         tag2=s[1];\r
 247         }\r
 248     }\r
 249 var v=document.getElementsByTagName(tag);  // tag selector like "tag"\r
 250 if(selclass==""){\r
 251     for(i=0;i<v.length;i++) objlist.push(v[i]);\r
 252     return(objlist);\r
 253     }\r
 254 for(i=0;i<v.length;i++){\r
 255     c=v[i].className.split(" ");\r
 256     for(j=0;j<c.length;j++){\r
 257         if(c[j]==selclass){\r
 258             if(tag2=="") objlist.push(v[i]);\r
 259             else{\r
 260                 v2=v[i].getElementsByTagName(tag2);\r
 261                 for(k=0;k<v2.length;k++) objlist.push(v2[k]);\r
 262                 }\r
 263             }\r
 264         }\r
 265     }\r
 266 return(objlist);\r
 267 }\r
 268 \r
 269 function getParentBk(x){\r
 270 var el=x.parentNode,c;\r
 271 while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")\r
 272     el=el.parentNode;\r
 273 if(c=="transparent") c="#FFFFFF";\r
 274 return(c);\r
 275 }\r
 276 \r
 277 function getBk(x){\r
 278 var c=getStyleProp(x,"backgroundColor");\r
 279 if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)"))\r
 280     return("transparent");\r
 281 if(c.find("rgb")) c=rgb2hex(c);\r
 282 return(c);\r
 283 }\r
 284 \r
 285 function getPadding(x,side){\r
 286 var p=getStyleProp(x,"padding"+side);\r
 287 if(p==null || !p.find("px")) return(0);\r
 288 return(parseInt(p));\r
 289 }\r
 290 \r
 291 function getStyleProp(x,prop){\r
 292 if(x.currentStyle)\r
 293     return(x.currentStyle[prop]);\r
 294 if(document.defaultView.getComputedStyle)\r
 295     return(document.defaultView.getComputedStyle(x,'')[prop]);\r
 296 return(null);\r
 297 }\r
 298 \r
 299 function rgb2hex(value){\r
 300 var hex="",v,h,i;\r
 301 var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;\r
 302 var h=regexp.exec(value);\r
 303 for(i=1;i<4;i++){\r
 304     v=parseInt(h[i]).toString(16);\r
 305     if(v.length==1) hex+="0"+v;\r
 306     else hex+=v;\r
 307     }\r
 308 return("#"+hex);\r
 309 }\r
 310 \r
 311 function Mix(c1,c2){\r
 312 var i,step1,step2,x,y,r=new Array(3);\r
 313 if(c1.length==4)step1=1;\r
 314 else step1=2;\r
 315 if(c2.length==4) step2=1;\r
 316 else step2=2;\r
 317 for(i=0;i<3;i++){\r
 318     x=parseInt(c1.substr(1+step1*i,step1),16);\r
 319     if(step1==1) x=16*x+x;\r
 320     y=parseInt(c2.substr(1+step2*i,step2),16);\r
 321     if(step2==1) y=16*y+y;\r
 322     r[i]=Math.floor((x*50+y*50)/100);\r
 323     r[i]=r[i].toString(16);\r
 324     if(r[i].length==1) r[i]="0"+r[i];\r
 325     }\r
 326 return("#"+r[0]+r[1]+r[2]);\r
 327 }\r