From a017168ecb68c5e625ff6b077b208fa29c3c6199 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 16 Feb 2019 23:20:10 +0100
Subject: [PATCH] move form widget julius to static

---
 src/Foundation.hs                             |   2 +
 .../form.lucius => static/css/utils/form.scss |   0
 static/js/utils/asyncTable.js                 |  11 +-
 static/js/utils/form.js                       | 125 ++++++++++++++++++
 static/js/utils/setup.js                      |   2 +-
 templates/formPageI18n.julius                 |  19 +--
 templates/widgets/form.julius                 | 122 +----------------
 7 files changed, 146 insertions(+), 135 deletions(-)
 rename templates/widgets/form.lucius => static/css/utils/form.scss (100%)
 create mode 100644 static/js/utils/form.js

diff --git a/src/Foundation.hs b/src/Foundation.hs
index ee315c9a9..7e34e3f8f 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -1003,12 +1003,14 @@ siteLayout' headingOverride widget = do
       addScript $ StaticR js_utils_alerts_js
       addScript $ StaticR js_utils_asidenav_js
       addScript $ StaticR js_utils_asyncTable_js
+      addScript $ StaticR js_utils_form_js
       addScript $ StaticR js_utils_inputs_js
       addScript $ StaticR js_utils_setup_js
       addScript $ StaticR js_utils_showHide_js
       addScript $ StaticR js_utils_tabber_js
       addStylesheet $ StaticR css_utils_alerts_scss
       addStylesheet $ StaticR css_utils_asidenav_scss
+      addStylesheet $ StaticR css_utils_form_scss
       addStylesheet $ StaticR css_utils_inputs_scss
       addStylesheet $ StaticR css_utils_showHide_scss
       addStylesheet $ StaticR css_utils_tabber_scss
diff --git a/templates/widgets/form.lucius b/static/css/utils/form.scss
similarity index 100%
rename from templates/widgets/form.lucius
rename to static/css/utils/form.scss
diff --git a/static/js/utils/asyncTable.js b/static/js/utils/asyncTable.js
index 5067b74aa..fe164d3b2 100644
--- a/static/js/utils/asyncTable.js
+++ b/static/js/utils/asyncTable.js
@@ -167,6 +167,7 @@
 
       // setup the wrapper and its components to behave async again
       window.utils.teardown('asyncTable');
+      window.utils.teardown('form');
       // merge global options and table specific options
       var resetOptions = {};
       Object.keys(options)
@@ -191,13 +192,9 @@
 
       window.utils.setup('asyncTable', wrapper, combinedOptions);
 
-      // make sure to hide any new submit buttons
-      document.dispatchEvent(new CustomEvent('setup', {
-        detail: {
-          scope: wrapper,
-          module: 'autoSubmit'
-        }
-      }));
+      Array.from(wrapper.querySelectorAll('form')).forEach(function(form) {
+        window.utils.setup('form', form);
+      });
     }
 
     init();
