mirror of
https://github.com/getgrav/grav-plugin-admin.git
synced 2025-11-17 02:31:02 +01:00
list form field type
This commit is contained in:
Gert
@@ -667,6 +667,30 @@ form .checkboxes {
|
||||
position: absolute;
|
||||
right: 10px; }
|
||||
|
||||
.form-list-wrapper ul[data-collection-holder] {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.form-list-wrapper ul[data-collection-holder] li {
|
||||
cursor: move;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d4d4d4;
|
||||
background: #f8f8f8;
|
||||
color: #8d959a;
|
||||
margin: 3px 0;
|
||||
position: relative;
|
||||
font-family: "Lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; }
|
||||
.form-list-wrapper ul[data-collection-holder] li .item-actions {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 4px;
|
||||
color: #5b6266; }
|
||||
.form-list-wrapper ul[data-collection-holder] li .item-actions .fa-trash-o {
|
||||
cursor: pointer; }
|
||||
.form-list-wrapper .collection-actions {
|
||||
text-align: right; }
|
||||
|
||||
td {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e1e1e1; }
|
||||
@@ -2044,17 +2068,4 @@ button.toast-close-button {
|
||||
.gpm .themes .gpm-actions.active-theme a, .gpm .themes .gpm-actions.inactive-theme a {
|
||||
color: #737C81; }
|
||||
|
||||
.log__line .severity {
|
||||
border-radius: 10px;
|
||||
padding: 10px; }
|
||||
.log__line .severity.debug, .log__line .severity.info {
|
||||
background-color: #737C81;
|
||||
color: #EEEEEE; }
|
||||
.log__line .severity.notice, .log__line .severity.warning {
|
||||
background-color: #0082BA;
|
||||
color: #fff; }
|
||||
.log__line .severity.error, .log__line .severity.critical, .log__line .severity.alert, .log__line .severity.emergency {
|
||||
background-color: #DA4B46;
|
||||
color: #fff; }
|
||||
|
||||
/*# sourceMappingURL=template.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -260,4 +260,67 @@ $(function () {
|
||||
});
|
||||
};
|
||||
GPMRefresh();
|
||||
|
||||
function reIndex (collection) {
|
||||
var holder = collection.find('[data-collection-holder]'),
|
||||
addBtn = collection.find('[data-action="add"]'),
|
||||
prefix = holder.data('collection-holder'),
|
||||
index = 0;
|
||||
|
||||
holder.find('[data-collection-item]').each(function () {
|
||||
var item = $(this),
|
||||
currentIndex = item.attr('data-collection-key');
|
||||
|
||||
if (index != currentIndex) {
|
||||
var r = new RegExp('^' + prefix.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&") + '[\.\[]' + currentIndex);
|
||||
|
||||
item.attr('data-collection-item', item.attr('data-collection-item').replace(r, prefix + '.' + index));
|
||||
item.attr('data-collection-key', index);
|
||||
item.find('[name]').each(function () {
|
||||
$(this).attr('name', $(this).attr('name').replace(r, prefix + '[' + index));
|
||||
});
|
||||
}
|
||||
|
||||
index++;
|
||||
});
|
||||
|
||||
addBtn.data('key-index', index);
|
||||
}
|
||||
|
||||
$('[data-type="collection"]').each(function () {
|
||||
var el = $(this),
|
||||
holder = el.find('[data-collection-holder]'),
|
||||
config = el.find('[data-collection-config]'),
|
||||
isArray = config.data('collection-array'),
|
||||
template = el.find('[data-collection-template="new"]').html();
|
||||
|
||||
// make sortable
|
||||
new Sortable(holder[0], { onUpdate: function () {
|
||||
if (isArray)
|
||||
reIndex(el);
|
||||
} });
|
||||
|
||||
// hook up delete
|
||||
el.on('click', '[data-action="delete"]', function (e) {
|
||||
$(this).closest('[data-collection-item]').remove();
|
||||
if (isArray)
|
||||
reIndex(el);
|
||||
});
|
||||
|
||||
// hook up add
|
||||
el.find('[data-action="add"]').on('click', function (e) {
|
||||
var button = $(this),
|
||||
key = button.data('key-index'),
|
||||
newItem = $(template);
|
||||
|
||||
newItem.attr('data-collection-item', newItem.attr('data-collection-item').replace('*', key));
|
||||
newItem.attr('data-collection-key', key);
|
||||
newItem.find('[name]').each(function () {
|
||||
$(this).attr('name', $(this).attr('name').replace('*', key));
|
||||
});
|
||||
|
||||
holder.append(newItem);
|
||||
button.data('key-index', ++key);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -388,3 +388,45 @@ form {
|
||||
}
|
||||
}
|
||||
|
||||
// Sortables
|
||||
.form-list-wrapper {
|
||||
ul[data-collection-holder] {
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
cursor: move;
|
||||
padding: 1rem;
|
||||
border-radius: $form-border-radius;
|
||||
border: 1px solid $form-border;
|
||||
background: lighten($content-bg, 4%);
|
||||
color: lighten($content-fg,10%);
|
||||
margin: 3px 0;
|
||||
position: relative;
|
||||
font-family: $font-family-default;
|
||||
|
||||
.item-actions {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 4px;
|
||||
color: darken($content-fg,10%);
|
||||
|
||||
.fa-bars {
|
||||
}
|
||||
|
||||
.fa-trash-o {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collection-actions {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
111
themes/grav/templates/forms/fields/list/list.html.twig
Normal file
111
themes/grav/templates/forms/fields/list/list.html.twig
Normal file
@@ -0,0 +1,111 @@
|
||||
{% set value = (value is null ? field.default : value) %}
|
||||
{% set name = scope ~ field.name %}
|
||||
{% set array = field.array is defined ? field.array : true %}
|
||||
{% set lastKey = null %}
|
||||
|
||||
<div class="form-field grid pure-g">
|
||||
<div class="form-label block size-1-4 pure-u-1-4">
|
||||
<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>' }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-data block size-3-4 pure-u-3-4">
|
||||
<div class="form-list-wrapper {{ field.size }}" data-type="collection">
|
||||
<ul data-collection-holder="{{ name }}">
|
||||
{% if field.fields %}
|
||||
{% for key, val in value %}
|
||||
{% if array and (key matches '/^\\d+$/') == 0 %}
|
||||
{% set array = false %}
|
||||
{% set lastKey = -1 %}
|
||||
{% elseif array %}
|
||||
{% set lastKey = key %}
|
||||
{% endif %}
|
||||
{% set itemName = name ~ '.' ~ key %}
|
||||
<li data-collection-item="{{ itemName }}" data-collection-key="{{ key }}">
|
||||
{% for childName, child in field.fields %}
|
||||
{% if childName starts with '.' %}
|
||||
{% set childKey = childName|trim('.') %}
|
||||
{% set childValue = val[childName[1:]] %}
|
||||
{% set childName = itemName ~ childName %}
|
||||
{% else %}
|
||||
{% set childKey = childName %}
|
||||
{% set childValue = data.value(scope ~ childName) %}
|
||||
{% set childName = childName|replace({'*': key}) %}
|
||||
{% endif %}
|
||||
{% set child = child|merge({ name: childName }) %}
|
||||
|
||||
{% if child.type == 'key' %}
|
||||
{%
|
||||
include 'forms/fields/text/text.html.twig'
|
||||
with { field: child, value: key }
|
||||
%}
|
||||
{% elseif child.type %}
|
||||
{%
|
||||
include [
|
||||
"forms/fields/#{child.type}/#{child.type}.html.twig",
|
||||
'forms/fields/text/text.html.twig'
|
||||
] with { field: child, value: childValue }
|
||||
%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="item-actions">
|
||||
<i class="fa fa-bars"></i>
|
||||
<br />
|
||||
<i class="fa fa-trash-o" data-action="delete"></i>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</ul>
|
||||
<div class="collection-actions">
|
||||
{% set lastKey = lastKey + 1 %}
|
||||
<button class="button" type="button" data-action="add" data-key-index="{{ lastKey }}"><i class="fa fa-plus"></i> Add item</button>
|
||||
</div>
|
||||
|
||||
<script type="text/html" data-collection-template="new">
|
||||
<li data-collection-item="{{ name ~ '.*' }}">
|
||||
{% if field.fields %}
|
||||
{% set itemName = name ~ '.*' %}
|
||||
{% for childName, child in field.fields %}
|
||||
{% if childName starts with '.' %}
|
||||
{% set childKey = childName|trim('.') %}
|
||||
{% set childName = itemName ~ childName %}
|
||||
{% else %}
|
||||
{% set childKey = childName %}
|
||||
{% set childName = childName|replace({'*': key}) %}
|
||||
{% endif %}
|
||||
{% set child = child|merge({ name: childName }) %}
|
||||
|
||||
{% if child.type == 'key' %}
|
||||
{%
|
||||
include 'forms/fields/text/text.html.twig'
|
||||
with { field: child, value: null }
|
||||
%}
|
||||
{% elseif child.type %}
|
||||
{%
|
||||
include [
|
||||
"forms/fields/#{child.type}/#{child.type}.html.twig",
|
||||
'forms/fields/text/text.html.twig'
|
||||
] with { field: child, value: null }
|
||||
%}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="item-actions">
|
||||
<i class="fa fa-bars"></i>
|
||||
<br />
|
||||
<i class="fa fa-trash-o" data-action="delete"></i>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<div style="display: none;" data-collection-config="{{ name }}" data-collection-array="{{ array ? 'true' : 'false' }}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="{{ base_url_relative_frontend }}{{ theme_url }}/js/sortable.min.js"></script>
|
||||
</div>
|
||||
Reference in New Issue
Block a user