OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
6 Code distributed by Google as part of the polymer project is also | |
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
8 --> | |
9 | |
10 <link rel="import" href="../polymer/polymer.html"> | |
11 <link rel="import" href="animations/opaque-animation.html"> | |
12 | |
13 <script> | |
14 | |
15 /** | |
16 * `Polymer.NeonAnimatableBehavior` is implemented by elements containing anim
ations for use with | |
17 * elements implementing `Polymer.NeonAnimationRunnerBehavior`. | |
18 * @polymerBehavior | |
19 */ | |
20 Polymer.NeonAnimatableBehavior = { | |
21 | |
22 properties: { | |
23 | |
24 /** | |
25 * Animation configuration. See README for more info. | |
26 */ | |
27 animationConfig: { | |
28 type: Object | |
29 }, | |
30 | |
31 /** | |
32 * Convenience property for setting an 'entry' animation. Do not set `anim
ationConfig.entry` | |
33 * manually if using this. The animated node is set to `this` if using thi
s property. | |
34 */ | |
35 entryAnimation: { | |
36 observer: '_entryAnimationChanged', | |
37 type: String | |
38 }, | |
39 | |
40 /** | |
41 * Convenience property for setting an 'exit' animation. Do not set `anima
tionConfig.exit` | |
42 * manually if using this. The animated node is set to `this` if using thi
s property. | |
43 */ | |
44 exitAnimation: { | |
45 observer: '_exitAnimationChanged', | |
46 type: String | |
47 } | |
48 | |
49 }, | |
50 | |
51 _entryAnimationChanged: function() { | |
52 this.animationConfig = this.animationConfig || {}; | |
53 if (this.entryAnimation !== 'fade-in-animation') { | |
54 // insert polyfill hack | |
55 this.animationConfig['entry'] = [{ | |
56 name: 'opaque-animation', | |
57 node: this | |
58 }, { | |
59 name: this.entryAnimation, | |
60 node: this | |
61 }]; | |
62 } else { | |
63 this.animationConfig['entry'] = [{ | |
64 name: this.entryAnimation, | |
65 node: this | |
66 }]; | |
67 } | |
68 }, | |
69 | |
70 _exitAnimationChanged: function() { | |
71 this.animationConfig = this.animationConfig || {}; | |
72 this.animationConfig['exit'] = [{ | |
73 name: this.exitAnimation, | |
74 node: this | |
75 }]; | |
76 }, | |
77 | |
78 _copyProperties: function(config1, config2) { | |
79 // shallowly copy properties from config2 to config1 | |
80 for (var property in config2) { | |
81 config1[property] = config2[property]; | |
82 } | |
83 }, | |
84 | |
85 _cloneConfig: function(config) { | |
86 var clone = { | |
87 isClone: true | |
88 }; | |
89 this._copyProperties(clone, config); | |
90 return clone; | |
91 }, | |
92 | |
93 _getAnimationConfigRecursive: function(type, map, allConfigs) { | |
94 if (!this.animationConfig) { | |
95 return; | |
96 } | |
97 | |
98 // type is optional | |
99 var thisConfig; | |
100 if (type) { | |
101 thisConfig = this.animationConfig[type]; | |
102 } else { | |
103 thisConfig = this.animationConfig; | |
104 } | |
105 | |
106 if (!Array.isArray(thisConfig)) { | |
107 thisConfig = [thisConfig]; | |
108 } | |
109 | |
110 // iterate animations and recurse to process configurations from child nod
es | |
111 if (thisConfig) { | |
112 for (var config, index = 0; config = thisConfig[index]; index++) { | |
113 if (config.animatable) { | |
114 config.animatable._getAnimationConfigRecursive(config.type || type,
map, allConfigs); | |
115 } else { | |
116 if (config.id) { | |
117 var cachedConfig = map[config.id]; | |
118 if (cachedConfig) { | |
119 // merge configurations with the same id, making a clone lazily | |
120 if (!cachedConfig.isClone) { | |
121 map[config.id] = this._cloneConfig(cachedConfig) | |
122 cachedConfig = map[config.id]; | |
123 } | |
124 this._copyProperties(cachedConfig, config); | |
125 } else { | |
126 // put any configs with an id into a map | |
127 map[config.id] = config; | |
128 } | |
129 } else { | |
130 allConfigs.push(config); | |
131 } | |
132 } | |
133 } | |
134 } | |
135 }, | |
136 | |
137 /** | |
138 * An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this
method to configure | |
139 * an animation with an optional type. Elements implementing `Polymer.NeonAn
imatableBehavior` | |
140 * should define the property `animationConfig`, which is either a configura
tion object | |
141 * or a map of animation type to array of configuration objects. | |
142 */ | |
143 getAnimationConfig: function(type) { | |
144 var map = []; | |
145 var allConfigs = []; | |
146 this._getAnimationConfigRecursive(type, map, allConfigs); | |
147 // append the configurations saved in the map to the array | |
148 for (var key in map) { | |
149 allConfigs.push(map[key]); | |
150 } | |
151 return allConfigs; | |
152 } | |
153 | |
154 }; | |
155 | |
156 </script> | |
OLD | NEW |