add show-hide module for javascript

CHANGELOG.md

@@ -65,6 +65,7 @@ Version 1.5.10
 
 - allow to group export in UI
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 Version 1.5.11
 ==============

Resources/public/modules/show_hide/index.js

@@ -0,0 +1 @@
+require("./show_hide.js");

Resources/public/modules/show_hide/show_hide.js

@@ -0,0 +1,82 @@
+/**
+ * Create a control to show or hide values
+ * 
+ * Possible options are:
+ * 
+ *  - froms: an Element, an Array of Element, or a NodeList. A
+ *    listener will be attached to **all** input of those elements
+ *    and will trigger the check on changes
+ *  - test: a function which will test the element and will return true 
+ *    if the content must be shown, false if it must be hidden.
+ *    The function will receive the `froms` as first argument, and the 
+ *    event as second argument.
+ *  - container: an Element, an Array of Element, or a Node List. The 
+ *    child nodes will be hidden / shown inside this container
+ *  - event_name: the name of the event to listen to. `'change'` by default.
+ * 
+ * @param object options
+ */
+var ShowHide = function(options) {
+    var
+        froms =  typeof options.froms[Symbol.iterator] === "function" ? options.froms : [ options.froms ], //options.froms;
+        test = options.test,
+        container = typeof options.container[Symbol.iterator] === "function" ? options.container : [ options.container ],
+        is_shown = true,
+        event_name = 'event_name' in options ? options.event_name : 'change',
+        container_content = [];
+
+    window.addEventListener('load', function(event) {
+        // keep the content in memory
+        for (let c of container.values()) {
+            let contents = [];
+            for (let el of c.childNodes.values()) {
+                contents.push(el);
+            }
+            container_content.push(contents);
+        }
+
+        // attach the listener on each input
+        for (let f of froms.values()) {
+            let inputs = f.querySelectorAll('input');
+            for (let input of inputs.values()) {
+                input.addEventListener(event_name, function(e) {
+                    onChange(e);
+                });
+            }
+        }
+
+        // first launch of the show/hide
+        onChange(event);
+    });
+
+    
+    var onChange = function (event) {
+        var result = test(froms, event);
+
+        if (result === true) {
+            if (is_shown === false) {
+                for (let i of container_content.keys()) {
+                    var contents = container_content[i];
+                    for (let el of contents.values()) {
+                        container[i].appendChild(el);
+                    }
+                }
+                is_shown = true;
+            }
+        } else if (result === false) {
+            if (is_shown) {
+                for (let contents of container_content.values()) {
+                    for (let el of contents.values()) {
+                        el.remove();
+                    }
+                }
+                is_shown = false;
+            }
+        } else {
+            throw "the result of test is not a boolean";
+        }
+        
+    };
+};
+
+export {ShowHide};

Resources/public/sass/contrib/fontawesome/_path.scss

@@ -3,12 +3,12 @@
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
+  src: url('./../../../fonts/fontawesome-webfont.eot?v=#{$fa-version}');
-  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
+  src: url('./../../../fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
+       url('./../../../fonts/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
-    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
+    url('./../../../fonts/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
-    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
+    url('./../../../fonts/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
-    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
+    url('./../../../fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
 //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
   font-weight: normal;
   font-style: normal;

Resources/views/Extensions/PrintOrMessage/blockquote_date.html.twig

@@ -0,0 +1 @@
+{% if value is not empty %}<blockquote class="chill-user-quote">{{ value|localizeddate(date_format, time_format) }}</blockquote>{% else %}<span class="chill-no-data-statement">{{ message|trans }}</span>{% endif %}

Resources/views/Extensions/PrintOrMessage/default_date.html.twig

@@ -0,0 +1 @@
+{% if value is not empty %}{{ value|localizeddate(date_format, time_format) }}{% else %}<span class="chill-no-data-statement">{{ message|trans }}</span>{% endif %}

Templating/ChillTwigHelper.php

@@ -33,30 +33,53 @@ class ChillTwigHelper extends AbstractExtension
      * - 'default' ;
      * - 'blockquote' ;
      * 
+     * `DateTimeInterface are also rendered. The date and time format may be set
+     * using those key in `$options´ parameter:
+     * 
+     * - `date_format` (default to `'medium'`)
+     * - `time_format` (default to `'none'`)
+     * 
      * @param Environment $twig
-     * @param string $value
+     * @param string $value Default to 'No value'. Fallback to default if null
      * @param string $message
      * @param string $template
+     * @param array $options
      * @return string
      */
     public function printOrMessage(
         Environment $twig,
         $value, 
         $message = 'No value', 
-        $template = 'default'
+        $template = 'default',
+        array $options = []
     ) {
-        switch ($template) {
+        if ($value instanceof \DateTimeInterface) {
-            case 'default':
+            $options = \array_merge([
-            case 'blockquote':
+                'date_format' => 'medium',
-                $t = '@ChillMain/Extensions/PrintOrMessage/'.$template.'.html.twig';
+                'time_format' => 'none'
-                break;
+            ], $options);
-            default:
+            switch ($template) {
-                $t = $template;
+                case 'default':
+                case 'blockquote':
+                    $t = '@ChillMain/Extensions/PrintOrMessage/'.$template.'_date.html.twig';
+                    break;
+                default:
+                    $t = $template;
+            }
+        } else {
+            switch ($template) {
+                case 'default':
+                case 'blockquote':
+                    $t = '@ChillMain/Extensions/PrintOrMessage/'.$template.'.html.twig';
+                    break;
+                default:
+                    $t = $template;
+            }
         }
         
-        return $twig->render($t, [
+        return $twig->render($t, \array_merge([
             'value' => $value,
-            'message' => $message
+            'message' => $message ?? 'No value'
-        ]);
+        ], $options));
     }
 }