source: spip-zone/_plugins_/css_imbriques/boxsizing.htc @ 77937

Last change on this file since 77937 was 68481, checked in by arno@…, 8 years ago

Avec le boxsizing pour -spip-box-sizing

File size: 14.2 KB
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                restore();
88                init();
89                resizetimeout = null;
90        },100);
91}
92
93/*
94* restore gets called when the behavior is being detached (see event binding at the top),
95* resets everything like it was before applying the behavior
96*/
97function restore(){
98        if(apply){
99                try{
100                        element.runtimeStyle.removeAttribute("width");
101                        element.runtimeStyle.removeAttribute("height");
102                }
103                catch(e){}
104        }
105}
106
107/*
108* init gets called once at the start and then never again,
109* triggers box-sizing calculations and updates width and height
110*/
111function init(){
112        if(apply){
113                updateBorderBoxWidth();
114                updateBorderBoxHeight();
115        }
116}
117
118/*
119* checkPropertyChange gets called as soon as an element property changes
120* (see event binding at the top), it then checks if any property influencing its
121* dimensions was changed and if yes recalculates width and height
122*/
123function checkPropertyChange(){
124        if(apply){
125                var pn = event.propertyName;
126                if(pn === "style.boxSizing" && element.style.boxSizing === ""){
127                        element.style.removeAttribute("boxSizing");
128                        element.runtimeStyle.removeAttribute("boxSizing");
129                        element.runtimeStyle.removeAttribute("width");
130                        element.runtimeStyle.removeAttribute("height");
131                }
132                switch (pn){
133                        case "style.width":
134                        case "style.minWidth":
135                        case "style.maxWidth":
136                        case "style.borderLeftWidth":
137                        case "style.borderLeftStyle":
138                        case "style.borderRightWidth":
139                        case "style.borderRightStyle":
140                        case "style.paddingLeft":
141                        case "style.paddingRight":
142                                updateBorderBoxWidth();
143                        break;
144               
145                        case "style.height":
146                        case "style.minHeight":
147                        case "style.maxHeight":
148                        case "style.borderTopWidth":
149                        case "style.borderTopStyle":
150                        case "style.borderBottomWidth":
151                        case "style.borderBottomStyle":
152                        case "style.paddingTop":
153                        case "style.paddingBottom":
154                                updateBorderBoxHeight();
155                        break;
156               
157                        case "className":
158                        case "style.boxSizing":
159                                updateBorderBoxWidth();
160                                updateBorderBoxHeight();
161                        break;
162                }
163        }
164}
165
166/*
167 * Helper function, taken from Dean Edward's IE7 framework,
168 * added by Schepp on 12.06.2010.
169 * http://code.google.com/p/ie7-js/
170 *
171 * Allows us to convert from relative to pixel-values.
172 */
173function getPixelValue(value){
174        var PIXEL = /^\d+(px)?$/i;
175        if (PIXEL.test(value)) return parseInt(value);
176        var style = element.style.left;
177        var runtimeStyle = element.runtimeStyle.left;
178        element.runtimeStyle.left = element.currentStyle.left;
179        element.style.left = value || 0;
180        value = parseInt(element.style.pixelLeft);
181        element.style.left = style;
182        element.runtimeStyle.left = runtimeStyle;
183       
184        return value;
185}
186
187function getPixelWidth(object, value){
188        // For Pixel Values
189        var PIXEL = /^\d+(px)?$/i;
190        if (PIXEL.test(value)) return parseInt(value);
191       
192        // For Percentage Values
193        var PERCENT = /^[\d\.]+%$/i;
194        if (PERCENT.test(value)){
195                try{
196                        var parentPaddingLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingLeft);
197                        var parentPaddingRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingRight);
198                        var parentBorderLeft = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderLeft);
199                        var parentBorderRight = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderRight);
200                       
201                        //var parentWidth = getPixelWidth(object.parentElement,(object.parentElement.currentStyle.width != "auto" ? object.parentElement.currentStyle.width : "100%"));
202                        var parentWidth = object.parentElement.offsetWidth - parentPaddingLeft - parentPaddingRight - parentBorderLeft - parentBorderRight;
203                        var value = (parseFloat(value) / 100) * parentWidth;
204                }
205                catch(e){
206                        var value = (parseFloat(value) / 100) * element.document.documentElement.clientWidth;
207                }
208                return parseInt(value);
209        }
210       
211        // For EM Values
212        var style = object.style.left;
213        var runtimeStyle = object.runtimeStyle.left;
214        object.runtimeStyle.left = object.currentStyle.left;
215        object.style.left = value || 0;
216        value = parseInt(object.style.pixelLeft);
217        object.style.left = style;
218        object.runtimeStyle.left = runtimeStyle;
219       
220        return value;
221}
222
223function getPixelHeight(object, value){
224        // For Pixel Values
225        var PIXEL = /^\d+(px)?$/i;
226        if (PIXEL.test(value)) return parseInt(value);
227       
228        // For Percentage Values
229        var PERCENT = /^[\d\.]+%$/i;
230        if (PERCENT.test(value)){
231                try{
232                        if(object.parentElement.currentStyle.height != "auto"){
233                                switch(object.parentElement.nodeName){
234                                        default:
235                                                if(object.parentElement.currentStyle.height !== "auto"){
236                                                        var parentPaddingTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingTop);
237                                                        var parentPaddingBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.paddingBottom);
238                                                        var parentBorderTop = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderTop);
239                                                        var parentBorderBottom = getPixelWidth(object.parentElement,object.parentElement.currentStyle.borderBottom);
240                                                       
241                                                        var parentHeight = object.parentElement.offsetHeight - parentPaddingTop - parentPaddingBottom - parentBorderTop - parentBorderBottom;
242                                                        //var parentHeight = getPixelHeight(object.parentElement,object.parentElement.currentStyle.height);
243
244                                                        value = (parseFloat(value) / 100) * parentHeight;
245                                                }
246                                                else {
247                                                        value = "auto";
248                                                }
249                                        break;
250                                       
251                                        case 'HTML':
252                                                parentHeight = element.document.documentElement.clientHeight;
253                                                if(parentHeight !== "auto"){
254                                                        value = (parseFloat(value) / 100) * parentHeight;
255                                                }
256                                                else {
257                                                        value = "auto";
258                                                }
259                                        break;
260                                }
261                                if(value !== "auto") value = parseInt(value);
262                        }
263                        else {
264                                value = "auto";
265                        }
266                }
267                catch(e){
268                        value = "auto";
269                }
270                return value;
271        }
272       
273        // For EM Values
274        var style = object.style.left;
275        var runtimeStyle = object.runtimeStyle.left;
276        object.runtimeStyle.left = object.currentStyle.left;
277        object.style.left = value || 0;
278        value = parseInt(object.style.pixelLeft);
279        object.style.left = style;
280        object.runtimeStyle.left = runtimeStyle;
281       
282        return value;
283}
284
285
286/*
287 * getBorderWidth & friends
288 * Border width getters
289 */
290function getBorderWidth(sSide){
291        if(element.currentStyle["border" + sSide + "Style"] == "none"){
292                return 0;
293        }
294        var n = getPixelValue(element.currentStyle["border" + sSide + "Width"]);
295        return n || 0;
296}
297function getBorderLeftWidth() { return getBorderWidth("Left"); }
298function getBorderRightWidth() { return getBorderWidth("Right"); }
299function getBorderTopWidth() { return getBorderWidth("Top"); }
300function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
301
302
303/*
304 * getPadding & friends
305 * Padding width getters
306 */
307function getPadding(sSide) {
308        var n = getPixelValue(element.currentStyle["padding" + sSide]);
309        return n || 0;
310}
311function getPaddingLeft() { return getPadding("Left"); }
312function getPaddingRight() { return getPadding("Right"); }
313function getPaddingTop() { return getPadding("Top"); }
314function getPaddingBottom() { return getPadding("Bottom"); }
315
316
317
318/*
319 * getBoxSizing
320 * Get the box-sizing value for the current element
321 */
322function getBoxSizing(){
323        var s = element.style;
324        var cs = element.currentStyle
325        if(typeof s.boxSizing != "undefined" && s.boxSizing != ""){
326                return s.boxSizing;
327        }
328        if(typeof s["box-sizing"] != "undefined" && s["box-sizing"] != ""){
329                return s["box-sizing"];
330        }
331        if(typeof cs.boxSizing != "undefined" && cs.boxSizing != ""){
332                return cs.boxSizing;
333        }
334        if(typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != ""){
335                return cs["box-sizing"];
336        }
337        return getDocumentBoxSizing();
338}
339
340
341/*
342 * getDocumentBoxSizing
343 * Get the default document box sizing (check for quirks mode)
344 */
345function getDocumentBoxSizing(){
346        if(doc.compatMode === null || doc.compatMode === "BackCompat"){
347                return "border-box";
348        }
349        return "content-box"
350}
351
352
353/*
354 * setBorderBoxWidth & friends
355 * Width and height setters
356 */
357function setBorderBoxWidth(n){
358        element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
359                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
360}
361function setBorderBoxMinWidth(n){
362        element.runtimeStyle.minWidth = Math.max(0, n - getBorderLeftWidth() -
363                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
364}
365function setBorderBoxMaxWidth(n){
366        element.runtimeStyle.maxWidth = Math.max(0, n - getBorderLeftWidth() -
367                getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
368}
369function setBorderBoxHeight(n){
370        element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
371                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
372}
373function setBorderBoxMinHeight(n){
374        element.runtimeStyle.minHeight = Math.max(0, n - getBorderTopWidth() -
375                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
376}
377function setBorderBoxMaxHeight(n){
378        element.runtimeStyle.maxHeight = Math.max(0, n - getBorderTopWidth() -
379                getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
380}
381function setContentBoxWidth(n){
382        element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
383                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
384}
385function setContentBoxMinWidth(n){
386        element.runtimeStyle.minWidth = Math.max(0, n + getBorderLeftWidth() +
387                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
388}
389function setContentBoxMaxWidth(n){
390        element.runtimeStyle.maxWidth = Math.max(0, n + getBorderLeftWidth() +
391                getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
392}
393function setContentBoxHeight(n){
394        element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
395                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
396}
397function setContentBoxMinHeight(n){
398        element.runtimeStyle.minHeight = Math.max(0, n + getBorderTopWidth() +
399                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
400}
401function setContentBoxMaxHeight(n){
402        element.runtimeStyle.maxHeight = Math.max(0, n + getBorderTopWidth() +
403                getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
404}
405
406
407/*
408 * updateBorderBoxWidth & updateBorderBoxHeight
409 *
410 */
411function updateBorderBoxWidth() {
412        if(getDocumentBoxSizing() == getBoxSizing()){
413                return;
414        }
415       
416        var csw = element.currentStyle.width;
417        if(csw != "auto"){
418                csw = getPixelWidth(element,csw);
419                if(getBoxSizing() == "border-box"){
420                        setBorderBoxWidth(parseInt(csw));
421                }
422                else{
423                        setContentBoxWidth(parseInt(csw));
424                }
425        }
426
427        csw = element.currentStyle.minWidth;
428        if(csw != "none"){
429                csw = getPixelWidth(element,csw);
430                if(getBoxSizing() == "border-box"){
431                        setBorderBoxMinWidth(parseInt(csw));
432                }
433                else{
434                        setContentBoxMinWidth(parseInt(csw));
435                }
436        }
437
438        csw = element.currentStyle.maxWidth;
439        if(csw != "none"){
440                csw = getPixelWidth(element,csw);
441                if(getBoxSizing() == "border-box"){
442                        setBorderBoxMaxWidth(parseInt(csw));
443                }
444                else{
445                        setContentBoxMaxWidth(parseInt(csw));
446                }
447        }
448}
449
450function updateBorderBoxHeight() {
451        if(getDocumentBoxSizing() == getBoxSizing()){
452                return;
453        }
454       
455        var csh = element.currentStyle.height;
456        if(csh != "auto"){
457                csh = getPixelHeight(element,csh);
458                if(csh !== "auto"){
459                        if(getBoxSizing() == "border-box"){
460                                setBorderBoxHeight(parseInt(csh));
461                        }
462                        else{
463                                setContentBoxHeight(parseInt(csh));
464                        }
465                }
466        }
467
468        csh = element.currentStyle.minHeight;
469        if(csh != "none"){
470                csh = getPixelHeight(element,csh);
471                if(csh !== "none"){
472                        if(getBoxSizing() == "border-box"){
473                                setBorderBoxMinHeight(parseInt(csh));
474                        }
475                        else{
476                                setContentBoxMinHeight(parseInt(csh));
477                        }
478                }
479        }
480
481        csh = element.currentStyle.maxHeight;
482        if(csh != "none"){
483                csh = getPixelHeight(element,csh);
484                if(csh !== "none"){
485                        if(getBoxSizing() == "border-box"){
486                                setBorderBoxMaxHeight(parseInt(csh));
487                        }
488                        else{
489                                setContentBoxMaxHeight(parseInt(csh));
490                        }
491                }
492        }
493}
494
495
496// Run the calculations
497init();
498
499//]]>
500</script>
501</component>
Note: See TracBrowser for help on using the repository browser.