list form field type

themes/grav/css-compiled/template.css

@@ -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 */

themes/grav/js/admin-all.js

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

themes/grav/scss/template/_forms.scss

@@ -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;
+    }
+}
+
+
+

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

@@ -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>