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

Added support for value_only in Array field. Fixed misalignment of Array field when adding new ones.

Browse Source
This commit is contained in:
Djamil Legato
2015-07-28 12:40:11 -07:00
parent c1ea4715a9
commit efb6233d2c
5 changed files with 47 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/grav/css-compiled/template.css
View File

@@ -603,6 +603,8 @@ form .dynfields .form-row, form [data-grav-field="array"] .form-row {
display: inline-block;
line-height: 1.7;
cursor: pointer; }
form .dynfields .form-row.array-field-value_only, form [data-grav-field="array"] .form-row.array-field-value_only {
width: 100%; }
form .button-bar {
margin-top: 1rem;
background: #e6e6e6;

2
themes/grav/css-compiled/template.css.map
View File

File diff suppressed because one or more lines are too long

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

@@ -37,6 +37,10 @@
return this.el.data('grav-array-name')
};
ArrayField.prototype.isValueOnly = function() {
return this.el.find('[data-grav-array-mode="value_only"]').length;
};
ArrayField.prototype.value = function(val) {
if (typeof val === 'object') {
// Remove old
@@ -81,10 +85,16 @@
ArrayField.prototype.add = function() {
$(this._getNewField()).insertAfter($(event.target).closest('[data-grav-array-type="row"]'));
if (this.isValueOnly()) {
this.refreshAll();
}
};
ArrayField.prototype.remove = function() {
$(event.target).closest('[data-grav-array-type="row"]').remove();
if (this.isValueOnly()) {
this.refreshAll();
}
};
ArrayField.prototype.update = function() {
@@ -94,8 +104,15 @@
valueField.attr('name', keyField.val());
};
ArrayField.prototype.refreshAll = function() {
this.el.find('[data-grav-array-type="value"]').each(function(index, element){
$(element).attr('name', index);
});
};
ArrayField.prototype._getNewField = function(key, value) {
var name = this.name(),
value_only = this.isValueOnly(),
placeholder = {
key: this.el.data('grav-array-keyname') || 'Key',
val: this.el.data('grav-array-valuename') || 'Value'
@@ -104,12 +121,22 @@
key = key || '';
value = value || '';
return '<div class="form-row" data-grav-array-type="row">' +
'<input data-grav-array-type="key" type="text" value="' + key + '" placeholder="' + placeholder.key + '" />' +
'<input data-grav-array-type="value" type="text" name="' + key + '" value="' + value + '" placeholder="' + placeholder.val + '" />' +
'<span data-grav-array-action="rem" class="fa fa-minus"></span>' +
'<span data-grav-array-action="add" class="fa fa-plus"></span>' +
var output;
if (value_only) {
output = '<div class="form-row array-field-value_only" data-grav-array-type="row">' + "\n" +
'<input data-grav-array-type="value" type="text" value="' + value + '" placeholder="' + placeholder.val + '" />' + "\n";
} else {
output = '<div class="form-row" data-grav-array-type="row">' + "\n" +
'<input data-grav-array-type="key" type="text" value="' + key + '" placeholder="' + placeholder.key + '" />' + "\n" +
'<input data-grav-array-type="value" type="text" name="' + key + '" value="' + value + '" placeholder="' + "\n" + placeholder.val + '" />';
}
output += '<span data-grav-array-action="rem" class="fa fa-minus"></span>' + "\n" +
'<span data-grav-array-action="add" class="fa fa-plus"></span>' + "\n" +
'</div>';
return output;
};
root.Array = ArrayField;

4
themes/grav/scss/template/_forms.scss
View File

@@ -286,6 +286,10 @@ form {
line-height: 1.7;
cursor: pointer;
}
&.array-field-value_only {
width: 100%;
}
}

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

@@ -8,23 +8,25 @@
{% endblock %}
{% block input %}
<div data-grav-array-type="container">
<div data-grav-array-type="container"{% if field.value_only %} data-grav-array-mode="value_only"{% endif %}>
{% if value|length %}
{% for key, text in value %}
<div class="form-row" data-grav-array-type="row">
{% for key, text in value -%}
<div class="form-row{% if field.value_only %} array-field-value_only{% endif %}" data-grav-array-type="row">
{% if field.value_only != true %}
<input data-grav-array-type="key" type="text" value="{{ key }}" placeholder="{{ field.placeholder_key }}" />
{% endif %}
<input data-grav-array-type="value" type="text" name="{{ key }}" value="{{ text|join(', ') }}" placeholder="{{ field.placeholder_value }}" />
<span data-grav-array-action="rem" class="fa fa-minus"></span>
<span data-grav-array-action="add" class="fa fa-plus"></span>
</div>
{% endfor %}
{% else %}
{%- else -%}
<div class="form-row" data-grav-array-type="row">
<input data-grav-array-type="key" type="text" placeholder="{{ field.placeholder_key }}" />
<input data-grav-array-type="value" type="text" placeholder="{{ field.placeholder_value }}" />
<span data-grav-array-action="rem" class="fa fa-minus"></span>
<span data-grav-array-action="add" class="fa fa-plus"></span>
</div>
{% endif %}
{%- endif %}
</div>
{% endblock %}