diff options
Diffstat (limited to 'app/assets/javascripts/toggle_buttons.js')
-rw-r--r-- | app/assets/javascripts/toggle_buttons.js | 63 |
1 files changed, 0 insertions, 63 deletions
diff --git a/app/assets/javascripts/toggle_buttons.js b/app/assets/javascripts/toggle_buttons.js deleted file mode 100644 index 5b85107991a..00000000000 --- a/app/assets/javascripts/toggle_buttons.js +++ /dev/null @@ -1,63 +0,0 @@ -import $ from 'jquery'; -import createFlash from './flash'; -import { parseBoolean } from './lib/utils/common_utils'; -import { __ } from './locale'; - -/* - example HAML: - ``` - %button.js-project-feature-toggle.project-feature-toggle{ type: "button", - class: "#{'is-checked' if enabled?}", - 'aria-label': _('Toggle Kubernetes Cluster') } - %input{ type: "hidden", class: 'js-project-feature-toggle-input', value: enabled? } - ``` -*/ - -function updateToggle(toggle, isOn) { - toggle.classList.toggle('is-checked', isOn); -} - -function onToggleClicked(toggle, input, clickCallback) { - const previousIsOn = parseBoolean(input.value); - - // Visually change the toggle and start loading - updateToggle(toggle, !previousIsOn); - toggle.setAttribute('disabled', true); - toggle.classList.toggle('is-loading', true); - - Promise.resolve(clickCallback(!previousIsOn, toggle)) - .then(() => { - // Actually change the input value - input.setAttribute('value', !previousIsOn); - }) - .catch(() => { - // Revert the visuals if something goes wrong - updateToggle(toggle, previousIsOn); - }) - .then(() => { - // Remove the loading indicator in any case - toggle.removeAttribute('disabled'); - toggle.classList.toggle('is-loading', false); - - $(input).trigger('trigger-change'); - }) - .catch(() => { - createFlash({ - message: __('Something went wrong when toggling the button'), - }); - }); -} - -export default function setupToggleButtons(container, clickCallback = () => {}) { - const toggles = container.querySelectorAll('.js-project-feature-toggle'); - - toggles.forEach((toggle) => { - const input = toggle.querySelector('.js-project-feature-toggle-input'); - const isOn = parseBoolean(input.value); - - // Get the visible toggle in sync with the hidden input - updateToggle(toggle, isOn); - - toggle.addEventListener('click', onToggleClicked.bind(null, toggle, input, clickCallback)); - }); -} |