← Back to branch summary

~landscape/lazr-js/production

« back to all changes in this revision

Viewing changes to src-js/lazrjs/yui/dom/dom-style-ie.js

  • Committer: Sidnei da Silva
  • Date: 2010-09-18 14:54:13 UTC
  • mfrom: (166.11.12 toolchain)
  • Revision ID: sidnei.da.silva@canonical.com-20100918145413-8scojue3rodcm0f4
- Merge from lazr-js trunk

Show diffs side-by-side

added added

removed removed

Lines of Context:
src-js/lazrjs/yui/dom/dom-style-ie.js
 
1
/*
 
2
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
 
3
Code licensed under the BSD License:
 
4
http://developer.yahoo.com/yui/license.html
 
5
version: 3.2.0
 
6
build: 2676
 
7
*/
 
8
YUI.add('dom-style-ie', function(Y) {
 
9
 
 
10
(function(Y) {
 
11
var HAS_LAYOUT = 'hasLayout',
 
12
    PX = 'px',
 
13
    FILTER = 'filter',
 
14
    FILTERS = 'filters',
 
15
    OPACITY = 'opacity',
 
16
    AUTO = 'auto',
 
17
 
 
18
    BORDER_WIDTH = 'borderWidth',
 
19
    BORDER_TOP_WIDTH = 'borderTopWidth',
 
20
    BORDER_RIGHT_WIDTH = 'borderRightWidth',
 
21
    BORDER_BOTTOM_WIDTH = 'borderBottomWidth',
 
22
    BORDER_LEFT_WIDTH = 'borderLeftWidth',
 
23
    WIDTH = 'width',
 
24
    HEIGHT = 'height',
 
25
    TRANSPARENT = 'transparent',
 
26
    VISIBLE = 'visible',
 
27
    GET_COMPUTED_STYLE = 'getComputedStyle',
 
28
    UNDEFINED = undefined,
 
29
    documentElement = Y.config.doc.documentElement,
 
30
 
 
31
    // TODO: unit-less lineHeight (e.g. 1.22)
 
32
    re_unit = /^(\d[.\d]*)+(em|ex|px|gd|rem|vw|vh|vm|ch|mm|cm|in|pt|pc|deg|rad|ms|s|hz|khz|%){1}?/i,
 
33
 
 
34
    isIE8 = (Y.UA.ie >= 8),
 
35
 
 
36
    _getStyleObj = function(node) {
 
37
        return node.currentStyle || node.style;
 
38
    },
 
39
 
 
40
    ComputedStyle = {
 
41
        CUSTOM_STYLES: {},
 
42
 
 
43
        get: function(el, property) {
 
44
            var value = '',
 
45
                current;
 
46
 
 
47
            if (el) {
 
48
                    current = _getStyleObj(el)[property];
 
49
 
 
50
                if (property === OPACITY && Y.DOM.CUSTOM_STYLES[OPACITY]) {
 
51
                    value = Y.DOM.CUSTOM_STYLES[OPACITY].get(el);        
 
52
                } else if (!current || (current.indexOf && current.indexOf(PX) > -1)) { // no need to convert
 
53
                    value = current;
 
54
                } else if (Y.DOM.IE.COMPUTED[property]) { // use compute function
 
55
                    value = Y.DOM.IE.COMPUTED[property](el, property);
 
56
                } else if (re_unit.test(current)) { // convert to pixel
 
57
                    value = ComputedStyle.getPixel(el, property) + PX;
 
58
                } else {
 
59
                    value = current;
 
60
                }
 
61
            }
 
62
 
 
63
            return value;
 
64
        },
 
65
 
 
66
        sizeOffsets: {
 
67
            width: ['Left', 'Right'],
 
68
            height: ['Top', 'Bottom'],
 
69
            top: ['Top'],
 
70
            bottom: ['Bottom']
 
71
        },
 
72
 
 
73
        getOffset: function(el, prop) {
 
74
            var current = _getStyleObj(el)[prop],                     // value of "width", "top", etc.
 
75
                capped = prop.charAt(0).toUpperCase() + prop.substr(1), // "Width", "Top", etc.
 
76
                offset = 'offset' + capped,                             // "offsetWidth", "offsetTop", etc.
 
77
                pixel = 'pixel' + capped,                               // "pixelWidth", "pixelTop", etc.
 
78
                sizeOffsets = ComputedStyle.sizeOffsets[prop], 
 
79
                mode = el.ownerDocument.compatMode,
 
80
                value = '';
 
81
 
 
82
            // IE pixelWidth incorrect for percent
 
83
            // manually compute by subtracting padding and border from offset size
 
84
            // NOTE: clientWidth/Height (size minus border) is 0 when current === AUTO so offsetHeight is used
 
85
            // reverting to auto from auto causes position stacking issues (old impl)
 
86
            if (current === AUTO || current.indexOf('%') > -1) {
 
87
                value = el['offset' + capped];
 
88
 
 
89
                if (mode !== 'BackCompat') {
 
90
                    if (sizeOffsets[0]) {
 
91
                        value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[0]);
 
92
                        value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[0] + 'Width', 1);
 
93
                    }
 
94
 
 
95
                    if (sizeOffsets[1]) {
 
96
                        value -= ComputedStyle.getPixel(el, 'padding' + sizeOffsets[1]);
 
97
                        value -= ComputedStyle.getBorderWidth(el, 'border' + sizeOffsets[1] + 'Width', 1);
 
98
                    }
 
99
                }
 
100
 
 
101
            } else { // use style.pixelWidth, etc. to convert to pixels
 
102
                // need to map style.width to currentStyle (no currentStyle.pixelWidth)
 
103
                if (!el.style[pixel] && !el.style[prop]) {
 
104
                    el.style[prop] = current;
 
105
                }
 
106
                value = el.style[pixel];
 
107
                
 
108
            }
 
109
            return value + PX;
 
110
        },
 
111
 
 
112
        borderMap: {
 
113
            thin: (isIE8) ? '1px' : '2px',
 
114
            medium: (isIE8) ? '3px': '4px', 
 
115
            thick: (isIE8) ? '5px' : '6px'
 
116
        },
 
117
 
 
118
        getBorderWidth: function(el, property, omitUnit) {
 
119
            var unit = omitUnit ? '' : PX,
 
120
                current = el.currentStyle[property];
 
121
 
 
122
            if (current.indexOf(PX) < 0) { // look up keywords if a border exists
 
123
                if (ComputedStyle.borderMap[current] &&
 
124
                        el.currentStyle.borderStyle !== 'none') {
 
125
                    current = ComputedStyle.borderMap[current];
 
126
                } else { // otherwise no border (default is "medium")
 
127
                    current = 0;
 
128
                }
 
129
            }
 
130
            return (omitUnit) ? parseFloat(current) : current;
 
131
        },
 
132
 
 
133
        getPixel: function(node, att) {
 
134
            // use pixelRight to convert to px
 
135
            var val = null,
 
136
                style = _getStyleObj(node),
 
137
                styleRight = style.right,
 
138
                current = style[att];
 
139
 
 
140
            node.style.right = current;
 
141
            val = node.style.pixelRight;
 
142
            node.style.right = styleRight; // revert
 
143
 
 
144
            return val;
 
145
        },
 
146
 
 
147
        getMargin: function(node, att) {
 
148
            var val,
 
149
                style = _getStyleObj(node);
 
150
 
 
151
            if (style[att] == AUTO) {
 
152
                val = 0;
 
153
            } else {
 
154
                val = ComputedStyle.getPixel(node, att);
 
155
            }
 
156
            return val + PX;
 
157
        },
 
158
 
 
159
        getVisibility: function(node, att) {
 
160
            var current;
 
161
            while ( (current = node.currentStyle) && current[att] == 'inherit') { // NOTE: assignment in test
 
162
                node = node.parentNode;
 
163
            }
 
164
            return (current) ? current[att] : VISIBLE;
 
165
        },
 
166
 
 
167
        getColor: function(node, att) {
 
168
            var current = _getStyleObj(node)[att];
 
169
 
 
170
            if (!current || current === TRANSPARENT) {
 
171
                Y.DOM.elementByAxis(node, 'parentNode', null, function(parent) {
 
172
                    current = _getStyleObj(parent)[att];
 
173
                    if (current && current !== TRANSPARENT) {
 
174
                        node = parent;
 
175
                        return true;
 
176
                    }
 
177
                });
 
178
            }
 
179
 
 
180
            return Y.Color.toRGB(current);
 
181
        },
 
182
 
 
183
        getBorderColor: function(node, att) {
 
184
            var current = _getStyleObj(node),
 
185
                val = current[att] || current.color;
 
186
            return Y.Color.toRGB(Y.Color.toHex(val));
 
187
        }
 
188
    },
 
189
 
 
190
    //fontSize: getPixelFont,
 
191
    IEComputed = {};
 
192
 
 
193
// use alpha filter for IE opacity
 
194
if (Y.UA.ie && Y.UA.ie < 9) {
 
195
    Y.DOM.CUSTOM_STYLES[OPACITY] = {
 
196
        get: function(node) {
 
197
            var val = 100;
 
198
            try { // will error if no DXImageTransform
 
199
                val = node[FILTERS]['DXImageTransform.Microsoft.Alpha'][OPACITY];
 
200
 
 
201
            } catch(e) {
 
202
                try { // make sure its in the document
 
203
                    val = node[FILTERS]('alpha')[OPACITY];
 
204
                } catch(err) {
 
205
                }
 
206
            }
 
207
            return val / 100;
 
208
        },
 
209
 
 
210
        set: function(node, val, style) {
 
211
            var current,
 
212
                styleObj;
 
213
 
 
214
            if (val === '') { // normalize inline style behavior
 
215
                styleObj = _getStyleObj(node);
 
216
                current = (OPACITY in styleObj) ? styleObj[OPACITY] : 1; // revert to original opacity
 
217
                val = current;
 
218
            }
 
219
 
 
220
            if (typeof style[FILTER] == 'string') { // in case not appended
 
221
                style[FILTER] = 'alpha(' + OPACITY + '=' + val * 100 + ')';
 
222
                
 
223
                if (!node.currentStyle || !node.currentStyle[HAS_LAYOUT]) {
 
224
                    style.zoom = 1; // needs layout 
 
225
                }
 
226
            }
 
227
        }
 
228
    };
 
229
}
 
230
 
 
231
try {
 
232
    Y.config.doc.createElement('div').style.height = '-1px';
 
233
} catch(e) { // IE throws error on invalid style set; trap common cases
 
234
    Y.DOM.CUSTOM_STYLES.height = {
 
235
        set: function(node, val, style) {
 
236
            var floatVal = parseFloat(val);
 
237
            if (isNaN(floatVal) || floatVal >= 0) {
 
238
                style.height = val;
 
239
            } else {
 
240
            }
 
241
        }
 
242
    };
 
243
 
 
244
    Y.DOM.CUSTOM_STYLES.width = {
 
245
        set: function(node, val, style) {
 
246
            var floatVal = parseFloat(val);
 
247
            if (isNaN(floatVal) || floatVal >= 0) {
 
248
                style.width = val;
 
249
            } else {
 
250
            }
 
251
        }
 
252
    };
 
253
}
 
254
 
 
255
// TODO: top, right, bottom, left
 
256
IEComputed[WIDTH] = IEComputed[HEIGHT] = ComputedStyle.getOffset;
 
257
 
 
258
IEComputed.color = IEComputed.backgroundColor = ComputedStyle.getColor;
 
259
 
 
260
IEComputed[BORDER_WIDTH] = IEComputed[BORDER_TOP_WIDTH] = IEComputed[BORDER_RIGHT_WIDTH] =
 
261
        IEComputed[BORDER_BOTTOM_WIDTH] = IEComputed[BORDER_LEFT_WIDTH] =
 
262
        ComputedStyle.getBorderWidth;
 
263
 
 
264
IEComputed.marginTop = IEComputed.marginRight = IEComputed.marginBottom =
 
265
        IEComputed.marginLeft = ComputedStyle.getMargin;
 
266
 
 
267
IEComputed.visibility = ComputedStyle.getVisibility;
 
268
IEComputed.borderColor = IEComputed.borderTopColor =
 
269
        IEComputed.borderRightColor = IEComputed.borderBottomColor =
 
270
        IEComputed.borderLeftColor = ComputedStyle.getBorderColor;
 
271
 
 
272
if (!Y.config.win[GET_COMPUTED_STYLE]) {
 
273
    Y.DOM[GET_COMPUTED_STYLE] = ComputedStyle.get; 
 
274
}
 
275
 
 
276
Y.namespace('DOM.IE');
 
277
Y.DOM.IE.COMPUTED = IEComputed;
 
278
Y.DOM.IE.ComputedStyle = ComputedStyle;
 
279
 
 
280
})(Y);
 
281
 
 
282
 
 
283
}, '3.2.0' ,{requires:['dom-style']});