Take out Vue

Shows error if not the correct file format
Can open preview image in new tab

3 files changed, 76 insertions, 49 deletions

diff --git a/app/assets/javascripts/blob/sketch/index.js b/app/assets/javascripts/blob/sketch/index.js
index 9a9c9e13a4f..3bd9dde37cb 100644
--- a/app/assets/javascripts/blob/sketch/index.js
+++ b/app/assets/javascripts/blob/sketch/index.js
@@ -1,52 +1,73 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
 import JSZip from 'jszip';
 import JSZipUtils from 'jszip-utils';
 
-Vue.use(VueResource);
-
-export default () => {
-  const el = document.getElementById('js-sketch-viewer');
-
-  return new Vue({
-    el,
-    data() {
-      return {
-        previewURL: '',
-        error: false,
-      };
-    },
-    methods: {
-      tryUnzip() {
-        return new JSZip.external.Promise((resolve, reject) => {
-          JSZipUtils.getBinaryContent(el.dataset.endpoint, (err, data) => {
-            if (err) {
-              reject(err);
-            } else {
-              resolve(data);
-            }
-          });
-        });
-      },
-    },
-    mounted() {
-      this.tryUnzip()
-        .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.previewURL = previewUrl;
-            });
+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',
         });
-    },
-    template: `
-      <div>
-        <img :src=previewURL />
-      </div>
-    `,
-  });
+        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-responsive';
+
+    previewLink.appendChild(previewImage);
+    this.container.appendChild(previewLink);
+
+    this.removeLoadingIcon();
+  }
+
+  error() {
+    const errorMsg = document.createElement('p');
+
+    errorMsg.className = 'prepend-top-default append-bottom-default 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();
+    }
+  }
 };
diff --git a/app/assets/javascripts/blob/sketch_viewer.js b/app/assets/javascripts/blob/sketch_viewer.js
index 6c44d3b2bab..60737274763 100644
--- a/app/assets/javascripts/blob/sketch_viewer.js
+++ b/app/assets/javascripts/blob/sketch_viewer.js
@@ -1,3 +1,7 @@
-import renderSketch from './sketch';
+import SketchLoader from './sketch';
 
-document.addEventListener('DOMContentLoaded', renderSketch);
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('js-sketch-viewer');
+  
+  new SketchLoader(el);
+});
diff --git a/app/views/projects/blob/_sketch.html.haml b/app/views/projects/blob/_sketch.html.haml
index ecb38571bb6..dad9369cb2a 100644
--- a/app/views/projects/blob/_sketch.html.haml
+++ b/app/views/projects/blob/_sketch.html.haml
@@ -3,3 +3,5 @@
   = page_specific_javascript_bundle_tag('sketch_viewer')
 
 .file-content#js-sketch-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+  .js-loading-icon.text-center.prepend-top-default.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }
+    = icon('spinner spin 2x', 'aria-hidden' => 'true');