1 |
dpavlin |
1 |
<component lightWeight="true"> |
2 |
|
|
<attach event="onpropertychange" onevent="checkPropertyChange()" /> |
3 |
|
|
<attach event="ondetach" onevent="restore()" /> |
4 |
|
|
<script> |
5 |
|
|
//<![CDATA[ |
6 |
|
|
|
7 |
|
|
var doc = element.document; |
8 |
|
|
|
9 |
|
|
function init() { |
10 |
|
|
updateBorderBoxWidth(); |
11 |
|
|
updateBorderBoxHeight(); |
12 |
|
|
} |
13 |
|
|
|
14 |
|
|
function restore() { |
15 |
|
|
element.runtimeStyle.width = ""; |
16 |
|
|
element.runtimeStyle.height = ""; |
17 |
|
|
} |
18 |
|
|
|
19 |
|
|
/* border width getters */ |
20 |
|
|
function getBorderWidth(sSide) { |
21 |
|
|
if (element.currentStyle["border" + sSide + "Style"] == "none") |
22 |
|
|
return 0; |
23 |
|
|
var n = parseInt(element.currentStyle["border" + sSide + "Width"]); |
24 |
|
|
return n || 0; |
25 |
|
|
} |
26 |
|
|
|
27 |
|
|
function getBorderLeftWidth() { return getBorderWidth("Left"); } |
28 |
|
|
function getBorderRightWidth() { return getBorderWidth("Right"); } |
29 |
|
|
function getBorderTopWidth() { return getBorderWidth("Top"); } |
30 |
|
|
function getBorderBottomWidth() { return getBorderWidth("Bottom"); } |
31 |
|
|
/* end border width getters */ |
32 |
|
|
|
33 |
|
|
/* padding getters */ |
34 |
|
|
function getPadding(sSide) { |
35 |
|
|
var n = parseInt(element.currentStyle["padding" + sSide]); |
36 |
|
|
return n || 0; |
37 |
|
|
} |
38 |
|
|
|
39 |
|
|
function getPaddingLeft() { return getPadding("Left"); } |
40 |
|
|
function getPaddingRight() { return getPadding("Right"); } |
41 |
|
|
function getPaddingTop() { return getPadding("Top"); } |
42 |
|
|
function getPaddingBottom() { return getPadding("Bottom"); } |
43 |
|
|
/* end padding getters */ |
44 |
|
|
|
45 |
|
|
function getBoxSizing() { |
46 |
|
|
var s = element.style; |
47 |
|
|
var cs = element.currentStyle |
48 |
|
|
|
49 |
|
|
if (typeof s.boxSizing != "undefined" && s.boxSizing != "") |
50 |
|
|
return s.boxSizing; |
51 |
|
|
if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "") |
52 |
|
|
return s["box-sizing"]; |
53 |
|
|
if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "") |
54 |
|
|
return cs.boxSizing; |
55 |
|
|
if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "") |
56 |
|
|
return cs["box-sizing"]; |
57 |
|
|
return getDocumentBoxSizing(); |
58 |
|
|
} |
59 |
|
|
|
60 |
|
|
function getDocumentBoxSizing() { |
61 |
|
|
if (doc.compatMode == null || doc.compatMode == "BackCompat") |
62 |
|
|
return "border-box"; |
63 |
|
|
return "content-box" |
64 |
|
|
} |
65 |
|
|
|
66 |
|
|
/* width and height setters */ |
67 |
|
|
function setBorderBoxWidth(n) { |
68 |
|
|
element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() - |
69 |
|
|
getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px"; |
70 |
|
|
} |
71 |
|
|
|
72 |
|
|
function setBorderBoxHeight(n) { |
73 |
|
|
element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() - |
74 |
|
|
getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px"; |
75 |
|
|
} |
76 |
|
|
|
77 |
|
|
function setContentBoxWidth(n) { |
78 |
|
|
element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() + |
79 |
|
|
getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px"; |
80 |
|
|
} |
81 |
|
|
|
82 |
|
|
function setContentBoxHeight(n) { |
83 |
|
|
element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() + |
84 |
|
|
getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px"; |
85 |
|
|
} |
86 |
|
|
/* end width and height setters */ |
87 |
|
|
|
88 |
|
|
function updateBorderBoxWidth() { |
89 |
|
|
element.runtimeStyle.width = ""; |
90 |
|
|
if (getDocumentBoxSizing() == getBoxSizing()) |
91 |
|
|
return; |
92 |
|
|
var csw = element.currentStyle.width; |
93 |
|
|
if (csw != "auto" && csw.indexOf("px") != -1) { |
94 |
|
|
if (getBoxSizing() == "border-box") |
95 |
|
|
setBorderBoxWidth(parseInt(csw)); |
96 |
|
|
else |
97 |
|
|
setContentBoxWidth(parseInt(csw)); |
98 |
|
|
} |
99 |
|
|
} |
100 |
|
|
|
101 |
|
|
function updateBorderBoxHeight() { |
102 |
|
|
element.runtimeStyle.height = ""; |
103 |
|
|
if (getDocumentBoxSizing() == getBoxSizing()) |
104 |
|
|
return; |
105 |
|
|
var csh = element.currentStyle.height; |
106 |
|
|
if (csh != "auto" && csh.indexOf("px") != -1) { |
107 |
|
|
if (getBoxSizing() == "border-box") |
108 |
|
|
setBorderBoxHeight(parseInt(csh)); |
109 |
|
|
else |
110 |
|
|
setContentBoxHeight(parseInt(csh)); |
111 |
|
|
} |
112 |
|
|
} |
113 |
|
|
|
114 |
|
|
function checkPropertyChange() { |
115 |
|
|
var pn = event.propertyName; |
116 |
|
|
var undef; |
117 |
|
|
|
118 |
|
|
if (pn == "style.boxSizing" && element.style.boxSizing == "") { |
119 |
|
|
element.style.removeAttribute("boxSizing"); |
120 |
|
|
element.runtimeStyle.boxSizing = undef; |
121 |
|
|
} |
122 |
|
|
|
123 |
|
|
|
124 |
|
|
switch (pn) { |
125 |
|
|
case "style.width": |
126 |
|
|
case "style.borderLeftWidth": |
127 |
|
|
case "style.borderLeftStyle": |
128 |
|
|
case "style.borderRightWidth": |
129 |
|
|
case "style.borderRightStyle": |
130 |
|
|
case "style.paddingLeft": |
131 |
|
|
case "style.paddingRight": |
132 |
|
|
updateBorderBoxWidth(); |
133 |
|
|
break; |
134 |
|
|
|
135 |
|
|
case "style.height": |
136 |
|
|
case "style.borderTopWidth": |
137 |
|
|
case "style.borderTopStyle": |
138 |
|
|
case "style.borderBottomWidth": |
139 |
|
|
case "style.borderBottomStyle": |
140 |
|
|
case "style.paddingTop": |
141 |
|
|
case "style.paddingBottom": |
142 |
|
|
updateBorderBoxHeight(); |
143 |
|
|
break; |
144 |
|
|
|
145 |
|
|
case "className": |
146 |
|
|
case "style.boxSizing": |
147 |
|
|
updateBorderBoxWidth(); |
148 |
|
|
updateBorderBoxHeight(); |
149 |
|
|
break; |
150 |
|
|
} |
151 |
|
|
} |
152 |
|
|
|
153 |
|
|
init(); |
154 |
|
|
|
155 |
|
|
//]]> |
156 |
|
|
</script> |
157 |
|
|
</component> |