Index: pkg/polymer/lib/elements/polymer-animation/polymer-animation-group.html |
diff --git a/pkg/polymer/lib/elements/polymer-animation/polymer-animation-group.html b/pkg/polymer/lib/elements/polymer-animation/polymer-animation-group.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cc954ed979a56f1273d89cb1e9f13c1a0027809c |
--- /dev/null |
+++ b/pkg/polymer/lib/elements/polymer-animation/polymer-animation-group.html |
@@ -0,0 +1,117 @@ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="polymer-animation.html"> |
+ |
+<polymer-element name="polymer-animation-group" extends="polymer-animation" attributes="type"> |
+ <script> |
+ (function() { |
+ var ANIMATION_GROUPS = { |
+ 'par': ParGroup, |
+ 'seq': SeqGroup |
+ }; |
+ /** |
+ * @module Animation |
+ */ |
+ /** |
+ * Component for a group of animations. |
+ * |
+ * @class polymer-animation-group |
+ */ |
+ Polymer('polymer-animation-group', { |
+ /** |
+ * If specified the target will be assigned to all child animations. |
+ * @property target |
+ * @type HTMLElement|Node |
+ * @default null |
+ */ |
+ targetSelector: '', |
+ /** |
+ * If specified and not "auto" the duration will apply to the group |
+ * and propagate to any child animations that is not a group and does |
+ * not specify a duration. |
+ * @property duration |
+ * @type number |
+ * @default "auto" |
+ */ |
+ duration: 'auto', |
+ /** |
+ * Group type. 'par' for parallel and 'seq' for sequence. |
+ * @property type |
+ * @type String |
+ * @default 'par' |
+ */ |
+ type: 'par', |
+ typeChanged: function() { |
+ this.apply(); |
+ }, |
+ targetChanged: function() { |
+ // Only propagate target to children animations if it's defined. |
+ if (this.target) { |
+ this.doOnChildren(function(c) { |
+ c.target = this.target; |
+ }.bind(this)); |
+ } |
+ }, |
+ durationChanged: function() { |
+ if (this.duration && this.duration !== 'auto') { |
+ this.doOnChildren(function(c) { |
+ // Propagate to children that is not a group and has no |
+ // duration specified. |
+ if (!c.type && (!c.duration || c.duration === 'auto')) { |
+ c.duration = this.duration; |
+ } |
+ }.bind(this)); |
+ } |
+ }, |
+ doOnChildren: function(inFn) { |
+ var children = this.children; |
+ if (!children.length) { |
+ children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : []; |
+ } |
+ Array.prototype.forEach.call(children, function(c) { |
+ // TODO <template> in the way |
+ c.apply && inFn(c); |
+ }, this); |
+ }, |
+ makeAnimation: function() { |
+ return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps); |
+ }, |
+ hasTarget: function() { |
+ var ht = this.target !== null; |
+ if (!ht) { |
+ this.doOnChildren(function(c) { |
+ ht = ht || c.hasTarget(); |
+ }.bind(this)); |
+ } |
+ return ht; |
+ }, |
+ apply: function() { |
+ // Propagate target and duration to child animations first. |
+ this.durationChanged(); |
+ this.targetChanged(); |
+ this.doOnChildren(function(c) { |
+ c.apply(); |
+ }); |
+ return this.super(); |
+ }, |
+ get childAnimationElements() { |
+ var list = []; |
+ this.doOnChildren(function(c) { |
+ if (c.makeAnimation) { |
+ list.push(c); |
+ } |
+ }); |
+ return list; |
+ }, |
+ get childAnimations() { |
+ var list = []; |
+ this.doOnChildren(function(c) { |
+ if (c.animation) { |
+ list.push(c.animation); |
+ } |
+ }); |
+ return list; |
+ } |
+ }); |
+ })(); |
+ </script> |
+</polymer-element> |