skottie/modules/skottie-inline-sk/skottie-inline-sk.js

/**
 * @module skottie/skottie-inline-sk
 * @description <h2><code>skottie-inline-sk</code></h2>
 *
 * Displays just the WASM based animation suitable for using inline in
 * documentation.
 *
 * @attr width The width of the animation. Over-rides with width
 *    of an animation stored at skottie.skia.org.
 *
 * @attr height The height of the animation. Over-rides with height
 *    of an animation stored at skottie.skia.org.
 *
 * @attr src The URL to load the animation from. The contents can be
 *    either a stored skottie, or a raw BodyMovin JSON file. The
 *    stored Skotties contain width and height, but those values
 *    can be overridden by specifying the width and height on this element.
 *
 * @example
 *
 *  <skottie-inline-sk width=128 height=128
 *    src="https://skottie.skia.org/e/1112d01d28a776d777cebcd0632da15b">
 *  </skottie-inline-sk>
 */
import '../skottie-player-sk'
import { define } from 'elements-sk/define'
import { jsonOrThrow } from 'common-sk/modules/jsonOrThrow'

define('skottie-inline-sk', class extends HTMLElement {
  static get observedAttributes() {
    return ['width', 'height', 'src'];
  }

  constructor() {
    super();
    this._fetching = false;
  }

  connectedCallback() {
    this.innerHTML = `<skottie-player-sk></skottie-player-sk>`;
  }

  /** @prop width {string} Reflects the 'width' attribute.  */
  get width() { return this.getAttribute('width'); }
  set width(val) { this.setAttribute('width', val); }

  /** @prop height {string} Reflects the 'height' attribute.  */
  get height() { return this.getAttribute('height'); }
  set height(val) { this.setAttribute('height', val); }

  /** @prop src {string} Reflects the 'src' attribute. */
  get src() { return this.getAttribute('src'); }
  set src(val) { this.setAttribute('src', val); }

  _load() {
    if (!this.src) {
      return
    }
    this._fetching = true;
    fetch(this.src).then(jsonOrThrow).then(json => {
      this._fetching = false;
      let init = {
        width : 128,
        height : 128,
        lottie : json,
      }
      // If this is a file from skottie.skia.org.
      if (json.lottie !== undefined) {
        init.width = json.width;
        init.height = json.height;
        init.lottie = json.lottie;
      }
      if (this.width) {
        init.width = +this.width;
      }
      if (this.height) {
        init.height = +this.height;
      }
      let player = this.querySelector('skottie-player-sk');
      player.initialize(init);
    }).catch((msg) => {
      this._fetching = false;
    });
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (!this._fetching) {
      this._load();
    }
  }
});