Allow nested checkboxes to be collapsible

Expands the API of the macro to allow nested
checkboxes to have a summary tracking the current
selection, the fieldset to expand/collapse and
buttons to be added to allow jumping between
states.

Includes making 'Done' button inline on mobile.
Helps differentiate it form the form submit.
This commit is contained in:
Tom Byers
2019-05-07 16:08:17 +01:00
parent 20a94910cb
commit 33d074c00a
7 changed files with 210 additions and 14 deletions

View File

@@ -1,6 +1,6 @@
{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, input="radio") %}
{% macro select(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio") %}
{% call select_wrapper(
field, hint, disable, option_hints, hide_legend
field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style
) %}
{% for option in field %}
{{ select_input(option, disable, option_hints, input=input) }}
@@ -24,9 +24,9 @@
{% endmacro %}
{% macro select_nested(field, child_map, hint=None, disable=[], option_hints={}, hide_legend=False, input="radio") %}
{% macro select_nested(field, child_map, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text", input="radio") %}
{% call select_wrapper(
field, hint, disable, option_hints, hide_legend
field, hint, disable, option_hints, hide_legend, collapsible_opts, legend_style
) %}
<div class="{{ "radios" if input == "radio" else "checkboxes" }}-nested">
{{ select_list(child_map[None], child_map, disable, option_hints, input=input) }}
@@ -35,10 +35,11 @@
{% endmacro %}
{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False) %}
<div class="form-group {% if field.errors %} form-group-error{% endif %}">
<fieldset>
<legend class="{{ 'form-label' if not hide_legend else '' }}">
{% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
{% set is_collapsible = collapsible_opts|length %}
<div class="form-group {% if field.errors %} form-group-error{% endif %}"{% if is_collapsible %} data-module="collapsible-checkboxes"{% if collapsible_opts.field %} data-field-label="{{ collapsible_opts.field }}"{% endif %}{% endif %}>
<fieldset id="{{ field.id }}">
<legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
{% if hide_legend %}<span class="visually-hidden">{% endif %}
{{ field.label.text|safe }}
{% if hide_legend %}</span>{% endif %}