changeset 153:b84d20af0ed3

macros (field, form, textbox): general improvments: - use a generic "field" macro for most fields - added "required" class on input labels if suitable - extra kw args are used as input field attributes. Same thing for forms - better handling of id if label is missing - added blog_text macro in textbox for basic text blog input - textbox is more customisable (class and textarea class can be specified)
author Goffi <goffi@goffi.org>
date Thu, 21 Jun 2018 01:09:00 +0200
parents da2c0dc7c1ff
children 80cf52fbcc40
files sat_templates/default/input/field.html sat_templates/default/input/form.html sat_templates/default/input/textbox.html
diffstat 3 files changed, 64 insertions(+), 29 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/default/input/field.html	Thu Jun 21 01:02:33 2018 +0200
+++ b/sat_templates/default/input/field.html	Thu Jun 21 01:09:00 2018 +0200
@@ -1,43 +1,70 @@
+{# macros to create form fields #}
+
+{% macro field(type, name, label="", required=false) %}
+    {# generic field
+       "class" keyword can be used to add classes
+       additional kwargs will be passed as attributes #}
+    <span class="form_input {{kwargs.pop('class', '')}}">
+        {% set cur_id = name|next_gidx %}
+        {% if label %}
+            <label for="{{cur_id}}" {{'class="required"'|safe if required}}>{{label}}</label>
+        {% endif %}
+        <input id="{{cur_id}}" type="{{type}}" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
+    </span>
+{% endmacro %}
+
 {% macro choices(name, choices_list, checked=none) %}
     {% for choice, label in choices_list %}
-        <div class="form_input">
+        <div class="form_input {{kwargs.pop('class', '')}}">
             <input id="{{name|next_gidx}}" type="radio" name="{{name}}" value="{{choice}}"{{" checked" if checked==choice}}><label for="{{name|cur_gidx}}">{{label}}</label>
         </div>
     {% endfor %}
 {% endmacro %}
 
 {% macro int(name, label="", init=0) %}
-    <span class="form_input">
-        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="number" name="{{name}}" value="{{init}}" step="1" min="0">
-    </span>
+    {{ field("number", name=name, label=label, value=init, step=1, min=0, **kwargs) }}
+{% endmacro %}
+
+{% macro checkbox(name, label="", checked=false) %}
+    {% if checked %}
+        {{ field("checkbox", name=name, label=label, checked="checked", **kwargs) }}
+    {% else %}
+        {{ field("checkbox", name=name, label=label, **kwargs) }}
+    {% endif %}
 {% endmacro %}
 
 {% macro text(name, label="", placeholder="", required=false) %}
-    {# single line text field
-       additional kwargs will be passed as attributes #}
-    <span class="form_input">
-        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="text" name="{{name}}" placeholder="{{placeholder}}" {{"required" if required}} {{kwargs|xmlattr}}>
-    </span>
+    {{ field("text", name=name, label=label, required=required, placeholder=placeholder, **kwargs) }}
 {% endmacro %}
 
 {% macro password(name, label="", required=false) %}
-    {# password field
-       additional kwargs will be passed as attributes #}
-    <span class="form_input">
-        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="password" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
-    </span>
+    {{ field("password", name=name, label=label, required=required, **kwargs) }}
 {% endmacro %}
 
 {% macro email(name, label="", required=false) %}
-    {# email field
-       additional kwargs will be passed as attributes #}
-    <span class="form_input">
-        <label for="{{name|next_gidx}}">{{label}}</label><input id="{{name|cur_gidx}}" type="email" name="{{name}}" {{"required" if required}} {{kwargs|xmlattr}}>
-    </span>
+    {{ 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 textarea(name, rows=10, cols=50, placeholder='', required=false) %}
-    <textarea name="{{name}}" rows="{{rows}}" cols="{{cols}}" placeholder="{{placeholder}}" {{"required" if required}}></textarea>
+{% macro file(name, label="", required=false) %}
+    {{ field("file", name=name, label=label, required=required, **kwargs) }}
+{% endmacro %}
+
+{% macro textarea(name, label="", rows=10, cols=50, placeholder='', required=false) %}
+    <div class="form_input {{kwargs.pop('class', '')}}">
+        {% set cur_id = name|next_gidx %}
+        {% if label %}
+            <label for="{{cur_id}}" {{'class="required"'|safe if required}}>{{label}}</label>
+        {% endif %}
+        <textarea id="{{cur_id}}" name="{{name}}" rows="{{rows}}" cols="{{cols}}" placeholder="{{placeholder}}" {{"required" if required}} class="{{kwargs.pop('class', '')}}"></textarea>
+    </div>
 {% endmacro %}
 
 {% macro meta(name, value) %}
@@ -45,5 +72,5 @@
 {% endmacro %}
 
 {% macro submit(text=_("Send")) %}
-    <input class="form_submit button" type="submit" value="{{text}}">
+    <input class="form_submit button" type="submit" value="{{text}}" class="{{kwargs.pop('class', '')}}">
 {% endmacro %}
--- a/sat_templates/default/input/form.html	Thu Jun 21 01:02:33 2018 +0200
+++ b/sat_templates/default/input/form.html	Thu Jun 21 01:09:00 2018 +0200
@@ -1,5 +1,5 @@
 {% macro form(action='', class='') %}
-<form method="post" action="{{action}}" {{ {'class': class}|xmlattr }}>
+<form method="post" action="{{action}}" {{ {'class': class}|xmlattr }} {{kwargs|xmlattr}} >
     {% if csrf_token is defined %}
         <input type="hidden" name="csrf_token" value="{{csrf_token}}">
     {% endif %}
--- a/sat_templates/default/input/textbox.html	Thu Jun 21 01:02:33 2018 +0200
+++ b/sat_templates/default/input/textbox.html	Thu Jun 21 01:09:00 2018 +0200
@@ -1,5 +1,5 @@
 {% import 'input/form.html' as form with context %}
-{% import 'input/field.html' as field %}
+{% import 'input/field.html' as field with context %}
 
 {% macro head(service, node, type="textbox") %}
     {# include data needed to identify the node to use for commenting #}
@@ -12,22 +12,30 @@
     <input type="submit" value="{{label}}">
 {% endmacro %}
 
-{% macro textbox(service, node, action='', placeholder='', submit_label=_("Send"), type="textbox") %}
-    {# generic content area for comments/blog posts/etc. Only a body by default, but new elements can be
+{% macro textbox(service, node, action='', placeholder='',
+                 submit_label=_("Send"), type="textbox",
+                 class='', ta_class='') %}
+    {# generic content area for comments/blog posts/etc.
+       Only a body by default, but new elements can be
        added by using this macro with call #}
     {% set extra_content = caller() if caller is defined else '' %}
-    {% call form.form(action=action, class="textbox") %}
+    {% call form.form(action=action, class="textbox " + class) %}
         {{ head(service, node, type) }}
         {{ extra_content }}
-        {{ field.textarea("body", placeholder=placeholder, required=True) }}
+        {{ field.textarea("body", placeholder=placeholder, required=True,
+                          class=ta_class) }}
         {{ submit(label=submit_label) }}
     {% endcall %}
 {% endmacro %}
 
-{% macro comment(service, node, action='', placeholder=_("Your comment")) %}
+{% macro blog_text(service, node, action='', placeholder=_("Your comment")) %}
     {{ textbox(service, node, action=action, placeholder=placeholder, type="comment") }}
 {% endmacro %}
 
+{% macro comment(service, node, action='', placeholder=_("Your comment"), class='box--medium') %}
+    {{ textbox(service, node, action=action, placeholder=placeholder, type="comment", class=class) }}
+{% endmacro %}
+
 {% macro comment_or_login(service, node, action='', placeholder=none) %}
     {# show comment form a a message asking to log in
        login is checked using profile #}