From 1860a6bae4fd456ee70f325441a3861fda754ec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Tue, 3 Dec 2019 15:04:22 +0100 Subject: [PATCH] add show-hide module for javascript --- CHANGELOG.md | 6 ++ Resources/public/modules/show_hide/index.js | 1 + .../public/modules/show_hide/show_hide.js | 82 +++++++++++++++++++ Resources/public/sass/_custom.scss | 2 +- .../sass/contrib/fontawesome/_path.scss | 12 +-- .../PrintOrMessage/blockquote_date.html.twig | 1 + .../PrintOrMessage/default_date.html.twig | 1 + Templating/ChillTwigHelper.php | 47 ++++++++--- chill.webpack.config.js | 2 + 9 files changed, 135 insertions(+), 19 deletions(-) create mode 100644 Resources/public/modules/show_hide/index.js create mode 100644 Resources/public/modules/show_hide/show_hide.js create mode 100644 Resources/views/Extensions/PrintOrMessage/blockquote_date.html.twig create mode 100644 Resources/views/Extensions/PrintOrMessage/default_date.html.twig diff --git a/CHANGELOG.md b/CHANGELOG.md index 343879a3c..5d1f713c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -65,3 +65,9 @@ Version 1.5.10 - allow to group export in UI +Master branch +============= + +- improve `chill_print_or_message` to support date time; +- add a module `show_hide` for javascript; + diff --git a/Resources/public/modules/show_hide/index.js b/Resources/public/modules/show_hide/index.js new file mode 100644 index 000000000..34f3b80b5 --- /dev/null +++ b/Resources/public/modules/show_hide/index.js @@ -0,0 +1 @@ +require("./show_hide.js"); \ No newline at end of file diff --git a/Resources/public/modules/show_hide/show_hide.js b/Resources/public/modules/show_hide/show_hide.js new file mode 100644 index 000000000..a634df212 --- /dev/null +++ b/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}; diff --git a/Resources/public/sass/_custom.scss b/Resources/public/sass/_custom.scss index 59617dafe..867d1b071 100644 --- a/Resources/public/sass/_custom.scss +++ b/Resources/public/sass/_custom.scss @@ -38,7 +38,7 @@ header { right: 0; top: 0; z-index: -1; - background-image: url('./../../img/background/desert.jpg'); + //background-image: url('./../../img/background/desert.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; diff --git a/Resources/public/sass/contrib/fontawesome/_path.scss b/Resources/public/sass/contrib/fontawesome/_path.scss index bb457c23a..949ad920b 100644 --- a/Resources/public/sass/contrib/fontawesome/_path.scss +++ b/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('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), - url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), - url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), - url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), - url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg'); + src: url('./../../../fonts/fontawesome-webfont.eot?v=#{$fa-version}'); + src: url('./../../../fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'), + url('./../../../fonts/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'), + url('./../../../fonts/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'), + url('./../../../fonts/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'), + 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; diff --git a/Resources/views/Extensions/PrintOrMessage/blockquote_date.html.twig b/Resources/views/Extensions/PrintOrMessage/blockquote_date.html.twig new file mode 100644 index 000000000..3a37a6850 --- /dev/null +++ b/Resources/views/Extensions/PrintOrMessage/blockquote_date.html.twig @@ -0,0 +1 @@ +{% if value is not empty %}
{{ value|localizeddate(date_format, time_format) }}
{% else %}{{ message|trans }}{% endif %} \ No newline at end of file diff --git a/Resources/views/Extensions/PrintOrMessage/default_date.html.twig b/Resources/views/Extensions/PrintOrMessage/default_date.html.twig new file mode 100644 index 000000000..e2f50b083 --- /dev/null +++ b/Resources/views/Extensions/PrintOrMessage/default_date.html.twig @@ -0,0 +1 @@ +{% if value is not empty %}{{ value|localizeddate(date_format, time_format) }}{% else %}{{ message|trans }}{% endif %} \ No newline at end of file diff --git a/Templating/ChillTwigHelper.php b/Templating/ChillTwigHelper.php index 7e665f8a3..4f4b6dc0a 100644 --- a/Templating/ChillTwigHelper.php +++ b/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) { - case 'default': - case 'blockquote': - $t = '@ChillMain/Extensions/PrintOrMessage/'.$template.'.html.twig'; - break; - default: - $t = $template; + if ($value instanceof \DateTimeInterface) { + $options = \array_merge([ + 'date_format' => 'medium', + 'time_format' => 'none' + ], $options); + switch ($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)); } } diff --git a/chill.webpack.config.js b/chill.webpack.config.js index 9fb9200a7..9240c2f6a 100644 --- a/chill.webpack.config.js +++ b/chill.webpack.config.js @@ -29,6 +29,8 @@ require('./Resources/public/modules/download-report/index.js'); require('select2/dist/css/select2.css'); require('./Resources/public/modules/select_interactive_loading/index.js'); require('./Resources/public/modules/export-list/export-list.scss'); +//import {ChillShowHide} from './Resources/public/modules/show_hide/index.js'; +//global.ChillShowHide = ChillShowHide; // img require('./Resources/public/img/favicon.ico');