From 16f1acd6c6d0d8eb5b6278e22d11d2da846e5265 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 7 Apr 2019 21:24:36 +0200
Subject: [PATCH] refactor auto submit button js utility

---
 static/css/utils/form.scss         |  2 +-
 static/js/utils/form.js            | 37 ++++++++++++++++++++++++++----
 templates/widgets/form/form.hamlet |  2 +-
 3 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/static/css/utils/form.scss b/static/css/utils/form.scss
index 2c2a56aa2..b1d6b22c3 100644
--- a/static/css/utils/form.scss
+++ b/static/css/utils/form.scss
@@ -17,7 +17,7 @@ fieldset {
   }
 }
 
-[data-autosubmit][type="submit"] {
+[uw-auto-submit-button][type="submit"] {
   animation: fade-in 500ms ease-in-out backwards;
   animation-delay: 500ms;
 }
diff --git a/static/js/utils/form.js b/static/js/utils/form.js
index afd0c72e8..85e2f163b 100644
--- a/static/js/utils/form.js
+++ b/static/js/utils/form.js
@@ -265,19 +265,46 @@
     setup: interactiveFieldsetUtil,
   });
 
+  /**
+   *
+   * Auto Submit Button Utility
+   *  Hides submit buttons in forms that are submitted programmatically
+   *  We hide the button using JavaScript so no-js users will still be able to submit the form
+   *
+   * Attribute: uw-auto-submit-button
+   *
+   * Example usage:
+   *  <button type="submit" uw-auto-submit-button>Submit
+   */
 
-  window.utils.autoSubmit = function(form, options) {
-    var button = form.querySelector(AUTOSUBMIT_BUTTON_SELECTOR);
-    if (button) {
-      button.classList.add('hidden');
+  var AUTO_SUBMIT_BUTTON_UTIL_NAME = 'autoSubmitButton';
+  var AUTO_SUBMIT_BUTTON_UTIL_SELECTOR = '[uw-auto-submit-button]';
+
+  var AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS = 'auto-submit-button--initialized';
+  var AUTO_SUBMIT_BUTTON_HIDDEN_CLASS = 'hidden';
+
+  var autoSubmitButtonUtil = function(element) {
+    if (!element) {
+      throw new Error('Auto Submit Button utility needs to be passed an element!');
     }
 
+    // hide and mark initialized
+    element.classList.add(AUTO_SUBMIT_BUTTON_HIDDEN_CLASS, AUTO_SUBMIT_BUTTON_INITIALIZED_CLASS);
+
     return {
-      scope: form,
+      name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
+      element: element,
       destroy: function() {},
     };
   };
 
+  formUtilities.push({
+    name: AUTO_SUBMIT_BUTTON_UTIL_NAME,
+    selector: AUTO_SUBMIT_BUTTON_UTIL_SELECTOR,
+    setup: autoSubmitButtonUtil,
+  });
+
+
   // listens for focus events and removes any errors on an input
   window.utils.errorRemover = function(formGroup, options) {
 
diff --git a/templates/widgets/form/form.hamlet b/templates/widgets/form/form.hamlet
index ed15e2aea..45a25b820 100644
--- a/templates/widgets/form/form.hamlet
+++ b/templates/widgets/form/form.hamlet
@@ -15,5 +15,5 @@ $# Wrapper for all kinds of forms
         ^{submitButtonView}
       $of FormAutoSubmit
         ^{formWidget}
-        <button type=submit data-autosubmit>
+        <button type=submit uw-auto-submit-button>
           ^{btnLabel BtnSubmit}