From 81cf563d389d4e4472b967da30bf3d2679646695 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 30 Jun 2018 21:08:53 +0200
Subject: [PATCH] added support for conditonal fieldsets

---
 templates/widgets/form.hamlet |  1 -
 templates/widgets/form.julius | 37 ++++++++++++++++++++++++++++++++++-
 templates/widgets/form.lucius |  3 +++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/templates/widgets/form.hamlet b/templates/widgets/form.hamlet
index b38d37ed6..c59a21d32 100644
--- a/templates/widgets/form.hamlet
+++ b/templates/widgets/form.hamlet
@@ -7,5 +7,4 @@ $case formLayout
         $if not (Blaze.null $ fvLabel view)
           <label .form-group__label for=#{fvId view}>#{fvLabel view}
         <div .form-group__input>
-          $# FIXME: file-input does not have `required` attribute, although set on form-group
           ^{fvInput view}
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
index 21d6799ee..2c6100e7d 100644
--- a/templates/widgets/form.julius
+++ b/templates/widgets/form.julius
@@ -28,17 +28,52 @@
       }
     }
   };
+
+  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('DOMContentLoaded', function() {
 
-  // auto reactiveButton submit-buttons with required fields
   var forms = document.querySelectorAll('form');
   Array.from(forms).forEach(function(form) {
+    // auto reactiveButton submit-buttons with required fields
     var submitBtn = form.querySelector('[type=submit]');
     if (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);
   });
 
   function validateForm(inputs) {
diff --git a/templates/widgets/form.lucius b/templates/widgets/form.lucius
index e69de29bb..f4d336fdf 100644
--- a/templates/widgets/form.lucius
+++ b/templates/widgets/form.lucius
@@ -0,0 +1,3 @@
+.hidden {
+  display: none;
+}