Component.js
4.47 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
* @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);
}
}
}
}
});