diff --git a/static/js/utils/form.js b/static/js/utils/form.js
new file mode 100644
index 000000000..30ba76c96
--- /dev/null
+++ b/static/js/utils/form.js
@@ -0,0 +1,125 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  var JS_INITIALIZED = 'js-initialized';
+  var SUBMIT_BUTTON_SELECTOR = '[type="submit"]:not([formnovalidate])';
+  var AUTOSUBMIT_BUTTON_SELECTOR = '[type="submit"][data-autosubmit]';
+
+  function formValidator(inputs) {
+    var done = true;
+    inputs.forEach(function(inp) {
+      var len = inp.value.trim().length;
+      if (done && len === 0) {
+        done = false;
+      }
+    });
+    return done;
+  }
+
+  window.utils.form = function(form, options) {
+
+    if (form.classList.contains(JS_INITIALIZED)) {
+      return false;
+    }
+    form.classList.add(JS_INITIALIZED);
+
+    // reactive buttons
+    var submitBtn = form.querySelector(SUBMIT_BUTTON_SELECTOR);
+    if (submitBtn) {
+      window.utils.setup('reactiveButton', form, { button: submitBtn });
+    }
+
+    // conditonal fieldsets
+    var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]'));
+    window.utils.setup('interactiveFieldset', form, { fieldSets });
+
+    // hide autoSubmit submit button
+    window.utils.setup('autoSubmit', form, options);
+  };
+
+  // registers input-listener for each element in <inputs> (array) and
+  // enables <button> if <formValidator> for these inputs returns true
+  window.utils.reactiveButton = function(form, options) {
+    options = options || {};
+    var button = options.button;
+    var requireds = Array.from(form.querySelectorAll('[required]'));
+
+    if (!button) {
+      throw new Error('Please provide both a button to reactiveButton');
+    }
+
+    if (requireds.length == 0) {
+      return false;
+    }
+
+    if (typeof button.dataset.formnorequired !== 'undefined' && button.dataset.formnorequired !== null) {
+      button.addEventListener('click', function() {
+        form.submit();
+      });
+      return false;
+    }
+    updateButtonState();
+
+    requireds.forEach(function(el) {
+      var checkbox = el.getAttribute('type') === 'checkbox';
+      var eventType = checkbox ? 'change' : 'input';
+      el.addEventListener(eventType, function() {
+        updateButtonState();
+      });
+    });
+
+    function updateButtonState() {
+      if (formValidator(requireds) === true) {
+        button.removeAttribute('disabled');
+      } else {
+        button.setAttribute('disabled', 'true');
+      }
+    }
+  };
+
+  window.utils.interactiveFieldset = function(form, options) {
+    options = options || {};
+    var fieldSets = options.fieldSets;
+
+    if (!fieldSets) {
+      throw new Error('interactiveFieldset must be passed fieldSets via options');
+    }
+
+    var fields = fieldSets.map(function(fs) {
+      return {
+        fieldSet: fs,
+        condId: fs.dataset.conditionalId,
+        condValue: fs.dataset.conditionalValue,
+        condEl: form.querySelector('#' + fs.dataset.conditionalId),
+      };
+    }).filter(function(field) {
+      return !!field.condEl;
+    });
+
+    function updateFields() {
+      fields.forEach(function(field) {
+        field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
+      });
+    }
+
+    function addEventListeners() {
+      fields.forEach(function(field) {
+        field.condEl.addEventListener('input', updateFields)
+      });
+    }
+
+    if (fieldSets.length) {
+      addEventListeners();
+      updateFields();
+    }
+  };
+
+  window.utils.autoSubmit = function(form, options) {
+    var button = form.querySelector(AUTOSUBMIT_BUTTON_SELECTOR);
+    if (button) {
+      button.classList.add('hidden');
+    }
+  };
+})();
diff --git a/static/js/utils/setup.js b/static/js/utils/setup.js
index a9978c46f..b71e226a5 100644
--- a/static/js/utils/setup.js
+++ b/static/js/utils/setup.js
@@ -7,7 +7,7 @@
 
   window.utils.setup = function(utilType, scope, options) {
 
-    if (!utilType) {
+    if (!utilType || !scope) {
       return;
     }
 
diff --git a/templates/formPageI18n.julius b/templates/formPageI18n.julius
index b97276957..abbe48021 100644
--- a/templates/formPageI18n.julius
+++ b/templates/formPageI18n.julius
@@ -2,17 +2,20 @@ document.addEventListener('DOMContentLoaded', function () {
 
   var themeSelector = document.querySelector('#theme-select');
 
-  themeSelector.addEventListener('change', function() {
-    // get rid of old themes on body
-    var options = Array.from(themeSelector.options)
-    .forEach(function (option) {
-      document.body.classList.remove(optionToTheme(option));
+  if (themeSelector) {
+    themeSelector.addEventListener('change', function() {
+      // get rid of old themes on body
+      var options = Array.from(themeSelector.options)
+      .forEach(function (option) {
+        document.body.classList.remove(optionToTheme(option));
+      });
+      // add newly selected theme
+      document.body.classList.add(optionToTheme(themeSelector.selectedOptions[0]));
     });
-    // add newly selected theme
-    document.body.classList.add(optionToTheme(themeSelector.selectedOptions[0]));
-  });
+  }
 
   function optionToTheme(option) {
     return optionValue = 'theme--' + option.value;
   }
+
 });
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index e318ca3f3..7396602e0 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -1,121 +1,5 @@
-(function() {
-  'use strict';
-
-  window.utils = window.utils || {};
-
-  // registers input-listener for each element in <inputs> (array) and
-  // enables <button> if <validation> for these inputs returns true
-  window.utils.reactiveButton = function(form, button, validation) {
-    var requireds = Array.from(form.querySelectorAll('[required]'));
-    if (requireds.length == 0) {
-      return false;
-    }
-    if (typeof button.dataset.formnorequired !== 'undefined' && button.dataset.formnorequired !== null) {
-      button.addEventListener('click', function() {
-        form.submit();
-      });
-      return false;
-    }
-    updateButtonState();
-
-    requireds.forEach(function(el) {
-      var checkbox = el.getAttribute('type') === 'checkbox';
-      var eventType = checkbox ? 'change' : 'input';
-      el.addEventListener(eventType, function() {
-        updateButtonState();
-      });
-    });
-
-    function updateButtonState() {
-      if (validation.call(null, requireds) === true) {
-        button.removeAttribute('disabled');
-      } else {
-        button.setAttribute('disabled', 'true');
-      }
-    }
-  };
-
-  window.utils.interactiveFieldset = function(form, fieldSets) {
-    var fields = fieldSets.map(function(fs) {
-      return {
-        fieldSet: fs,
-        condId: fs.dataset.conditionalId,
-        condValue: fs.dataset.conditionalValue,
-        condEl: form.querySelector('#' + fs.dataset.conditionalId),
-      };
-    }).filter(function(field) {
-      return !!field.condEl;
-    });
-
-    function updateFields() {
-      fields.forEach(function(field) {
-        field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
-      });
-    }
-
-    function addEventListeners() {
-      fields.forEach(function(field) {
-        field.condEl.addEventListener('input', updateFields)
-      });
-    }
-
-    if (fieldSets.length) {
-      addEventListeners();
-      updateFields();
-    }
-  };
-})();
-
-document.addEventListener('setup', function(e) {
-  if (e.detail.module && e.detail.module !== 'showHide')
-    return;
-
-  var forms = e.detail.scope.querySelectorAll('form');
-  Array.from(forms).forEach(function(form) {
-    // auto reactiveButton submit-buttons with required fields
-    var submitBtns = Array.from(form.querySelectorAll('[type=submit]:not([formnovalidate])'));
-    submitBtns.forEach(function(submitBtn) {
-      window.utils.reactiveButton(form, submitBtn, validateForm);
-    });
-
-    // auto conditonal fieldsets
-    var fieldSets = Array.from(form.querySelectorAll('fieldset[data-conditional-id][data-conditional-value]'));
-    window.utils.interactiveFieldset(form, fieldSets);
+document.addEventListener('DOMContentLoaded', function() {
+  Array.from(document.querySelectorAll('form')).forEach(function(form) {
+    window.utils.setup('form', form);
   });
-
-  function validateForm(inputs) {
-    var done = true;
-    inputs.forEach(function(inp) {
-      var len = inp.value.trim().length;
-      if (done && len === 0) {
-        done = false;
-      }
-    });
-    return done;
-  }
-});
-
-document.addEventListener('DOMContentLoaded', function() {
-  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'showHide' }, bubbles: true, cancelable: true }))
-});
-
-
-document.addEventListener('setup', function(e) {
-    if (e.detail.module && e.detail.module !== 'autoSubmit')
-        return;
-
-    Array.from(e.detail.scope.querySelectorAll('[data-autosubmit]:not(.js-initialized)')).forEach(function(elem) {
-        if ((elem instanceof HTMLInputElement && elem.type == 'submit') || (elem instanceof HTMLButtonElement && elem.type == 'submit')) {
-            var ancestor = elem.closest('.form-group');
-            var target = ancestor || elem;
-
-            target.classList.add('hidden');
-        }
-
-        elem.classList.add('js-initialized');
-    });
-});
-
-document.addEventListener('DOMContentLoaded', function() {
-  document.dispatchEvent(new CustomEvent('setup', { detail: { scope: document.body, module: 'autoSubmit' }, bubbles: true, cancelable: true }))
 });