view sat_templates/templates/bulma/input/field.html @ 230:0e69b5843c2f

theme: bulma theme first draft: This theme uses the Bulma CSS framework, Brython to handle the menu on touch devices, and Sass to customize Bulma. CSS default fallbacks are disabled as Bulma uses its own naming conventions, and default fallbacks would lead to hard to debug conflicts. `common.js` has been slightly improved to handle custom classed in `tab_select` The theme is not complete yet, but it is functional.
author Goffi <goffi@goffi.org>
date Tue, 19 May 2020 00:02:34 +0200
parents
children 60bf3e45d7b2
line wrap: on
line source

{# macros to create form fields #}

{% macro field(type, name, label="", help="", required=false, icon_left=none, icon_right=none) %}
    {# generic field
       "class" keyword can be used to add classes
       additional kwargs will be passed as attributes #}

    <div class="field form_input {{kwargs.pop('class', '')}}">
        {% set cur_id = name|next_gidx %}
        {% if label %}
            <label for="{{cur_id}}" class="label">{{label}}</label>
        {% endif %}
        <div class="control{% if icon_left %} has-icons-left{% endif %}{% if icon_right %} has-icons-right{% endif %}">
            <input id="{{cur_id}}" class="input" type="{{type}}" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
            {% if icon_left %}
                <span class="icon is-left">
                    {# we use <i> with font from CSS instead of SVG, because using directly SVG doesn't play way with Bulma's control #}
                    <i class="icon-{{icon_left}}"></i>
                </span>
            {% endif %}
            {% if icon_right %}
                <span class="icon is-right">
                    <i class="icon-{{icon_right}}"></i>
                </span>
            {% endif %}
        </div>
        {% if help %}
            <p class="help">{{help}}</p>
        {% endif %}
    </div>
{% endmacro %}

{% macro select(name, options_list, selected=none, required=false, multiple=false) %}
    {# selection of elements with <select>

    @param name: name of the field
    @param options_list(list[str, str]): list of name, label of options
    @param selected(none, list): list of select elements
    @param required(bool): true this field is required
    @param multiple(bool): true is multiple selection is possible
    #}
    <select name="{{name}}" class="form_input {{kwargs.pop('class', '')}}" {{"required" if required}}>
    {% for value, label in options_list %}
         <option value="{{value}}" {{'selected' if selected and value in selected}}>{{label}}</option>
    {% endfor %}
    </select>
{% endmacro %}

{% macro choices(name, choices_list, checked=none) %}
    <div class="control {{kwargs.pop('class', '')}}">
        {% for choice, label in choices_list %}
            <label class="radio" for="{{name|cur_gidx}}">
                <input id="{{name|next_gidx}}" type="radio" name="{{name}}" value="{{choice}}"{{" checked" if checked==choice}}>{{label}}
                </label>
        {% endfor %}
    </div>
{% endmacro %}

{% macro int(name, label="", init=0) %}
    {{ field("number", name=name, label=label, value=init, step=1, min=0, **kwargs) }}
{% endmacro %}

{% macro checkbox(name, label="", checked=false) %}
    {% set cur_id = name|next_gidx %}
    <label for="{{cur_id}}" class="label checkbox">{{label}}</label>
    <input id="{{cur_id}}" type="checkbox" {% if checked %}checked=checked{% endif %}>
{% endmacro %}

{% macro text(name, label="", placeholder="", required=false) %}
    {{ field("text", name=name, label=label, required=required, placeholder=placeholder, **kwargs) }}
{% endmacro %}

{% macro password(name, label="", required=false) %}
    {{ field("password", name=name, label=label, required=required, **kwargs) }}
{% endmacro %}

{% macro email(name, label="", required=false) %}
    {{ field("email", name=name, label=label, required=required, **kwargs) }}
{% endmacro %}

{% macro date(name, label="", required=false) %}
    {{ field("date", name=name, label=label, required=required, **kwargs) }}
{% endmacro %}

{% macro url(name, label="", required=false) %}
    {{ field("url", name=name, label=label, required=required, **kwargs) }}
{% endmacro %}

{% macro file(name, label="", required=false) %}
    {{ field("file", name=name, label=label, required=required, **kwargs) }}
{% endmacro %}

{% macro textarea(name, label="", rows=none, cols=50, placeholder='', help='', required=false) %}
    <div class="field form_input">
        {% set cur_id = name|next_gidx %}
        {% if label %}
            <label for="{{cur_id}}" class="label">{{label}}</label>
        {% endif %}
        <textarea id="{{cur_id}}" name="{{name}}" {{ {"rows": rows, "cols": cols}|xmlattr }} placeholder="{{placeholder}}" {{"required" if required}} class="textarea"></textarea>
        {% if help %}
            <p class="help">{{help}}</p>
        {% endif %}
    </div>
{% endmacro %}

{% macro meta(name, value) %}
    <input type="hidden" name="{{name}}" value="{{value}}">
{% endmacro %}

{% macro submit(text=_("Send"), id=none, class='') %}
    {# submit button

    @param text(str): label of the button
    @param id(none, str): id of the element
    #}
    <div class="control {{class}}">
      <button {{ 'id="{id}"'.format(id=id)|safe if id }} class="button is-primary form_submit {{kwargs.pop('class', '')}}" type="submit">{{text}}</button>
    </div>
{% endmacro %}