From 4ef7d5f93a521f18cd909206e1ca2c5c29ffc222 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 7 Apr 2019 21:13:02 +0200
Subject: [PATCH] refactor Interactive Fieldset JS utility

---
 static/js/utils/form.js                       | 100 +++++++++++++-----
 .../widgets/multi-action/multi-action.hamlet  |   2 +-
 2 files changed, 73 insertions(+), 29 deletions(-)

diff --git a/static/js/utils/form.js b/static/js/utils/form.js
index 31b94d1bb..afd0c72e8 100644
--- a/static/js/utils/form.js
+++ b/static/js/utils/form.js
@@ -177,51 +177,95 @@
     setup: reactiveButtonUtil,
   });
 
+  /**
+   *
+   * Interactive Fieldset Utility
+   *  shows/hides inputs based on value of particular input
+   *
+   * Attribute: uw-interactive-fieldset
+   *
+   * Params:
+   *  data-conditional-input: string
+   *    Selector for the input that this fieldset watches for changes
+   *  data-conditional-value: string
+   *    The value the conditional input needs to be set to for this fieldset to be shown
+   *
+   * Example usage:
+   *  <input id="input-0" type="text">
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="yes">...</fieldset>
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#input-0" data-conditional-value="no">...</fieldset>
+   * ## example with <select>
+   *  <select id="select-0">
+   *    <option value="0">Zero
+   *    <option value="1">One
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="0">...</fieldset>
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#select-0" data-conditional-value="1">...</fieldset>
+   */
 
+  var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
+  var INTERACTIVE_FIELDSET_UTIL_SELECTOR = '[uw-interactive-fieldset]';
 
+  var INTERACTIVE_FIELDSET_INITIALIZED_CLASS = 'interactive-fieldset--initialized';
 
-  window.utils.interactiveFieldset = function(form, options) {
-    options = options || {};
-    var fieldSets = options.fieldSets;
+  var interactiveFieldsetUtil = function(element) {
+    var conditionalInput;
+    var conditionalValue;
 
-    if (!fieldSets) {
-      throw new Error('interactiveFieldset must be passed fieldSets via options');
+    function init() {
+      if (!element) {
+        throw new Error('Interactive Fieldset utility cannot be setup without an element!');
     }
 
-    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;
-    });
+      if (element.classList.contains(INTERACTIVE_FIELDSET_INITIALIZED_CLASS)) {
+        throw new Error('Interactive Fieldset utility already initialized!');
+      }
 
-    function updateFields() {
-      fields.forEach(function(field) {
-        field.fieldSet.classList.toggle('hidden', field.condEl.value !== field.condValue);
-      });
+      // param conditionalInput
+      if (!element.dataset.conditionalInput) {
+        throw new Error('Interactive Fieldset needs a selector for a conditional input!');
+      }
+      conditionalInput = document.querySelector(element.dataset.conditionalInput);
+      if (!conditionalInput) {
+        // abort if form has no required inputs
+        throw new Error('Couldn\'t find the conditional input. Aborting setup for interactive fieldset.');
     }
 
-    function addEventListeners() {
-      fields.forEach(function(field) {
-        field.condEl.addEventListener('input', updateFields)
-      });
+      // param conditionalValue
+      if (!element.dataset.conditionalValue) {
+        throw new Error('Interactive Fieldset needs a conditional value!');
     }
+      conditionalValue = element.dataset.conditionalValue;
 
-    if (fieldSets.length) {
-      addEventListeners();
-      updateFields();
-    }
+      // add event listener
+      conditionalInput.addEventListener('input', updateVisibility);
+
+      // initial visibility update
+      updateVisibility();
+
+      // mark as initialized
+      element.classList.add(INTERACTIVE_FIELDSET_INITIALIZED_CLASS);
 
     return {
-      scope: form,
+        name: INTERACTIVE_FIELDSET_UTIL_NAME,
+        element: element,
       destroy: function() {},
     };
+    }
+
+    function updateVisibility() {
+      element.classList.toggle('hidden', conditionalInput.value !== conditionalValue);
+    }
+
+    return init();
   };
 
+  formUtilities.push({
+    name: INTERACTIVE_FIELDSET_UTIL_NAME,
+    selector: INTERACTIVE_FIELDSET_UTIL_SELECTOR,
+    setup: interactiveFieldsetUtil,
+  });
+
+
   window.utils.autoSubmit = function(form, options) {
     var button = form.querySelector(AUTOSUBMIT_BUTTON_SELECTOR);
     if (button) {
diff --git a/templates/widgets/multi-action/multi-action.hamlet b/templates/widgets/multi-action/multi-action.hamlet
index 71e3acf14..f65a39dec 100644
--- a/templates/widgets/multi-action/multi-action.hamlet
+++ b/templates/widgets/multi-action/multi-action.hamlet
@@ -1,4 +1,4 @@
-<fieldset data-conditional-id="#{fvId actionView}" data-conditional-value="#{toPathPiece act}">
+<fieldset uw-interactive-fieldset data-conditional-input="##{fvId actionView}" data-conditional-value="#{toPathPiece act}">
   <legend>
     _{act}
   ^{w}