@@ -9,38 +9,78 @@ ALMCSS.domUtils = function() {
99
1010 var assert = ALMCSS . debug . assert ;
1111
12-
13-
1412 // Computed Height and Widths
1513 // --------------------------
14+ //
15+ // The `getComputedWidth` and `getComputedHeight` functions of this module
16+ // return the computed value for the `width` and `height` respectively of
17+ // a given element. There are several reasons for using these functions
18+ // instead of simple calling directly to the `getComputedStyle` function
19+ // of the DOM from those places in the code where theses values are needed
20+ // (apart from brevity and legibility of the code):
21+ //
22+ // - First, `getComputedStyle` returns a string that contains both the
23+ // value and the unit. So this functions extract the part of the string
24+ // that is a number, which is what they return, ignoring the unit. Note
25+ // that __they are assuming that it is always pixels__. If it were not
26+ // so, there have been to call to do an extra step to convert it to the
27+ // correct numeric value in pixels for a given length (or percentage).
28+ // - More important, these functions take into consideration not only the
29+ // _width_ of the element, but also its related horizontal _margins,
30+ // paddings and borders_ (the specified element is supposed to be part
31+ // of the contents of a slot).
32+
33+
34+ var getComputedStyleOf = function ( element , property ) {
35+ var result , stringValue ;
36+ stringValue = getComputedStyle ( element , null ) . getPropertyValue ( property ) ;
37+ result = parseInt ( stringValue . match ( / \d + / ) , 10 ) ;
38+ assert ( ! isNaN ( result ) , "The value of property '" + property + "' is not " +
39+ "something can be converted to a number (pixels was expected): " + stringValue ) ;
40+ return result ;
41+ } ;
1642
17- // This function simply returns the computed value of the `width` property
18- // of CSS for the specified HTML element. The reason for using a function
19- // for that instead of simply calling directly to the `getComputedStyle`
20- // function of the DOM from those places in the code where this value is
21- // needed is not (only) for brevity, but because `getComputedStyle` returns
22- // a string that contains both the value and the unit (we are assuming that
23- // the unit is always pixels). So this function performs the additional
24- // task of extracting the part of the string which is a number and converting
25- // it to a numeric value, which is what it returns.
43+ // Returns the computed width of an element, using not only the value
44+ // of its _width_ property but also its margins, paddings and borders.
2645
2746 var getComputedWidth = function ( element ) {
28- var result ;
29- result = getComputedStyle ( element , null ) . getPropertyValue ( 'width' ) ;
30- result = parseInt ( result . match ( / \d + / ) , 10 ) ;
31- assert ( ! isNaN ( result ) ) ;
32- return result ;
47+ var width , marginLeft , marginRight , paddingLeft , paddingRight ,
48+ borderLeft , borderRight ;
49+
50+ width = getComputedStyleOf ( element , 'width' ) ;
51+ marginLeft = getComputedStyleOf ( element , 'margin-left' ) ;
52+ marginRight = getComputedStyleOf ( element , 'margin-right' ) ;
53+ paddingLeft = getComputedStyleOf ( element , 'padding-left' ) ;
54+ paddingRight = getComputedStyleOf ( element , 'padding-right' ) ;
55+ borderLeft = getComputedStyleOf ( element , 'border-left-width' ) ;
56+ borderRight = getComputedStyleOf ( element , 'border-right-width' ) ;
57+ return width + marginLeft + marginRight +
58+ paddingLeft + paddingRight + borderLeft + borderRight ;
3359 } ;
3460
3561 // The same function than above, but for the computed height of a given
3662 // HTML element.
3763
3864 var getComputedHeight = function ( element ) {
39- var result ;
40- result = getComputedStyle ( element , null ) . getPropertyValue ( 'height' ) ;
41- result = parseInt ( result . match ( / \d + / ) , 10 ) ;
42- assert ( ! isNaN ( result ) ) ;
43- return result ;
65+ var height , marginTop , marginBottom , paddingTop , paddingBottom ,
66+ borderTop , borderBottom ;
67+
68+ element . style . height = 'auto' ;
69+
70+ //element.style.borderTopWidth = '1px';
71+ //element.style.borderBottomWidth = '1px';
72+ height = getComputedStyleOf ( element , 'height' ) ;
73+ return height ;
74+ /*
75+ marginTop = getComputedStyleOf(element, 'margin-top');
76+ marginBottom = getComputedStyleOf(element, 'margin-bottom');
77+ paddingTop = getComputedStyleOf(element, 'padding-top');
78+ paddingBottom = getComputedStyleOf(element, 'padding-bottom');
79+ borderTop = getComputedStyleOf(element, 'border-top-width');
80+ borderBottom = getComputedStyleOf(element, 'border-bottom-width');
81+ return height + marginTop + marginBottom +
82+ paddingTop + paddingBottom + borderTop + borderBottom;
83+ */
4484 } ;
4585
4686
@@ -70,6 +110,15 @@ ALMCSS.domUtils = function() {
70110 // ------------------------------------------------
71111
72112 var computeIntrinsicPreferredWidth = function ( element ) {
113+ var floatValue , intrinsicPreferredWidth ;
114+ floatValue = getComputedStyle ( element , null ) . getPropertyValue ( 'float' ) ;
115+ element . style . cssFloat = 'left' ;
116+ intrinsicPreferredWidth = getComputedWidth ( element ) ;
117+ element . style . cssFloat = floatValue ;
118+ return intrinsicPreferredWidth ;
119+ } ;
120+
121+ var computeIntrinsicPreferredWidth2 = function ( element ) {
73122 var intrinsicPreferredWidth ;
74123 element . style . cssFloat = 'left' ;
75124 intrinsicPreferredWidth = getComputedWidth ( element ) ;
@@ -152,6 +201,7 @@ ALMCSS.domUtils = function() {
152201 // ----------------------------------------
153202
154203 return {
204+ getComputedStyleOf : getComputedStyleOf ,
155205 getComputedWidth : getComputedWidth ,
156206 getComputedHeight : getComputedHeight ,
157207 lengthToPixels : lengthToPixels ,
0 commit comments