diff options
Diffstat (limited to 'app/assets/javascripts/line_highlighter.js')
-rw-r--r-- | app/assets/javascripts/line_highlighter.js | 42 |
1 files changed, 18 insertions, 24 deletions
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js index 8621a133776..aaa8ee40966 100644 --- a/app/assets/javascripts/line_highlighter.js +++ b/app/assets/javascripts/line_highlighter.js @@ -1,7 +1,7 @@ /* eslint-disable func-names, no-underscore-dangle, no-param-reassign, consistent-return */ import $ from 'jquery'; -import 'vendor/jquery.scrollTo'; +import { scrollToElement } from '~/lib/utils/common_utils'; // LineHighlighter // @@ -32,7 +32,7 @@ import 'vendor/jquery.scrollTo'; // </div> // -const LineHighlighter = function(options = {}) { +const LineHighlighter = function (options = {}) { options.highlightLineClass = options.highlightLineClass || 'hll'; options.fileHolderSelector = options.fileHolderSelector || '.file-holder'; options.scrollFileHolder = options.scrollFileHolder || false; @@ -50,15 +50,15 @@ const LineHighlighter = function(options = {}) { this.highlightHash(); }; -LineHighlighter.prototype.bindEvents = function() { +LineHighlighter.prototype.bindEvents = function () { const $fileHolder = $(this.options.fileHolderSelector); $fileHolder.on('click', 'a[data-line-number]', this.clickHandler); $fileHolder.on('highlight:line', this.highlightHash); - window.addEventListener('hashchange', e => this.highlightHash(e.target.location.hash)); + window.addEventListener('hashchange', (e) => this.highlightHash(e.target.location.hash)); }; -LineHighlighter.prototype.highlightHash = function(newHash) { +LineHighlighter.prototype.highlightHash = function (newHash) { let range; if (newHash && typeof newHash === 'string') this._hash = newHash; @@ -69,27 +69,21 @@ LineHighlighter.prototype.highlightHash = function(newHash) { if (range[0]) { this.highlightRange(range); const lineSelector = `#L${range[0]}`; - const scrollOptions = { + + scrollToElement(lineSelector, { // Scroll to the first highlighted line on initial load - // Offset -50 for the sticky top bar, and another -100 for some context - offset: -150, - }; - if (this.options.scrollFileHolder) { - $(this.options.fileHolderSelector).scrollTo(lineSelector, scrollOptions); - } else { - $.scrollTo(lineSelector, scrollOptions); - } + // Add an offset of -100 for some context + offset: -100, + }); } } }; -LineHighlighter.prototype.clickHandler = function(event) { +LineHighlighter.prototype.clickHandler = function (event) { let range; event.preventDefault(); this.clearHighlight(); - const lineNumber = $(event.target) - .closest('a') - .data('lineNumber'); + const lineNumber = $(event.target).closest('a').data('lineNumber'); const current = this.hashToRange(this._hash); if (!(current[0] && event.shiftKey)) { // If there's no current selection, or there is but Shift wasn't held, @@ -107,7 +101,7 @@ LineHighlighter.prototype.clickHandler = function(event) { } }; -LineHighlighter.prototype.clearHighlight = function() { +LineHighlighter.prototype.clearHighlight = function () { return $(`.${this.highlightLineClass}`).removeClass(this.highlightLineClass); }; @@ -122,7 +116,7 @@ LineHighlighter.prototype.clearHighlight = function() { // hashToRange('#foo') # => [null, null] // // Returns an Array -LineHighlighter.prototype.hashToRange = function(hash) { +LineHighlighter.prototype.hashToRange = function (hash) { // ?L(\d+)(?:-(\d+))?$/) const matches = hash.match(/^#?L(\d+)(?:-(\d+))?$/); if (matches && matches.length) { @@ -136,14 +130,14 @@ LineHighlighter.prototype.hashToRange = function(hash) { // Highlight a single line // // lineNumber - Line number to highlight -LineHighlighter.prototype.highlightLine = function(lineNumber) { +LineHighlighter.prototype.highlightLine = function (lineNumber) { return $(`#LC${lineNumber}`).addClass(this.highlightLineClass); }; // Highlight all lines within a range // // range - Array containing the starting and ending line numbers -LineHighlighter.prototype.highlightRange = function(range) { +LineHighlighter.prototype.highlightRange = function (range) { if (range[1]) { const results = []; const ref = range[0] <= range[1] ? range : range.reverse(); @@ -158,7 +152,7 @@ LineHighlighter.prototype.highlightRange = function(range) { }; // Set the URL hash string -LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) { +LineHighlighter.prototype.setHash = function (firstLineNumber, lastLineNumber) { let hash; if (lastLineNumber) { hash = `#L${firstLineNumber}-${lastLineNumber}`; @@ -172,7 +166,7 @@ LineHighlighter.prototype.setHash = function(firstLineNumber, lastLineNumber) { // Make the actual hash change in the browser // // This method is stubbed in tests. -LineHighlighter.prototype.__setLocationHash__ = function(value) { +LineHighlighter.prototype.__setLocationHash__ = function (value) { return window.history.pushState( { url: value, |