diff options
author | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-04-28 19:32:50 +0300 |
---|---|---|
committer | Luke "Jared" Bennett <lbennett@gitlab.com> | 2017-04-28 19:32:50 +0300 |
commit | 2ef7c6f070e52f68b10cba09d10a4db9ab8b2537 (patch) | |
tree | ede16dd068937e1b9fe3d82384d12469482cd8d0 /app/assets/javascripts/blob | |
parent | 1e2246e73ed45de4161c47a842dd68616373898a (diff) |
Fixed specs
Diffstat (limited to 'app/assets/javascripts/blob')
-rw-r--r-- | app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js | 58 |
1 files changed, 34 insertions, 24 deletions
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js index 1778f9cba51..cdbfe36ca1c 100644 --- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js +++ b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js @@ -3,6 +3,15 @@ import sqljs from 'sql.js'; import { template as _template } from 'underscore'; +const 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> +`); + class BalsamiqViewer { constructor(viewer) { this.viewer = viewer; @@ -18,23 +27,23 @@ class BalsamiqViewer { 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)); + previews.forEach((preview) => { + const renderedPreview = this.renderPreview(preview); - container.innerHTML = renderedPreviews.join(''); - container.classList.add('list-inline', 'previews'); + container.appendChild(renderedPreview); + }); + + container.classList.add('list-inline'); + container.classList.add('previews'); this.viewer.appendChild(container); } @@ -51,8 +60,10 @@ class BalsamiqViewer { return thumbnails[0].values.map(BalsamiqViewer.parsePreview); } - getTitle(resourceID) { - return this.database.exec(`SELECT * FROM resources WHERE id = '${resourceID}'`); + getResource(resourceID) { + const resources = this.database.exec(`SELECT * FROM resources WHERE id = '${resourceID}'`); + + return resources[0]; } renderPreview(preview) { @@ -61,15 +72,15 @@ class BalsamiqViewer { previewElement.classList.add('preview'); previewElement.innerHTML = this.renderTemplate(preview); - return previewElement.outerHTML; + return previewElement; } renderTemplate(preview) { - const title = this.getTitle(preview.resourceID); - const name = BalsamiqViewer.parseTitle(title); + const resource = this.getResource(preview.resourceID); + const name = BalsamiqViewer.parseTitle(resource); const image = preview.image; - const template = BalsamiqViewer.PREVIEW_TEMPLATE({ + const template = PREVIEW_TEMPLATE({ name, image, }); @@ -81,8 +92,16 @@ class BalsamiqViewer { return JSON.parse(preview[1]); } - static parseTitle(title) { - return JSON.parse(title[0].values[0][2]).name; + /* + * resource = { + * columns: ['ID', 'BRANCHID', 'ATTRIBUTES', 'DATA'], + * values: [['id', 'branchId', 'attributes', 'data']], + * } + * + * 'attributes' being a JSON string containing the `name` property. + */ + static parseTitle(resource) { + return JSON.parse(resource.values[0][2]).name; } static onError() { @@ -92,13 +111,4 @@ class BalsamiqViewer { } } -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; |