From e4acc2653a480ef7604875376dcae6c269f5fa41 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Thu, 18 Apr 2019 21:05:43 +0200
Subject: [PATCH] make interactive fieldsets js util work with checkboxes

---
 static/js/utils/form.js | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/static/js/utils/form.js b/static/js/utils/form.js
index cb7cdd9f9..e7e6401aa 100644
--- a/static/js/utils/form.js
+++ b/static/js/utils/form.js
@@ -124,8 +124,10 @@
    *    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
+   *    Can be omitted if conditionalInput is a checkbox
    *
    * Example usage:
+   * ## example with text input
    *  <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>
@@ -135,6 +137,11 @@
    *    <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>
+   * ## example with checkbox
+   *  <input id="checkbox-0" type="checkbox">
+   *  <input id="checkbox-1" type="checkbox">
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-0">...</fieldset>
+   *  <fieldset uw-interactive-fieldset data-conditional-input="#checkbox-1">...</fieldset>
    */
 
   var INTERACTIVE_FIELDSET_UTIL_NAME = 'interactiveFieldset';
@@ -166,7 +173,7 @@
       }
 
       // param conditionalValue
-      if (!element.dataset.conditionalValue) {
+      if (!element.dataset.conditionalValue && !isCheckbox()) {
         throw new Error('Interactive Fieldset needs a conditional value!');
       }
       conditionalValue = element.dataset.conditionalValue;
@@ -188,7 +195,19 @@
     }
 
     function updateVisibility() {
-      element.classList.toggle('hidden', conditionalInput.value !== conditionalValue);
+      element.classList.toggle('hidden', matchesConditionalValue());
+    }
+
+    function matchesConditionalValue() {
+      if (isCheckbox()) {
+        return conditionalInput.checked === true;
+      }
+
+      return conditionalInput.value === conditionalValue;
+    }
+
+    function isCheckbox() {
+      return conditionalInput.getAttribute('type') === 'checkbox';
     }
 
     return init();