diff options
Diffstat (limited to 'app/assets/javascripts/blob')
| -rw-r--r-- | app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js | 111 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/balsamiq_viewer.js | 22 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/line_highlighter.js | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/pdf/pdf_viewer.vue | 2 | ||||
| -rw-r--r-- | app/assets/javascripts/blob/viewer/index.js | 8 |
5 files changed, 6 insertions, 139 deletions
diff --git a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js deleted file mode 100644 index 313bec7e01a..00000000000 --- a/app/assets/javascripts/blob/balsamiq/balsamiq_viewer.js +++ /dev/null @@ -1,111 +0,0 @@ -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; diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js deleted file mode 100644 index af8e8a4cd3d..00000000000 --- a/app/assets/javascripts/blob/balsamiq_viewer.js +++ /dev/null @@ -1,22 +0,0 @@ -import createFlash from '~/flash'; -import { __ } from '~/locale'; -import BalsamiqViewer from './balsamiq/balsamiq_viewer'; - -function onError() { - const flash = createFlash({ - message: __('Balsamiq file could not be loaded.'), - }); - - return flash; -} - -export default function loadBalsamiqFile() { - const viewer = document.getElementById('js-balsamiq-viewer'); - - if (!(viewer instanceof Element)) return; - - const { endpoint } = viewer.dataset; - - const balsamiqViewer = new BalsamiqViewer(viewer); - balsamiqViewer.loadFile(endpoint).catch(onError); -} diff --git a/app/assets/javascripts/blob/line_highlighter.js b/app/assets/javascripts/blob/line_highlighter.js index a1f59aa1b54..a8932f8c73b 100644 --- a/app/assets/javascripts/blob/line_highlighter.js +++ b/app/assets/javascripts/blob/line_highlighter.js @@ -37,6 +37,7 @@ const LineHighlighter = function (options = {}) { options.fileHolderSelector = options.fileHolderSelector || '.file-holder'; options.scrollFileHolder = options.scrollFileHolder || false; options.hash = options.hash || window.location.hash; + options.scrollBehavior = options.scrollBehavior || 'smooth'; this.options = options; this._hash = options.hash; @@ -74,6 +75,7 @@ LineHighlighter.prototype.highlightHash = function (newHash) { // Scroll to the first highlighted line on initial load // Add an offset of -100 for some context offset: -100, + behavior: this.options.scrollBehavior, }); } } diff --git a/app/assets/javascripts/blob/pdf/pdf_viewer.vue b/app/assets/javascripts/blob/pdf/pdf_viewer.vue index a1a62abeb6f..e07e415d6cf 100644 --- a/app/assets/javascripts/blob/pdf/pdf_viewer.vue +++ b/app/assets/javascripts/blob/pdf/pdf_viewer.vue @@ -1,6 +1,6 @@ <script> import { GlLoadingIcon } from '@gitlab/ui'; -import PdfLab from '../../pdf/index.vue'; +import PdfLab from '~/pdf/index.vue'; export default { components: { diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js index 1bda7d4e3f0..a6eed4ecae3 100644 --- a/app/assets/javascripts/blob/viewer/index.js +++ b/app/assets/javascripts/blob/viewer/index.js @@ -11,14 +11,12 @@ import { } from '~/performance/constants'; import { performanceMarkAndMeasure } from '~/performance/utils'; import { fixTitle } from '~/tooltips'; -import axios from '../../lib/utils/axios_utils'; -import { handleLocationHash } from '../../lib/utils/common_utils'; -import eventHub from '../../notes/event_hub'; +import axios from '~/lib/utils/axios_utils'; +import { handleLocationHash } from '~/lib/utils/common_utils'; +import eventHub from '~/notes/event_hub'; const loadRichBlobViewer = (type) => { switch (type) { - case 'balsamiq': - return import(/* webpackChunkName: 'balsamiq_viewer' */ '../balsamiq_viewer'); case 'notebook': return import(/* webpackChunkName: 'notebook_viewer' */ '../notebook_viewer'); case 'openapi': |