webseite-grav/plugins/form/templates/forms/fields/toggle/toggle.html.twig

53 lines
1.8 KiB
Twig

{% extends "forms/field.html.twig" %}
{% macro spanToggle(input, length) %}
{% set space = repeat('  ', (length - input|length) / 2) %}
{{ (space ~ input ~ space)|raw }}
{% endmacro %}
{% import _self as macro %}
{% set has_hidden = false %}
{% for key, text in field.options %}
{% if key is empty %}
{% set has_hidden = true %}
{% endif %}
{% endfor %}
{% block global_attributes %}
{{ parent() }}
data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
{% endblock %}
{% block input %}
<div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }} {{ field.classes }}">
{% set maxLen = 0 %}
{% for text in field.options %}
{% set translation = text|t|trim %}
{% set maxLen = max(translation|length, maxLen) %}
{% endfor %}
{# Value falls back to highlight instead of default #}
{% set highlight = field.highlight|string %}
{% set value = (value ?? default ?? highlight)|string %}
{% for key, text in field.options %}
{% set key = key|string %}
{% set id = (field.id ?? ("toggle_" ~ field.name)) ~ key %}
{% set translation = text|t|trim %}
<input type="radio"
value="{{ key }}"
id="{{ id }}"
name="{{ (scope ~ field.name)|fieldName }}"
{% if highlight is same as(key) %}class="highlight"{% endif %}
{% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
{% if key is same as(value) %}checked="checked"{% endif %}
{% if required %}required="required"{% endif %}
{% if field.tabindex %}tabindex="{{ field.tabindex }}"{% endif %}
/>
<label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
{% endfor %}
</div>
{% endblock %}