# Yahoo! UI Library

### dom 3.3.0

Yahoo! UI Library > dom > dom-style.js (source view)
Search:
Filters Show Private Show Protected Show Deprecated

    (function(Y) {
    /**
     * Add style management functionality to DOM.
     * @module dom
     * @submodule dom-style
     * @for DOM
     */

    var DOCUMENT_ELEMENT = 'documentElement',
        DEFAULT_VIEW = 'defaultView',
        OWNER_DOCUMENT = 'ownerDocument',
        STYLE = 'style',
        FLOAT = 'float',
        CSS_FLOAT = 'cssFloat',
        STYLE_FLOAT = 'styleFloat',
        TRANSPARENT = 'transparent',
        GET_COMPUTED_STYLE = 'getComputedStyle',
        GET_BOUNDING_CLIENT_RECT = 'getBoundingClientRect',

        WINDOW = Y.config.win,
        DOCUMENT = Y.config.doc,
        UNDEFINED = undefined,

        Y_DOM = Y.DOM,

        TRANSFORM = 'transform',
        VENDOR_TRANSFORM = [
            'WebkitTransform',
            'MozTransform',
            'OTransform'
        ],

        re_color = /color$/i,
        re_unit = /width|height|top|left|right|bottom|margin|padding/i;

    Y.Array.each(VENDOR_TRANSFORM, function(val) {
        if (val in DOCUMENT[DOCUMENT_ELEMENT].style) {
            TRANSFORM = val;
        }
    });

    Y.mix(Y_DOM, {
        DEFAULT_UNIT: 'px',

        CUSTOM_STYLES: {
        },

        /**
         * Sets a style property for a given element.
         * @method setStyle
         * @param {HTMLElement} An HTMLElement to apply the style to.
         * @param {String} att The style property to set.
         * @param {String|Number} val The value.
         */
        setStyle: function(node, att, val, style) {
            style = style || node.style;
            var CUSTOM_STYLES = Y_DOM.CUSTOM_STYLES;

            if (style) {
                if (val === null || val === '') { // normalize unsetting
                    val = '';
                } else if (!isNaN(new Number(val)) && re_unit.test(att)) { // number values may need a unit
                    val += Y_DOM.DEFAULT_UNIT;
                }

                if (att in CUSTOM_STYLES) {
                    if (CUSTOM_STYLES[att].set) {
                        CUSTOM_STYLES[att].set(node, val, style);
                        return; // NOTE: return
                    } else if (typeof CUSTOM_STYLES[att] === 'string') {
                        att = CUSTOM_STYLES[att];
                    }
                } else if (att === '') { // unset inline styles
                    att = 'cssText';
                    val = '';
                }
                style[att] = val;
            }
        },

        /**
         * Returns the current style value for the given property.
         * @method getStyle
         * @param {HTMLElement} An HTMLElement to get the style from.
         * @param {String} att The style property to get.
         */
        getStyle: function(node, att, style) {
            style = style || node.style;
            var CUSTOM_STYLES = Y_DOM.CUSTOM_STYLES,
                val = '';

            if (style) {
                if (att in CUSTOM_STYLES) {
                    if (CUSTOM_STYLES[att].get) {
                        return CUSTOM_STYLES[att].get(node, att, style); // NOTE: return
                    } else if (typeof CUSTOM_STYLES[att] === 'string') {
                        att = CUSTOM_STYLES[att];
                    }
                }
                val = style[att];
                if (val === '') { // TODO: is empty string sufficient?
                    val = Y_DOM[GET_COMPUTED_STYLE](node, att);
                }
            }

            return val;
        },

        /**
         * Sets multiple style properties.
         * @method setStyles
         * @param {HTMLElement} node An HTMLElement to apply the styles to.
         * @param {Object} hash An object literal of property:value pairs.
         */
        setStyles: function(node, hash) {
            var style = node.style;
            Y.each(hash, function(v, n) {
                Y_DOM.setStyle(node, n, v, style);
            }, Y_DOM);
        },

        /**
         * Returns the computed style for the given node.
         * @method getComputedStyle
         * @param {HTMLElement} An HTMLElement to get the style from.
         * @param {String} att The style property to get.
         * @return {String} The computed value of the style property.
         */
        getComputedStyle: function(node, att) {
            var val = '',
                doc = node[OWNER_DOCUMENT];

            if (node[STYLE] && doc[DEFAULT_VIEW] && doc[DEFAULT_VIEW][GET_COMPUTED_STYLE]) {
                val = doc[DEFAULT_VIEW][GET_COMPUTED_STYLE](node, null)[att];
            }
            return val;
        }
    });

    // normalize reserved word float alternatives ("cssFloat" or "styleFloat")
    if (DOCUMENT[DOCUMENT_ELEMENT][STYLE][CSS_FLOAT] !== UNDEFINED) {
        Y_DOM.CUSTOM_STYLES[FLOAT] = CSS_FLOAT;
    } else if (DOCUMENT[DOCUMENT_ELEMENT][STYLE][STYLE_FLOAT] !== UNDEFINED) {
        Y_DOM.CUSTOM_STYLES[FLOAT] = STYLE_FLOAT;
    }

    // fix opera computedStyle default color unit (convert to rgb)
    if (Y.UA.opera) {
        Y_DOM[GET_COMPUTED_STYLE] = function(node, att) {
            var view = node[OWNER_DOCUMENT][DEFAULT_VIEW],
                val = view[GET_COMPUTED_STYLE](node, '')[att];

            if (re_color.test(att)) {
                val = Y.Color.toRGB(val);
            }

            return val;
        };

    }

    // safari converts transparent to rgba(), others use "transparent"
    if (Y.UA.webkit) {
        Y_DOM[GET_COMPUTED_STYLE] = function(node, att) {
            var view = node[OWNER_DOCUMENT][DEFAULT_VIEW],
                val = view[GET_COMPUTED_STYLE](node, '')[att];

            if (val === 'rgba(0, 0, 0, 0)') {
                val = TRANSPARENT;
            }

            return val;
        };

    }

    Y.DOM._getAttrOffset = function(node, attr) {
        var val = Y.DOM[GET_COMPUTED_STYLE](node, attr),
            offsetParent = node.offsetParent,
            position,
            parentOffset,
            offset;

        if (val === 'auto') {
            position = Y.DOM.getStyle(node, 'position');
            if (position === 'static' || position === 'relative') {
                val = 0;
            } else if (offsetParent && offsetParent[GET_BOUNDING_CLIENT_RECT]) {
                parentOffset = offsetParent[GET_BOUNDING_CLIENT_RECT]()[attr];
                offset = node[GET_BOUNDING_CLIENT_RECT]()[attr];
                if (attr === 'left' || attr === 'top') {
                    val = offset - parentOffset;
                } else {
                    val = parentOffset - node[GET_BOUNDING_CLIENT_RECT]()[attr];
                }
            }
        }

        return val;
    };

    Y.DOM._getOffset = function(node) {
        var pos,
            xy = null;

        if (node) {
            pos = Y_DOM.getStyle(node, 'position');
            xy = [
                parseInt(Y_DOM[GET_COMPUTED_STYLE](node, 'left'), 10),
                parseInt(Y_DOM[GET_COMPUTED_STYLE](node, 'top'), 10)
            ];

            if ( isNaN(xy[0]) ) { // in case of 'auto'
                xy[0] = parseInt(Y_DOM.getStyle(node, 'left'), 10); // try inline
                if ( isNaN(xy[0]) ) { // default to offset value
                    xy[0] = (pos === 'relative') ? 0 : node.offsetLeft || 0;
                }
            }

            if ( isNaN(xy[1]) ) { // in case of 'auto'
                xy[1] = parseInt(Y_DOM.getStyle(node, 'top'), 10); // try inline
                if ( isNaN(xy[1]) ) { // default to offset value
                    xy[1] = (pos === 'relative') ? 0 : node.offsetTop || 0;
                }
            }
        }

        return xy;

    };

    Y_DOM.CUSTOM_STYLES.transform = {
        set: function(node, val, style) {
            style[TRANSFORM] = val;
        },

        get: function(node, style) {
            return Y_DOM[GET_COMPUTED_STYLE](node, TRANSFORM);
        }
    };

    })(Y);

Copyright © 2011 Yahoo! Inc. All rights reserved.