documentation for show_hide

source/development/user-interface/js-functions.rst

@@ -12,36 +12,83 @@ Javascript functions
 
 Some function may be useful to manipulate elements on the page.
 
-Show-hide elements according to checkbox
+Show-hide elements according to a form state
-****************************************
+*********************************************
 
-The function ``chill.listenerDisplayCheckbox`` will make appears / disappears elements according to a checkbox (if the checkbox is checked, the elements will appears).
+The module ``ShowHide`` will allow you to show/hide part of your page using a specific test.
+
+This must be use inside a javascript module.
 
 Usage
 =====
 
-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.
+In this module, the module will listen to all input given in the ``container_from`` div, and will show or hide the content of the ``container_target`` according to the result of the ``test`` function.
 
-On the same page, you should run the function ``chill.listenerDisplayCheckbox``.
+.. code-block:: html+twig
 
-Example : 
+		<div id="container_from">
+			{{ form_row(form.accompagnementRQTHDate) }}
+		</div>
+		
+		<div id="container_target">
+			{{ form_row(form.accompagnementComment) }}
+		</div>
 
-.. code-block:: html
+.. code-block:: javascript
 
-     <input data-display-target="export_abc" value="1" type="checkbox">
+    import { ShowHide } from 'ShowHide/show_hide.js';
-     
-     <div data-display-show-hide="export_abc">
-     <!-- your content here will be hidden / shown according to checked state -->
-     </div>
-     
-     <!-- you could use the block "js" to render this script at the bottom of the page -->
-     <!-- {{ block js }} -->
-     <script type="text/javascript">
-        window.addEventListener("DOMContentLoaded", chill.listenerDisplayCheckbox);   
-     </script>
-     <!-- {{ endblock js }} -->
 
-.. note:: Hint
+    var 
-     
+        from = document.getElementById("container_from"),
-     For forms in symfony, you could use the `id` of the form element, accessible through `{{ form.vars.id }}`. This id should be unique.
+        target = document.getElementById("container_target")
+        ;
 
+    new ShowHide({
+        froms: [from], // the value of from should be an iterable
+        container: [ressources_comment], // the value of container should be an iterable
+        test: function(froms, event) {
+            // iterate over each element of froms
+            for (let f of froms.values()) {
+                // get all input inside froms
+                for (let input of f.querySelectorAll('input').values()) {
+                    if (input.value === 'autre') {
+                        return input.checked;
+                    }
+                }
+            }
+
+            return false;
+        }
+    });
+
+Once instantiated, the class ``ShowHide`` will:
+
+1. get all input from each element inside the ``froms`` values
+2. attach an event listener (by default, ``change``) to each input inside each entry in ``froms``
+3. each time the event is fired, launch the function ``test``
+4. show the element in the container given in ``container``, if the result of ``test`` is true, or hide them otherwise.
+
+The test is also launched when the page is loaded.
+
+Show/hide while the user enter data: using the ``input`` event
+==============================================================
+
+One can force to use another event on the input elements, instead of the default ``'change'`` event. 
+
+For achieving this, use the `event_name` option.
+
+.. code-block:: javascript 
+
+    new ShowHide({
+        froms: froms,
+        test: test_function,
+        container: containers ,
+        // using this option, we use the event `input` instead of `change`
+        event_name: 'input'
+    });
+
+Examples
+========
+
+.. literalinclude:: js-functions/show_hide.js
+   :language: javascript

source/development/user-interface/js-functions/show_hide.js

@@ -0,0 +1,39 @@
+import { ShowHide } from 'ShowHide/show_hide.js';
+
+var 
+    div_accompagnement = document.getElementById("form_accompagnement"),
+    div_accompagnement_comment = document.getElementById("form_accompagnement_comment"),
+    div_caf_id = document.getElementById("cafId"),
+    div_caf_inscription_date = document.getElementById("cafInscriptionDate"),
+    ;
+
+// let show/hide the div_accompagnement_comment if the input with value `'autre'` is checked
+new ShowHide({
+    "froms": [div_accompagnement],
+    "test": function(froms, event) { 
+        for (let el of froms.values()) {
+            for (let input of el.querySelectorAll('input').values()) {
+                if (input.value === 'autre') {
+                    return input.checked;
+                }
+            }
+        }
+        
+        return false;
+    },
+    "container": [div_accompagnement_comment]
+});
+
+// let show the date input only if the the id is filled 
+new ShowHide({
+    froms: [ div_caf_id ],
+    test: function(froms, event) {
+        for (let el of froms.values()) {
+            return el.querySelector("input").value !== "";
+        }
+    },
+    container: [ div_caf_inscription_date ],
+    // using this option, we use the event `input` instead of `change`
+    event_name: 'input'
+});
+