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,
     };
 } ();

Resources/views/Export/new.html.twig

@@ -20,6 +20,12 @@
 
 {% block title %}{{ export.title|trans }}{% endblock %}
 
+{% block js %}
+    <script type="text/javascript">
+    window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);   
+    </script>
+{% endblock js %}
+
 {% block layout_wvm_content  %}
     
     <h1>{{ export.title|trans }}</h1>
@@ -32,14 +38,16 @@
     <div style="clear:both; padding-top: 1.5em;">
         <h2>{{ 'Filters'| trans }}</h2>
         {% for filter_form in form.children.export.children.filters %}
+            <div>
             <p>
-                {{ form_widget(filter_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;' } }) }} 
+                {{ form_widget(filter_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': filter_form.vars.id } }) }} 
                 <span class="force-inline-label">{{ form_label(filter_form) }}</span>
             </p>
             
-            <div>
+            <div data-display-show-hide="{{ filter_form.vars.id }}">
                 {{ form_widget(filter_form.form) }}
             </div>
+            </div>
         {% endfor %}
     </div>
     {% else %}
@@ -51,12 +59,16 @@
     <div style="clear:both; padding-top: 1.5em;">
         <h2>{{ 'Aggregators'| trans }}</h2>
         {% for aggregator_form in form.children.export.children.aggregators %}
+            <div>
             <p>
-                {{ form_widget(aggregator_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;' } }) }}
+                {{ form_widget(aggregator_form.enabled, { 'attr' : { 'style' : 'vertical-align: middle;', 'data-display-target': aggregator_form.vars.id } }) }}
                 <span class="force-inline-label">{{ form_label(aggregator_form) }}</span>
             </p>
             
+            <div data-display-show-hide="{{ aggregator_form.vars.id }}">
             {{ form_widget(aggregator_form.form) }}
+            </div>
+            </div>
         {% endfor %}
     </div>
     {% else %}