Dotclear

source: themes/berlin/scripts/boxsizing.htc @ 2640:489437dde4f5

Revision 2640:489437dde4f5, 14.2 KB checked in by Anne Kozlika <kozlika@…>, 12 years ago (diff)

New default theme BERLIN, first commit.
Needs A LOT of clean-up and to be enhanced.
  • Property exe set to *
Line 
1/**
2* box-sizing Polyfill
3*
4* A polyfill for box-sizing: border-box for IE6 & IE7.
5*
6* JScript
7*
8* This program is free software: you can redistribute it and/or modify
9* it under the terms of the GNU Lesser General Public License as published
10* by the Free Software Foundation, either version 3 of the License, or
11* (at your option) any later version.
12*
13* This program is distributed in the hope that it will be useful,
14* but WITHOUT ANY WARRANTY; without even the implied warranty of
15* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16* GNU Lesser General Public License for more details.
17*
18* See <http://www.gnu.org/licenses/lgpl-3.0.txt>
19*
20* @category  JScript
21* @package   box-sizing-polyfill
22* @author    Christian Schepp Schaefer <schaepp@gmx.de> <http://twitter.com/derSchepp>
23* @copyright 2012 Christian Schepp Schaefer
24* @license   http://www.gnu.org/copyleft/lesser.html The GNU LESSER GENERAL PUBLIC LICENSE, Version 3.0
25* @link      http://github.com/Schepp/box-sizing-polyfill
26*
27* PREFACE:
28*
29* This box-sizing polyfill is based on previous work done by Erik Arvidsson,
30* which he published in 2002 on http://webfx.eae.net/dhtml/boxsizing/boxsizing.html.
31*
32* USAGE:
33*   
34* Add the behavior/HTC after every `box-sizing: border-box;` that you assign:
35*
36* box-sizing: border-box;
37* *behavior: url(/scripts/boxsizing.htc);`
38*
39* Prefix the `behavior` property with a star, like seen above, so it will only be seen by
40* IE6 & IE7, not by IE8+ who already implement box-sizing.
41*
42* The URL to the HTC file must be relative to your HTML(!) document, not relative to your CSS.
43* That's why I'd advise you to use absolute paths like in the example.
44*
45*/
46<component lightWeight="true">
47<attach event="onpropertychange" onevent="checkPropertyChange()" />
48<attach event="ondetach" onevent="restore()" />
49<attach event="onresize" for="window" onevent="update()" />
50<script type="text/javascript">
51//<![CDATA[
52
53var viewportwidth = (typeof window.innerWidth != 'undefined' ? window.innerWidth : element.document.documentElement.clientWidth);
54
55// Shortcut for the document object
56var doc = element.document;
57
58// Buffer for multiple resize events
59var resizetimeout = null;
60
61// Don't apply box-sizing to certain elements
62var apply = false;
63switch(element.nodeName){
64     case '#comment':
65     case 'HTML':
66     case 'HEAD':
67     case 'TITLE':
68     case 'SCRIPT':
69     case 'STYLE':
70     case 'LINK':
71     case 'META':
72     break;
73               
74     default:
75          apply = true;
76     break;
77}
78
79/*
80* update gets called during resize events, then waits until there are no further resize events, and finally triggers a recalculation
81*/
82function update(){
83     if(resizetimeout !== null){
84          window.clearTimeout(resizetimeout);
85     }
86     resizetimeout = window.setTimeout(function(){
87          try{
88               restore();
89               init();
90          }
91          catch(e){}
92          resizetimeout = null;
93     },100);
94}
95
96/*
97* restore gets called when the behavior is being detached (see event binding at the top),
98* resets everything like it was before applying the behavior
99*/
100function restore(){
101     if(apply){
102          try{
103               element.runtimeStyle.removeAttribute("width");
104               element.runtimeStyle.removeAttribute("height");
105          }
106          catch(e){}
107     }
108}
109
110/*
111* init gets called once at the start and then never again,
112* triggers box-sizing calculations and updates width and height
113*/
114function init(){
115     if(apply){
116          updateBorderBoxWidth();
117          updateBorderBoxHeight();
118     }
119}
120
121/*
122* checkPropertyChange gets called as soon as an element property changes
123* (see event binding at the top), it then checks if any property influencing its
124* dimensions was changed and if yes recalculates width and height
125*/
126function checkPropertyChange(){
127     if(apply){
128          var pn = event.propertyName;
129          if(pn === "style.boxSizing" && element.style.boxSizing === ""){
130               element.style.removeAttribute("boxSizing");
131               element.runtimeStyle.removeAttribute("boxSizing");
132               element.runtimeStyle.removeAttribute("width");
133               element.runtimeStyle.removeAttribute("height");
134          }
135          switch (pn){
136               case "style.width":
137               case "style.minWidth":
138               case "style.maxWidth":
139               case "style.borderLeftWidth":
140               case "style.borderLeftStyle":
141               case "style.borderRightWidth":
142               case "style.borderRightStyle":
143               case "style.paddingLeft":
144               case "style.paddingRight":
145                    updateBorderBoxWidth();
146               break;
147         
148               case "style.height":
149               case "style.minHeight":
150               case "style.maxHeight":
151               case "style.borderTopWidth":
152               case "style.borderTopStyle":
153               case "style.borderBottomWidth":
154               case "style.borderBottomStyle":
155               case "style.paddingTop":
156               case "style.paddingBottom":
157                    updateBorderBoxHeight();
158               break;
159         
160               case "className":
161               case "style.boxSizing":
162                    updateBorderBoxWidth();
163                    updateBorderBoxHeight();
164               break;
165          }
166     }
167}
168
169/*
170 * Helper function, taken from Dean Edward's IE7 framework,
171 * added by Schepp on 12.06.2010.
172 * http://code.google.com/p/ie7-js/
173 *
174 * Allows us to convert from relative to pixel-values.
175 */
176function getPixelValue(value){
177     var PIXEL = /^\d+(px)?$/i;
178     if (PIXEL.test(value)) return parseInt(value);
179     var style = element.style.left;
180     var runtimeStyle = element.runtimeStyle.left;
181     element.runtimeStyle.left = element.currentStyle.left;
182     element.style.left = value || 0;
183     value = parseInt(element.style.pixelLeft);
184     element.style.left = style;
185     element.runtimeStyle.left = runtimeStyle;
186     
187     return value;
188}
189
190function getPixelWidth(object, value){
191     // For Pixel Values
192     var PIXEL = /^\d+(px)?$/i;
193     if (PIXEL.test(value)) return parseInt(value);
194     
195     // For Percentage Values
196     var PERCENT = /^[\d\.]+%$/i;
197     if (PERCENT.test(value)){
198          try{
199               var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft);
200               var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight);
201               var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeft);
202               var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRight);
203               
204               //var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
205               var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight;
206               var value = (parseFloat(value) / 100) * parentWidth;
207          }
208          catch(e){
209               var value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
210          }
211          return parseInt(value);
212     }
213     
214     // For EM Values
215     var style = object.style.left;
216     var runtimeStyle = object.runtimeStyle.left;
217     object.runtimeStyle.left = object.currentStyle.left;
218     object.style.left = value || 0;
219     value = parseInt(object.style.pixelLeft);
220     object.style.left = style;
221     object.runtimeStyle.left = runtimeStyle;
222     
223     return value;
224}
225
226function getPixelHeight(object, value){
227     // For Pixel Values
228     var PIXEL = /^\d+(px)?$/i;
229     if (PIXEL.test(value)) return parseInt(value);
230     
231     // For Percentage Values
232     var PERCENT = /^[\d\.]+%$/i;
233     if (PERCENT.test(value)){
234          try{
235               if(object.parentElement.currentStyle.height != "auto"){
236                    switch(object.parentElement.nodeName){
237                         default:
238                              if(object.parentElement.currentStyle.height !== "auto"){
239                                   var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop);
240                                   var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom);
241                                   var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTop);
242                                   var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottom);
243                                   
244                                   var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom;
245                                   //var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);
246
247                                   value = (parseFloat(value) / 100) * parentHeight;
248                              }
249                              else {
250                                   value = "auto";
251                              }
252                         break;
253                         
254                         case 'HTML':
255                              parentHeight = element.document.documentElement.clientHeight;
256                              if(parentHeight !== "auto"){
257                                   value = (parseFloat(value) / 100) * parentHeight;
258                              }
259                              else {
260                                   value = "auto";
261                              }
262                         break;
263                    }
264                    if(value !== "auto") value = parseInt(value);
265               }
266               else {
267                    value = "auto";
268               }
269          }
270          catch(e){
271               value = "auto";
272          }
273          return value;
274     }
275     
276     // For EM Values
277     var style = object.style.left;
278     var runtimeStyle = object.runtimeStyle.left;
279     object.runtimeStyle.left = object.currentStyle.left;
280     object.style.left = value || 0;
281     value = parseInt(object.style.pixelLeft);
282     object.style.left = style;
283     object.runtimeStyle.left = runtimeStyle;
284     
285     return value;
286}
287
288
289/*
290 * getBorderWidth & friends
291 * Border width getters
292 */
293function getBorderWidth(sSide){
294     if(element.currentStyle["border" + sSide + "Style"] == "none"){
295          return 0;
296     }
297     var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
298     return n || 0;
299}
300function getBorderLeftWidth() { return getBorderWidth("Left"); }
301function getBorderRightWidth() { return getBorderWidth("Right"); }
302function getBorderTopWidth() { return getBorderWidth("Top"); }
303function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
304
305
306/*
307 * getPadding & friends
308 * Padding width getters
309 */
310function getPadding(sSide) {
311     var n = getPixelValue(element.currentStyle["padding" + sSide]);
312     return n || 0;
313}
314function getPaddingLeft() { return getPadding("Left"); }
315function getPaddingRight() { return getPadding("Right"); }
316function getPaddingTop() { return getPadding("Top"); }
317function getPaddingBottom() { return getPadding("Bottom"); }
318
319
320
321/*
322 * getBoxSizing
323 * Get the box-sizing value for the current element
324 */
325function getBoxSizing(){
326     var s = element.style;
327     var cs = element.currentStyle
328     if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
329          return s.boxSizing;
330     }
331     if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
332          return s["box-sizing"];
333     }
334     if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
335          return cs.boxSizing;
336     }
337     if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
338          return cs["box-sizing"];
339     }
340     return getDocumentBoxSizing();
341}
342
343
344/*
345 * getDocumentBoxSizing
346 * Get the default document box sizing (check for quirks mode)
347 */
348function getDocumentBoxSizing(){
349     if(doc.compatMode === null || doc.compatMode === "BackCompat"){
350          return "border-box";
351     }
352     return "content-box"
353}
354
355
356/*
357 * setBorderBoxWidth & friends
358 * Width and height setters
359 */
360function setBorderBoxWidth(n){
361     element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
362          getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
363}
364function setBorderBoxMinWidth(n){
365     element.runtimeStyle.minWidth = Math.max(0, n - getBorderLeftWidth() -
366          getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
367}
368function setBorderBoxMaxWidth(n){
369     element.runtimeStyle.maxWidth = Math.max(0, n - getBorderLeftWidth() -
370          getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
371}
372function setBorderBoxHeight(n){
373     element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
374          getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
375}
376function setBorderBoxMinHeight(n){
377     element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() -
378          getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
379}
380function setBorderBoxMaxHeight(n){
381     element.runtimeStyle.maxHeight = Math.max(0, n - getBorderTopWidth() -
382          getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
383}
384function setContentBoxWidth(n){
385     element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
386          getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
387}
388function setContentBoxMinWidth(n){
389     element.runtimeStyle.minWidth = Math.max(0, n + getBorderLeftWidth() +
390          getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
391}
392function setContentBoxMaxWidth(n){
393     element.runtimeStyle.maxWidth = Math.max(0, n + getBorderLeftWidth() +
394          getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
395}
396function setContentBoxHeight(n){
397     element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
398          getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
399}
400function setContentBoxMinHeight(n){
401     element.runtimeStyle.minHeight = Math.max(0, n + getBorderTopWidth() +
402          getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
403}
404function setContentBoxMaxHeight(n){
405     element.runtimeStyle.maxHeight = Math.max(0, n + getBorderTopWidth() +
406          getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
407}
408
409
410/*
411 * updateBorderBoxWidth & updateBorderBoxHeight
412 *
413 */
414function updateBorderBoxWidth() {
415     if(getDocumentBoxSizing() == getBoxSizing()){
416          return;
417     }
418     
419     var csw = element.currentStyle.width;
420     if(csw != "auto"){
421          csw = getPixelWidth(element,csw);
422          if(getBoxSizing() == "border-box"){
423               setBorderBoxWidth(parseInt(csw));
424          }
425          else{
426               setContentBoxWidth(parseInt(csw));
427          }
428     }
429
430     csw = element.currentStyle.minWidth;
431     if(csw != "none"){
432          csw = getPixelWidth(element,csw);
433          if(getBoxSizing() == "border-box"){
434               setBorderBoxMinWidth(parseInt(csw));
435          }
436          else{
437               setContentBoxMinWidth(parseInt(csw));
438          }
439     }
440
441     csw = element.currentStyle.maxWidth;
442     if(csw != "none"){
443          csw = getPixelWidth(element,csw);
444          if(getBoxSizing() == "border-box"){
445               setBorderBoxMaxWidth(parseInt(csw));
446          }
447          else{
448               setContentBoxMaxWidth(parseInt(csw));
449          }
450     }
451}
452
453function updateBorderBoxHeight() {
454     if(getDocumentBoxSizing() == getBoxSizing()){
455          return;
456     }
457     
458     var csh = element.currentStyle.height;
459     if(csh != "auto"){
460          csh = getPixelHeight(element,csh);
461          if(csh !== "auto"){
462               if(getBoxSizing() == "border-box"){
463                    setBorderBoxHeight(parseInt(csh));
464               }
465               else{
466                    setContentBoxHeight(parseInt(csh));
467               }
468          }
469     }
470
471     csh = element.currentStyle.minHeight;
472     if(csh != "none"){
473          csh = getPixelHeight(element,csh);
474          if(csh !== "none"){
475               if(getBoxSizing() == "border-box"){
476                    setBorderBoxMinHeight(parseInt(csh));
477               }
478               else{
479                    setContentBoxMinHeight(parseInt(csh));
480               }
481          }
482     }
483
484     csh = element.currentStyle.maxHeight;
485     if(csh != "none"){
486          csh = getPixelHeight(element,csh);
487          if(csh !== "none"){
488               if(getBoxSizing() == "border-box"){
489                    setBorderBoxMaxHeight(parseInt(csh));
490               }
491               else{
492                    setContentBoxMaxHeight(parseInt(csh));
493               }
494          }
495     }
496}
497
498
499// Run the calculations
500init();
501
502//]]>
503</script>
504</component>
Note: See TracBrowser for help on using the repository browser.

Sites map