Merge branch 'ee-use-jquery-on-blob-fork-suggestion' into 'master'

Use jQuery niceness on blob_fork_suggestion -- EE merge edition

See merge request !1706

app/assets/javascripts/blob/blob_fork_suggestion.js

-function BlobForkSuggestion(openButton, cancelButton, suggestionSection) {
-  if (openButton) {
-    openButton.addEventListener('click', () => {
-      suggestionSection.classList.remove('hidden');
-    });
+const defaults = {
+  // Buttons that will show the `suggestionSections`
+  // has `data-fork-path`, and `data-action`
+  openButtons: [],
+  // Update the href(from `openButton` -> `data-fork-path`)
+  // whenever a `openButton` is clicked
+  forkButtons: [],
+  // Buttons to hide the `suggestionSections`
+  cancelButtons: [],
+  // Section to show/hide
+  suggestionSections: [],
+  // Pieces of text that need updating depending on the action, `edit`, `replace`, `delete`
+  actionTextPieces: [],
+};
+
+class BlobForkSuggestion {
+  constructor(options) {
+    this.elementMap = Object.assign({}, defaults, options);
+    this.onOpenButtonClick = this.onOpenButtonClick.bind(this);
+    this.onCancelButtonClick = this.onCancelButtonClick.bind(this);
+  }
+
+  init() {
+    this.bindEvents();
+
+    return this;
+  }
+
+  bindEvents() {
+    $(this.elementMap.openButtons).on('click', this.onOpenButtonClick);
+    $(this.elementMap.cancelButtons).on('click', this.onCancelButtonClick);
+  }
+
+  showSuggestionSection(forkPath, action = 'edit') {
+    $(this.elementMap.suggestionSections).removeClass('hidden');
+    $(this.elementMap.forkButtons).attr('href', forkPath);
+    $(this.elementMap.actionTextPieces).text(action);
+  }
+
+  hideSuggestionSection() {
+    $(this.elementMap.suggestionSections).addClass('hidden');
+  }
+
+  onOpenButtonClick(e) {
+    const forkPath = $(e.currentTarget).attr('data-fork-path');
+    const action = $(e.currentTarget).attr('data-action');
+    this.showSuggestionSection(forkPath, action);
+  }
+
+  onCancelButtonClick() {
+    this.hideSuggestionSection();
   }
 
-  if (cancelButton) {
-    cancelButton.addEventListener('click', () => {
-      suggestionSection.classList.add('hidden');
-    });
+  destroy() {
+    $(this.elementMap.openButtons).off('click', this.onOpenButtonClick);
+    $(this.elementMap.cancelButtons).off('click', this.onCancelButtonClick);
   }
 }
 

app/assets/javascripts/dispatcher.js

@@ -97,11 +97,14 @@ const ShortcutsBlob = require('./shortcuts_blob');
           fileBlobPermalinkUrl,
         });
 
-        new BlobForkSuggestion(
-          document.querySelector('.js-edit-blob-link-fork-toggler'),
-          document.querySelector('.js-cancel-fork-suggestion'),
-          document.querySelector('.js-file-fork-suggestion-section'),
-        );
+        new BlobForkSuggestion({
+          openButtons: document.querySelectorAll('.js-edit-blob-link-fork-toggler'),
+          forkButtons: document.querySelectorAll('.js-fork-suggestion-button'),
+          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) {

spec/javascripts/blob/blob_fork_suggestion_spec.js

+import BlobForkSuggestion from '~/blob/blob_fork_suggestion';
+
+describe('BlobForkSuggestion', () => {
+  let blobForkSuggestion;
+
+  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: openButton,
+      forkButtons: forkButton,
+      cancelButtons: cancelButton,
+      suggestionSections: suggestionSection,
+      actionTextPieces: actionTextPiece,
+    })
+      .init();
+  });
+
+  afterEach(() => {
+    blobForkSuggestion.destroy();
+  });
+
+  it('showSuggestionSection', () => {
+    blobForkSuggestion.showSuggestionSection('/foo', 'foo');
+    expect(suggestionSection.classList.contains('hidden')).toEqual(false);
+    expect(forkButton.getAttribute('href')).toEqual('/foo');
+    expect(actionTextPiece.textContent).toEqual('foo');
+  });
+
+  it('hideSuggestionSection', () => {
+    blobForkSuggestion.hideSuggestionSection();
+    expect(suggestionSection.classList.contains('hidden')).toEqual(true);
+  });
+});