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

Unified Diff: third_party/polymer/components-chromium/core-animation/core-animation-extracted.js

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-chromium/core-animation/core-animation-extracted.js
diff --git a/third_party/polymer/components-chromium/core-animation/core-animation-extracted.js b/third_party/polymer/components-chromium/core-animation/core-animation-extracted.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c6bb6911cb3058bff9a80125e47142040c355b6
--- /dev/null
+++ b/third_party/polymer/components-chromium/core-animation/core-animation-extracted.js
@@ -0,0 +1,434 @@
+
+ (function() {
+
+ function toNumber(value, allowInfinity) {
+ return (allowInfinity && value === 'Infinity') ? Number.POSITIVE_INFINITY : Number(value);
+ };
+
+ Polymer('core-animation',{
+ /**
+ * Fired when the animation completes.
+ *
+ * @event core-animation-finish
+ */
+
+ /**
+ *
+ * Fired when the web animation object changes.
+ *
+ * @event core-animation-change
+ */
+
+ publish: {
+
+ /**
+ * One or more nodes to animate.
+ *
+ * @property target
+ * @type HTMLElement|Node|Array<HTMLElement|Node>
+ */
+ target: {value: null, reflect: true},
+
+ /**
+ * Animation keyframes specified as an array of dictionaries of
+ * &lt;css properties&gt;:&lt;array of values&gt; pairs. For example,
+ *
+ * @property keyframes
+ * @type Object
+ */
+ keyframes: {value: null, reflect: true},
+
+ /**
+ * A custom animation function. Either provide this or `keyframes`. The signature
+ * of the callback is `EffectsCallback(timeFraction, target, animation)`
+ *
+ * @property customEffect
+ * @type Function(number, Object, Object)
+ */
+ customEffect: {value: null, reflect: true},
+
+ /**
+ * Controls the composition behavior. If set to "replace", the effect overrides
+ * the underlying value for the target. If set the "add", the effect is added to
+ * the underlying value for the target. If set to "accumulate", the effect is
+ * accumulated to the underlying value for the target.
+ *
+ * In cases such as numbers or lengths, "add" and "accumulate" produce the same
+ * value. In list values, "add" is appending to the list, while "accumulate" is
+ * adding the individual components of the list.
+ *
+ * For example, adding `translateX(10px)` and `translateX(25px)` produces
+ * `translateX(10px) translateX(25px)` and accumulating produces `translateX(35px)`.
+ *
+ * @property composite
+ * @type "replace"|"add"|"accumulate"
+ * @default "replace"
+ */
+ composite: {value: 'replace', reflect: true},
+
+ /**
+ * Animation duration in milliseconds, "Infinity", or "auto". "auto" is
+ * equivalent to 0.
+ *
+ * @property duration
+ * @type number|"Infinity"
+ * @default "auto"
+ */
+ duration: {value: 'auto', reflect: true},
+
+ /**
+ * Controls the effect the animation has on the target when it's not playing.
+ * The possible values are "none", "forwards", "backwards", "both" or "auto".
+ *
+ * "none" means the animation has no effect when it's not playing.
+ *
+ * "forwards" applies the value at the end of the animation after it's finished.
+ *
+ * "backwards" applies the value at the start of the animation to the target
+ * before it starts playing and has no effect when the animation finishes.
+ *
+ * "both" means "forwards" and "backwards". "auto" is equivalent to "none".
+ *
+ * @property fill
+ * @type "none"|"forwards"|"backwards"|"both"|"auto"
+ * @default "auto"
+ */
+ fill: {value: 'auto', reflect: true},
+
+ /**
+ * A transition timing function. The values are equivalent to the CSS
+ * counterparts.
+ *
+ * @property easing
+ * @type string
+ * @default "linear"
+ */
+ easing: {value: 'linear', reflect: true},
+
+ /**
+ * The number of milliseconds to delay before beginning the animation.
+ *
+ * @property delay
+ * @type Number
+ * @default 0
+ */
+ delay: {value: 0, reflect: true},
+
+ /**
+ * The number of milliseconds to wait after the animation finishes. This is
+ * useful, for example, in an animation group to wait for some time before
+ * beginning the next item in the animation group.
+ *
+ * @property endDelay
+ * @type number
+ * @default 0
+ */
+ endDelay: {value: 0, reflect: true},
+
+ /**
+ * The number of iterations this animation should run for.
+ *
+ * @property iterations
+ * @type Number|'Infinity'
+ * @default 1
+ */
+ iterations: {value: 1, reflect: true},
+
+ /**
+ * Number of iterations into the animation in which to begin the effect.
+ * For example, setting this property to 0.5 and `iterations` to 2 will
+ * cause the animation to begin halfway through the first iteration but still
+ * run twice.
+ *
+ * @property iterationStart
+ * @type Number
+ * @default 0
+ */
+ iterationStart: {value: 0, reflect: true},
+
+ /**
+ * (not working in web animations polyfill---do not use)
+ *
+ * Controls the iteration composition behavior. If set to "replace", the effect for
+ * every iteration is independent of each other. If set to "accumulate", the effect
+ * for iterations of the animation will build upon the value in the previous iteration.
+ *
+ * Example:
+ *
+ * // Moves the target 50px on the x-axis over 5 iterations.
+ * <core-animation iterations="5" iterationComposite="accumulate">
+ * <core-animation-keyframe>
+ * <core-animation-prop name="transform" value="translateX(10px)"></core-animation-prop>
+ * </core-animation-keyframe>
+ * </core-animation>
+ *
+ * @property iterationComposite
+ * @type "replace"|"accumulate"
+ * @default false
+ */
+ iterationComposite: {value: 'replace', reflect: true},
+
+ /**
+ * The playback direction of the animation. "normal" plays the animation in the
+ * normal direction. "reverse" plays it in the reverse direction. "alternate"
+ * alternates the playback direction every iteration such that even iterations are
+ * played normally and odd iterations are reversed. "alternate-reverse" plays
+ * even iterations in the reverse direction and odd iterations in the normal
+ * direction.
+ *
+ * @property direction
+ * @type "normal"|"reverse"|"alternate"|"alternate-reverse"
+ * @default "normal"
+ */
+ direction: {value: 'normal', reflect: true},
+
+ /**
+ * A multiplier to the playback rate to the animation.
+ *
+ * @property playbackRate
+ * @type number
+ * @default 1
+ */
+ playbackRate: {value: 1, reflect: true},
+
+ /**
+ * If set to true, play the animation when it is created or a property is updated.
+ *
+ * @property autoplay
+ * @type boolean
+ * @default false
+ */
+ autoplay: {value: false, reflect: true}
+
+ },
+
+ animation: false,
+
+ observe: {
+ target: 'apply',
+ keyframes: 'apply',
+ customEffect: 'apply',
+ composite: 'apply',
+ duration: 'apply',
+ fill: 'apply',
+ easing: 'apply',
+ iterations: 'apply',
+ iterationStart: 'apply',
+ iterationComposite: 'apply',
+ delay: 'apply',
+ endDelay: 'apply',
+ direction: 'apply',
+ playbackRate: 'apply',
+ autoplay: 'apply'
+ },
+
+ ready: function() {
+ this.apply();
+ },
+
+ /**
+ * Plays the animation. If the animation is currently paused, seeks the animation
+ * to the beginning before starting playback.
+ *
+ * @method play
+ * @return AnimationPlayer The animation player.
+ */
+ play: function() {
+ this.apply();
+ if (this.animation && !this.autoplay) {
+ this.player = document.timeline.play(this.animation);
+ this.player.onfinish = this.animationFinishHandler.bind(this);
+ return this.player;
+ }
+ },
+
+ /**
+ * Stops the animation and clears all effects on the target.
+ *
+ * @method cancel
+ */
+ cancel: function() {
+ if (this.player) {
+ this.player.cancel();
+ }
+ },
+
+ /**
+ * Seeks the animation to the end.
+ *
+ * @method finish
+ */
+ finish: function() {
+ if (this.player) {
+ this.player.finish();
+ }
+ },
+
+ /**
+ * Pauses the animation.
+ *
+ * @method pause
+ */
+ pause: function() {
+ if (this.player) {
+ this.player.pause();
+ }
+ },
+
+ /**
+ * @method hasTarget
+ * @return boolean True if `target` is defined.
+ */
+ hasTarget: function() {
+ return this.target !== null;
+ },
+
+ /**
+ * Creates a web animations object based on this object's properties, and
+ * plays it if autoplay is true.
+ *
+ * @method apply
+ * @return Object A web animation.
+ */
+ apply: function() {
+ this.animation = this.makeAnimation();
+ if (this.autoplay && this.animation) {
+ this.play();
+ }
+ return this.animation;
+ },
+
+ makeSingleAnimation: function(target) {
+ // XXX(yvonne): for selecting all the animated elements.
+ target.classList.add('core-animation-target');
+ return new Animation(target, this.animationEffect, this.timingProps);
+ },
+
+ makeAnimation: function() {
+ if (!this.target) {
+ return null;
+ }
+ var animation;
+ if (Array.isArray(this.target)) {
+ var array = [];
+ this.target.forEach(function(t) {
+ array.push(this.makeSingleAnimation(t));
+ }.bind(this));
+ animation = new AnimationGroup(array);
+ } else {
+ animation = this.makeSingleAnimation(this.target);
+ }
+ return animation;
+ },
+
+ animationChanged: function() {
+ // Sending 'this' with the event so you can always get the animation object
+ // that fired the event, due to event retargetting in shadow DOM.
+ this.fire('core-animation-change', this);
+ },
+
+ targetChanged: function(old) {
+ if (old) {
+ old.classList.remove('core-animation-target');
+ }
+ },
+
+ get timingProps() {
+ var props = {};
+ var timing = {
+ delay: {isNumber: true},
+ endDelay: {isNumber: true},
+ fill: {},
+ iterationStart: {isNumber: true},
+ iterations: {isNumber: true, allowInfinity: true},
+ duration: {isNumber: true},
+ playbackRate: {isNumber: true},
+ direction: {},
+ easing: {}
+ };
+ for (t in timing) {
+ if (this[t] !== null) {
+ var name = timing[t].property || t;
+ props[name] = timing[t].isNumber && this[t] !== 'auto' ?
+ toNumber(this[t], timing[t].allowInfinity) : this[t];
+ }
+ }
+ return props;
+ },
+
+ get animationEffect() {
+ var props = {};
+ var frames = [];
+ var effect;
+ if (this.keyframes) {
+ frames = this.keyframes;
+ } else if (!this.customEffect) {
+ var children = this.querySelectorAll('core-animation-keyframe');
+ if (children.length === 0 && this.shadowRoot) {
+ children = this.shadowRoot.querySelectorAll('core-animation-keyframe');
+ }
+ Array.prototype.forEach.call(children, function(c) {
+ frames.push(c.properties);
+ });
+ }
+ if (this.customEffect) {
+ effect = this.customEffect;
+ } else {
+ // effect = new KeyframeEffect(frames, this.composite);
+ effect = frames;
+ }
+ return effect;
+ },
+
+ animationFinishHandler: function() {
+ this.fire('core-animation-finish');
+ }
+
+ });
+ })();
+ ;
+
+ Polymer('core-animation-keyframe',{
+ publish: {
+ /**
+ * An offset from 0 to 1.
+ *
+ * @property offset
+ * @type Number
+ */
+ offset: {value: null, reflect: true}
+ },
+ get properties() {
+ var props = {};
+ var children = this.querySelectorAll('core-animation-prop');
+ Array.prototype.forEach.call(children, function(c) {
+ props[c.name] = c.value;
+ });
+ if (this.offset !== null) {
+ props.offset = this.offset;
+ }
+ return props;
+ }
+ });
+ ;
+
+ Polymer('core-animation-prop',{
+ publish: {
+ /**
+ * A CSS property name.
+ *
+ * @property name
+ * @type string
+ */
+ name: {value: '', reflect: true},
+
+ /**
+ * The value for the CSS property.
+ *
+ * @property value
+ * @type string|number
+ */
+ value: {value: '', reflect: true}
+ }
+ });
+

Powered by Google App Engine
This is Rietveld 408576698