Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1443)

Unified Diff: third_party/polymer/components/core-animation/core-animation-group.html

Issue 917523002: Pull web-animations-js into third-party via the third_party/polymer/reproduce.sh script. Add necess… (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove .travis-setup.sh and make a note in README.chromium. Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components/core-animation/core-animation-group.html
diff --git a/third_party/polymer/components/core-animation/core-animation-group.html b/third_party/polymer/components/core-animation/core-animation-group.html
new file mode 100644
index 0000000000000000000000000000000000000000..773cffd911925193d79fa613a0077cc9b1b1aa6c
--- /dev/null
+++ b/third_party/polymer/components/core-animation/core-animation-group.html
@@ -0,0 +1,169 @@
+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="core-animation.html">
+
+<!--
+@group Polymer Core Elements
+
+`core-animation-group` combines `core-animation` or `core-animation-group` elements to
+create a grouped web animation. The group may be parallel (type is `par`) or sequential
+(type is `seq`). Parallel groups play all the children elements simultaneously, and
+sequential groups play the children one after another.
+
+Example of an animation group to rotate and then fade an element:
+
+ <core-animation-group type="seq">
+ <core-animation id="fadeout" duration="500">
+ <core-animation-keyframe>
+ <core-animation-prop name="transform" value="rotate(0deg)"></core-animation-prop>
+ <core-animation-prop name="transform" value="rotate(45deg)"></core-animation-prop>
+ </core-animation-keyframe>
+ </core-animation>
+ <core-animation id="fadeout" duration="500">
+ <core-animation-keyframe>
+ <core-animation-prop name="opacity" value="1"></core-animation-prop>
+ </core-animation-keyframe>
+ <core-animation-keyframe>
+ <core-animation-prop name="opacity" value="0"></core-animation-prop>
+ </core-animation-keyframe>
+ </core-animation>
+ </core-animation-group>
+
+@element core-animation-group
+@status beta
+@homepage github.io
+-->
+<polymer-element name="core-animation-group" constructor="CoreAnimationGroup" extends="core-animation" attributes="type">
+ <script>
+ (function() {
+
+ var ANIMATION_GROUPS = {
+ 'par': AnimationGroup,
+ 'seq': AnimationSequence
+ };
+
+ Polymer({
+
+ publish: {
+ /**
+ * If target is set, any children without a target will be assigned the group's
+ * target when this property is set.
+ *
+ * @property target
+ * @type HTMLElement|Node|Array|Array<HTMLElement|Node>
+ */
+
+ /**
+ * For a `core-animation-group`, a duration of "auto" means the duration should
+ * be the specified duration of its children. If set to anything other than
+ * "auto", any children without a set duration will be assigned the group's duration.
+ *
+ * @property duration
+ * @type number
+ * @default "auto"
+ */
+ duration: {value: 'auto', reflect: true},
+
+ /**
+ * The type of the animation group. 'par' creates a parallel group and 'seq' creates
+ * a sequential group.
+ *
+ * @property type
+ * @type String
+ * @default 'par'
+ */
+ type: {value: 'par', reflect: true}
+ },
+
+ 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.shadowRoot ? this.shadowRoot.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>

Powered by Google App Engine
This is Rietveld 408576698