Added support for textarea value type in Array field

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v1.8.8
+## mm/dd/2018
+
+1. [](#improved)
+    * Added support for textarea value type in `array` field
+
 # v1.8.7
 ## 07/31/2018
 

themes/grav/app/forms/fields/array.js

@@ -28,6 +28,10 @@ class Template {
         return this.container.find('[data-grav-array-mode="value_only"]:first').length || false;
     }
 
+    isTextArea() {
+        return this.container.data('grav-array-textarea') || false;
+    }
+
     shouldBeDisabled() {
         // check for toggleables, if field is toggleable and it's not enabled, render disabled
         let toggle = this.container.closest('.form-field').find('[data-grav-field="toggleable"] input[type="checkbox"]');
@@ -35,20 +39,22 @@ class Template {
     }
 
     getNewRow() {
-        let tpl = '';
+        let tpl = '';const value = this.isTextArea()
+            ? `<textarea ${this.shouldBeDisabled() ? 'disabled="disabled"' : ''} data-grav-array-type="value" name="" placeholder="${this.getValuePlaceholder()}"></textarea>`
+            : `<input ${this.shouldBeDisabled() ? 'disabled="disabled"' : ''} data-grav-array-type="value" type="text" name="" value=""  placeholder="${this.getValuePlaceholder()}" />`;
 
         if (this.isValueOnly()) {
             tpl += `
             <div class="form-row array-field-value_only" data-grav-array-type="row">
                 <span data-grav-array-action="sort" class="fa fa-bars"></span>
-                <input ${this.shouldBeDisabled() ? 'disabled="disabled"' : ''} data-grav-array-type="value" type="text" value="" placeholder="${this.getValuePlaceholder()}" />
+                ${value}
             `;
         } else {
             tpl += `
             <div class="form-row" data-grav-array-type="row">
                 <span data-grav-array-action="sort" class="fa fa-bars"></span>
                 <input ${this.shouldBeDisabled() ? 'disabled="disabled"' : ''} data-grav-array-type="key" type="text" value="" placeholder="${this.getKeyPlaceholder()}" />
-                <input ${this.shouldBeDisabled() ? 'disabled="disabled"' : ''} data-grav-array-type="value" type="text" name="" value=""  placeholder="${this.getValuePlaceholder()}" />
+                ${value}
             `;
         }
 

themes/grav/templates/forms/fields/array/array.html.twig

@@ -4,38 +4,47 @@
     data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
     data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
     data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
+    data-grav-array-textarea="{{ field.value_type == 'textarea' }}"
     {{ parent() }}
 {% endblock %}
 
 {% macro renderer(key, text, field, scope) %}
 
     {% if text is not iterable %}
-    <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}"
+        <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}"
-         data-grav-array-type="row">
+             data-grav-array-type="row">
-        <span data-grav-array-action="sort" class="fa fa-bars"></span>
+            <span data-grav-array-action="sort" class="fa fa-bars"></span>
-        {% if field.value_only != true %}
+            {% if field.value_only != true %}
-            {% if key == '0' and text == '' %}
+                {% if key == '0' and text == '' %}
-                {% set key = '' %}
+                    {% set key = '' %}
+                {% endif %}
+
+                <input
+                    data-grav-array-type="key"
+                    type="text" value="{{ key }}"
+                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                    placeholder="{{ field.placeholder_key|e|tu }}" />
             {% endif %}
 
-            <input
+            {% if field.value_type == 'textarea' %}
-                data-grav-array-type="key"
+                <textarea
-                type="text" value="{{ key }}"
+                    data-grav-array-type="value"
-                {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                    name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
-                placeholder="{{ field.placeholder_key|e|tu }}" />
+                    placeholder="{{ field.placeholder_value|e|tu }}"
-        {% endif %}
+                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}>{{ text }}</textarea>
+            {% else %}
+                <input
+                    data-grav-array-type="value"
+                    type="text"
+                    name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
+                    placeholder="{{ field.placeholder_value|e|tu }}"
+                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                    value={% if text == 'true' %}true{% elseif text == 'false' %}false{% else %}"{{ text|join(', ')|e }}"{% endif %} />
+            {% endif %}
 
-        <input
+            <span data-grav-array-action="rem" class="fa fa-minus"></span>
-            data-grav-array-type="value"
+            <span data-grav-array-action="add" class="fa fa-plus"></span>
-            type="text"
+        </div>
-            name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
-            placeholder="{{ field.placeholder_value|e|tu }}"
-            {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-            value={% if text == 'true' %}true{% elseif text == 'false' %}false{% else %}"{{ text|join(', ')|e }}"{% endif %} />
-
-        <span data-grav-array-action="rem" class="fa fa-minus"></span>
-        <span data-grav-array-action="add" class="fa fa-plus"></span>
-    </div>
     {% endif %}
 {% endmacro %}
 
@@ -58,18 +67,26 @@
             <div class="form-row" data-grav-array-type="row">
                 <span data-grav-array-action="sort" class="fa fa-bars"></span>
                 {% if field.value_only != true %}
-                <input
+                    <input
-                    data-grav-array-type="key"
+                        data-grav-array-type="key"
-                    type="text"
+                        type="text"
-                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-                    placeholder="{{ field.placeholder_key|e|tu }}" />
+                        placeholder="{{ field.placeholder_key|e|tu }}" />
+                {% endif %}
+                {% if field.value_type == 'textarea' %}
+                    <textarea
+                        data-grav-array-type="value"
+                        name="{{ (scope ~ field.name)|fieldName }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        placeholder="{{ field.placeholder_value|e|tu }}"></textarea>
+                {% else %}
+                    <input
+                        data-grav-array-type="value"
+                        type="text"
+                        name="{{ (scope ~ field.name)|fieldName }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        placeholder="{{ field.placeholder_value|e|tu }}" />
                 {% endif %}
-                <input
-                    data-grav-array-type="value"
-                    type="text"
-                    name="{{ (scope ~ field.name)|fieldName }}"
-                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-                    placeholder="{{ field.placeholder_value|e|tu }}" />
                 <span data-grav-array-action="rem" class="fa fa-minus"></span>
                 <span data-grav-array-action="add" class="fa fa-plus"></span>
             </div>