summaryrefslogtreecommitdiff
path: root/app/assets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/javascripts/blob/pdf/index.js2
-rw-r--r--app/assets/javascripts/blob/viewer/index.js120
-rw-r--r--app/assets/javascripts/dispatcher.js2
-rw-r--r--app/assets/javascripts/line_highlighter.js21
4 files changed, 137 insertions, 8 deletions
diff --git a/app/assets/javascripts/blob/pdf/index.js b/app/assets/javascripts/blob/pdf/index.js
index a74c2db9a61..9161be98853 100644
--- a/app/assets/javascripts/blob/pdf/index.js
+++ b/app/assets/javascripts/blob/pdf/index.js
@@ -31,7 +31,7 @@ export default () => {
},
},
template: `
- <div class="container-fluid md prepend-top-default append-bottom-default">
+ <div class="js-pdf-viewer container-fluid md prepend-top-default append-bottom-default">
<div
class="text-center loading"
v-if="loading && !error">
diff --git a/app/assets/javascripts/blob/viewer/index.js b/app/assets/javascripts/blob/viewer/index.js
new file mode 100644
index 00000000000..7efa8537298
--- /dev/null
+++ b/app/assets/javascripts/blob/viewer/index.js
@@ -0,0 +1,120 @@
+/* global Flash */
+export default class BlobViewer {
+ constructor() {
+ this.switcher = document.querySelector('.js-blob-viewer-switcher');
+ this.switcherBtns = document.querySelectorAll('.js-blob-viewer-switch-btn');
+ this.copySourceBtn = document.querySelector('.js-copy-blob-source-btn');
+ this.simpleViewer = document.querySelector('.blob-viewer[data-type="simple"]');
+ this.richViewer = document.querySelector('.blob-viewer[data-type="rich"]');
+ this.$blobContentHolder = $('#blob-content-holder');
+
+ let initialViewerName = document.querySelector('.blob-viewer:not(.hidden)').getAttribute('data-type');
+
+ this.initBindings();
+
+ if (this.switcher && location.hash.indexOf('#L') === 0) {
+ initialViewerName = 'simple';
+ }
+
+ this.switchToViewer(initialViewerName);
+ }
+
+ initBindings() {
+ if (this.switcherBtns.length) {
+ Array.from(this.switcherBtns)
+ .forEach((el) => {
+ el.addEventListener('click', this.switchViewHandler.bind(this));
+ });
+ }
+
+ if (this.copySourceBtn) {
+ this.copySourceBtn.addEventListener('click', () => {
+ if (this.copySourceBtn.classList.contains('disabled')) return;
+
+ this.switchToViewer('simple');
+ });
+ }
+ }
+
+ switchViewHandler(e) {
+ const target = e.currentTarget;
+
+ e.preventDefault();
+
+ this.switchToViewer(target.getAttribute('data-viewer'));
+ }
+
+ toggleCopyButtonState() {
+ if (!this.copySourceBtn) return;
+
+ if (this.simpleViewer.getAttribute('data-loaded')) {
+ this.copySourceBtn.setAttribute('title', 'Copy source to clipboard');
+ this.copySourceBtn.classList.remove('disabled');
+ } else if (this.activeViewer === this.simpleViewer) {
+ this.copySourceBtn.setAttribute('title', 'Wait for the source to load to copy it to the clipboard');
+ this.copySourceBtn.classList.add('disabled');
+ } else {
+ this.copySourceBtn.setAttribute('title', 'Switch to the source to copy it to the clipboard');
+ this.copySourceBtn.classList.add('disabled');
+ }
+
+ $(this.copySourceBtn).tooltip('fixTitle');
+ }
+
+ loadViewer(viewerParam) {
+ const viewer = viewerParam;
+ const url = viewer.getAttribute('data-url');
+
+ if (!url || viewer.getAttribute('data-loaded') || viewer.getAttribute('data-loading')) {
+ return;
+ }
+
+ viewer.setAttribute('data-loading', 'true');
+
+ $.ajax({
+ url,
+ dataType: 'JSON',
+ })
+ .fail(() => new Flash('Error loading source view'))
+ .done((data) => {
+ viewer.innerHTML = data.html;
+ $(viewer).syntaxHighlight();
+
+ viewer.setAttribute('data-loaded', 'true');
+
+ this.$blobContentHolder.trigger('highlight:line');
+
+ this.toggleCopyButtonState();
+ });
+ }
+
+ switchToViewer(name) {
+ const newViewer = document.querySelector(`.blob-viewer[data-type='${name}']`);
+ if (this.activeViewer === newViewer) return;
+
+ const oldButton = document.querySelector('.js-blob-viewer-switch-btn.active');
+ const newButton = document.querySelector(`.js-blob-viewer-switch-btn[data-viewer='${name}']`);
+ const oldViewer = document.querySelector(`.blob-viewer:not([data-type='${name}'])`);
+
+ if (oldButton) {
+ oldButton.classList.remove('active');
+ }
+
+ if (newButton) {
+ newButton.classList.add('active');
+ newButton.blur();
+ }
+
+ if (oldViewer) {
+ oldViewer.classList.add('hidden');
+ }
+
+ newViewer.classList.remove('hidden');
+
+ this.activeViewer = newViewer;
+
+ this.toggleCopyButtonState();
+
+ this.loadViewer(newViewer);
+ }
+}
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index b20673cd03c..d3d75c4bf4a 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -48,6 +48,7 @@ import BlobForkSuggestion from './blob/blob_fork_suggestion';
import UserCallout from './user_callout';
import { ProtectedTagCreate, ProtectedTagEditList } from './protected_tags';
import ShortcutsWiki from './shortcuts_wiki';
+import BlobViewer from './blob/viewer/index';
const ShortcutsBlob = require('./shortcuts_blob');
@@ -299,6 +300,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
gl.TargetBranchDropDown.bootstrap();
break;
case 'projects:blob:show':
+ new BlobViewer();
gl.TargetBranchDropDown.bootstrap();
initBlob();
break;
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index 1821ca18053..a6f7bea99f5 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -41,7 +41,6 @@ require('vendor/jquery.scrollTo');
LineHighlighter.prototype._hash = '';
function LineHighlighter(hash) {
- var range;
if (hash == null) {
// Initialize a LineHighlighter object
//
@@ -51,10 +50,22 @@ require('vendor/jquery.scrollTo');
this.setHash = bind(this.setHash, this);
this.highlightLine = bind(this.highlightLine, this);
this.clickHandler = bind(this.clickHandler, this);
+ this.highlightHash = this.highlightHash.bind(this);
this._hash = hash;
this.bindEvents();
- if (hash !== '') {
- range = this.hashToRange(hash);
+ this.highlightHash();
+ }
+
+ LineHighlighter.prototype.bindEvents = function() {
+ const $blobContentHolder = $('#blob-content-holder');
+ $blobContentHolder.on('click', 'a[data-line-number]', this.clickHandler);
+ $blobContentHolder.on('highlight:line', this.highlightHash);
+ };
+
+ LineHighlighter.prototype.highlightHash = function() {
+ var range;
+ if (this._hash !== '') {
+ range = this.hashToRange(this._hash);
if (range[0]) {
this.highlightRange(range);
$.scrollTo("#L" + range[0], {
@@ -64,10 +75,6 @@ require('vendor/jquery.scrollTo');
});
}
}
- }
-
- LineHighlighter.prototype.bindEvents = function() {
- $('#blob-content-holder').on('click', 'a[data-line-number]', this.clickHandler);
};
LineHighlighter.prototype.clickHandler = function(event) {
View Lorry Controller Status