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

2 files changed, 27 insertions, 29 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) {