123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-fx-target-Component'>/**
- </span> * @class Ext.fx.target.Component
- *
- * This class represents a animation target for a {@link Ext.Component}. In general this class will not be
- * created directly, the {@link Ext.Component} will be passed to the animation and
- * and the appropriate target will be created.
- */
- Ext.define('Ext.fx.target.Component', {
- /* Begin Definitions */
-
- extend: 'Ext.fx.target.Target',
-
- /* End Definitions */
- type: 'component',
- // Methods to call to retrieve unspecified "from" values from a target Component
- getPropMethod: {
- top: function() {
- return this.getPosition(true)[1];
- },
- left: function() {
- return this.getPosition(true)[0];
- },
- x: function() {
- return this.getPosition()[0];
- },
- y: function() {
- return this.getPosition()[1];
- },
- height: function() {
- return this.getHeight();
- },
- width: function() {
- return this.getWidth();
- },
- opacity: function() {
- return this.el.getStyle('opacity');
- }
- },
- compMethod: {
- top: 'setPosition',
- left: 'setPosition',
- x: 'setPagePosition',
- y: 'setPagePosition',
- height: 'setSize',
- width: 'setSize',
- opacity: 'setOpacity'
- },
- // Read the named attribute from the target Component. Use the defined getter for the attribute
- getAttr: function(attr, val) {
- return [[this.target, val !== undefined ? val : this.getPropMethod[attr].call(this.target)]];
- },
- setAttr: function(targetData, isFirstFrame, isLastFrame) {
- var me = this,
- target = me.target,
- ln = targetData.length,
- attrs, attr, o, i, j, meth, targets, left, top, w, h;
- for (i = 0; i < ln; i++) {
- attrs = targetData[i].attrs;
- for (attr in attrs) {
- targets = attrs[attr].length;
- meth = {
- setPosition: {},
- setPagePosition: {},
- setSize: {},
- setOpacity: {}
- };
- for (j = 0; j < targets; j++) {
- o = attrs[attr][j];
- // We REALLY want a single function call, so push these down to merge them: eg
- // meth.setPagePosition.target = <targetComponent>
- // meth.setPagePosition['x'] = 100
- // meth.setPagePosition['y'] = 100
- meth[me.compMethod[attr]].target = o[0];
- meth[me.compMethod[attr]][attr] = o[1];
- }
- if (meth.setPosition.target) {
- o = meth.setPosition;
- left = (o.left === undefined) ? undefined : parseFloat(o.left);
- top = (o.top === undefined) ? undefined : parseFloat(o.top);
- o.target.setPosition(left, top);
- }
- if (meth.setPagePosition.target) {
- o = meth.setPagePosition;
- o.target.setPagePosition(o.x, o.y);
- }
- if (meth.setSize.target) {
- o = meth.setSize;
- // Dimensions not being animated MUST NOT be autosized. They must remain at current value.
- w = (o.width === undefined) ? o.target.getWidth() : parseFloat(o.width);
- h = (o.height === undefined) ? o.target.getHeight() : parseFloat(o.height);
- // Only set the size of the Component on the last frame, or if the animation was
- // configured with dynamic: true.
- // In other cases, we just set the target element size.
- // This will result in either clipping if animating a reduction in size, or the revealing of
- // the inner elements of the Component if animating an increase in size.
- // Component's animate function initially resizes to the larger size before resizing the
- // outer element to clip the contents.
- if (isLastFrame || me.dynamic) {
- o.target.setSize(w, h);
- } else {
- o.target.el.setSize(w, h);
- }
- }
- if (meth.setOpacity.target) {
- o = meth.setOpacity;
- o.target.el.setStyle('opacity', o.opacity);
- }
- }
- }
- }
- });
- </pre>
- </body>
- </html>
|