Animation.prototype.finished polyfill

finished-polyfill.js

// only polyfill .finished in browsers that already support animate()
if (document.body.animate) {
  
  // Chrome does not seem to expose the Animation constructor globally
  if (typeof Animation === 'undefined') {
    window.Animation = document.body.animate({}).constructor;
  }

  if (!('finished' in Animation.prototype)) {
    Object.defineProperty(Animation.prototype, 'finished', {
      get() {
        if (!this._finished) {
          this._finished = this.playState === 'finished' ? 
            Promise.resolve() :
            new Promise((resolve, reject) => {
              this.addEventListener('finish', resolve, {once: true});
              this.addEventListener('cancel', reject, {once: true});
            });
        }
        return this._finished;
      }
    });
  }
}

Hey @davej, thanks for this!

I tweaked it to use a WeakMap instead of modulos and expose the animation in promise settle states, may be of interest:

// only polyfill .finished in browsers that already support animate()
if (document.body.animate) {
  const finished = new WeakMap()

  // Chrome does not seem to expose the Animation constructor globally
  if (typeof Animation === 'undefined') {
    window.Animation = document.body.animate({}).constructor;
  }

  if (!('finished' in Animation.prototype)) {
    Object.defineProperty(Animation.prototype, 'finished', {
      get() {
        if (finished.has(this))
          return finished.get(this);

        const promise = this.playState === 'finished' ? 
          Promise.resolve() :
          new Promise((resolve, reject) => {
            this.addEventListener('finish', () => {
              resolve(this);
            }, {once: true});
            this.addEventListener('cancel', () => {
              reject(this);
            }, {once: true});
          });
        
        finished.set(this, promise);

        return promise;
      }
    });
  }
}

Thanks @barneycarroll, could you explain the advantages of this approach?