Read spinner button function from onclick instead of data-onclick.

I think my original reason for doing this was to prevent the button
from being operational until after the spinner initialization has
completed, so you don't get any weird half-functional spinner buttons.
However, in practice I'm finding that I constantly forget about this
and it adds tedium to creating spinner buttons.
Will review if any actual problems come up.
This commit is contained in:
voussoir 2020-06-17 14:04:27 -07:00
parent d6ca8206b4
commit a56b5274c9
3 changed files with 5 additions and 8 deletions

View file

@ -80,9 +80,6 @@ function init_button_with_spinner()
When you're ready for the spinner to disappear, call When you're ready for the spinner to disappear, call
window[button.dataset.spinnerCloser](). window[button.dataset.spinnerCloser]().
Required:
data-onclick: The string that would normally be the button's onclick.
Optional: Optional:
data-spinner-id: If you want to use your own element as the spinner, 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. give its ID here. Otherwise a new one will be created.
@ -139,7 +136,7 @@ function init_button_with_spinner()
spin.show(spin_delay); spin.show(spin_delay);
button.disabled = true; button.disabled = true;
} }
// It is expected that the function referenced by data-onclick will call // It is expected that the function referenced by onclick will call
// window[button.dataset.spinnerCloser]() when appropriate, since from // window[button.dataset.spinnerCloser]() when appropriate, since from
// our perspective we cannot be sure when to close the spinner. // our perspective we cannot be sure when to close the spinner.
button.dataset.spinnerCloser = "spinner_closer_" + spinner.spinner_button_index; button.dataset.spinnerCloser = "spinner_closer_" + spinner.spinner_button_index;
@ -150,7 +147,8 @@ function init_button_with_spinner()
button.disabled = false; button.disabled = false;
} }
var wrapped_onclick = Function(button.dataset.onclick); var wrapped_onclick = button.onclick;
button.removeAttribute('onclick');
button.onclick = function() button.onclick = function()
{ {
if (button.dataset.spinnerGroup) if (button.dataset.spinnerGroup)
@ -163,7 +161,6 @@ function init_button_with_spinner()
} }
return wrapped_onclick(); return wrapped_onclick();
} }
delete button.dataset.onclick;
spinner.spinner_button_index += 1; spinner.spinner_button_index += 1;
}); });

View file

@ -117,7 +117,7 @@
</div> </div>
<div id="refresh_metadata_area"> <div id="refresh_metadata_area">
<button class="green_button button_with_spinner" id="refresh_metadata_button" data-spinner-delay="500" data-onclick="refresh_metadata_form();">Refresh metadata</button> <button class="green_button button_with_spinner" id="refresh_metadata_button" data-spinner-delay="500" onclick="refresh_metadata_form();">Refresh metadata</button>
</div> </div>
<div id="searchhidden_area"> <div id="searchhidden_area">

View file

@ -244,7 +244,7 @@
</div> </div>
<div id="hovering_tools"> <div id="hovering_tools">
{% if photo.simple_mimetype == "video" %} {% if photo.simple_mimetype == "video" %}
<button id="generate_thumbnail_button" class="green_button button_with_spinner" data-onclick="generate_thumbnail_for_video(event)">Capture thumbnail</button> <button id="generate_thumbnail_button" class="green_button button_with_spinner" onclick="generate_thumbnail_for_video(event)">Capture thumbnail</button>
{% endif %} {% endif %}
<button <button
class="red_button button_with_confirm" class="red_button button_with_confirm"