diff options
author | wendy0402 <wendykurniawan92@gmail.com> | 2016-10-09 21:17:14 +0700 |
---|---|---|
committer | wendy0402 <wendykurniawan92@gmail.com> | 2017-02-22 23:13:25 +0700 |
commit | 94255217e9c595579b83deb0a1dd5b7bca9572c5 (patch) | |
tree | 9aaa6d9013523c68ca5c3645f514d563155abc0b /app/assets/javascripts/ajax_loading_spinner.js | |
parent | 510c51a6b5fd822755046e10f5c5d875ad5fba9f (diff) | |
download | gitlab-ce-94255217e9c595579b83deb0a1dd5b7bca9572c5.tar.gz |
on branch deletion show loading icon and disabled the button
after user click delete branch, there is no processing indication, and user can click many times till. It seems flaw in UX. this will fix it
fix bug in branch deletion link
Diffstat (limited to 'app/assets/javascripts/ajax_loading_spinner.js')
-rw-r--r-- | app/assets/javascripts/ajax_loading_spinner.js | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/app/assets/javascripts/ajax_loading_spinner.js b/app/assets/javascripts/ajax_loading_spinner.js new file mode 100644 index 00000000000..38a8317dbd7 --- /dev/null +++ b/app/assets/javascripts/ajax_loading_spinner.js @@ -0,0 +1,35 @@ +class AjaxLoadingSpinner { + static init() { + const $elements = $('.js-ajax-loading-spinner'); + + $elements.on('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend); + $elements.on('ajax:complete', AjaxLoadingSpinner.ajaxComplete); + } + + static ajaxBeforeSend(e) { + e.target.setAttribute('disabled', ''); + const iconElement = e.target.querySelector('i'); + // get first fa- icon + const originalIcon = iconElement.className.match(/(fa-)([^\s]+)/g).first(); + iconElement.dataset.icon = originalIcon; + AjaxLoadingSpinner.toggleLoadingIcon(iconElement); + $(e.target).off('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend); + } + + static ajaxComplete(e) { + e.target.removeAttribute('disabled'); + const iconElement = e.target.querySelector('i'); + AjaxLoadingSpinner.toggleLoadingIcon(iconElement); + $(e.target).off('ajax:complete', AjaxLoadingSpinner.ajaxComplete); + } + + static toggleLoadingIcon(iconElement) { + const classList = iconElement.classList; + classList.toggle(iconElement.dataset.icon); + classList.toggle('fa-spinner'); + classList.toggle('fa-spin'); + } +} + +window.gl = window.gl || {}; +gl.AjaxLoadingSpinner = AjaxLoadingSpinner; |