1 files changed, 130 insertions, 0 deletions
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
new file mode 100644
index 00000000000..6829e8aeaea
--- /dev/null
+++ b/app/assets/javascripts/diff.js
@@ -0,0 +1,130 @@
+/* eslint-disable class-methods-use-this */
+
+require('./lib/utils/url_utility');
+
+(() => {
+  const UNFOLD_COUNT = 20;
+  let isBound = false;
+
+  class Diff {
+    constructor() {
+      const $diffFile = $('.files .diff-file');
+      $diffFile.singleFileDiff();
+      $diffFile.filesCommentButton();
+
+      $diffFile.each((index, file) => new gl.ImageFile(file));
+
+      if (this.diffViewType() === 'parallel') {
+        $('.content-wrapper .container-fluid').removeClass('container-limited');
+      }
+
+      if (!isBound) {
+        $(document)
+          .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
+          .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+        isBound = true;
+      }
+
+      if (gl.utils.getLocationHash()) {
+        this.highlightSelectedLine();
+      }
+
+      this.openAnchoredDiff();
+    }
+
+    handleClickUnfold(e) {
+      const $target = $(e.target);
+      // current babel config relies on iterators implementation, so we cannot simply do:
+      // const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
+      const ref = this.lineNumbers($target.parent());
+      const oldLineNumber = ref[0];
+      const newLineNumber = ref[1];
+      const offset = newLineNumber - oldLineNumber;
+      const bottom = $target.hasClass('js-unfold-bottom');
+      let since;
+      let to;
+      let unfold = true;
+
+      if (bottom) {
+        const lineNumber = newLineNumber + 1;
+        since = lineNumber;
+        to = lineNumber + UNFOLD_COUNT;
+      } else {
+        const lineNumber = newLineNumber - 1;
+        since = lineNumber - UNFOLD_COUNT;
+        to = lineNumber;
+
+        // make sure we aren't loading more than we need
+        const prevNewLine = this.lineNumbers($target.parent().prev())[1];
+        if (since <= prevNewLine + 1) {
+          since = prevNewLine + 1;
+          unfold = false;
+        }
+      }
+
+      const file = $target.parents('.diff-file');
+      const link = file.data('blob-diff-path');
+      const view = file.data('view');
+
+      const params = { since, to, bottom, offset, unfold, view };
+      $.get(link, params, response => $target.parent().replaceWith(response));
+    }
+
+    openAnchoredDiff(cb) {
+      const locationHash = gl.utils.getLocationHash();
+      const anchoredDiff = locationHash && locationHash.split('_')[0];
+
+      if (!anchoredDiff) return;
+
+      const diffTitle = $(`#${anchoredDiff}`);
+      const diffFile = diffTitle.closest('.diff-file');
+      const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
+      if (nothingHereBlock.length) {
+        const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
+        diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
+          this.highlightSelectedLine();
+          if (cb) cb();
+        });
+      } else if (cb) {
+        cb();
+      }
+    }
+
+    handleClickLineNum(e) {
+      const hash = $(e.currentTarget).attr('href');
+      e.preventDefault();
+      if (window.history.pushState) {
+        window.history.pushState(null, null, hash);
+      } else {
+        window.location.hash = hash;
+      }
+      this.highlightSelectedLine();
+    }
+
+    diffViewType() {
+      return $('.inline-parallel-buttons a.active').data('view-type');
+    }
+
+    lineNumbers(line) {
+      if (!line.children().length) {
+        return [0, 0];
+      }
+      return line.find('.diff-line-num').map((i, elm) => parseInt($(elm).data('linenumber'), 10));
+    }
+
+    highlightSelectedLine() {
+      const hash = gl.utils.getLocationHash();
+      const $diffFiles = $('.diff-file');
+      $diffFiles.find('.hll').removeClass('hll');
+
+      if (hash) {
+        $diffFiles
+          .find(`tr#${hash}:not(.match) td, td#${hash}, td[data-line-code="${hash}"]`)
+          .addClass('hll');
+      }
+    }
+  }
+
+  window.gl = window.gl || {};
+  window.gl.Diff = Diff;
+})();