blob: 5bcd7d5eccc078a2bfc8e4bcbc1ecd4a9ad7839a (
plain)
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
/* global Flash */
import sqljs from 'sql.js';
import { template as _template } from 'underscore';
import Spinner from '../../spinner';
class BalsamiqViewer {
constructor(viewer) {
this.viewer = viewer;
this.endpoint = this.viewer.dataset.endpoint;
this.spinner = new Spinner(this.viewer);
}
loadFile() {
const xhr = new XMLHttpRequest();
xhr.open('GET', this.endpoint, true);
xhr.responseType = 'arraybuffer';
xhr.onload = this.renderFile.bind(this);
xhr.onerror = BalsamiqViewer.onError;
this.spinner.start();
xhr.send();
}
renderFile(loadEvent) {
this.spinner.stop();
const container = document.createElement('ul');
this.initDatabase(loadEvent.target.response);
const previews = this.getPreviews();
const renderedPreviews = previews.map(preview => this.renderPreview(preview));
container.innerHTML = renderedPreviews.join('');
container.classList.add('list-inline', 'previews');
this.viewer.appendChild(container);
}
initDatabase(data) {
const previewBinary = new Uint8Array(data);
this.database = new sqljs.Database(previewBinary);
}
getPreviews() {
const thumbnails = this.database.exec('SELECT * FROM thumbnails');
return thumbnails[0].values.map(BalsamiqViewer.parsePreview);
}
getTitle(resourceID) {
return this.database.exec(`SELECT * FROM resources WHERE id = '${resourceID}'`);
}
renderPreview(preview) {
const previewElement = document.createElement('li');
previewElement.classList.add('preview');
previewElement.innerHTML = this.renderTemplate(preview);
return previewElement.outerHTML;
}
renderTemplate(preview) {
const title = this.getTitle(preview.resourceID);
const name = BalsamiqViewer.parseTitle(title);
const image = preview.image;
const template = BalsamiqViewer.PREVIEW_TEMPLATE({
name,
image,
});
return template;
}
static parsePreview(preview) {
return JSON.parse(preview[1]);
}
static parseTitle(title) {
return JSON.parse(title[0].values[0][2]).name;
}
static onError() {
const flash = new Flash('Balsamiq file could not be loaded.');
return flash;
}
}
BalsamiqViewer.PREVIEW_TEMPLATE = _template(`
<div class="panel panel-default">
<div class="panel-heading"><%- name %></div>
<div class="panel-body">
<img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
</div>
</div>
`);
export default BalsamiqViewer;
|
