From 235bc2501de67952f6b6a7f27937e6aaa0601694 Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Wed, 17 Jun 2020 14:15:13 -0700 Subject: [PATCH] Add spinner.js, synced with Etiquette. --- frontends/ycdl_flask/static/js/spinner.js | 174 ++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 frontends/ycdl_flask/static/js/spinner.js diff --git a/frontends/ycdl_flask/static/js/spinner.js b/frontends/ycdl_flask/static/js/spinner.js new file mode 100644 index 0000000..58826d6 --- /dev/null +++ b/frontends/ycdl_flask/static/js/spinner.js @@ -0,0 +1,174 @@ +var spinner = {}; + +spinner.Spinner = +function Spinner(element) +{ + this.show = function(delay) + { + clearTimeout(this.delayed_showing_timeout); + this.delayed_showing_timeout = null; + + if (delay) + { + this.delayed_showing_timeout = setTimeout(function(thisthis){thisthis.show()}, delay, this); + } + else + { + this.element.classList.remove("hidden"); + } + } + + this.hide = function() + { + clearTimeout(this.delayed_showing_timeout); + this.delayed_showing_timeout = null; + + this.element.classList.add("hidden"); + } + + this.delayed_showing_timeout = null; + this.element = element; +} + +spinner.spinner_button_index = 0; +spinner.button_spinner_groups = {}; +// When a group member is closing, it will call the closer on all other members +// in the group. Of course, this would recurse forever without some kind of +// flagging, so this dict will hold group_id:true if a close is in progress, +// and be empty otherwise. +spinner.spinner_group_closing = {}; + +spinner.add_to_spinner_group = +function add_to_spinner_group(group_id, button) +{ + if (!(group_id in spinner.button_spinner_groups)) + { + spinner.button_spinner_groups[group_id] = []; + } + spinner.button_spinner_groups[group_id].push(button); +} + +spinner.close_grouped_spinners = +function close_grouped_spinners(group_id) +{ + if (group_id && !(spinner.spinner_group_closing[group_id])) + { + spinner.spinner_group_closing[group_id] = true; + spinner.button_spinner_groups[group_id].forEach(function(button) + { + window[button.dataset.spinnerCloser](); + }); + delete spinner.spinner_group_closing[group_id]; + } +} + +spinner.open_grouped_spinners = +function open_grouped_spinners(group_id) +{ + spinner.button_spinner_groups[group_id].forEach(function(button) + { + window[button.dataset.spinnerOpener](); + }); +} + +spinner.init_button_with_spinner = +function init_button_with_spinner() +{ + /* + To create a button that has a spinner, and cannot be clicked again while + the action is running, assign it the class "button_with_spinner". + When you're ready for the spinner to disappear, call + window[button.dataset.spinnerCloser](). + + Optional: + data-spinner-id: If you want to use your own element as the spinner, + give its ID here. Otherwise a new one will be created. + + data-spinner-delay: The number of milliseconds to wait before the + spinner appears. For tasks that you expect to run very quickly, + this helps prevent a pointlessly short spinner. + + data-holder-class: CSS class for the new span that holds the menu. + + data-spinner-group: An opaque string. All button_with_spinner that have + the same group will go into spinner mode when any of them is + clicked. Useful if you want to have two copies of a button on the + page, or two buttons which do opposite things and you only want one + to run at a time. + */ + var buttons = Array.from(document.getElementsByClassName("button_with_spinner")); + buttons.forEach(function(button) + { + button.classList.remove("button_with_spinner"); + button.innerHTML = button.innerHTML.trim(); + + var holder = document.createElement("span"); + holder.classList.add("spinner_holder"); + holder.classList.add(button.dataset.holderClass || "spinner_holder"); + button.parentElement.insertBefore(holder, button); + button.parentElement.removeChild(button); + holder.appendChild(button); + + var spinner_element; + if (button.dataset.spinnerId) + { + spinner_element = document.getElementById(button.dataset.spinnerId); + } + else + { + spinner_element = document.createElement("span"); + spinner_element.innerText = "Working..."; + spinner_element.classList.add("hidden"); + holder.appendChild(spinner_element); + } + + if (button.dataset.spinnerGroup) + { + spinner.add_to_spinner_group(button.dataset.spinnerGroup, button); + } + + var spin = new spinner.Spinner(spinner_element); + var spin_delay = parseFloat(button.dataset.spinnerDelay) || 0; + + button.dataset.spinnerOpener = "spinner_opener_" + spinner.spinner_button_index; + window[button.dataset.spinnerOpener] = function spinner_opener() + { + spin.show(spin_delay); + button.disabled = true; + } + // It is expected that the function referenced by onclick will call + // window[button.dataset.spinnerCloser]() when appropriate, since from + // our perspective we cannot be sure when to close the spinner. + button.dataset.spinnerCloser = "spinner_closer_" + spinner.spinner_button_index; + window[button.dataset.spinnerCloser] = function spinner_closer() + { + spinner.close_grouped_spinners(button.dataset.spinnerGroup); + spin.hide(); + button.disabled = false; + } + + var wrapped_onclick = button.onclick; + button.removeAttribute('onclick'); + button.onclick = function() + { + if (button.dataset.spinnerGroup) + { + spinner.open_grouped_spinners(button.dataset.spinnerGroup); + } + else + { + window[button.dataset.spinnerOpener](); + } + return wrapped_onclick(); + } + + spinner.spinner_button_index += 1; + }); +} + +spinner.on_pageload = +function on_pageload() +{ + spinner.init_button_with_spinner(); +} +document.addEventListener("DOMContentLoaded", spinner.on_pageload);