[795] | 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();NiftyLoad()}; |
---|
| 30 | else window.onload=function(){AddCss();NiftyLoad()}; |
---|
| 31 | |
---|
| 32 | function AddCss(){ |
---|
| 33 | niftyCss=true; |
---|
| 34 | var l=CreateEl("link"); |
---|
| 35 | l.setAttribute("type","text/css"); |
---|
| 36 | l.setAttribute("rel","stylesheet"); |
---|
| 37 | l.setAttribute("href","niftyCorners.css"); |
---|
| 38 | l.setAttribute("media","screen"); |
---|
| 39 | document.getElementsByTagName("head")[0].appendChild(l); |
---|
| 40 | } |
---|
| 41 | |
---|
| 42 | function Nifty(selector,options){ |
---|
| 43 | if(niftyOk==false) return; |
---|
| 44 | if(niftyCss==false) AddCss(); |
---|
| 45 | var i,v=selector.split(","),h=0; |
---|
| 46 | if(options==null) options=""; |
---|
| 47 | if(options.find("fixed-height")) |
---|
| 48 | h=getElementsBySelector(v[0])[0].offsetHeight; |
---|
| 49 | for(i=0;i<v.length;i++) |
---|
| 50 | Rounded(v[i],options); |
---|
| 51 | if(options.find("height")) SameHeight(selector,h); |
---|
| 52 | } |
---|
| 53 | |
---|
| 54 | function Rounded(selector,options){ |
---|
| 55 | var i,top="",bottom="",v=new Array(); |
---|
| 56 | if(options!=""){ |
---|
| 57 | options=options.replace("left","tl bl"); |
---|
| 58 | options=options.replace("right","tr br"); |
---|
| 59 | options=options.replace("top","tr tl"); |
---|
| 60 | options=options.replace("bottom","br bl"); |
---|
| 61 | options=options.replace("transparent","alias"); |
---|
| 62 | if(options.find("tl")){ |
---|
| 63 | top="both"; |
---|
| 64 | if(!options.find("tr")) top="left"; |
---|
| 65 | } |
---|
| 66 | else if(options.find("tr")) top="right"; |
---|
| 67 | if(options.find("bl")){ |
---|
| 68 | bottom="both"; |
---|
| 69 | if(!options.find("br")) bottom="left"; |
---|
| 70 | } |
---|
| 71 | else if(options.find("br")) bottom="right"; |
---|
| 72 | } |
---|
| 73 | if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";} |
---|
| 74 | v=getElementsBySelector(selector); |
---|
| 75 | for(i=0;i<v.length;i++){ |
---|
| 76 | FixIE(v[i]); |
---|
| 77 | if(top!="") AddTop(v[i],top,options); |
---|
| 78 | if(bottom!="") AddBottom(v[i],bottom,options); |
---|
| 79 | } |
---|
| 80 | } |
---|
| 81 | |
---|
| 82 | function AddTop(el,side,options){ |
---|
| 83 | var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color; |
---|
| 84 | d.style.marginLeft="-"+getPadding(el,"Left")+"px"; |
---|
| 85 | d.style.marginRight="-"+getPadding(el,"Right")+"px"; |
---|
| 86 | if(options.find("alias") || (color=getBk(el))=="transparent"){ |
---|
| 87 | color="transparent";bk="transparent"; border=getParentBk(el);btype="t"; |
---|
| 88 | } |
---|
| 89 | else{ |
---|
| 90 | bk=getParentBk(el); border=Mix(color,bk); |
---|
| 91 | } |
---|
| 92 | d.style.background=bk; |
---|
| 93 | d.className="niftycorners"; |
---|
| 94 | p=getPadding(el,"Top"); |
---|
| 95 | if(options.find("small")){ |
---|
| 96 | d.style.marginBottom=(p-2)+"px"; |
---|
| 97 | btype+="s"; lim=2; |
---|
| 98 | } |
---|
| 99 | else if(options.find("big")){ |
---|
| 100 | d.style.marginBottom=(p-10)+"px"; |
---|
| 101 | btype+="b"; lim=8; |
---|
| 102 | } |
---|
| 103 | else d.style.marginBottom=(p-5)+"px"; |
---|
| 104 | for(i=1;i<=lim;i++) |
---|
| 105 | d.appendChild(CreateStrip(i,side,color,border,btype)); |
---|
| 106 | el.style.paddingTop="0"; |
---|
| 107 | el.insertBefore(d,el.firstChild); |
---|
| 108 | } |
---|
| 109 | |
---|
| 110 | function AddBottom(el,side,options){ |
---|
| 111 | var d=CreateEl("b"),lim=4,border="",p,i,btype="r",bk,color; |
---|
| 112 | d.style.marginLeft="-"+getPadding(el,"Left")+"px"; |
---|
| 113 | d.style.marginRight="-"+getPadding(el,"Right")+"px"; |
---|
| 114 | if(options.find("alias") || (color=getBk(el))=="transparent"){ |
---|
| 115 | color="transparent";bk="transparent"; border=getParentBk(el);btype="t"; |
---|
| 116 | } |
---|
| 117 | else{ |
---|
| 118 | bk=getParentBk(el); border=Mix(color,bk); |
---|
| 119 | } |
---|
| 120 | d.style.background=bk; |
---|
| 121 | d.className="niftycorners"; |
---|
| 122 | p=getPadding(el,"Bottom"); |
---|
| 123 | if(options.find("small")){ |
---|
| 124 | d.style.marginTop=(p-2)+"px"; |
---|
| 125 | btype+="s"; lim=2; |
---|
| 126 | } |
---|
| 127 | else if(options.find("big")){ |
---|
| 128 | d.style.marginTop=(p-10)+"px"; |
---|
| 129 | btype+="b"; lim=8; |
---|
| 130 | } |
---|
| 131 | else d.style.marginTop=(p-5)+"px"; |
---|
| 132 | for(i=lim;i>0;i--) |
---|
| 133 | d.appendChild(CreateStrip(i,side,color,border,btype)); |
---|
| 134 | el.style.paddingBottom=0; |
---|
| 135 | el.appendChild(d); |
---|
| 136 | } |
---|
| 137 | |
---|
| 138 | function CreateStrip(index,side,color,border,btype){ |
---|
| 139 | var x=CreateEl("b"); |
---|
| 140 | x.className=btype+index; |
---|
| 141 | x.style.backgroundColor=color; |
---|
| 142 | x.style.borderColor=border; |
---|
| 143 | if(side=="left"){ |
---|
| 144 | x.style.borderRightWidth="0"; |
---|
| 145 | x.style.marginRight="0"; |
---|
| 146 | } |
---|
| 147 | else if(side=="right"){ |
---|
| 148 | x.style.borderLeftWidth="0"; |
---|
| 149 | x.style.marginLeft="0"; |
---|
| 150 | } |
---|
| 151 | return(x); |
---|
| 152 | } |
---|
| 153 | |
---|
| 154 | function CreateEl(x){ |
---|
| 155 | return(document.createElement(x)); |
---|
| 156 | } |
---|
| 157 | |
---|
| 158 | function FixIE(el){ |
---|
| 159 | if(el.currentStyle!=null && el.currentStyle.hasLayout!=null && el.currentStyle.hasLayout==false) |
---|
| 160 | el.style.display="inline-block"; |
---|
| 161 | } |
---|
| 162 | |
---|
| 163 | function SameHeight(selector,maxh){ |
---|
| 164 | var i,v=selector.split(","),t,j,els=[],gap; |
---|
| 165 | for(i=0;i<v.length;i++){ |
---|
| 166 | t=getElementsBySelector(v[i]); |
---|
| 167 | els=els.concat(t); |
---|
| 168 | } |
---|
| 169 | for(i=0;i<els.length;i++){ |
---|
| 170 | if(els[i].offsetHeight>maxh) maxh=els[i].offsetHeight; |
---|
| 171 | els[i].style.height="auto"; |
---|
| 172 | } |
---|
| 173 | for(i=0;i<els.length;i++){ |
---|
| 174 | gap=maxh-els[i].offsetHeight; |
---|
| 175 | if(gap>0){ |
---|
| 176 | t=CreateEl("b");t.className="niftyfill";t.style.height=gap+"px"; |
---|
| 177 | nc=els[i].lastChild; |
---|
| 178 | if(nc.className=="niftycorners") |
---|
| 179 | els[i].insertBefore(t,nc); |
---|
| 180 | else els[i].appendChild(t); |
---|
| 181 | } |
---|
| 182 | } |
---|
| 183 | } |
---|
| 184 | |
---|
| 185 | function getElementsBySelector(selector){ |
---|
| 186 | var i,j,selid="",selclass="",tag=selector,tag2="",v2,k,f,a,s=[],objlist=[],c; |
---|
| 187 | if(selector.find("#")){ //id selector like "tag#id" |
---|
| 188 | if(selector.find(" ")){ //descendant selector like "tag#id tag" |
---|
| 189 | s=selector.split(" "); |
---|
| 190 | var fs=s[0].split("#"); |
---|
| 191 | if(fs.length==1) return(objlist); |
---|
| 192 | f=document.getElementById(fs[1]); |
---|
| 193 | if(f){ |
---|
| 194 | v=f.getElementsByTagName(s[1]); |
---|
| 195 | for(i=0;i<v.length;i++) objlist.push(v[i]); |
---|
| 196 | } |
---|
| 197 | return(objlist); |
---|
| 198 | } |
---|
| 199 | else{ |
---|
| 200 | s=selector.split("#"); |
---|
| 201 | tag=s[0]; |
---|
| 202 | selid=s[1]; |
---|
| 203 | if(selid!=""){ |
---|
| 204 | f=document.getElementById(selid); |
---|
| 205 | if(f) objlist.push(f); |
---|
| 206 | return(objlist); |
---|
| 207 | } |
---|
| 208 | } |
---|
| 209 | } |
---|
| 210 | if(selector.find(".")){ //class selector like "tag.class" |
---|
| 211 | s=selector.split("."); |
---|
| 212 | tag=s[0]; |
---|
| 213 | selclass=s[1]; |
---|
| 214 | if(selclass.find(" ")){ //descendant selector like tag1.classname tag2 |
---|
| 215 | s=selclass.split(" "); |
---|
| 216 | selclass=s[0]; |
---|
| 217 | tag2=s[1]; |
---|
| 218 | } |
---|
| 219 | } |
---|
| 220 | var v=document.getElementsByTagName(tag); // tag selector like "tag" |
---|
| 221 | if(selclass==""){ |
---|
| 222 | for(i=0;i<v.length;i++) objlist.push(v[i]); |
---|
| 223 | return(objlist); |
---|
| 224 | } |
---|
| 225 | for(i=0;i<v.length;i++){ |
---|
| 226 | c=v[i].className.split(" "); |
---|
| 227 | for(j=0;j<c.length;j++){ |
---|
| 228 | if(c[j]==selclass){ |
---|
| 229 | if(tag2=="") objlist.push(v[i]); |
---|
| 230 | else{ |
---|
| 231 | v2=v[i].getElementsByTagName(tag2); |
---|
| 232 | for(k=0;k<v2.length;k++) objlist.push(v2[k]); |
---|
| 233 | } |
---|
| 234 | } |
---|
| 235 | } |
---|
| 236 | } |
---|
| 237 | return(objlist); |
---|
| 238 | } |
---|
| 239 | |
---|
| 240 | function getParentBk(x){ |
---|
| 241 | var el=x.parentNode,c; |
---|
| 242 | while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent") |
---|
| 243 | el=el.parentNode; |
---|
| 244 | if(c=="transparent") c="#FFFFFF"; |
---|
| 245 | return(c); |
---|
| 246 | } |
---|
| 247 | |
---|
| 248 | function getBk(x){ |
---|
| 249 | var c=getStyleProp(x,"backgroundColor"); |
---|
| 250 | if(c==null || c=="transparent" || c.find("rgba(0, 0, 0, 0)")) |
---|
| 251 | return("transparent"); |
---|
| 252 | if(c.find("rgb")) c=rgb2hex(c); |
---|
| 253 | return(c); |
---|
| 254 | } |
---|
| 255 | |
---|
| 256 | function getPadding(x,side){ |
---|
| 257 | var p=getStyleProp(x,"padding"+side); |
---|
| 258 | if(p==null || !p.find("px")) return(0); |
---|
| 259 | return(parseInt(p)); |
---|
| 260 | } |
---|
| 261 | |
---|
| 262 | function getStyleProp(x,prop){ |
---|
| 263 | if(x.currentStyle) |
---|
| 264 | return(x.currentStyle[prop]); |
---|
| 265 | if(document.defaultView.getComputedStyle) |
---|
| 266 | return(document.defaultView.getComputedStyle(x,'')[prop]); |
---|
| 267 | return(null); |
---|
| 268 | } |
---|
| 269 | |
---|
| 270 | function rgb2hex(value){ |
---|
| 271 | var hex="",v,h,i; |
---|
| 272 | var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/; |
---|
| 273 | var h=regexp.exec(value); |
---|
| 274 | for(i=1;i<4;i++){ |
---|
| 275 | v=parseInt(h[i]).toString(16); |
---|
| 276 | if(v.length==1) hex+="0"+v; |
---|
| 277 | else hex+=v; |
---|
| 278 | } |
---|
| 279 | return("#"+hex); |
---|
| 280 | } |
---|
| 281 | |
---|
| 282 | function Mix(c1,c2){ |
---|
| 283 | var i,step1,step2,x,y,r=new Array(3); |
---|
| 284 | if(c1.length==4)step1=1; |
---|
| 285 | else step1=2; |
---|
| 286 | if(c2.length==4) step2=1; |
---|
| 287 | else step2=2; |
---|
| 288 | for(i=0;i<3;i++){ |
---|
| 289 | x=parseInt(c1.substr(1+step1*i,step1),16); |
---|
| 290 | if(step1==1) x=16*x+x; |
---|
| 291 | y=parseInt(c2.substr(1+step2*i,step2),16); |
---|
| 292 | if(step2==1) y=16*y+y; |
---|
| 293 | r[i]=Math.floor((x*50+y*50)/100); |
---|
| 294 | r[i]=r[i].toString(16); |
---|
| 295 | if(r[i].length==1) r[i]="0"+r[i]; |
---|
| 296 | } |
---|
| 297 | return("#"+r[0]+r[1]+r[2]); |
---|
| 298 | } |
---|