debian-mirror-gitlab/app/assets/javascripts/blob/sketch/index.js

import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils';
import { __ } from '~/locale';

export default class SketchLoader {
  constructor(container) {
    this.container = container;
    this.loadingIcon = this.container.querySelector('.js-loading-icon');

    this.load();
  }

  load() {
    return this.getZipFile()
      .then(data => JSZip.loadAsync(data))
      .then(asyncResult => asyncResult.files['previews/preview.png'].async('uint8array'))
      .then(content => {
        const url = window.URL || window.webkitURL;
        const blob = new Blob([new Uint8Array(content)], {
          type: 'image/png',
        });
        const previewUrl = url.createObjectURL(blob);

        this.render(previewUrl);
      })
      .catch(this.error.bind(this));
  }

  getZipFile() {
    return new JSZip.external.Promise((resolve, reject) => {
      JSZipUtils.getBinaryContent(this.container.dataset.endpoint, (err, data) => {
        if (err) {
          reject(err);
        } else {
          resolve(data);
        }
      });
    });
  }

  render(previewUrl) {
    const previewLink = document.createElement('a');
    const previewImage = document.createElement('img');

    previewLink.href = previewUrl;
    previewLink.target = '_blank';
    previewImage.src = previewUrl;
    previewImage.className = 'img-fluid';

    previewLink.appendChild(previewImage);
    this.container.appendChild(previewLink);

    this.removeLoadingIcon();
  }

  error() {
    const errorMsg = document.createElement('p');

    errorMsg.className = 'gl-mt-3 gl-mb-3 text-center';
    errorMsg.textContent = __(`
      Cannot show preview. For previews on sketch files, they must have the file format
      introduced by Sketch version 43 and above.
    `);
    this.container.appendChild(errorMsg);

    this.removeLoadingIcon();
  }

  removeLoadingIcon() {
    if (this.loadingIcon) {
      this.loadingIcon.remove();
    }
  }
}