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

75 lines
1.9 KiB
JavaScript
Raw Normal View History

2017-08-17 22:00:37 +05:30
import JSZip from 'jszip';
import JSZipUtils from 'jszip-utils';
2019-07-31 22:56:46 +05:30
import { __ } from '~/locale';
2017-08-17 22:00:37 +05:30
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'))
2018-12-13 13:39:08 +05:30
.then(content => {
2017-08-17 22:00:37 +05:30
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;
2018-11-08 19:23:39 +05:30
previewImage.className = 'img-fluid';
2017-08-17 22:00:37 +05:30
previewLink.appendChild(previewImage);
this.container.appendChild(previewLink);
this.removeLoadingIcon();
}
error() {
const errorMsg = document.createElement('p');
2020-07-28 23:09:34 +05:30
errorMsg.className = 'gl-mt-3 gl-mb-3 text-center';
2019-07-31 22:56:46 +05:30
errorMsg.textContent = __(`
2017-08-17 22:00:37 +05:30
Cannot show preview. For previews on sketch files, they must have the file format
introduced by Sketch version 43 and above.
2019-07-31 22:56:46 +05:30
`);
2017-08-17 22:00:37 +05:30
this.container.appendChild(errorMsg);
this.removeLoadingIcon();
}
removeLoadingIcon() {
if (this.loadingIcon) {
this.loadingIcon.remove();
}
}
}