add extjs 6.0.1 sources

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

/**\r
 * @private\r
 */\r
Ext.define('Ext.fx.runner.CssTransition', {\r
    extend: 'Ext.fx.runner.Css',\r
    requires: ['Ext.AnimationQueue'],\r
    alternateClassName: 'Ext.Animator',\r
    singleton: true,\r
\r
    listenersAttached: false,\r
\r
    constructor: function() {\r
        this.runningAnimationsData = {};\r
\r
        return this.callParent(arguments);\r
    },\r
\r
    attachListeners: function() {\r
        this.listenersAttached = true;\r
\r
        Ext.getWin().on('transitionend', 'onTransitionEnd', this);\r
    },\r
\r
    onTransitionEnd: function(e) {\r
        var target = e.target,\r
            id = target.id;\r
\r
        if (id && this.runningAnimationsData.hasOwnProperty(id)) {\r
            this.refreshRunningAnimationsData(Ext.get(target), [e.browserEvent.propertyName]);\r
        }\r
    },\r
\r
    onAnimationEnd: function(element, data, animation, isInterrupted, isReplaced) {\r
        var id = element.getId(),\r
            runningData = this.runningAnimationsData[id],\r
            endRules = {},\r
            endData = {},\r
            runningNameMap, toPropertyNames, i, ln, name;\r
\r
        animation.un('stop', 'onAnimationStop', this);\r
\r
        if (runningData) {\r
            runningNameMap = runningData.nameMap;\r
        }\r
\r
        endRules[id] = endData;\r
\r
        if (data.onBeforeEnd) {\r
            data.onBeforeEnd.call(data.scope || this, element, isInterrupted);\r
        }\r
\r
        animation.fireEvent('animationbeforeend', animation, element, isInterrupted);\r
        this.fireEvent('animationbeforeend', this, animation, element, isInterrupted);\r
\r
        if (isReplaced || (!isInterrupted && !data.preserveEndState)) {\r
            toPropertyNames = data.toPropertyNames;\r
\r
            for (i = 0,ln = toPropertyNames.length; i < ln; i++) {\r
                name = toPropertyNames[i];\r
\r
                if (runningNameMap && !runningNameMap.hasOwnProperty(name)) {\r
                    endData[name] = null;\r
                }\r
            }\r
        }\r
\r
        if (data.after) {\r
            Ext.merge(endData, data.after);\r
        }\r
\r
        this.applyStyles(endRules);\r
\r
        if (data.onEnd) {\r
            data.onEnd.call(data.scope || this, element, isInterrupted);\r
        }\r
\r
        animation.fireEvent('animationend', animation, element, isInterrupted);\r
        this.fireEvent('animationend', this, animation, element, isInterrupted);\r
        Ext.AnimationQueue.stop(Ext.emptyFn, animation);\r
    },\r
\r
    onAllAnimationsEnd: function(element) {\r
        var id = element.getId(),\r
            endRules = {};\r
\r
        delete this.runningAnimationsData[id];\r
\r
        endRules[id] = {\r
            'transition-property': null,\r
            'transition-duration': null,\r
            'transition-timing-function': null,\r
            'transition-delay': null\r
        };\r
\r
        this.applyStyles(endRules);\r
        this.fireEvent('animationallend', this, element);\r
    },\r
\r
    hasRunningAnimations: function(element) {\r
        var id = element.getId(),\r
            runningAnimationsData = this.runningAnimationsData;\r
\r
        return runningAnimationsData.hasOwnProperty(id) && runningAnimationsData[id].sessions.length > 0;\r
    },\r
\r
    refreshRunningAnimationsData: function(element, propertyNames, interrupt, replace) {\r
        var id = element.getId(),\r
            runningAnimationsData = this.runningAnimationsData,\r
            runningData = runningAnimationsData[id];\r
\r
        if (!runningData) {\r
            return;\r
        }\r
\r
        var nameMap = runningData.nameMap,\r
            nameList = runningData.nameList,\r
            sessions = runningData.sessions,\r
            ln, j, subLn, name,\r
            i, session, map, list,\r
            hasCompletedSession = false;\r
\r
        interrupt = Boolean(interrupt);\r
        replace = Boolean(replace);\r
\r
        if (!sessions) {\r
            return this;\r
        }\r
\r
        ln = sessions.length;\r
\r
        if (ln === 0) {\r
            return this;\r
        }\r
\r
        if (replace) {\r
            runningData.nameMap = {};\r
            nameList.length = 0;\r
\r
            for (i = 0; i < ln; i++) {\r
                session = sessions[i];\r
                this.onAnimationEnd(element, session.data, session.animation, interrupt, replace);\r
            }\r
\r
            sessions.length = 0;\r
        }\r
        else {\r
            for (i = 0; i < ln; i++) {\r
                session = sessions[i];\r
                map = session.map;\r
                list = session.list;\r
\r
                for (j = 0,subLn = propertyNames.length; j < subLn; j++) {\r
                    name = propertyNames[j];\r
\r
                    if (map[name]) {\r
                        delete map[name];\r
                        Ext.Array.remove(list, name);\r
                        session.length--;\r
                        if (--nameMap[name] == 0) {\r
                            delete nameMap[name];\r
                            Ext.Array.remove(nameList, name);\r
                        }\r
                    }\r
                }\r
\r
                if (session.length == 0) {\r
                    sessions.splice(i, 1);\r
                    i--;\r
                    ln--;\r
\r
                    hasCompletedSession = true;\r
                    this.onAnimationEnd(element, session.data, session.animation, interrupt);\r
                }\r
            }\r
        }\r
\r
        if (!replace && !interrupt && sessions.length == 0 && hasCompletedSession) {\r
            this.onAllAnimationsEnd(element);\r
        }\r
    },\r
\r
    getRunningData: function(id) {\r
        var runningAnimationsData = this.runningAnimationsData;\r
\r
        if (!runningAnimationsData.hasOwnProperty(id)) {\r
            runningAnimationsData[id] = {\r
                nameMap: {},\r
                nameList: [],\r
                sessions: []\r
            };\r
        }\r
\r
        return runningAnimationsData[id];\r
    },\r
\r
    getTestElement: function() {\r
        var testElement = this.testElement,\r
            iframe, iframeDocument, iframeStyle;\r
\r
        if (!testElement) {\r
            iframe = document.createElement('iframe');\r
            //<debug>\r
            // Set an attribute that tells the test runner to ignore this node when checking\r
            // for dom cleanup\r
            iframe.setAttribute('data-sticky', true);\r
            //</debug>\r
            iframe.setAttribute('tabIndex', -1);\r
            iframeStyle = iframe.style;\r
            iframeStyle.setProperty('visibility', 'hidden', 'important');\r
            iframeStyle.setProperty('width', '0px', 'important');\r
            iframeStyle.setProperty('height', '0px', 'important');\r
            iframeStyle.setProperty('position', 'absolute', 'important');\r
            iframeStyle.setProperty('border', '0px', 'important');\r
            iframeStyle.setProperty('zIndex', '-1000', 'important');\r
\r
            document.body.appendChild(iframe);\r
            iframeDocument = iframe.contentDocument;\r
\r
            iframeDocument.open();\r
            iframeDocument.writeln('</body>');\r
            iframeDocument.close();\r
\r
            this.testElement = testElement = iframeDocument.createElement('div');\r
            testElement.style.setProperty('position', 'absolute', 'important');\r
            iframeDocument.body.appendChild(testElement);\r
            this.testElementComputedStyle = window.getComputedStyle(testElement);\r
        }\r
\r
        return testElement;\r
    },\r
\r
    getCssStyleValue: function(name, value) {\r
        var testElement = this.getTestElement(),\r
            computedStyle = this.testElementComputedStyle,\r
            style = testElement.style;\r
\r
        style.setProperty(name, value);\r
\r
        if (Ext.browser.is.Firefox) {\r
            // We force a repaint of the element in Firefox to make sure the computedStyle to be updated\r
            testElement.offsetHeight;\r
        }\r
\r
        value = computedStyle.getPropertyValue(name);\r
        style.removeProperty(name);\r
\r
        return value;\r
    },\r
\r
    run: function(animations) {\r
        var me = this,\r
            isLengthPropertyMap = me.lengthProperties,\r
            fromData = {},\r
            toData = {},\r
            data = {},\r
            element, elementId, from, to, before,\r
            fromPropertyNames, toPropertyNames,\r
            doApplyTo, message,\r
            runningData, elementData,\r
            i, j, ln, animation, propertiesLength, sessionNameMap,\r
            computedStyle, formattedName, name, toFormattedValue,\r
            computedValue, fromFormattedValue, isLengthProperty,\r
            runningNameMap, runningNameList, runningSessions, runningSession;\r
\r
        if (!me.listenersAttached) {\r
            me.attachListeners();\r
        }\r
\r
        animations = Ext.Array.from(animations);\r
\r
        for (i = 0,ln = animations.length; i < ln; i++) {\r
            animation = animations[i];\r
            animation = Ext.factory(animation, Ext.fx.Animation);\r
            element = animation.getElement();\r
\r
            // Empty function to prevent idleTasks from running while we animate.\r
            Ext.AnimationQueue.start(Ext.emptyFn, animation);\r
\r
            computedStyle = window.getComputedStyle(element.dom);\r
\r
            elementId = element.getId();\r
\r
            data = Ext.merge({}, animation.getData());\r
\r
            if (animation.onBeforeStart) {\r
                animation.onBeforeStart.call(animation.scope || me, element);\r
            }\r
            animation.fireEvent('animationstart', animation);\r
            me.fireEvent('animationstart', me, animation);\r
\r
            data[elementId] = data;\r
\r
            before = data.before;\r
            from = data.from;\r
            to = data.to;\r
\r
            data.fromPropertyNames = fromPropertyNames = [];\r
            data.toPropertyNames = toPropertyNames = [];\r
\r
            for (name in to) {\r
                if (to.hasOwnProperty(name)) {\r
                    to[name] = toFormattedValue = me.formatValue(to[name], name);\r
                    formattedName = me.formatName(name);\r
                    isLengthProperty = isLengthPropertyMap.hasOwnProperty(name);\r
\r
                    if (!isLengthProperty) {\r
                        toFormattedValue = me.getCssStyleValue(formattedName, toFormattedValue);\r
                    }\r
\r
                    if (from.hasOwnProperty(name)) {\r
                        from[name] = fromFormattedValue = me.formatValue(from[name], name);\r
\r
                        if (!isLengthProperty) {\r
                            fromFormattedValue = me.getCssStyleValue(formattedName, fromFormattedValue);\r
                        }\r
\r
                        if (toFormattedValue !== fromFormattedValue) {\r
                            fromPropertyNames.push(formattedName);\r
                            toPropertyNames.push(formattedName);\r
                        }\r
                    }\r
                    else {\r
                        computedValue = computedStyle.getPropertyValue(formattedName);\r
\r
                        if (toFormattedValue !== computedValue) {\r
                            toPropertyNames.push(formattedName);\r
                        }\r
                    }\r
                }\r
            }\r
\r
            propertiesLength = toPropertyNames.length;\r
\r
            if (propertiesLength === 0) {\r
                me.onAnimationEnd(element, data, animation);\r
                continue;\r
            }\r
\r
            runningData = me.getRunningData(elementId);\r
            runningSessions = runningData.sessions;\r
\r
            if (runningSessions.length > 0) {\r
                me.refreshRunningAnimationsData(\r
                    element, Ext.Array.merge(fromPropertyNames, toPropertyNames), true, data.replacePrevious\r
                );\r
            }\r
\r
            runningNameMap = runningData.nameMap;\r
            runningNameList = runningData.nameList;\r
\r
            sessionNameMap = {};\r
            for (j = 0; j < propertiesLength; j++) {\r
                name = toPropertyNames[j];\r
                sessionNameMap[name] = true;\r
\r
                if (!runningNameMap.hasOwnProperty(name)) {\r
                    runningNameMap[name] = 1;\r
                    runningNameList.push(name);\r
                }\r
                else {\r
                    runningNameMap[name]++;\r
                }\r
            }\r
\r
            runningSession = {\r
                element: element,\r
                map: sessionNameMap,\r
                list: toPropertyNames.slice(),\r
                length: propertiesLength,\r
                data: data,\r
                animation: animation\r
            };\r
            runningSessions.push(runningSession);\r
\r
            animation.on('stop', 'onAnimationStop', me);\r
\r
            elementData = Ext.apply({}, before);\r
            Ext.apply(elementData, from);\r
\r
            if (runningNameList.length > 0) {\r
                fromPropertyNames = Ext.Array.difference(runningNameList, fromPropertyNames);\r
                toPropertyNames = Ext.Array.merge(fromPropertyNames, toPropertyNames);\r
                elementData['transition-property'] = fromPropertyNames;\r
            }\r
\r
            fromData[elementId] = elementData;\r
            toData[elementId] = Ext.apply({}, to);\r
\r
            toData[elementId]['transition-property'] = toPropertyNames;\r
            toData[elementId]['transition-duration'] = data.duration;\r
            toData[elementId]['transition-timing-function'] = data.easing;\r
            toData[elementId]['transition-delay'] = data.delay;\r
\r
            animation.startTime = Date.now();\r
        }\r
\r
        message = me.$className;\r
\r
        me.applyStyles(fromData);\r
\r
        doApplyTo = function(e) {\r
            if (e.data === message && e.source === window) {\r
                window.removeEventListener('message', doApplyTo, false);\r
                me.applyStyles(toData);\r
            }\r
        };\r
\r
        if (window.requestAnimationFrame) {\r
            window.requestAnimationFrame(function() {\r
                window.addEventListener('message', doApplyTo, false);\r
                window.postMessage(message, '*');\r
            });\r
        }else {\r
            Ext.defer(function() {\r
                window.addEventListener('message', doApplyTo, false);\r
                window.postMessage(message, '*');\r
            }, 1)\r
        }\r
    },\r
\r
    onAnimationStop: function(animation) {\r
        var runningAnimationsData = this.runningAnimationsData,\r
            id, runningData, sessions, i, ln, session;\r
\r
        for (id in runningAnimationsData) {\r
            if (runningAnimationsData.hasOwnProperty(id)) {\r
                runningData = runningAnimationsData[id];\r
                sessions = runningData.sessions;\r
\r
                for (i = 0,ln = sessions.length; i < ln; i++) {\r
                    session = sessions[i];\r
                    if (session.animation === animation) {\r
                        this.refreshRunningAnimationsData(session.element, session.list.slice(), false);\r
                    }\r
                }\r
            }\r
        }\r
    }\r
});\r