RepoEditor: Implement line and range linking.

app/assets/javascripts/line_highlighter.js

@@ -28,47 +28,51 @@
 //     </div>
 //   </div>
 //
-(function() {
-  this.LineHighlighter = (function() {
-    // CSS class applied to highlighted lines
-    LineHighlighter.prototype.highlightClass = 'hll';
 
-    // Internal copy of location.hash so we're not dependent on `location` in tests
-    LineHighlighter.prototype._hash = '';
+const LineHighlighter = function(options = {}) {
+  options.highlightLineClass = options.highlightLineClass || 'hll';
+  options.fileHolderSelector = options.fileHolderSelector || '.file-holder';
+  options.scrollFileHolder = options.scrollFileHolder || false;
+  options.hash = options.hash || location.hash;
 
-    function LineHighlighter(hash) {
-      if (hash == null) {
-        // Initialize a LineHighlighter object
-        //
-        // hash - String URL hash for dependency injection in tests
-        hash = location.hash;
-      }
+  this.options = options;
+  this._hash = options.hash;
+  this.highlightLineClass = options.highlightLineClass;
   this.setHash = this.setHash.bind(this);
   this.highlightLine = this.highlightLine.bind(this);
   this.clickHandler = this.clickHandler.bind(this);
   this.highlightHash = this.highlightHash.bind(this);
-      this._hash = hash;
+
   this.bindEvents();
   this.highlightHash();
-    }
+};
 
 LineHighlighter.prototype.bindEvents = function() {
-      const $fileHolder = $('.file-holder');
+  const $fileHolder = $(this.options.fileHolderSelector);
+
   $fileHolder.on('click', 'a[data-line-number]', this.clickHandler);
   $fileHolder.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], {
+      const lineSelector = `#L${range[0]}`;
+      const scrollOptions = {
         // 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);
+      }
     }
   }
 };
@@ -96,8 +100,7 @@
 };
 
 LineHighlighter.prototype.clearHighlight = function() {
-      return $("." + this.highlightClass).removeClass(this.highlightClass);
-    // Unhighlight previously highlighted lines
+  return $("." + this.highlightLineClass).removeClass(this.highlightLineClass);
 };
 
 // Convert a URL hash String into line numbers
@@ -128,7 +131,7 @@
 //
 // lineNumber - Line number to highlight
 LineHighlighter.prototype.highlightLine = function(lineNumber) {
-      return $("#LC" + lineNumber).addClass(this.highlightClass);
+  return $("#LC" + lineNumber).addClass(this.highlightLineClass);
 };
 
 // Highlight all lines within a range
@@ -170,6 +173,4 @@
   }, document.title, value);
 };
 
-    return LineHighlighter;
-  })();
-}).call(window);
+window.LineHighlighter = LineHighlighter;

app/assets/javascripts/repo/components/repo_preview.vue

@@ -1,23 +1,27 @@
 <script>
+/* global LineHighlighter */
+
 import Store from '../stores/repo_store';
 
 export default {
   data: () => Store,
-  mounted() {
-    this.highlightFile();
-  },
   computed: {
     html() {
       return this.activeFile.html;
     },
   },
-
   methods: {
     highlightFile() {
       $(this.$el).find('.file-content').syntaxHighlight();
     },
   },
-
+  mounted() {
+    this.highlightFile();
+    this.lineHighlighter = new LineHighlighter({
+      fileHolderSelector: '.blob-viewer-container',
+      scrollFileHolder: true,
+    });
+  },
   watch: {
     html() {
       this.$nextTick(() => {