add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / fx / target / Component.js

/**\r
 * @class Ext.fx.target.Component\r
 * \r
 * This class represents a animation target for a {@link Ext.Component}. In general this class will not be\r
 * created directly, the {@link Ext.Component} will be passed to the animation and\r
 * and the appropriate target will be created.\r
 */\r
Ext.define('Ext.fx.target.Component', {\r
\r
    /* Begin Definitions */\r
   \r
    extend: 'Ext.fx.target.Target',\r
    \r
    /* End Definitions */\r
\r
    type: 'component',\r
\r
    // Methods to call to retrieve unspecified "from" values from a target Component\r
    getPropMethod: {\r
        top: function() {\r
            return this.getPosition(true)[1];\r
        },\r
        left: function() {\r
            return this.getPosition(true)[0];\r
        },\r
        x: function() {\r
            return this.getPosition()[0];\r
        },\r
        y: function() {\r
            return this.getPosition()[1];\r
        },\r
        height: function() {\r
            return this.getHeight();\r
        },\r
        width: function() {\r
            return this.getWidth();\r
        },\r
        opacity: function() {\r
            return this.el.getStyle('opacity');\r
        }\r
    },\r
\r
    setMethods: {\r
        top:     'setPosition',\r
        left:    'setPosition',\r
        x:       'setPagePosition',\r
        y:       'setPagePosition',\r
        height:  'setSize',\r
        width:   'setSize',\r
        opacity: 'setOpacity'\r
    },\r
\r
    // Read the named attribute from the target Component. Use the defined getter for the attribute\r
    getAttr: function(attr, val) {\r
        return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];\r
    },\r
\r
    setAttr: function(targetData, isFirstFrame, isLastFrame) {\r
        var me = this,\r
            ln = targetData.length,\r
            attrs, attr, o, i, j, targets, left, top, w, h,\r
            methodsToCall = {},\r
            methodProps;\r
\r
        for (i = 0; i < ln; i++) {\r
            attrs = targetData[i].attrs;\r
            for (attr in attrs) {\r
                targets = attrs[attr].length;\r
                for (j = 0; j < targets; j++) {\r
                    o = attrs[attr][j];\r
                    methodProps = methodsToCall[me.setMethods[attr]] || (methodsToCall[me.setMethods[attr]] = {});\r
                    methodProps.target = o[0];\r
                    methodProps[attr] = o[1];\r
                    // debugging code: Ext.log('Setting ' + o[0].id + "'s " + attr + ' to ' + o[1]);\r
                }\r
            }\r
            if (methodsToCall.setPosition) {\r
                o = methodsToCall.setPosition;\r
                left = (o.left === undefined) ? undefined : parseFloat(o.left);\r
                top = (o.top === undefined) ? undefined : parseFloat(o.top);\r
                o.target.setPosition(left, top);\r
            }\r
            if (methodsToCall.setPagePosition) {\r
                o = methodsToCall.setPagePosition;\r
                o.target.setPagePosition(o.x, o.y);\r
            }\r
            if (methodsToCall.setSize) {\r
                o = methodsToCall.setSize;\r
                // Dimensions not being animated MUST NOT be autosized. They must remain at current value.\r
                w = (o.width === undefined) ? o.target.getWidth() : parseFloat(o.width);\r
                h = (o.height === undefined) ? o.target.getHeight() : parseFloat(o.height);\r
\r
                // Only set the size of the Component on the last frame, or if the animation was\r
                // configured with dynamic: true.\r
                // In other cases, we just set the target element size.\r
                // This will result in either clipping if animating a reduction in size, or the revealing of\r
                // the inner elements of the Component if animating an increase in size.\r
                // Component's animate function initially resizes to the larger size before resizing the\r
                // outer element to clip the contents.\r
                o.target.el.setSize(w, h);\r
                if (isLastFrame || me.dynamic) {\r
                    // Defer the final sizing & layout until we are outside of this frame.\r
                    // In case anything in the resulting layout calls animation.\r
                    // If it does, *this* frame will fire again... recursively\r
                    Ext.GlobalEvents.on({\r
                        idle: Ext.Function.bind(o.target.setSize, o.target, [w, h]),\r
                        single: true\r
                    });\r
                }\r
            }\r
            if (methodsToCall.setOpacity) {\r
                o = methodsToCall.setOpacity;\r
                o.target.el.setStyle('opacity', o.opacity);\r
            }\r
        }\r
    }\r
});\r