1 /* Nifty Corners Cube - rounded corners with CSS and Javascript
\r
2 Copyright 2006 Alessandro Fulciniti (a.fulciniti@html.it)
\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
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
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
19 var niftyOk=(document.getElementById && document.createElement && Array.prototype.push);
\r
22 String.prototype.find=function(what){
\r
23 return(this.indexOf(what)>=0 ? true : false);
\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
32 /* xxx local change : pass a path as parameter */
\r
33 function AddCss(path){
\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
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
55 function Rounded(selector,options){
\r
56 var i,top="",bottom="",v=new Array();
\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
65 if(!options.find("tr")) top="left";
\r
67 else if(options.find("tr")) top="right";
\r
68 if(options.find("bl")){
\r
70 if(!options.find("br")) bottom="left";
\r
72 else if(options.find("br")) bottom="right";
\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
78 if(top!="") AddTop(v[i],top,options);
\r
79 if(bottom!="") AddBottom(v[i],bottom,options);
\r
84 * accept element rather than selectors */
\r
85 function pleRounded(element,options){
\r
86 var i,top="",bottom="",v=new Array();
\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
95 if(!options.find("tr")) top="left";
\r
97 else if(options.find("tr")) top="right";
\r
98 if(options.find("bl")){
\r
100 if(!options.find("br")) bottom="left";
\r
102 else if(options.find("br")) bottom="right";
\r
104 if(top=="" && bottom=="" && !options.find("none")){top="both";bottom="both";}
\r
106 if(top!="") AddTop(element,top,options);
\r
107 if(bottom!="") AddBottom(element,bottom,options);
\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
119 bk=getParentBk(el); border=Mix(color,bk);
\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
128 else if(options.find("big")){
\r
129 d.style.marginBottom=(p-10)+"px";
\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
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
147 bk=getParentBk(el); border=Mix(color,bk);
\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
156 else if(options.find("big")){
\r
157 d.style.marginTop=(p-10)+"px";
\r
160 else d.style.marginTop=(p-5)+"px";
\r
162 d.appendChild(CreateStrip(i,side,color,border,btype));
\r
163 el.style.paddingBottom=0;
\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
173 x.style.borderRightWidth="0";
\r
174 x.style.marginRight="0";
\r
176 else if(side=="right"){
\r
177 x.style.borderLeftWidth="0";
\r
178 x.style.marginLeft="0";
\r
183 function CreateEl(x){
\r
184 return(document.createElement(x));
\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
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
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
202 for(i=0;i<els.length;i++){
\r
203 gap=maxh-els[i].offsetHeight;
\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
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
223 v=f.getElementsByTagName(s[1]);
\r
224 for(i=0;i<v.length;i++) objlist.push(v[i]);
\r
229 s=selector.split("#");
\r
233 f=document.getElementById(selid);
\r
234 if(f) objlist.push(f);
\r
239 if(selector.find(".")){ //class selector like "tag.class"
\r
240 s=selector.split(".");
\r
243 if(selclass.find(" ")){ //descendant selector like tag1.classname tag2
\r
244 s=selclass.split(" ");
\r
249 var v=document.getElementsByTagName(tag); // tag selector like "tag"
\r
251 for(i=0;i<v.length;i++) objlist.push(v[i]);
\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
260 v2=v[i].getElementsByTagName(tag2);
\r
261 for(k=0;k<v2.length;k++) objlist.push(v2[k]);
\r
269 function getParentBk(x){
\r
270 var el=x.parentNode,c;
\r
271 while(el.tagName.toUpperCase()!="HTML" && (c=getBk(el))=="transparent")
\r
273 if(c=="transparent") c="#FFFFFF";
\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
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
291 function getStyleProp(x,prop){
\r
293 return(x.currentStyle[prop]);
\r
294 if(document.defaultView.getComputedStyle)
\r
295 return(document.defaultView.getComputedStyle(x,'')[prop]);
\r
299 function rgb2hex(value){
\r
301 var regexp=/([0-9]+)[, ]+([0-9]+)[, ]+([0-9]+)/;
\r
302 var h=regexp.exec(value);
\r
304 v=parseInt(h[i]).toString(16);
\r
305 if(v.length==1) hex+="0"+v;
\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
315 if(c2.length==4) step2=1;
\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
326 return("#"+r[0]+r[1]+r[2]);
\r