add extjs 6.0.1 sources

[extjs.git] / extjs / packages / core / src / fx / runner / Css.js

/**\r
 * @private\r
 */\r
Ext.define('Ext.fx.runner.Css', {\r
    extend: 'Ext.Evented',\r
\r
    requires: [\r
        'Ext.fx.Animation'\r
    ],\r
\r
    prefixedProperties: {\r
        'transform'                 : true,\r
        'transform-origin'          : true,\r
        'perspective'               : true,\r
        'transform-style'           : true,\r
        'transition'                : true,\r
        'transition-property'       : true,\r
        'transition-duration'       : true,\r
        'transition-timing-function': true,\r
        'transition-delay'          : true,\r
        'animation'                 : true,\r
        'animation-name'            : true,\r
        'animation-duration'        : true,\r
        'animation-iteration-count' : true,\r
        'animation-direction'       : true,\r
        'animation-timing-function' : true,\r
        'animation-delay'           : true\r
    },\r
\r
    lengthProperties: {\r
        'top'                : true,\r
        'right'              : true,\r
        'bottom'             : true,\r
        'left'               : true,\r
        'width'              : true,\r
        'height'             : true,\r
        'max-height'         : true,\r
        'max-width'          : true,\r
        'min-height'         : true,\r
        'min-width'          : true,\r
        'margin-bottom'      : true,\r
        'margin-left'        : true,\r
        'margin-right'       : true,\r
        'margin-top'         : true,\r
        'padding-bottom'     : true,\r
        'padding-left'       : true,\r
        'padding-right'      : true,\r
        'padding-top'        : true,\r
        'border-bottom-width': true,\r
        'border-left-width'  : true,\r
        'border-right-width' : true,\r
        'border-spacing'     : true,\r
        'border-top-width'   : true,\r
        'border-width'       : true,\r
        'outline-width'      : true,\r
        'letter-spacing'     : true,\r
        'line-height'        : true,\r
        'text-indent'        : true,\r
        'word-spacing'       : true,\r
        'font-size'          : true,\r
        'translate'          : true,\r
        'translateX'         : true,\r
        'translateY'         : true,\r
        'translateZ'         : true,\r
        'translate3d'        : true\r
    },\r
\r
    durationProperties: {\r
        'transition-duration'   : true,\r
        'transition-delay'      : true,\r
        'animation-duration'    : true,\r
        'animation-delay'       : true\r
    },\r
\r
    angleProperties: {\r
        rotate     : true,\r
        rotateX    : true,\r
        rotateY    : true,\r
        rotateZ    : true,\r
        skew       : true,\r
        skewX      : true,\r
        skewY      : true\r
    },\r
\r
    lengthUnitRegex: /([a-z%]*)$/,\r
\r
    DEFAULT_UNIT_LENGTH: 'px',\r
\r
    DEFAULT_UNIT_ANGLE: 'deg',\r
\r
    DEFAULT_UNIT_DURATION: 'ms',\r
\r
    formattedNameCache: {},\r
\r
    transformMethods3d: [\r
        'translateX', \r
        'translateY', \r
        'translateZ', \r
        'rotate', \r
        'rotateX', \r
        'rotateY', \r
        'rotateZ', \r
        'skewX', \r
        'skewY', \r
        'scaleX', \r
        'scaleY', \r
        'scaleZ'\r
    ],\r
\r
    transformMethodsNo3d: [\r
        'translateX', \r
        'translateY', \r
        'rotate', \r
        'skewX', \r
        'skewY', \r
        'scaleX', \r
        'scaleY'\r
    ],\r
\r
    constructor: function() {\r
        var me = this;\r
\r
        me.transformMethods = Ext.feature.has.Css3dTransforms ? me.transformMethods3d : me.transformMethodsNo3d;\r
        me.vendorPrefix = Ext.browser.getStyleDashPrefix();\r
        me.ruleStylesCache = {};\r
\r
        me.callParent();\r
    },\r
\r
    getStyleSheet: function() {\r
        var styleSheet = this.styleSheet,\r
            styleElement, styleSheets;\r
\r
        if (!styleSheet) {\r
            styleElement = document.createElement('style');\r
            styleElement.type = 'text/css';\r
\r
            (document.head || document.getElementsByTagName('head')[0]).appendChild(styleElement);\r
\r
            styleSheets = document.styleSheets;\r
\r
            this.styleSheet = styleSheet = styleSheets[styleSheets.length - 1];\r
        }\r
\r
        return styleSheet;\r
    },\r
\r
    applyRules: function(selectors) {\r
        var styleSheet = this.getStyleSheet(),\r
            ruleStylesCache = this.ruleStylesCache,\r
            rules = styleSheet.cssRules,\r
            selector, properties, ruleStyle,\r
            ruleStyleCache, rulesLength, name, value;\r
\r
        for (selector in selectors) {\r
            properties = selectors[selector];\r
\r
            ruleStyle = ruleStylesCache[selector];\r
\r
            if (ruleStyle === undefined) {\r
                rulesLength = rules.length;\r
                styleSheet.insertRule(selector + '{}', rulesLength);\r
                ruleStyle = ruleStylesCache[selector] = rules.item(rulesLength).style;\r
            }\r
\r
            ruleStyleCache = ruleStyle.$cache;\r
\r
            if (!ruleStyleCache) {\r
                ruleStyleCache = ruleStyle.$cache = {};\r
            }\r
\r
            for (name in properties) {\r
                value = this.formatValue(properties[name], name);\r
                name = this.formatName(name);\r
\r
                if (ruleStyleCache[name] !== value) {\r
                    ruleStyleCache[name] = value;\r
\r
                    if (value === null) {\r
                        ruleStyle.removeProperty(name);\r
                    }\r
                    else {\r
                        ruleStyle.setProperty(name, value, 'important');\r
                    }\r
                }\r
            }\r
        }\r
\r
        return this;\r
    },\r
\r
    applyStyles: function(styles) {\r
        var id, element, elementStyle, properties, name, value;\r
\r
        for (id in styles) {\r
            if (styles.hasOwnProperty(id)) {\r
                element = document.getElementById(id);\r
\r
                if (!element) {\r
                    continue;\r
                }\r
\r
                elementStyle = element.style;\r
\r
                properties = styles[id];\r
                for (name in properties) {\r
                    if (properties.hasOwnProperty(name)) {\r
                        value = this.formatValue(properties[name], name);\r
                        name = this.formatName(name);\r
\r
                        if (value === null) {\r
                            elementStyle.removeProperty(name);\r
                        }\r
                        else {\r
                            elementStyle.setProperty(name, value, 'important');\r
                        }\r
                    }\r
                }\r
            }\r
        }\r
\r
        return this;\r
    },\r
\r
    formatName: function(name) {\r
        var cache = this.formattedNameCache,\r
            formattedName = cache[name];\r
\r
        if (!formattedName) {\r
            if ((Ext.os.is.Tizen || !Ext.feature.has.CssTransformNoPrefix) && this.prefixedProperties[name]) {\r
                formattedName = this.vendorPrefix + name;\r
            }\r
            else {\r
                formattedName = name;\r
            }\r
\r
            cache[name] = formattedName;\r
        }\r
\r
        return formattedName;\r
    },\r
\r
    formatValue: function(value, name) {\r
        var type = typeof value,\r
            lengthUnit = this.DEFAULT_UNIT_LENGTH,\r
            transformMethods,\r
            method, i, ln,\r
            transformValues, values, unit;\r
\r
        if (value === null) {\r
            return '';\r
        }\r
\r
        if (type == 'string') {\r
            if (this.lengthProperties[name]) {\r
                unit = value.match(this.lengthUnitRegex)[1];\r
\r
                if (unit.length > 0) {\r
                    //<debug>\r
                    if (unit !== lengthUnit) {\r
                        Ext.Logger.error("Length unit: '" + unit + "' in value: '" + value + "' of property: '" + name + "' is not " +\r
                            "valid for animation. Only 'px' is allowed");\r
                    }\r
                    //</debug>\r
                }\r
                else {\r
                    return value + lengthUnit;\r
                }\r
            }\r
\r
            return value;\r
        }\r
        else if (type == 'number') {\r
            if (value == 0) {\r
                return '0';\r
            }\r
\r
            if (this.lengthProperties[name]) {\r
                return value + lengthUnit;\r
            }\r
\r
            if (this.angleProperties[name]) {\r
                return value + this.DEFAULT_UNIT_ANGLE;\r
            }\r
\r
            if (this.durationProperties[name]) {\r
                return value + this.DEFAULT_UNIT_DURATION;\r
            }\r
        }\r
        else if (name === 'transform') {\r
            transformMethods = this.transformMethods;\r
            transformValues = [];\r
\r
            for (i = 0,ln = transformMethods.length; i < ln; i++) {\r
                method = transformMethods[i];\r
\r
                transformValues.push(method + '(' + this.formatValue(value[method], method) + ')');\r
            }\r
\r
            return transformValues.join(' ');\r
        }\r
        else if (Ext.isArray(value)) {\r
            values = [];\r
\r
            for (i = 0,ln = value.length; i < ln; i++) {\r
                values.push(this.formatValue(value[i], name));\r
            }\r
\r
            return (values.length > 0) ? values.join(', ') : 'none';\r
        }\r
\r
        return value;\r
    }\r
});\r