misuzu/templates/_layout/input.twig

120 lines
5.2 KiB
Twig
Raw Normal View History

2022-09-13 13:14:49 +00:00
{% macro input_hidden(name, value) %}
{% apply spaceless %}
<input type="hidden" name="{{ name }}" value="{{ value }}"/>
{% endapply %}
{% endmacro %}
{% macro input_csrf() %}
{% from _self import input_hidden %}
{% apply spaceless %}
{{ input_hidden('_csrf', csrf_token()) }}
{% endapply %}
{% endmacro %}
{% macro input_text(name, class, value, type, placeholder, required, attributes, tabindex, autofocus, raw) %}
{% apply spaceless %}
<input type="{{ type|default('text') }}" {% if name|length > 0 %}name="{{ name }}"{% else %}readonly{% endif %}
class="{% if not raw|default(false) %}input__text{% if name|length < 1 %} input__text--readonly{% endif %}{% endif %}{{ class|length > 0 ? ' ' ~ class : '' }}"
{% if placeholder|length > 0 %}placeholder="{{ placeholder }}"{% endif %}
{% if value|length > 0 %}value="{{ value }}"{% endif %} {% if required|default(false) %}required{% endif %}
{% if tabindex > 0 %}tabindex="{{ tabindex }}"{% endif %} {% if autofocus|default(false) %}autofocus{% endif %}
{% for name, value in attributes|default([]) %}
{{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %}
{% endfor %}/>
{% endapply %}
{% endmacro %}
{% macro input_checkbox_raw(name, checked, class, value, radio, attributes, disabled) %}
{% apply spaceless %}
<input type="{{ radio ? 'radio' : 'checkbox' }}" class="{{ class|length > 0 ? class : 'input__checkbox__input' }}"
{% if name|length > 0 %}name="{{ name }}"{% endif %}
{% if checked %}checked{% endif %}
{% if disabled %}disabled{% endif %}
{% if value|length > 0 %}value="{{ value }}"{% endif %}
{% for name, value in attributes|default([]) %}
{{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %}
{% endfor %}/>
{% endapply %}
{% endmacro %}
{% macro input_checkbox(name, text, checked, class, value, radio, attributes, disabled) %}
{% from _self import input_checkbox_raw %}
{% apply spaceless %}
<label class="input__checkbox{% if radio %} input__checkbox--radio{% endif %}{% if disabled %} input__checkbox--disabled{% endif %}{{ class|length > 0 ? ' ' ~ class : '' }}">
{{ input_checkbox_raw(name, checked, '', value, radio, attributes, disabled) }}
<div class="input__checkbox__display">
<div class="input__checkbox__display__icon"></div>
</div>
{% if text|length > 0 %}
<div class="input__checkbox__text">
{{ text }}
</div>
{% endif %}
</label>
{% endapply %}
{% endmacro %}
{% macro input_file_raw(name, class, accepts, attributes) %}
{% apply spaceless %}
<input type="file" {% if name|length > 0 %}name="{{ name }}"{% endif %}
class="{{ class|length > 0 ? class : 'input__upload__input' }}"
{% if accepts|length > 0 %}accept="{{ accepts|join(',') }}"{% endif %}
{% for name, value in attributes|default([]) %}
{{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %}
{% endfor %}/>
{% endapply %}
{% endmacro %}
{% macro input_file(name, class, accepts, attributes) %}
{% from _self import input_file_raw %}
{% apply spaceless %}
<label class="input__upload">
{{ input_file_raw(name, class, accepts, attributes) }}
<div class="input__upload__selection">
Click here to select a file!
</div>
<script>
const parent = document.currentScript.parentNode,
input = parent.querySelector('input[type="file"]'),
display = parent.querySelector('.input__upload__selection');
input.addEventListener('change', ev => display.textContent = Array.from(ev.target.files).map(f => f.name).join(', '));
</script>
</label>
{% endapply %}
{% endmacro %}
{% macro input_select_option(value, key, selected) %}
{% apply spaceless %}
<option{% if key|length > 0 %} value="{{ key }}"{% endif %}{% if selected %} selected{% endif %}>
{{ value }}
</option>
{% endapply %}
{% endmacro %}
{% macro input_select(name, options, selected, value_name, key_name, only_values, class, attributes) %}
{% from _self import input_select_option %}
{% apply spaceless %}
<select class="input__select{{ class|length > 0 ? ' ' ~ class : '' }}"
{% if name|length > 0 %}name="{{ name }}"{% endif %}
{% for name, value in attributes|default([]) %}
{{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %}
{% endfor %}>
{% for key, value in options %}
{% set option_value = value_name|length > 0 ? value[value_name] : value %}
{% set option_key = only_values ? '' : (key_name|length > 0 ? value[key_name] : key) %}
{{ input_select_option(option_value, option_key, option_key|default(option_value) == selected) }}
{% endfor %}
</select>
{% endapply %}
{% endmacro %}
{% macro input_colour(name, class, value) %}
{% apply spaceless %}
<label class="input__colour{% if class %} {{ class }}{% endif %}">
<div class="input__colour__overlay"></div>
<input type="color" {% if name|length > 0 %}name="{{ name }}"{% else %}readonly onclick="return false"{% endif %}
value="{{ value }}" class="input__colour__control"/>
</label>
{% endapply %}
{% endmacro %}