Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | 6x 6x 6x 2x 6x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 2x 6x 6x | import JSZip from 'jszip'; import axios from '~/lib/utils/axios_utils'; import { __ } from '~/locale'; export default class SketchLoader { constructor(container) { this.container = container; this.loadingIcon = this.container.querySelector('.js-loading-icon'); this.load().catch(() => { this.error(); }); } async load() { const zipContents = await this.getZipContents(); const previewContents = await zipContents.files['previews/preview.png'].async('uint8array'); const blob = new Blob([previewContents], { type: 'image/png', }); this.render(window.URL.createObjectURL(blob)); } async getZipContents() { const { data } = await axios.get(this.container.dataset.endpoint, { responseType: 'arraybuffer', }); return JSZip.loadAsync(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() { Eif (this.loadingIcon) { this.loadingIcon.remove(); } } } |