Use jQuery niceness on blob_fork_suggestionuse-jquery-on-blob-fork-suggestion

Fix
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10602#note_27871752

3 files changed, 43 insertions, 44 deletions

diff --git a/app/assets/javascripts/blob/blob_fork_suggestion.js b/app/assets/javascripts/blob/blob_fork_suggestion.js
index 3baf81905fe..47c431fb809 100644
--- a/app/assets/javascripts/blob/blob_fork_suggestion.js
+++ b/app/assets/javascripts/blob/blob_fork_suggestion.js
@@ -16,47 +16,44 @@ const defaults = {
 class BlobForkSuggestion {
   constructor(options) {
     this.elementMap = Object.assign({}, defaults, options);
-    this.onClickWrapper = this.onClick.bind(this);
-
-    document.addEventListener('click', this.onClickWrapper);
+    this.onOpenButtonClick = this.onOpenButtonClick.bind(this);
+    this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
   }
 
-  showSuggestionSection(forkPath, action = 'edit') {
-    [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
-      suggestionSection.classList.remove('hidden');
-    });
+  init() {
+    this.bindEvents();
 
-    [].forEach.call(this.elementMap.forkButtons, (forkButton) => {
-      forkButton.setAttribute('href', forkPath);
-    });
+    return this;
+  }
 
-    [].forEach.call(this.elementMap.actionTextPieces, (actionTextPiece) => {
-      // eslint-disable-next-line no-param-reassign
-      actionTextPiece.textContent = action;
-    });
+  bindEvents() {
+    $(this.elementMap.openButtons).on('click', this.onOpenButtonClick);
+    $(this.elementMap.cancelButtons).on('click', this.onCancelButtonClick);
   }
 
-  hideSuggestionSection() {
-    [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => {
-      suggestionSection.classList.add('hidden');
-    });
+  showSuggestionSection(forkPath, action = 'edit') {
+    $(this.elementMap.suggestionSections).removeClass('hidden');
+    $(this.elementMap.forkButtons).attr('href', forkPath);
+    $(this.elementMap.actionTextPieces).text(action);
   }
 
-  onClick(e) {
-    const el = e.target;
+  hideSuggestionSection() {
+    $(this.elementMap.suggestionSections).addClass('hidden');
+  }
 
-    if ([].includes.call(this.elementMap.openButtons, el)) {
-      const { forkPath, action } = el.dataset;
-      this.showSuggestionSection(forkPath, action);
-    }
+  onOpenButtonClick(e) {
+    const forkPath = $(e.currentTarget).attr('data-fork-path');
+    const action = $(e.currentTarget).attr('data-action');
+    this.showSuggestionSection(forkPath, action);
+  }
 
-    if ([].includes.call(this.elementMap.cancelButtons, el)) {
-      this.hideSuggestionSection();
-    }
+  onCancelButtonClick() {
+    this.hideSuggestionSection();
   }
 
   destroy() {
-    document.removeEventListener('click', this.onClickWrapper);
+    $(this.elementMap.openButtons).off('click', this.onOpenButtonClick);
+    $(this.elementMap.cancelButtons).off('click', this.onCancelButtonClick);
   }
 }
 
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 20db2698ba8..b20673cd03c 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -97,7 +97,8 @@ const ShortcutsBlob = require('./shortcuts_blob');
           cancelButtons: document.querySelectorAll('.js-cancel-fork-suggestion-button'),
           suggestionSections: document.querySelectorAll('.js-file-fork-suggestion-section'),
           actionTextPieces: document.querySelectorAll('.js-file-fork-suggestion-section-action'),
-        });
+        })
+          .init();
       }
 
       switch (page) {
diff --git a/spec/javascripts/blob/blob_fork_suggestion_spec.js b/spec/javascripts/blob/blob_fork_suggestion_spec.js
index d0d64d75957..d1ab0a32f85 100644
--- a/spec/javascripts/blob/blob_fork_suggestion_spec.js
+++ b/spec/javascripts/blob/blob_fork_suggestion_spec.js
@@ -3,20 +3,21 @@ import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
 describe('BlobForkSuggestion', () => {
   let blobForkSuggestion;
 
-  const openButtons = [document.createElement('div')];
-  const forkButtons = [document.createElement('a')];
-  const cancelButtons = [document.createElement('div')];
-  const suggestionSections = [document.createElement('div')];
-  const actionTextPieces = [document.createElement('div')];
+  const openButton = document.createElement('div');
+  const forkButton = document.createElement('a');
+  const cancelButton = document.createElement('div');
+  const suggestionSection = document.createElement('div');
+  const actionTextPiece = document.createElement('div');
 
   beforeEach(() => {
     blobForkSuggestion = new BlobForkSuggestion({
-      openButtons,
-      forkButtons,
-      cancelButtons,
-      suggestionSections,
-      actionTextPieces,
-    });
+      openButtons: openButton,
+      forkButtons: forkButton,
+      cancelButtons: cancelButton,
+      suggestionSections: suggestionSection,
+      actionTextPieces: actionTextPiece,
+    })
+      .init();
   });
 
   afterEach(() => {
@@ -25,13 +26,13 @@ describe('BlobForkSuggestion', () => {
 
   it('showSuggestionSection', () => {
     blobForkSuggestion.showSuggestionSection('/foo', 'foo');
-    expect(suggestionSections[0].classList.contains('hidden')).toEqual(false);
-    expect(forkButtons[0].getAttribute('href')).toEqual('/foo');
-    expect(actionTextPieces[0].textContent).toEqual('foo');
+    expect(suggestionSection.classList.contains('hidden')).toEqual(false);
+    expect(forkButton.getAttribute('href')).toEqual('/foo');
+    expect(actionTextPiece.textContent).toEqual('foo');
   });
 
   it('hideSuggestionSection', () => {
     blobForkSuggestion.hideSuggestionSection();
-    expect(suggestionSections[0].classList.contains('hidden')).toEqual(true);
+    expect(suggestionSection.classList.contains('hidden')).toEqual(true);
   });
 });