All files / app/assets/javascripts/blob/balsamiq balsamiq_viewer.js

96.88% Statements 31/32
100% Branches 0/0
92.86% Functions 13/14
96.88% Lines 31/32

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 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 107 108 109 110 111 112          1x                     4x       3x               2x     1x         6x   6x   6x 6x 12x   12x     6x 6x   6x       3x   3x       3x   3x       2x   2x       4x   4x 4x   4x       3x 3x 3x   3x         3x       2x                       2x          
import { template as _template } from 'lodash';
import sqljs from 'sql.js';
import axios from '~/lib/utils/axios_utils';
import { successCodes } from '~/lib/utils/http_status';
 
const PREVIEW_TEMPLATE = _template(`
  <div class="card">
    <div class="card-header"><%- name %></div>
    <div class="card-body">
      <img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
    </div>
  </div>
`);
 
class BalsamiqViewer {
  constructor(viewer) {
    this.viewer = viewer;
  }
 
  loadFile(endpoint) {
    return axios
      .get(endpoint, {
        responseType: 'arraybuffer',
        validateStatus(status) {
          return status !== successCodes.OK;
        },
      })
      .then(({ data }) => {
        this.renderFile(data);
      })
      .catch((e) => {
        throw new Error(e);
      });
  }
 
  renderFile(fileBuffer) {
    const container = document.createElement('ul');
 
    this.initDatabase(fileBuffer);
 
    const previews = this.getPreviews();
    previews.forEach((preview) => {
      const renderedPreview = this.renderPreview(preview);
 
      container.appendChild(renderedPreview);
    });
 
    container.classList.add('list-inline');
    container.classList.add('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);
  }
 
  getResource(resourceID) {
    const resources = this.database.exec(`SELECT * FROM resources WHERE id = '${resourceID}'`);
 
    return resources[0];
  }
 
  renderPreview(preview) {
    const previewElement = document.createElement('li');
 
    previewElement.classList.add('preview');
    previewElement.innerHTML = this.renderTemplate(preview);
 
    return previewElement;
  }
 
  renderTemplate(preview) {
    const resource = this.getResource(preview.resourceID);
    const name = BalsamiqViewer.parseTitle(resource);
    const { image } = preview;
 
    const template = PREVIEW_TEMPLATE({
      name,
      image,
    });
 
    return template;
  }
 
  static parsePreview(preview) {
    return JSON.parse(preview[1]);
  }
 
  /*
   * 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;
  }
}
 
export default BalsamiqViewer;