Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-12 13:24:25 +00:00
Code Issues Actions Projects Releases Wiki Activity

improve layout of export

Browse Source 
The filters and aggregators form are now displayed only if
the form is checked.
This commit is contained in:
Julien Fastré 2016-12-01 15:49:48 +01:00
parent d33500f764
commit 34c0ff3ba1
2 changed files with 70 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
Resources/public/js/chill.js
View File

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

18
Resources/views/Export/new.html.twig
View File

@ -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 %}