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 | } |
---|