misuzu/templates/_layout/input.twig

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