Nemcio/Grav-Admin-Plugin
1
0
Fork 0
mirror of https://github.com/getgrav/grav-plugin-admin.git synced 2025-11-07 05:45:53 +01:00
Code Issues Packages Projects Releases Activity

Allow editing nested metadata

Browse Source
This commit is contained in:
Flavio Copes
2015-09-08 11:38:21 +02:00
parent 233b1006f3
commit 08d389739a
2 changed files with 83 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
themes/grav/js/forms/fields/array.js
View File

@@ -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;
})();

24
themes/grav/templates/forms/fields/array/array.html.twig
View File

@@ -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 %}
<input data-grav-array-type="key" type="text" value="{{ subkey }}" />
{% endif %}
<div class="form-row" data-grav-array-type="subrow">
<input data-grav-array-type="keyArraySubelement" type="text" value="{{ subkey }}" />
<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 -%}