Lists now features a new YAML option controls: [top|bottom|both] (default: bottom) which will display the "Add Item" button at the Top and/or Bottom position relative to the list. When the Top button is pressed, a new item will be added at the beginning of the list, when the Bottom button is pressed, a new item will be appended to the list.

This commit is contained in:
Djamil Legato
2016-08-01 12:52:01 -07:00
parent 1a55ebe110
commit 9182e6dbc1
4 changed files with 31 additions and 6 deletions

View File

@@ -4,6 +4,7 @@
1. [](#improved)
* Get fresh media list for `Controller::getListMedia()` rather that cache so always latest.
* Add translation strings for the new system.force_ssl option
* Lists now features a new YAML option `controls: [top|bottom|both]` (default: bottom) which will display the "Add Item" button at the Top and/or Bottom position relative to the list. When the Top button is pressed, a new item will be added at the beginning of the list, when the Bottom button is pressed, a new item will be appended to the list.
1. [](#bugfix)
* Fixed issue in Admin favicon URL [#704](https://github.com/getgrav/grav-plugin-admin/issues/704)
* Fixed issue in `selfupgrade` where the package would get downloaded in the wrong destination

View File

@@ -34,12 +34,20 @@ export default class CollectionsField {
addItem(event) {
let button = $(event.currentTarget);
let list = button.closest('[data-type="collection"]');
let position = button.data('action-add') || 'bottom';
let list = $(button.closest('[data-type="collection"]'));
let template = $(list.find('> [data-collection-template="new"]').data('collection-template-html'));
list.find('> [data-collection-holder]').append(template);
list.find('> [data-collection-holder]')[position === 'top' ? 'prepend' : 'append'](template);
this.reindex(list);
let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
let topAction = list.closest('[data-type="collection"]').find('[data-action-add="top"]');
if (items.length && topAction.length) {
topAction.parent().removeClass('hidden');
}
// refresh toggleables in a list
$('[data-grav-field="toggleable"] input[type="checkbox"]').trigger('change');
}
@@ -47,10 +55,17 @@ export default class CollectionsField {
removeItem(event) {
let button = $(event.currentTarget);
let item = button.closest('[data-collection-item]');
let list = button.closest('[data-type="collection"]');
let list = $(button.closest('[data-type="collection"]'));
item.remove();
this.reindex(list);
let items = list.closest('[data-type="collection"]').find('> ul > [data-collection-item]');
let topAction = list.closest('[data-type="collection"]').find('[data-action-add="top"]');
if (!items.length && topAction.length) {
topAction.parent().addClass('hidden');
}
}
observeKey(event) {

File diff suppressed because one or more lines are too long

View File

@@ -3,6 +3,7 @@
{% set value = (value is null ? field.default : value) %}
{% set name = field.name %}
{% set btnLabel = field.btnLabel is defined ? field.btnLabel : "PLUGIN_ADMIN.ADD_ITEM" %}
{% set fieldControls = field.controls|default('bottom') %}
{% block contents %}
<div class="form-label{% if not vertical %} block size-1-3 pure-u-1-3{% endif %}">
@@ -35,6 +36,12 @@
>
<div class="form-list-wrapper {{ field.size }}" data-type="collection">
{% if fieldControls in ['top', 'both'] %}
<div class="collection-actions{{ not value|length ? ' hidden' : '' }}">
<button class="button" type="button" data-action="add" data-action-add="top"
{% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
</div>
{% endif %}
<ul data-collection-holder="{{ name }}"
{% if field.sort is same as(false) %}
data-collection-nosort
@@ -81,10 +88,12 @@
{% endfor %}
{% endif %}
</ul>
{% if fieldControls in ['bottom', 'both'] %}
<div class="collection-actions">
<button class="button" type="button" data-action="add"
{% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
<button class="button" type="button" data-action="add" data-action-add="bottom"
{% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
</div>
{% endif %}
{%- set itemName = name ? name ~ '.*' : '*' -%}
<div style="display: none;" data-collection-template="new" data-collection-template-html="{%- filter replace({' ': ' ', '\n': ' '})|e('html_attr') -%}