1 files changed, 23 insertions, 11 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 6a008112203..c8874e48c09 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -1,13 +1,12 @@
-/* eslint-disable class-methods-use-this */
-
 import './lib/utils/url_utility';
 import FilesCommentButton from './files_comment_button';
 import SingleFileDiff from './single_file_diff';
+import imageDiffHelper from './image_diff/helpers/index';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
 
-class Diff {
+export default class Diff {
   constructor() {
     const $diffFile = $('.files .diff-file');
 
@@ -17,14 +16,18 @@ class Diff {
       }
     });
 
-    FilesCommentButton.init($diffFile);
+    const tab = document.getElementById('diffs');
+    if (!tab || (tab && tab.dataset && tab.dataset.isLocked !== '')) FilesCommentButton.init($diffFile);
 
-    $diffFile.each((index, file) => new gl.ImageFile(file));
+    const firstFile = $('.files').first().get(0);
+    const canCreateNote = firstFile && firstFile.hasAttribute('data-can-create-note');
+    $diffFile.each((index, file) => imageDiffHelper.initImageDiff(file, canCreateNote));
 
     if (!isBound) {
       $(document)
         .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
-        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this))
+        .on('mousedown', 'td.line_content.parallel', this.handleParallelLineDown.bind(this));
       isBound = true;
     }
 
@@ -99,11 +102,23 @@ class Diff {
     }
     this.highlightSelectedLine();
   }
+  // eslint-disable-next-line class-methods-use-this
+  handleParallelLineDown(e) {
+    const line = $(e.currentTarget);
+    const table = line.closest('table');
+
+    table.removeClass('left-side-selected right-side-selected');
 
+    const lineClass = ['left-side', 'right-side'].filter(name => line.hasClass(name))[0];
+    if (lineClass) {
+      table.addClass(`${lineClass}-selected`);
+    }
+  }
+  // eslint-disable-next-line class-methods-use-this
   diffViewType() {
     return $('.inline-parallel-buttons a.active').data('view-type');
   }
-
+  // eslint-disable-next-line class-methods-use-this
   lineNumbers(line) {
     const children = line.find('.diff-line-num').toArray();
     if (children.length !== 2) {
@@ -111,7 +126,7 @@ class Diff {
     }
     return children.map(elm => parseInt($(elm).data('linenumber'), 10) || 0);
   }
-
+  // eslint-disable-next-line class-methods-use-this
   highlightSelectedLine() {
     const hash = gl.utils.getLocationHash();
     const $diffFiles = $('.diff-file');
@@ -124,6 +139,3 @@ class Diff {
     }
   }
 }
-
-window.gl = window.gl || {};
-window.gl.Diff = Diff;