Merge branch 'release/0.3.0'

.gitignore

@@ -0,0 +1,2 @@
+# OS Generated
+.DS_Store*

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v0.3.0
+## 9/11/2015
+
+1. [](#improved)
+    * Refactored all the forms fields
+
 # v0.2.1
 ## 08/24/2015
 

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Form
-version: 0.2.1
+version: 0.3.0
 description: Enables the forms handling
 icon: check-square
 author:

classes/form.php

@@ -5,6 +5,7 @@
 use Grav\Common\Grav;
 use Grav\Common\GravTrait;
 use Grav\Common\Page\Page;
+use RocketTheme\Toolbox\Event\Event;
 
 class Form extends Iterator
 {
@@ -88,7 +89,7 @@ public function post()
                     $action = \key($data);
                     $data = $data[$action];
                 }
-                self::getGrav()->fireEvent('onFormProcessed', $this, $action, $data);
+                self::getGrav()->fireEvent('onFormProcessed', new Event(['form' => $this, 'action' => $action, 'params' => $data]));
             }
         } else {
             // Default action.

form.php

@@ -8,6 +8,7 @@
 use Grav\Common\Uri;
 use Grav\Common\Twig;
 use Grav\Plugin\Form;
+use RocketTheme\Toolbox\Event\Event;
 use RocketTheme\Toolbox\File\File;
 
 class FormPlugin extends Plugin
@@ -85,17 +86,19 @@ public function onTwigSiteVariables()
     /**
      * Handle form processing instructions.
      *
-     * @param Form $form
-     * @param string $task
-     * @param string $params
+     * @param Event $event
      */
-    public function onFormProcessed(Form $form, $task, $params)
+    public function onFormProcessed(Event $event)
     {
+        $form = $event['form'];
+        $action = $event['action'];
+        $params = $event['params'];
+
         if (!$this->active) {
             return;
         }
 
-        switch ($task) {
+        switch ($action) {
             case 'message':
                 $this->form->message = (string) $params;
                 break;
@@ -114,9 +117,16 @@ public function onFormProcessed(Form $form, $task, $params)
                     $uri = $this->grav['uri'];
                     $route = $uri->route() . ($route ? '/' . $route : '');
                 }
+
+                /** @var Twig $twig */
+                $twig = $this->grav['twig'];
+                $twig->twig_vars['form'] = $form;
+
                 /** @var Pages $pages */
                 $pages = $this->grav['pages'];
-                $this->grav->page = $pages->dispatch($route, true);
+                $page = $pages->dispatch($route, true);
+                unset($this->grav['page']);
+                $this->grav['page'] = $page;
                 break;
             case 'save':
                 $prefix = !empty($params['fileprefix']) ? $params['fileprefix'] : '';

templates/forms/field.html.twig

@@ -0,0 +1,58 @@
+{% set originalValue = originalValue is defined ? originalValue : value %}
+{% set value = (value is null ? field.default : value) %}
+{# {% set vertical = field.style == 'vertical' %} #}
+{% set vertical = true %}
+
+{% block field %}
+    <div class="form-field {% if vertical %} vertical{% endif %}">
+        {% block contents %}
+            <div class="form-label{% if not vertical %} block size-1-3{% endif %}">
+                <label class="inline">
+                {% block 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>' }}
+                {% endblock %}
+                </label>
+            </div>
+            <div class="form-data{% if not vertical %} block size-2-3{% endif %}"
+                {% block global_attributes %}
+                data-grav-field="{{ field.type }}"
+                data-grav-disabled="{{ originalValue is null ? 'true' : 'false' }}"
+                data-grav-default="{{ field.default|json_encode()|e('html_attr') }}"
+                {% endblock %}
+            >
+                {% block group %}
+                    {% block input %}
+                        <div class="form-input-wrapper {{ field.size }}">
+                            <input
+                                {# required attribute structures #}
+                                name="{{ (scope ~ field.name)|fieldName }}"
+                                value="{{ value|join(', ') }}"
+                                {# input attribute structures #}
+                                {% block input_attributes %}
+                                    {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
+                                    {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
+                                    {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
+                                    {% if field.disabled %}disabled="disabled"{% endif %}
+                                    {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
+                                    {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
+                                    {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
+                                    {% if field.readonly in ['on', 'true', 1] %}readonly="readonly"{% endif %}
+                                    {% 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|e|tu }}"
+                                    {% elseif field.title is defined %}title="{{ field.title|e|tu }}" {% endif %}
+                                {% endblock %}
+                                />
+                        </div>
+                    {% endblock %}
+                {% endblock %}
+            </div>
+        {% endblock %}
+    </div>
+{% endblock %}

templates/forms/fields/checkbox/checkbox.html.twig

@@ -1,14 +1,29 @@
-{% set value = (value is null ? field.default : value) %}
+{% extends "forms/field.html.twig" %}
 
-<div class="form-field">
-    <label class="inline">
-        <input type="checkbox"
-               name="{{ (scope ~ field.name)|fieldName }}"
-                {% if value == true %} checked="checked" {% endif %}
+{% block label %}
+{% endblock %}
+
+{% block input %}
+    <div class="form-input-wrapper {{ field.size }}">
+        <input
+            {# required attribute structures #}
+            name="{{ (scope ~ field.name)|fieldName }}"
+            value="{{ value|join(', ') }}"
+            type="checkbox"
+            {% if value == true %} checked="checked" {% endif %}
+
+            {# input attribute structures #}
+            {% block input_attributes %}
+                {% if field.classes is defined %}class="{{ field.classes }}" {% endif %}
+                {% if field.id is defined %}id="{{ field.id|e }}" {% endif %}
+                {% if field.style is defined %}style="{{ field.style|e }}" {% endif %}
+                {% if field.disabled %}disabled="disabled"{% endif %}
                 {% 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 %}
-        />
-        {{ field.label|e }} {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-    </label>
-</div>
+            {% endblock %}
+            />
+
+        <label class="inline">{{ field.label|e }} {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}</label>
+    </div>
+{% endblock %}

templates/forms/fields/checkboxes/checkboxes.html.twig

@@ -1,30 +1,34 @@
+{% extends "forms/field.html.twig" %}
+
+{% set originalValue = value %}
 {% set value = (value is null ? field.default : value) %}
+{% if field.use == 'keys' and field.default %}
+    {% set value = field.default|merge(value) %}
+{% endif %}
 
-<div class="form-field">
-    <label class="inline">
-        <span>
-            {% if field.help %}
-            <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label|e }}</span>
-            {% else %}
-            {{ field.label|e }}
-            {% endif %}
-            {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
-        </span>
+{% block global_attributes %}
+    {{ parent() }}
+    data-grav-keys="{{ field.use == 'keys' ? 'true' : 'false' }}"
+    data-grav-field-name="{{ field.name|fieldName }}"
+{% endblock %}
 
+{% block input %}
+    {% for key, text in field.options %}
 
-        {% for key, text in field.options %}
+        {% set id = field.name ~ '-' ~ key %}
+        {% set name = field.use == 'keys' ? key : id %}
+        {% set val = field.use == 'keys' ? '1' : key %}
         {% set checked = (field.use == 'keys' ? value[key] : key in value) %}
-        {% set name = field.name|fieldName ~ '[' ~ (field.use == 'keys' ? key : '') ~ ']' %}
-        {% set key = (field.use == 'keys' ? '1' : key) %}
+
         <span class="checkboxes">
             <input type="checkbox"
-                   value="{{ key|e }}"
-                   name="{{ (scope ~ name)|fieldName }}"
+                   id="{{ id|e }}"
+                   value="{{ val|e }}"
+                   name="{{ field.name|fieldName ~ '[' ~ name ~ ']' }}"
                    {% if checked %}checked="checked"{% endif %}
                    {% if field.validate.required %}required="required"{% endif %}
             >
-            {{ text|e }}
+            <label style="display: inline" for="{{ id|e }}">{{ text|e }}</label>
         </span>
-        {% endfor %}
-    </label>
-</div>
+    {% endfor %}
+{% endblock %}

templates/forms/fields/date/date.html.twig

@@ -1,27 +1,8 @@
-{% set value = (value is null ? field.default : value) %}
+{% extends "forms/field.html.twig" %}
 
-<div class="form-field">
-    <label class="inline">
-        <span>
-            {% 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>' }}
-        </span>
-
-
-        <input class="input"
-               type="date"
-               name="{{ (scope ~ field.name)|fieldName }}"
-               value="{{ value }}"
-               {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
-               {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
-               {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
-               {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
-               {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
-               {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
-        />
-    </label>
-</div>
+{% block input_attributes %}
+    type="date"
+    {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
+    {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
+    {{ parent() }}
+{% endblock %}

templates/forms/fields/datetime/datetime.html.twig

@@ -1,27 +1,18 @@
+{% extends "forms/field.html.twig" %}
+
+{% set default_php_dateformat = "d-m-Y H:i" %}
+{% set php_dateformat = config.system.pages.dateformat.default ?: default_php_dateformat %}
+{% set js_dateformat = admin.dateformat2Kendo(php_dateformat) %}
 {% set value = (value is null ? field.default : value) %}
+{% set value = (value is null ? value : value|date(php_dateformat)) %}
 
-<div class="form-field">
-    <label class="inline">
-        <span>
-            {% 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>' }}
-        </span>
 
+{% block input_attributes %}
+    type="text"
+    data-grav-field-datetime
+    data-date-formats="{{ {'format': js_dateformat} | json_encode | e('html_attr') }}"
+    {% if field.validate.min %}min="{{ (field.validate.min is null ? field.validate.min : field.validate.min|date(php_dateformat)) }}"{% endif %}
+    {% if field.validate.max %}max="{{ (field.validate.max is null ? field.validate.max : field.validate.max|date(php_dateformat)) }}"{% endif %}
+    {{ parent() }}
+{% endblock %}
 
-        <input class="input"
-               type="date"
-               name="{{ (scope ~ field.name)|fieldName }}"
-               value="{{ value }}"
-               {% if field.autofocus in ['on', 'true', 1] %}autofocus="autofocus"{% endif %}
-               {% if field.novalidate in ['on', 'true', 1] %}novalidate="novalidate"{% endif %}
-               {% if field.autocomplete in ['on', 'off'] %}autocomplete="{{ field.autocomplete }}"{% endif %}
-               {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
-               {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
-               {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
-        />
-    </label>
-</div>

templates/forms/fields/display/display.html.twig

@@ -0,0 +1,11 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input %}
+    <div class="form-display-wrapper {{ field.size }}">
+        {% if field.markdown %}
+            {{ field.content|markdown }}
+        {% else %}
+            {{ field.content }}
+        {% endif %}
+    </div>
+{% endblock %}

templates/forms/fields/email/email.html.twig

@@ -0,0 +1,6 @@
+{% extends "forms/field.html.twig" %}
+
+{% block input_attributes %}
+    type="email"
+    {{ parent() }}
+{% endblock %}

templates/forms/fields/hidden/hidden.html.twig

@@ -1,3 +1,3 @@
 {% set value = (value is null ? field.default : value) %}
 
-<input type="hidden" class="input" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|join(', ') }}" />
+<input data-grav-field="hidden" data-grav-disabled="false" type="hidden" class="input" name="{{ (scope ~ field.name)|fieldName }}" value="{{ value|join(', ') }}" />