mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-15 14:51:54 -04:00
33d074c00a
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.
94 lines
3.5 KiB
HTML
94 lines
3.5 KiB
HTML
{% 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, collapsible_opts, legend_style
|
|
) %}
|
|
{% for option in field %}
|
|
{{ select_input(option, disable, option_hints, input=input) }}
|
|
{% endfor %}
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% macro select_list(options, child_map, disable=[], option_hints={}, input="radio") %}
|
|
<ul>
|
|
{% for option in options %}
|
|
{% if child_map[option.data] %}
|
|
{% call select_input(option, disable, option_hints, as_list_item=True, input=input) %}
|
|
{{ select_list(child_map[option.data], child_map, disable, option_hints, input=input) }}
|
|
{% endcall %}
|
|
{% else %}
|
|
{{ select_input(option, disable, option_hints, as_list_item=True, input=input) }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ul>
|
|
{% endmacro %}
|
|
|
|
|
|
{% 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, 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) }}
|
|
</div>
|
|
{% endcall %}
|
|
{% endmacro %}
|
|
|
|
|
|
{% 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 %}
|
|
{% if hint %}
|
|
<span class="form-hint">
|
|
{{ hint }}
|
|
</span>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<span class="error-message" data-module="track-error" data-error-type="{{ field.errors[0] }}" data-error-label="{{ field.name }}">
|
|
{{ field.errors[0] }}
|
|
</span>
|
|
{% endif %}
|
|
</legend>
|
|
{{ caller() }}
|
|
</fieldset>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro select_input(option, disable=[], option_hints={}, data_target=None, as_list_item=False, input="radio") %}
|
|
{% if as_list_item %}
|
|
<li class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
|
|
{% else %}
|
|
<div class="multiple-choice" {% if data_target %}data-target="{{ data_target }}"{% endif %}>
|
|
{% endif %}
|
|
<input
|
|
id="{{ option.id }}" name="{{ option.name }}" type="{{ input }}" value="{{ option.data }}"
|
|
{% if option.data in disable %}
|
|
disabled
|
|
{% endif %}
|
|
{% if option.checked %}
|
|
checked
|
|
{% endif %}
|
|
>
|
|
<label class="block-label" for="{{ option.id }}">
|
|
{{ option.label.text }}
|
|
{% if option_hints[option.data] %}
|
|
<div class="block-label-hint">
|
|
{{ option_hints[option.data] }}
|
|
</div>
|
|
{% endif %}
|
|
</label>
|
|
{% if caller %}
|
|
{{ caller() }}
|
|
{% endif %}
|
|
{% if as_list_item %}
|
|
</li>
|
|
{% else %}
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|