| OLD | NEW |
| 1 /** | 1 /** |
| 2 * `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations. | 2 * `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations. |
| 3 * | 3 * |
| 4 * @polymerBehavior Polymer.NeonAnimationRunnerBehavior | 4 * @polymerBehavior Polymer.NeonAnimationRunnerBehavior |
| 5 */ | 5 */ |
| 6 Polymer.NeonAnimationRunnerBehaviorImpl = { | 6 Polymer.NeonAnimationRunnerBehaviorImpl = { |
| 7 | 7 |
| 8 properties: { | 8 _configureAnimations: function(configs) { |
| 9 | 9 var results = []; |
| 10 /** @type {?Object} */ | 10 if (configs.length > 0) { |
| 11 _player: { | 11 for (var config, index = 0; config = configs[index]; index++) { |
| 12 type: Object | 12 var neonAnimation = document.createElement(config.name); |
| 13 } | |
| 14 | |
| 15 }, | |
| 16 | |
| 17 _configureAnimationEffects: function(allConfigs) { | |
| 18 var allAnimations = []; | |
| 19 if (allConfigs.length > 0) { | |
| 20 for (var config, index = 0; config = allConfigs[index]; index++) { | |
| 21 var animation = document.createElement(config.name); | |
| 22 // is this element actually a neon animation? | 13 // is this element actually a neon animation? |
| 23 if (animation.isNeonAnimation) { | 14 if (neonAnimation.isNeonAnimation) { |
| 24 var effect = animation.configure(config); | 15 var result = null; |
| 25 if (effect) { | 16 // configuration or play could fail if polyfills aren't loaded |
| 26 allAnimations.push({ | 17 try { |
| 27 animation: animation, | 18 result = neonAnimation.configure(config); |
| 19 // Check if we have an Effect rather than an Animation |
| 20 if (typeof result.cancel != 'function') { |
| 21 result = document.timeline.play(result); |
| 22 } |
| 23 } catch (e) { |
| 24 result = null; |
| 25 console.warn('Couldnt play', '(', config.name, ').', e); |
| 26 } |
| 27 if (result) { |
| 28 results.push({ |
| 29 neonAnimation: neonAnimation, |
| 28 config: config, | 30 config: config, |
| 29 effect: effect | 31 animation: result, |
| 30 }); | 32 }); |
| 31 } | 33 } |
| 32 } else { | 34 } else { |
| 33 console.warn(this.is + ':', config.name, 'not found!'); | 35 console.warn(this.is + ':', config.name, 'not found!'); |
| 34 } | 36 } |
| 35 } | 37 } |
| 36 } | 38 } |
| 37 return allAnimations; | 39 return results; |
| 38 }, | 40 }, |
| 39 | 41 |
| 40 _runAnimationEffects: function(allEffects) { | 42 _shouldComplete: function(activeEntries) { |
| 41 return document.timeline.play(new GroupEffect(allEffects)); | 43 var finished = true; |
| 44 for (var i = 0; i < activeEntries.length; i++) { |
| 45 if (activeEntries[i].animation.playState != 'finished') { |
| 46 finished = false; |
| 47 break; |
| 48 } |
| 49 } |
| 50 return finished; |
| 42 }, | 51 }, |
| 43 | 52 |
| 44 _completeAnimations: function(allAnimations) { | 53 _complete: function(activeEntries) { |
| 45 for (var animation, index = 0; animation = allAnimations[index]; index++)
{ | 54 for (var i = 0; i < activeEntries.length; i++) { |
| 46 animation.animation.complete(animation.config); | 55 activeEntries[i].neonAnimation.complete(activeEntries[i].config); |
| 56 } |
| 57 for (var i = 0; i < activeEntries.length; i++) { |
| 58 activeEntries[i].animation.cancel(); |
| 47 } | 59 } |
| 48 }, | 60 }, |
| 49 | 61 |
| 50 /** | 62 /** |
| 51 * Plays an animation with an optional `type`. | 63 * Plays an animation with an optional `type`. |
| 52 * @param {string=} type | 64 * @param {string=} type |
| 53 * @param {!Object=} cookie | 65 * @param {!Object=} cookie |
| 54 */ | 66 */ |
| 55 playAnimation: function(type, cookie) { | 67 playAnimation: function(type, cookie) { |
| 56 var allConfigs = this.getAnimationConfig(type); | 68 var configs = this.getAnimationConfig(type); |
| 57 if (!allConfigs) { | 69 if (!configs) { |
| 58 return; | 70 return; |
| 59 } | 71 } |
| 60 try { | 72 this._active = this._active || {}; |
| 61 var allAnimations = this._configureAnimationEffects(allConfigs); | 73 if (this._active[type]) { |
| 62 var allEffects = allAnimations.map(function(animation) { | 74 this._complete(this._active[type]); |
| 63 return animation.effect; | 75 delete this._active[type]; |
| 64 }); | 76 } |
| 65 | 77 |
| 66 if (allEffects.length > 0) { | 78 var activeEntries = this._configureAnimations(configs); |
| 67 this._player = this._runAnimationEffects(allEffects); | |
| 68 this._player.onfinish = function() { | |
| 69 this._completeAnimations(allAnimations); | |
| 70 | 79 |
| 71 if (this._player) { | 80 if (activeEntries.length == 0) { |
| 72 this._player.cancel(); | 81 this.fire('neon-animation-finish', cookie, {bubbles: false}); |
| 73 this._player = null; | 82 return; |
| 74 } | 83 } |
| 75 | 84 |
| 85 this._active[type] = activeEntries; |
| 86 |
| 87 for (var i = 0; i < activeEntries.length; i++) { |
| 88 activeEntries[i].animation.onfinish = function() { |
| 89 if (this._shouldComplete(activeEntries)) { |
| 90 this._complete(activeEntries); |
| 91 delete this._active[type]; |
| 76 this.fire('neon-animation-finish', cookie, {bubbles: false}); | 92 this.fire('neon-animation-finish', cookie, {bubbles: false}); |
| 77 }.bind(this); | 93 } |
| 78 return; | 94 }.bind(this); |
| 79 } | |
| 80 } catch (e) { | |
| 81 console.warn('Couldnt play', '(', type, allConfigs, ').', e); | |
| 82 } | 95 } |
| 83 this.fire('neon-animation-finish', cookie, {bubbles: false}); | |
| 84 }, | 96 }, |
| 85 | 97 |
| 86 /** | 98 /** |
| 87 * Cancels the currently running animation. | 99 * Cancels the currently running animations. |
| 88 */ | 100 */ |
| 89 cancelAnimation: function() { | 101 cancelAnimation: function() { |
| 90 if (this._player) { | 102 for (var k in this._animations) { |
| 91 this._player.cancel(); | 103 this._animations[k].cancel(); |
| 92 } | 104 } |
| 105 this._animations = {}; |
| 93 } | 106 } |
| 94 }; | 107 }; |
| 95 | 108 |
| 96 /** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */ | 109 /** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */ |
| 97 Polymer.NeonAnimationRunnerBehavior = [ | 110 Polymer.NeonAnimationRunnerBehavior = [ |
| 98 Polymer.NeonAnimatableBehavior, | 111 Polymer.NeonAnimatableBehavior, |
| 99 Polymer.NeonAnimationRunnerBehaviorImpl | 112 Polymer.NeonAnimationRunnerBehaviorImpl |
| 100 ]; | 113 ]; |
| OLD | NEW |