refactor Diff to es6 class syntax

app/assets/javascripts/diff.js → app/assets/javascripts/diff.js.es6

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, max-len, one-var, camelcase, one-var-declaration-per-line, no-unused-vars, no-unused-expressions, no-sequences, object-shorthand, comma-dangle, prefer-arrow-callback, semi, radix, padded-blocks, max-len */
-(function() {
-  this.Diff = (function() {
-    var UNFOLD_COUNT;
+/* eslint-disable */
 
-    UNFOLD_COUNT = 20;
+((global) => {
+  const UNFOLD_COUNT = 20;
 
-    function Diff() {
+  class Diff {
+    constructor() {
       $('.files .diff-file').singleFileDiff();
-      this.filesCommentButton = $('.files .diff-file').filesCommentButton();
+      $('.files .diff-file').filesCommentButton();
+
       if (this.diffViewType() === 'parallel') {
         $('.content-wrapper .container-fluid').removeClass('container-limited');
       }
       $(document)
         .off('click', '.js-unfold')
-        .on('click', '.js-unfold', (function(event) {
+        .on('click', '.js-unfold', (event) => {
           var line_number, link, file, offset, old_line, params, prev_new_line, prev_old_line, ref, ref1, since, target, to, unfold, unfoldBottom;
           target = $(event.target);
           unfoldBottom = target.hasClass('js-unfold-bottom');
@@ -48,29 +48,27 @@
           return $.get(link, params, function(response) {
             return target.parent().replaceWith(response);
           });
-        }).bind(this));
-
-      $(document)
+        })
         .off('click', '.diff-line-num a')
-        .on('click', '.diff-line-num a', (function(e) {
-          var hash = $(e.currentTarget).attr('href');
-          e.preventDefault();
+        .on('click', '.diff-line-num a', (event) => {
+          var hash = $(event.currentTarget).attr('href');
+          event.preventDefault();
           if ( history.pushState ) {
             history.pushState(null, null, hash);
           } else {
             window.location.hash = hash;
           }
           this.highlighSelectedLine();
-        }).bind(this));
+        });
 
       this.highlighSelectedLine();
     }
 
-    Diff.prototype.diffViewType = function() {
+    diffViewType() {
       return $('.inline-parallel-buttons a.active').data('view-type');
     }
 
-    Diff.prototype.lineNumbers = function(line) {
+    lineNumbers(line) {
       if (!line.children().length) {
         return [0, 0];
       }
@@ -78,26 +76,21 @@
       return line.find('.diff-line-num').map(function() {
         return parseInt($(this).data('linenumber'));
       });
-    };
+    }
 
-    Diff.prototype.highlighSelectedLine = function() {
-      var $diffLine, dataLineString, locationHash;
-      $('.hll').removeClass('hll');
-      locationHash = window.location.hash;
-      if (locationHash !== '') {
-        dataLineString = '[data-line-code="' + locationHash.replace('#', '') + '"]';
-        $diffLine = $(".diff-file " + locationHash + ":not(.match)");
-        if (!$diffLine.is('tr')) {
-          $diffLine = $(".diff-file td" + locationHash + ", .diff-file td" + dataLineString);
-        } else {
-          $diffLine = $diffLine.find('td');
+    highlighSelectedLine() {
+      const $diffFiles = $('.diff-file');
+      $diffFiles.find('.hll').removeClass('hll');
+
+      if (window.location.hash !== '') {
+        const hash = window.location.hash.replace('#', '');
+        $diffFiles
+          .find(`tr#${hash}:not(.match) td, td#${hash}, td[data-line-code="${hash}"]`)
+          .addClass('hll');
+      }
     }
-        $diffLine.addClass('hll');
   }
-    };
-
-    return Diff;
 
-  })();
+  global.Diff = Diff;
 
-}).call(this);
+})(window.gl || (window.gl = {}));

app/assets/javascripts/dispatcher.js.es6

@@ -61,7 +61,7 @@
           new ZenMode();
           break;
         case 'projects:compare:show':
-          new Diff();
+          new gl.Diff();
           break;
         case 'projects:issues:new':
         case 'projects:issues:edit':
@@ -74,7 +74,7 @@
           break;
         case 'projects:merge_requests:new':
         case 'projects:merge_requests:edit':
-          new Diff();
+          new gl.Diff();
           shortcut_handler = new ShortcutsNavigation();
           new GLForm($('.merge-request-form'));
           new IssuableForm($('.merge-request-form'));
@@ -91,7 +91,7 @@
           new GLForm($('.release-form'));
           break;
         case 'projects:merge_requests:show':
-          new Diff();
+          new gl.Diff();
           shortcut_handler = new ShortcutsIssuable(true);
           new ZenMode();
           new MergedButtons();
@@ -101,7 +101,7 @@
           new MergedButtons();
           break;
         case "projects:merge_requests:diffs":
-          new Diff();
+          new gl.Diff();
           new ZenMode();
           new MergedButtons();
           break;
@@ -117,7 +117,7 @@
           break;
         case 'projects:commit:show':
           new Commit();
-          new Diff();
+          new gl.Diff();
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
           break;

app/assets/javascripts/merge_request_tabs.js.es6

@@ -239,7 +239,7 @@
           this.diffsLoaded = true;
           this.scrollToElement("#diffs");
 
-          new Diff();
+          new gl.Diff();
         }
       });
     }