From a56b5274c9b08fd94e6a156a8e8ad59630fa4602 Mon Sep 17 00:00:00 2001
From: Ethan Dalool <git@voussoir.net>
Date: Wed, 17 Jun 2020 14:04:27 -0700
Subject: [PATCH] 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.
---
 frontends/etiquette_flask/static/js/spinner.js     | 9 +++------
 frontends/etiquette_flask/templates/clipboard.html | 2 +-
 frontends/etiquette_flask/templates/photo.html     | 2 +-
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontends/etiquette_flask/static/js/spinner.js b/frontends/etiquette_flask/static/js/spinner.js
index 45ddbed..58826d6 100644
--- a/frontends/etiquette_flask/static/js/spinner.js
+++ b/frontends/etiquette_flask/static/js/spinner.js
@@ -80,9 +80,6 @@ function init_button_with_spinner()
     When you're ready for the spinner to disappear, call
     window[button.dataset.spinnerCloser]().
 
-    Required:
-        data-onclick: The string that would normally be the button's onclick.
-
     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.
@@ -139,7 +136,7 @@ function init_button_with_spinner()
             spin.show(spin_delay);
             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
         // our perspective we cannot be sure when to close the spinner.
         button.dataset.spinnerCloser = "spinner_closer_" + spinner.spinner_button_index;
@@ -150,7 +147,8 @@ function init_button_with_spinner()
             button.disabled = false;
         }
 
-        var wrapped_onclick = Function(button.dataset.onclick);
+        var wrapped_onclick = button.onclick;
+        button.removeAttribute('onclick');
         button.onclick = function()
         {
             if (button.dataset.spinnerGroup)
@@ -163,7 +161,6 @@ function init_button_with_spinner()
             }
             return wrapped_onclick();
         }
-        delete button.dataset.onclick;
 
         spinner.spinner_button_index += 1;
     });
diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html
index f9d71ad..4500128 100644
--- a/frontends/etiquette_flask/templates/clipboard.html
+++ b/frontends/etiquette_flask/templates/clipboard.html
@@ -117,7 +117,7 @@
         </div>
 
         <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 id="searchhidden_area">
diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html
index c0ddb92..616e97a 100644
--- a/frontends/etiquette_flask/templates/photo.html
+++ b/frontends/etiquette_flask/templates/photo.html
@@ -244,7 +244,7 @@
     </div>
     <div id="hovering_tools">
         {% 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 %}
         <button
         class="red_button button_with_confirm"