Merge pull request #421 from suzyh/animation-id

Implement Animation.id

Author: dstoc

src/animation.js

@@ -31,6 +31,10 @@
   };
 
   scope.Animation = function(effect) {
+    this.id = '';
+    if (effect && effect._id) {
+      this.id = effect._id;
+    }
     this._sequenceNumber = shared.sequenceNumber++;
     this._currentTime = 0;
     this._startTime = null;

src/element-animatable.js

@@ -13,7 +13,11 @@
 // limitations under the License.
 
 (function(scope) {
-  window.Element.prototype.animate = function(effectInput, timingInput) {
-    return scope.timeline._play(scope.KeyframeEffect(this, effectInput, timingInput));
+  window.Element.prototype.animate = function(effectInput, options) {
+    var id = '';
+    if (options && options.id) {
+      id = options.id;
+    }
+    return scope.timeline._play(scope.KeyframeEffect(this, effectInput, options, id));
   };
 })(webAnimations1);

src/group-constructors.js

@@ -18,7 +18,8 @@
     return node._timing.delay + node.activeDuration + node._timing.endDelay;
   }
 
-  function constructor(children, timingInput) {
+  function constructor(children, timingInput, id) {
+    this._id = id;
     this._parent = null;
     this.children = children || [];
     this._reparent(this.children);
@@ -184,7 +185,7 @@
       }
     };
 
-    var underlyingEffect = new KeyframeEffect(null, [], group._timing);
+    var underlyingEffect = new KeyframeEffect(null, [], group._timing, group._id);
     underlyingEffect.onsample = ticker;
     underlyingAnimation = scope.timeline._play(underlyingEffect);
     return underlyingAnimation;

src/keyframe-effect-constructor.js

@@ -53,7 +53,7 @@
     this._frames = shared.normalizeKeyframes(effectInput);
   }
 
-  scope.KeyframeEffect = function(target, effectInput, timingInput) {
+  scope.KeyframeEffect = function(target, effectInput, timingInput, id) {
     this.target = target;
     this._parent = null;
 
@@ -71,6 +71,7 @@
     }
     this._keyframes = effectInput;
     this.activeDuration = shared.calculateActiveDuration(this._timing);
+    this._id = id;
     return this;
   };
 
@@ -96,7 +97,7 @@
       if (typeof this.getFrames() == 'function') {
         throw new Error('Cloning custom effects is not supported.');
       }
-      var clone = new KeyframeEffect(this.target, [], shared.cloneTimingInput(this._timingInput));
+      var clone = new KeyframeEffect(this.target, [], shared.cloneTimingInput(this._timingInput), this._id);
       clone._normalizedKeyframes = this._normalizedKeyframes;
       clone._keyframes = this._keyframes;
       return clone;
@@ -107,8 +108,12 @@
   };
 
   var originalElementAnimate = Element.prototype.animate;
-  Element.prototype.animate = function(effectInput, timing) {
-    return scope.timeline._play(new scope.KeyframeEffect(this, effectInput, timing));
+  Element.prototype.animate = function(effectInput, options) {
+    var id = '';
+    if (options && options.id) {
+      id = options.id;
+    }
+    return scope.timeline._play(new scope.KeyframeEffect(this, effectInput, options, id));
   };
 
   var nullTarget = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
@@ -119,13 +124,14 @@
       if (typeof keyframes == 'function') {
         keyframes = [];
       }
-      var timing = keyframeEffect._timingInput;
+      var options = keyframeEffect._timingInput;
+      options.id = keyframeEffect._id;
     } else {
       var target = nullTarget;
       var keyframes = [];
-      var timing = 0;
+      var options = 0;
     }
-    return originalElementAnimate.apply(target, [keyframes, timing]);
+    return originalElementAnimate.apply(target, [keyframes, options]);
   };
 
   // TODO: Remove this once we remove support for custom KeyframeEffects.

src/keyframe-effect.js

@@ -28,7 +28,7 @@
     return effectTime;
   }
 
-  scope.KeyframeEffect = function(target, effectInput, timingInput) {
+  scope.KeyframeEffect = function(target, effectInput, timingInput, id) {
     var effectTime = EffectTime(shared.normalizeTimingInput(timingInput));
     var interpolations = scope.convertEffectInput(effectInput);
     var timeFraction;
@@ -49,6 +49,7 @@
     };
     keyframeEffect._isCurrent = effectTime._isCurrent;
     keyframeEffect._totalDuration = effectTime._totalDuration;
+    keyframeEffect._id = id;
     return keyframeEffect;
   };
 

src/web-animations-bonus-cancel-events.js

@@ -41,8 +41,8 @@
   };
 
   var originalElementAnimate = window.Element.prototype.animate;
-  window.Element.prototype.animate = function(effectInput, timingInput) {
-    var animation = originalElementAnimate.call(this, effectInput, timingInput);
+  window.Element.prototype.animate = function(effectInput, options) {
+    var animation = originalElementAnimate.call(this, effectInput, options);
 
     animation._cancelHandlers = [];
     animation.oncancel = null;

src/web-animations-bonus-object-form-keyframes.js

@@ -26,7 +26,7 @@
   }
 
   var originalElementAnimate = window.Element.prototype.animate;
-  window.Element.prototype.animate = function(effectInput, timingInput) {
+  window.Element.prototype.animate = function(effectInput, options) {
     if (window.Symbol && Symbol.iterator && Array.prototype.from && effectInput[Symbol.iterator]) {
       // Handle custom iterables in most browsers by converting to an array
       effectInput = Array.from(effectInput);
@@ -36,6 +36,6 @@
       effectInput = shared.convertToArrayForm(effectInput);
     }
 
-    return originalElementAnimate.call(this, effectInput, timingInput);
+    return originalElementAnimate.call(this, effectInput, options);
   };
 })(webAnimationsShared);

src/web-animations-next-animation.js

@@ -16,6 +16,10 @@
   scope.animationsWithPromises = [];
 
   scope.Animation = function(effect, timeline) {
+    this.id = '';
+    if (effect && effect._id) {
+      this.id = effect._id;
+    }
     this.effect = effect;
     if (effect) {
       effect._animation = this;

test/js/animation.js

@@ -543,4 +543,11 @@ suite('animation', function() {
     assert.equal(a.startTime, null);
     assert.equal(a.playState, 'pending');
   });
+  test('Animations have optional ID', function() {
+    tick(100);
+    var a = document.body.animate([], { duration: 1000 });
+    assert.equal(a.id, '');
+    a = document.body.animate([], { duration: 1000, id: 'anim-id' });
+    assert.equal(a.id, 'anim-id');
+  });
 });