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 |