From 38c98f563d2c9e9537a9b614b20699af9b59c88f Mon Sep 17 00:00:00 2001
From: Andy Miller <rhuk@mac.com>
Date: Wed, 22 Jul 2015 16:34:22 -0600
Subject: [PATCH] some form refactoring

---
 themes/grav/templates/forms/field.html.twig   |  2 +-
 .../forms/fields/pages/pages.html.twig        | 35 ++++++++--------
 .../forms/fields/text/text.html.twig          |  1 +
 .../fields/themeselect/themeselect.html.twig  | 41 +++++++------------
 4 files changed, 33 insertions(+), 46 deletions(-)

diff --git a/themes/grav/templates/forms/field.html.twig b/themes/grav/templates/forms/field.html.twig
index 76e55e30..2e6efbfa 100644
--- a/themes/grav/templates/forms/field.html.twig
+++ b/themes/grav/templates/forms/field.html.twig
@@ -21,7 +21,7 @@
                 <label class="{{ field.toggleable ? 'toggleable' : '' }}">
                 {% block label %}
                     {% if field.help %}
-                    <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
+                    <span class="hint--bottom" data-hint="{{ field.help|e }}">{{ field.label }}</span>
                     {% else %}
                     {{ field.label }}
                     {% endif %}
diff --git a/themes/grav/templates/forms/fields/pages/pages.html.twig b/themes/grav/templates/forms/fields/pages/pages.html.twig
index 0b9816c6..6571194f 100644
--- a/themes/grav/templates/forms/fields/pages/pages.html.twig
+++ b/themes/grav/templates/forms/fields/pages/pages.html.twig
@@ -1,4 +1,5 @@
-{% set value = (value is null ? field.default : value) %}
+{% extends "forms/field.html.twig" %}
+
 {% set base_depth = 0 %}
 
 {% macro options(field, pages, value, depth) %}
@@ -24,25 +25,21 @@
     {% endfor %}
 {% endmacro %}
 
-<div class="form-field grid pure-g">
-    <div class="form-label block size-1-3 pure-u-1-3">
-        <label>
-            {% if field.help %}
-            <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
-            {% else %}
-            {{ field.label }}
-            {% endif %}
-            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-        </label>
-    </div>
-    <div class="form-data block size-2-3 pure-u-2-3">
-        <div class="form-select-wrapper {{ field.size }}">
-            <select class="{{ field.classes }}" name="{{ (scope ~ field.name)|fieldName }}">
+{% block global_attributes %}
+    data-grav-selectize="{{ (field.selectize is defined ? field.selectize : {})|json_encode()|e('html_attr') }}"
+    {{ parent() }}
+{% endblock %}
+
+{% block input %}
+    <div class="form-select-wrapper {{ field.size }}">
+        <select class="{{ field.classes }}" name="{{ (scope ~ field.name)|fieldName ~ (field.multiple ? '[]' : '') }}"
                 {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
                 {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
                 {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
-                {{ _self.options(field,pages,value, 0) }}
-            </select>
-        </div>
+                {% if field.multiple in ['on', 'true', 1] %}multiple="multiple"{% endif %}
+                >
+            {{ _self.options(field,pages,value, 0) }}
+        </select>
     </div>
-</div>
+{% endblock %}
+
diff --git a/themes/grav/templates/forms/fields/text/text.html.twig b/themes/grav/templates/forms/fields/text/text.html.twig
index 9b5f22c1..25527b54 100644
--- a/themes/grav/templates/forms/fields/text/text.html.twig
+++ b/themes/grav/templates/forms/fields/text/text.html.twig
@@ -9,5 +9,6 @@
     {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
     {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
     {% if field.validate.pattern %}pattern="{{ field.validate.pattern }}"{% endif %}
+    {% if field.validate.message %}title="{{ field.validate.message }}"{% endif %}
     {{ parent() }}
 {% endblock %}
diff --git a/themes/grav/templates/forms/fields/themeselect/themeselect.html.twig b/themes/grav/templates/forms/fields/themeselect/themeselect.html.twig
index 41a65ec2..732bf07c 100644
--- a/themes/grav/templates/forms/fields/themeselect/themeselect.html.twig
+++ b/themes/grav/templates/forms/fields/themeselect/themeselect.html.twig
@@ -1,32 +1,21 @@
-{% set value = (value is null ? field.default : value) %}
+{% extends "forms/field.html.twig" %}
 
-<div class="form-field grid pure-g">
-    <div class="form-label block size-1-3 pure-u-1-3">
-        <label>
-            {% if field.help %}
-            <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
-            {% else %}
-            {{ field.label }}
-            {% endif %}
-            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-        </label>
-    </div>
-    <div class="form-data block size-2-3 pure-u-2-3">
-        <div class="form-select-wrapper {{ field.size }}">
-            <select class="{{ field.classes }}" name="{{ (scope ~ field.name)|fieldName }}"
-                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
-                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
-                    {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
-                    >
-                {% for slug, package in admin.themes %}
+{% block input %}
+    <div class="form-select-wrapper {{ field.size }}">
+        <select class="{{ field.classes }}" name="{{ (scope ~ field.name)|fieldName ~ (field.multiple ? '[]' : '') }}"
+                {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
+                {% if field.multiple in ['on', 'true', 1] %}multiple="multiple"{% endif %}
+                >
+            {% for slug, package in admin.themes %}
                 {% set theme = package.toArray() %}
                 <option
-                    {% if config.system.pages.theme == slug %}selected="selected"{% endif %}
-                    value="{{ slug }}">
+                        {% if config.system.pages.theme == slug %}selected="selected"{% endif %}
+                        value="{{ slug }}">
                     {{ theme.name }}
                 </option>
-                {% endfor %}
-            </select>
-        </div>
+            {% endfor %}
+        </select>
     </div>
-</div>
+{% endblock %}