diff options
author | Eric Eastwood <contact@ericeastwood.com> | 2017-04-10 23:51:24 +0300 |
---|---|---|
committer | Eric Eastwood <contact@ericeastwood.com> | 2017-04-20 21:34:18 +0300 |
commit | 36387ce1b4a687a41f450c9fcccc348e478ca296 (patch) | |
tree | f22ef9dcfaef98e2bd643d63ec5e06fa46d28cfd /app/assets | |
parent | 60a6389a7223f14156aeeec9a3854f8ea88de1f0 (diff) |
Add Fork/Cancel confirmation to "Replace"/"Delete" buttons
Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/30637
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/javascripts/blob/blob_fork_suggestion.js | 58 | ||||
-rw-r--r-- | app/assets/javascripts/commons/polyfills.js | 1 | ||||
-rw-r--r-- | app/assets/javascripts/dispatcher.js | 12 |
3 files changed, 61 insertions, 10 deletions
diff --git a/app/assets/javascripts/blob/blob_fork_suggestion.js b/app/assets/javascripts/blob/blob_fork_suggestion.js index aa9a4e1c99a..3baf81905fe 100644 --- a/app/assets/javascripts/blob/blob_fork_suggestion.js +++ b/app/assets/javascripts/blob/blob_fork_suggestion.js @@ -1,15 +1,63 @@ -function BlobForkSuggestion(openButton, cancelButton, suggestionSection) { - if (openButton) { - openButton.addEventListener('click', () => { +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.onClickWrapper = this.onClick.bind(this); + + document.addEventListener('click', this.onClickWrapper); + } + + showSuggestionSection(forkPath, action = 'edit') { + [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => { suggestionSection.classList.remove('hidden'); }); + + [].forEach.call(this.elementMap.forkButtons, (forkButton) => { + forkButton.setAttribute('href', forkPath); + }); + + [].forEach.call(this.elementMap.actionTextPieces, (actionTextPiece) => { + // eslint-disable-next-line no-param-reassign + actionTextPiece.textContent = action; + }); } - if (cancelButton) { - cancelButton.addEventListener('click', () => { + hideSuggestionSection() { + [].forEach.call(this.elementMap.suggestionSections, (suggestionSection) => { suggestionSection.classList.add('hidden'); }); } + + onClick(e) { + const el = e.target; + + if ([].includes.call(this.elementMap.openButtons, el)) { + const { forkPath, action } = el.dataset; + this.showSuggestionSection(forkPath, action); + } + + if ([].includes.call(this.elementMap.cancelButtons, el)) { + this.hideSuggestionSection(); + } + } + + destroy() { + document.removeEventListener('click', this.onClickWrapper); + } } export default BlobForkSuggestion; diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js index 3253eebd9b5..cb054a2a197 100644 --- a/app/assets/javascripts/commons/polyfills.js +++ b/app/assets/javascripts/commons/polyfills.js @@ -1,6 +1,7 @@ // ECMAScript polyfills import 'core-js/fn/array/find'; import 'core-js/fn/array/from'; +import 'core-js/fn/array/includes'; import 'core-js/fn/object/assign'; import 'core-js/fn/promise'; import 'core-js/fn/string/code-point-at'; diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index 02a7df9b2a0..20db2698ba8 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -91,11 +91,13 @@ 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'), + }); } switch (page) { |