OLD | NEW |
| (Empty) |
1 | |
2 (function() { | |
3 | |
4 var ANIMATION_GROUPS = { | |
5 'par': AnimationGroup, | |
6 'seq': AnimationSequence | |
7 }; | |
8 | |
9 Polymer('core-animation-group',{ | |
10 | |
11 publish: { | |
12 /** | |
13 * If target is set, any children without a target will be assigned th
e group's | |
14 * target when this property is set. | |
15 * | |
16 * @property target | |
17 * @type HTMLElement|Node|Array|Array<HTMLElement|Node> | |
18 */ | |
19 | |
20 /** | |
21 * For a `core-animation-group`, a duration of "auto" means the durati
on should | |
22 * be the specified duration of its children. If set to anything other
than | |
23 * "auto", any children without a set duration will be assigned the gr
oup's duration. | |
24 * | |
25 * @property duration | |
26 * @type number | |
27 * @default "auto" | |
28 */ | |
29 duration: {value: 'auto', reflect: true}, | |
30 | |
31 /** | |
32 * The type of the animation group. 'par' creates a parallel group and
'seq' creates | |
33 * a sequential group. | |
34 * | |
35 * @property type | |
36 * @type String | |
37 * @default 'par' | |
38 */ | |
39 type: {value: 'par', reflect: true} | |
40 }, | |
41 | |
42 typeChanged: function() { | |
43 this.apply(); | |
44 }, | |
45 | |
46 targetChanged: function() { | |
47 // Only propagate target to children animations if it's defined. | |
48 if (this.target) { | |
49 this.doOnChildren(function(c) { | |
50 c.target = this.target; | |
51 }.bind(this)); | |
52 } | |
53 }, | |
54 | |
55 durationChanged: function() { | |
56 if (this.duration && this.duration !== 'auto') { | |
57 this.doOnChildren(function(c) { | |
58 // Propagate to children that is not a group and has no | |
59 // duration specified. | |
60 if (!c.type && (!c.duration || c.duration === 'auto')) { | |
61 c.duration = this.duration; | |
62 } | |
63 }.bind(this)); | |
64 } | |
65 }, | |
66 | |
67 doOnChildren: function(inFn) { | |
68 var children = this.children; | |
69 if (!children.length) { | |
70 children = this.shadowRoot ? this.shadowRoot.childNodes : []; | |
71 } | |
72 Array.prototype.forEach.call(children, function(c) { | |
73 // TODO <template> in the way | |
74 c.apply && inFn(c); | |
75 }, this); | |
76 }, | |
77 | |
78 makeAnimation: function() { | |
79 return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timi
ngProps); | |
80 }, | |
81 | |
82 hasTarget: function() { | |
83 var ht = this.target !== null; | |
84 if (!ht) { | |
85 this.doOnChildren(function(c) { | |
86 ht = ht || c.hasTarget(); | |
87 }.bind(this)); | |
88 } | |
89 return ht; | |
90 }, | |
91 | |
92 apply: function() { | |
93 // Propagate target and duration to child animations first. | |
94 this.durationChanged(); | |
95 this.targetChanged(); | |
96 this.doOnChildren(function(c) { | |
97 c.apply(); | |
98 }); | |
99 return this.super(); | |
100 }, | |
101 | |
102 get childAnimationElements() { | |
103 var list = []; | |
104 this.doOnChildren(function(c) { | |
105 if (c.makeAnimation) { | |
106 list.push(c); | |
107 } | |
108 }); | |
109 return list; | |
110 }, | |
111 | |
112 get childAnimations() { | |
113 var list = []; | |
114 this.doOnChildren(function(c) { | |
115 if (c.animation) { | |
116 list.push(c.animation); | |
117 } | |
118 }); | |
119 return list; | |
120 } | |
121 }); | |
122 | |
123 })(); | |
124 | |
OLD | NEW |