From 784bc5859bfa4d1c9556ed7fc786c43e88b31644 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Wed, 20 Sep 2017 10:27:41 +1000 Subject: [PATCH 1/2] update externs for 2017-era implementations --- externs/web-animations-next.js | 90 +++++--------- externs/web-animations.js | 215 ++++++++++++++++++++++++++++----- 2 files changed, 213 insertions(+), 92 deletions(-) diff --git a/externs/web-animations-next.js b/externs/web-animations-next.js index 743a3ba5..411afef9 100644 --- a/externs/web-animations-next.js +++ b/externs/web-animations-next.js @@ -16,55 +16,51 @@ /** - * @fileoverview Basic externs for the Web Animations API (Level 2 / Groups). - * This is not intended to be exhaustive, and requires the base externs from - * web-animations.js. + * @fileoverview Externs for the Web Animations API (Level 2 / Groups). + * + * This defines externs for the "-next" version of the Web Animations API + * polyfill found online at: + * https://github.com/web-animations/web-animations.js + * + * These features are NOT natively implemented in browsers and are not clearly + * part of the official spec. This is NOT intended to be exhaustive, and + * requires the base externs from web-animations.js. + * * @externs */ -/** - * @interface - */ -var AnimationEffectReadOnly = function() {}; +/** @type {Element} */ +KeyframeEffectReadOnly.prototype.target; -/** @type {!AnimationEffectTiming} */ -AnimationEffectReadOnly.prototype.timing; +/** @type {?function(number, !KeyframeEffect, !Animation)|undefined} */ +KeyframeEffectReadOnly.prototype.onsample; /** - * @param {Element} target - * @param {!Array} frames - * @param {(number|AnimationEffectTimingProperties)=} opt_options - * @constructor - * @implements {AnimationEffectReadOnly} + * @param {!AnimationEffectReadOnly} effect + * @return {!Animation} */ -var KeyframeEffect = function(target, frames, opt_options) {}; +DocumentTimeline.prototype.play = function(effect) {}; /** - * @return {!Array} + * @return {!Array} */ -KeyframeEffect.prototype.getFrames = function() {}; - -/** @type {!AnimationEffectTiming} */ -KeyframeEffect.prototype.timing; - -/** @type {Element} */ -KeyframeEffect.prototype.target; - -/** @type {?function(number, !KeyframeEffect, !Animation)} */ -KeyframeEffect.prototype.onsample; +DocumentTimeline.prototype.getAnimations = function() {}; /** * @param {!Array} children - * @param {AnimationEffectTimingProperties=} opt_timing + * @param {AnimationEffectTimingProperties=} timing * @constructor * @implements {AnimationEffectReadOnly} */ -var SequenceEffect = function(children, opt_timing) {}; +var SequenceEffect = function(children, timing) {}; -/** @type {!AnimationEffectTiming} */ +/** @override */ +SequenceEffect.prototype.getComputedTiming = function() {}; + +/** @override */ SequenceEffect.prototype.timing; /** @type {!Array} */ @@ -73,41 +69,17 @@ SequenceEffect.prototype.children; /** * @param {!Array} children - * @param {AnimationEffectTimingProperties=} opt_timing + * @param {AnimationEffectTimingProperties=} timing * @constructor * @implements {AnimationEffectReadOnly} */ -var GroupEffect = function(children, opt_timing) {}; +var GroupEffect = function(children, timing) {}; + +/** @override */ +GroupEffect.prototype.getComputedTiming = function() {}; -/** @type {!AnimationEffectTiming} */ +/** @override */ GroupEffect.prototype.timing; /** @type {!Array} */ GroupEffect.prototype.children; - - -/** - * @interface - */ -var AnimationTimeline = function() {}; - -/** @type {?number} */ -AnimationTimeline.prototype.currentTime; - -/** - * @param {!AnimationEffectReadOnly} effect - * @return {!Animation} - */ -AnimationTimeline.prototype.play = function(effect) {}; - -/** - * @interface - * @extends {AnimationTimeline} - */ -var DocumentTimeline = function() {}; - -/** @type {AnimationEffectReadOnly|undefined} */ -Animation.prototype.effect; - -/** @type {!DocumentTimeline} */ -Document.prototype.timeline; diff --git a/externs/web-animations.js b/externs/web-animations.js index 7059b400..800234f9 100644 --- a/externs/web-animations.js +++ b/externs/web-animations.js @@ -25,17 +25,33 @@ /** * @param {!Array} frames - * @param {(number|AnimationEffectTimingProperties)=} opt_options + * @param {(number|KeyframeAnimationOptions)=} options * @return {!Animation} */ -Element.prototype.animate = function(frames, opt_options) {}; +Element.prototype.animate = function(frames, options) {}; + +/** + * @return {!Array} + */ +Element.prototype.getAnimations = function() {}; /** - * @interface - * @extends {EventTarget} + * @constructor + * @param {AnimationEffectReadOnly=} effect + * @param {AnimationTimeline=} timeline + * @implements {EventTarget} */ -var Animation = function() {}; +var Animation = function(effect, timeline) {}; + +/** @override */ +Animation.prototype.addEventListener = function(type, listener, options) {}; + +/** @override */ +Animation.prototype.removeEventListener = function(type, listener, options) {}; + +/** @override */ +Animation.prototype.dispatchEvent = function(evt) {}; /** * @return {undefined} @@ -50,29 +66,29 @@ Animation.prototype.finish = function() {}; /** * @return {undefined} */ -Animation.prototype.reverse = function() {}; +Animation.prototype.pause = function() {}; /** * @return {undefined} */ -Animation.prototype.pause = function() {}; +Animation.prototype.play = function() {}; /** * @return {undefined} */ -Animation.prototype.play = function() {}; - -/** @type {number} */ -Animation.prototype.startTime; +Animation.prototype.reverse = function() {}; /** @type {number} */ Animation.prototype.currentTime; -/** @type {number} */ -Animation.prototype.playbackRate; +/** @type {AnimationEffectReadOnly} */ +Animation.prototype.effect; + +/** @type {!Promise} */ +Animation.prototype.finished; /** @type {string} */ -Animation.prototype.playState; +Animation.prototype.id; /** @type {?function(!Event)} */ Animation.prototype.oncancel; @@ -80,47 +96,180 @@ Animation.prototype.oncancel; /** @type {?function(!Event)} */ Animation.prototype.onfinish; +/** @type {number} */ +Animation.prototype.playbackRate; + +/** @type {string} */ +Animation.prototype.playState; + +/** @type {!Promise} */ +Animation.prototype.ready; + +/** @type {number} */ +Animation.prototype.startTime; + +/** @type {!AnimationTimeline} */ +Animation.prototype.timeline; + + +/** + * @interface + */ +var AnimationEffectReadOnly = function() {}; + +/** + * @return {!ComputedTimingProperties} + */ +AnimationEffectReadOnly.prototype.getComputedTiming = function() {}; + +/** @type {!AnimationEffectTiming} */ +AnimationEffectReadOnly.prototype.timing; + + +/** + * @constructor + * @param {Element} target + * @param {(!Array>|!Object>)} frames + * @param {(number|AnimationEffectTimingProperties)=} options + * @implements {AnimationEffectReadOnly} + */ +var KeyframeEffectReadOnly = function(target, frames, options) {}; + +/** @override */ +KeyframeEffectReadOnly.prototype.getComputedTiming = function() {}; + +/** @override */ +KeyframeEffectReadOnly.prototype.timing; + /** - * @typedef {{ - * delay: (number|undefined), - * endDelay: (number|undefined), - * fillMode: (string|undefined), - * iterationStart: (number|undefined), - * iterations: (number|undefined), - * duration: (number|string|undefined), - * direction: (string|undefined), - * easing: (string|undefined) - * }} + * @constructor + * @param {Element} target + * @param {(!Array>|!Object>)} frames + * @param {(number|AnimationEffectTimingProperties)=} options + * @extends {KeyframeEffectReadOnly} + */ +var KeyframeEffect = function(target, frames, options) {}; + + +/** + * @record */ var AnimationEffectTimingProperties; +/** @type {number} */ +AnimationEffectTimingProperties.prototype.delay; + +/** @type {number} */ +AnimationEffectTimingProperties.prototype.endDelay; + +/** @type {string} */ +AnimationEffectTimingProperties.prototype.fill; + +/** @type {number} */ +AnimationEffectTimingProperties.prototype.iterationStart; + +/** @type {number} */ +AnimationEffectTimingProperties.prototype.iterations; + +/** @type {number|string} */ +AnimationEffectTimingProperties.prototype.duration; + +/** @type {string} */ +AnimationEffectTimingProperties.prototype.direction; + +/** @type {string} */ +AnimationEffectTimingProperties.prototype.easing; + + +/** + * @record + * @extends {AnimationEffectTimingProperties} + */ +var KeyframeAnimationOptions; + +/** @type {string} */ +KeyframeAnimationOptions.prototype.id; + + +/** + * @record + * @extends {AnimationEffectTimingProperties} + */ +var ComputedTimingProperties; + +/** @type {number} */ +ComputedTimingProperties.prototype.endTime; + +/** @type {number} */ +ComputedTimingProperties.prototype.activeDuration; + +/** @type {?number} */ +ComputedTimingProperties.prototype.localTime; + +/** @type {?number} */ +ComputedTimingProperties.prototype.progress; + +/** @type {?number} */ +ComputedTimingProperties.prototype.currentIteration; + /** * @interface */ -var AnimationEffectTiming = function() {}; +var AnimationEffectTimingReadOnly = function() {} /** @type {number} */ -AnimationEffectTiming.prototype.delay; +AnimationEffectTimingReadOnly.prototype.delay; /** @type {number} */ -AnimationEffectTiming.prototype.endDelay; +AnimationEffectTimingReadOnly.prototype.endDelay; /** @type {string} */ -AnimationEffectTiming.prototype.fillMode; +AnimationEffectTimingReadOnly.prototype.fill; /** @type {number} */ -AnimationEffectTiming.prototype.iterationStart; +AnimationEffectTimingReadOnly.prototype.iterationStart; /** @type {number} */ -AnimationEffectTiming.prototype.iterations; +AnimationEffectTimingReadOnly.prototype.iterations; /** @type {number|string} */ -AnimationEffectTiming.prototype.duration; +AnimationEffectTimingReadOnly.prototype.duration; /** @type {string} */ -AnimationEffectTiming.prototype.direction; +AnimationEffectTimingReadOnly.prototype.direction; /** @type {string} */ -AnimationEffectTiming.prototype.easing; +AnimationEffectTimingReadOnly.prototype.easing; + + +/** + * @interface + * @extends {AnimationEffectTimingReadOnly} + */ +var AnimationEffectTiming = function() {}; + + +/** + * @interface + */ +var AnimationTimeline = function() {}; + +/** @type {?number} */ +AnimationTimeline.prototype.currentTime; + + +/** + * @constructor + * @implements {AnimationTimeline} + */ +var DocumentTimeline = function() {}; + +/** @override */ +DocumentTimeline.prototype.currentTime; + + +/** @type {!DocumentTimeline} */ +Document.prototype.timeline; + From 435f36331a331ebc41f0be0d8c3d5946fec5a142 Mon Sep 17 00:00:00 2001 From: Sam Thorogood Date: Mon, 25 Sep 2017 08:45:10 +1000 Subject: [PATCH 2/2] allow undefined for timing input --- externs/web-animations.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/externs/web-animations.js b/externs/web-animations.js index 800234f9..eef8209b 100644 --- a/externs/web-animations.js +++ b/externs/web-animations.js @@ -157,28 +157,28 @@ var KeyframeEffect = function(target, frames, options) {}; */ var AnimationEffectTimingProperties; -/** @type {number} */ +/** @type {number|undefined} */ AnimationEffectTimingProperties.prototype.delay; -/** @type {number} */ +/** @type {number|undefined} */ AnimationEffectTimingProperties.prototype.endDelay; -/** @type {string} */ +/** @type {string|undefined} */ AnimationEffectTimingProperties.prototype.fill; -/** @type {number} */ +/** @type {number|undefined} */ AnimationEffectTimingProperties.prototype.iterationStart; -/** @type {number} */ +/** @type {number|undefined} */ AnimationEffectTimingProperties.prototype.iterations; -/** @type {number|string} */ +/** @type {number|string|undefined} */ AnimationEffectTimingProperties.prototype.duration; -/** @type {string} */ +/** @type {string|undefined} */ AnimationEffectTimingProperties.prototype.direction; -/** @type {string} */ +/** @type {string|undefined} */ AnimationEffectTimingProperties.prototype.easing; @@ -188,7 +188,7 @@ AnimationEffectTimingProperties.prototype.easing; */ var KeyframeAnimationOptions; -/** @type {string} */ +/** @type {string|undefined} */ KeyframeAnimationOptions.prototype.id;