Allow editing nested metadata

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

@@ -9,7 +9,11 @@
 
         this.el.on('click', '[data-grav-array-action="add"]', this.add.bind(this));
         this.el.on('click', '[data-grav-array-action="rem"]', this.remove.bind(this));
+        this.el.on('click', '[data-grav-array-action="addArrayItem"]', this.addArray.bind(this));
+        this.el.on('click', '[data-grav-array-action="remArrayItem"]', this.removeArray.bind(this));
         this.el.on('keyup', '[data-grav-array-type="key"]', this.update.bind(this));
+        this.el.on('keyup', '[data-grav-array-type="keyArray"]', this.updateArray.bind(this));
+        this.el.on('keyup', '[data-grav-array-type="keyArraySubelement"]', this.updateArraySubelement.bind(this));
     };
 
     ArrayField.getName = function () {
@@ -103,6 +107,18 @@
         }
     };
 
+    ArrayField.prototype.addArray = function(event) {
+        $(this._getNewArrayField()).insertAfter($(event.target).closest('[data-grav-array-type="subrow"]'));
+    };
+
+    ArrayField.prototype.removeArray = function(event) {
+        if ($(event.target).closest('[data-grav-array-type="subrow"]').siblings().length == 0) {
+            //disable for the last item
+            return;
+        }
+        $(event.target).closest('[data-grav-array-type="subrow"]').remove();
+    };
+
     ArrayField.prototype.update = function(event) {
         var keyField = $(event.target),
             valueField = keyField.closest('[data-grav-array-type="row"]').find('[data-grav-array-type="value"]');
@@ -110,6 +126,32 @@
         valueField.attr('name', this.getFieldName() + '[' + keyField.val() + ']');
     };
 
+    ArrayField.prototype.updateArray = function(event) {
+        var keyField = $(event.target),
+            row = keyField.closest('[data-grav-array-type="row"]'),
+            valueFields = row.find('[data-grav-array-type="value"]'),
+            keyArrayField = row.find('[data-grav-array-type="keyArray"]'),
+            fieldName = this.getFieldName();
+
+        valueFields.each(function() {
+            $(this).attr('name', fieldName + '[' + keyArrayField.val() + ']' + '[' + $(this).attr('subkey') + ']');
+        });
+    };
+
+    ArrayField.prototype.updateArraySubelement = function(event) {
+        var keyField = $(event.target),
+            row = keyField.closest('[data-grav-array-type="row"]'),
+            subrow = keyField.closest('[data-grav-array-type="subrow"]'),
+            valueFields = subrow.find('[data-grav-array-type="value"]'),
+            keyArrayField = row.find('[data-grav-array-type="keyArray"]'),
+            fieldName = this.getFieldName();
+
+        valueFields.each(function() {
+            $(this).attr('name', fieldName + '[' + keyArrayField.val() + ']' + '[' + keyField.val() + ']');
+        });
+    };
+
+
     ArrayField.prototype.refreshAll = function() {
         var that = this;
         this.el.find('[data-grav-array-type="value"]').each(function(index, element){
@@ -150,5 +192,17 @@
         return output;
     };
 
+    ArrayField.prototype._getNewArrayField = function(key, value) {
+        var output = '<div class="form-row" data-grav-array-type="subrow">' + "\n" +
+                        '<input data-grav-array-type="keyArraySubelement" type="text" value="" />' + "\n" +
+                        '<input data-grav-array-type="value" type="text" name="" value="" />';
+
+        output +=  '<span data-grav-array-action="remArrayItem" class="fa fa-minus-square"></span>' + "\n" +
+            '<span data-grav-array-action="addArrayItem" class="fa fa-plus-square"></span>' + "\n" +
+            '</div>';
+
+        return output;
+    };
+
     root.Array = ArrayField;
 })();

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

@@ -14,26 +14,38 @@
                 <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}" data-grav-array-type="row">
 
                     {% if text is iterable %}
-                    <label>{{ key }}:</label>
+                        <div class="grid" style="display: flex">
+                            <div class="block size-1-4">
+                                <input data-grav-array-type="keyArray" type="text" value="{{ key }}" placeholder="{{ field.placeholder_key|e|tu }}" style="float: none; width: 90%" />
+                            </div>
 
+                            <div class="block size-3-4">
                                 {% for subkey, subtext in text -%}
-                        {% if field.value_only != true %}
+                                    <div class="form-row" data-grav-array-type="subrow">
-                        <input data-grav-array-type="key" type="text" value="{{ subkey }}" />
+                                        <input data-grav-array-type="keyArraySubelement" type="text" value="{{ subkey }}" />
-                        {% endif %}
+                                        <input data-grav-array-type="value" type="text" subkey="{{ subkey }}" name="{{ (field.name|fieldName) ~ '[' ~ key ~ '][' ~ subkey ~ ']'  }}" value="{{ subtext|join(', ') }}" />
 
-                        <input data-grav-array-type="value" type="text" name="{{ (field.name|fieldName) ~ '[' ~ key ~ '][' ~ subkey ~ ']'  }}" value="{{ subtext|join(', ') }}" />
+                                        <span data-grav-array-action="remArrayItem" class="fa fa-minus-square"></span>
+                                        <span data-grav-array-action="addArrayItem" class="fa fa-plus-square"></span>
+                                    </div>
                                 {% endfor %}
 
+                                <div class="form-row{% if field.value_only %} array-field-value_only{% endif %}" data-grav-array-type="subrow">
+                                    <span data-grav-array-action="rem" class="fa fa-minus"></span>
+                                    <span data-grav-array-action="add" class="fa fa-plus"></span>
+                                </div>
+                            </div>
+                        </div>
                     {% else %}
                         {% if field.value_only != true %}
                             <input data-grav-array-type="key" type="text" value="{{ key }}" placeholder="{{ field.placeholder_key|e|tu }}" />
                         {% endif %}
 
                         <input data-grav-array-type="value" type="text" name="{{ (field.name|fieldName) ~ '[' ~ key ~ ']'  }}" value="{{ text|join(', ') }}" placeholder="{{ field.placeholder_value|e|tu }}" />
-                {% endif %}
 
                         <span data-grav-array-action="rem" class="fa fa-minus"></span>
                         <span data-grav-array-action="add" class="fa fa-plus"></span>
+                    {% endif %}
                 </div>
             {% endfor %}
         {%- else -%}