Polyfill for apple-touch-startup-image

apple-touch-startup-image-polyfill.es6.js

/* global window, Image */

/**
 * Class AppleTouchStartupImage.
 *
 * Insert a script in the html head at the 1st position containing:
 * const startupImage = new AppleTouchStartupImage();
 * startupImage.install();
 *
 * @prop {string}      image           - source
 * @prop {HTMLElement} element         - inserted in the html body
 * @prop {int}         transitionDelay - in millisecond
 */
class AppleTouchStartupImage {
  /**
   * Constructor.
   */
  constructor() {
    this.element = null;
    this.image = this.getStartupImage();
    this.transitionDelay = 400;
  }

  /**
   * Get startup image.
   *
   * @returns {string|null}
   */
  getStartupImage() {
    const images = window.document.head.querySelectorAll('link[rel="apple-touch-startup-image"]');
    let startupImage = null;
    [].forEach.call(images, (image) => {
      const media = image.getAttribute('media');
      const source = image.getAttribute('href');
      if (window.matchMedia(media).matches) {
        startupImage = source;
      }
    });

    return startupImage || this.guessStartupImage();
  }

  /**
   * Guess startup image.
   *
   * @returns {string|null}
   */
  guessStartupImage() {
    const images = window.document.head.querySelectorAll('link[rel="apple-touch-startup-image"]');
    const sorted = [];
    [].forEach.call(images, (image) => {
      const media = image.getAttribute('media').split(' and ');
      const width = window.parseInt(media.filter(medium => medium.match(/device-width/)).join().match(/[0-9]+/)[0], 10);
      const height = window.parseInt(media.filter(medium => medium.match(/device-height/)).join().match(/[0-9]+/)[0], 10);
      const source = image.getAttribute('href');
      const query = media.filter(medium => medium.match(/(orientation|pixel-ratio)/)).join(' and ');
      if (window.matchMedia(query).matches) {
        sorted.push({
          width,
          height,
          source,
        });
      }
    });
    let startupImage = null;
    sorted.sort((a, b) => (a.width * a.height) - (b.width * b.height)).forEach((info) => {
      if (null === startupImage
        && (info.width * info.height) > (window.screen.width * window.screen.height)) {
        startupImage = info.source;
      }
    });

    return startupImage || 0 < sorted.length ? sorted[sorted.length - 1].source : null;
  }

  /**
   * Hide startup image.
   */
  hide() {
    this.element.style.opacity = 0;
    window.setTimeout(() => {
      window.document.body.removeChild(this.element);
      this.element = null;
    }, this.transitionDelay);
  }

  /**
   * Install startup image.
   */
  install() {
    if (!this.image) {
      return;
    }
    this.show();
    window.addEventListener('load', () => {
      this.hide();
    });
  }

  /**
   * Show startup image.
   */
  show() {
    this.element = new Image();
    this.element.src = this.image;
    Object.assign(this.element.style, {
      borderWidth: 0,
      borderStyle: 'solid',
      borderColor: 'transparent',
      bottom: 0,
      display: 'block',
      height: '100%',
      left: 0,
      opacity: 1,
      position: 'fixed',
      right: 0,
      transitionDuration: `${this.transitionDelay}ms`,
      top: 0,
      width: '100%',
      zIndex: 9999,
    });
    window.document.body.appendChild(this.element);
  }
}

export default AppleTouchStartupImage;