improve layout of export

The filters and aggregators form are now displayed only if
the form is checked.

Resources/public/js/chill.js

@@ -355,6 +355,60 @@ var chill = function() {
             }  
         });
     }
+    
+    function _displayHideTargetWithCheckbox(checkbox) {
+        var target = checkbox.dataset.displayTarget,
+                hideableElements;
+        
+        hideableElements = document.querySelectorAll('[data-display-show-hide="' + target + '"]');
+        
+        if (checkbox.checked) {
+            for (let i=0; i < hideableElements.length; i = i+1) {
+                hideableElements[i].style.display = "unset";
+            }
+        } else {
+            for (let i=0; i < hideableElements.length; i = i+1) {
+                hideableElements[i].style.display = "none";
+            }
+        }
+        
+    }
+    
+    /**
+     * create an interaction between a checkbox and element to show if the 
+     * checkbox is checked, or hide if the checkbox is not checked.
+     * 
+     * The checkbox must have the data `data-display-target` with an id, 
+     * and the parts to show/hide must have the data `data-display-show-hide`
+     * with the same value.
+     * 
+     * Example : 
+     * 
+     * ```
+     * <input data-display-target="export_abc" value="1" type="checkbox">
+     * 
+     * <div data-display-show-hide="export_abc">
+     * <!-- your content here will be hidden / shown according to checked state -->
+     * </div>
+     * ```
+     * 
+     * Hint: for forms in symfony, you could use the `id` of the form element,
+     * accessible through `{{ form.vars.id }}`. This id should be unique.
+     * 
+     * 
+     * @returns {undefined}
+     */
+    function listenerDisplayCheckbox() {
+        var elements = document.querySelectorAll("[data-display-target]");
+        
+        for (let i=0; i < elements.length; i = i+1) {
+            elements[i].addEventListener("change", function(e) {
+                _displayHideTargetWithCheckbox(e.target);
+            });
+            // initial display-hide
+            _displayHideTargetWithCheckbox(elements[i]);
+        }
+    }
 
     return {
         initPikaday: initPikaday,
@@ -364,5 +418,6 @@ var chill = function() {
         displayAlertWhenLeavingUnsubmittedForm: displayAlertWhenLeavingUnsubmittedForm,
         checkNullValuesInChoices: checkNullValuesInChoices,
         categoryLinkParentChildSelect: categoryLinkParentChildSelect,
+        listenerDisplayCheckbox: listenerDisplayCheckbox,
     };
 } ();