plekit/niftycorner/niftycube.js

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