Dynafields working..

themes/grav/css-compiled/template.css

@@ -509,13 +509,16 @@ form .switch-toggle label {
 form .switch-toggle a, form .switch-toggle label {
   outline: none !important; }
 form .dynfields input[type=text] {
-  width: 40%; }
-form .dynfields .inline > div {
-  margin-left: 30%; }
-form .dynfields .button {
+  width: 40%;
+  float: left;
+  margin: 0 5px 5px 0; }
+form .dynfields .form-row {
+  display: inline-block; }
+  form .dynfields .form-row span {
     padding: 0.5rem;
     display: inline-block;
-  background: #999; }
+    line-height: 1.7;
+    cursor: pointer; }
 form .button-bar {
   margin-top: 50px;
   background: #e6e6e6;

themes/grav/js/dynfields/array.js

@@ -0,0 +1,193 @@
+(function($){
+    String.prototype.capitalize = function() {
+        return this.charAt(0).toUpperCase() + this.slice(1);
+    };
+
+    var GROUP = -1;
+
+    var DynFields2 = {
+        init: function () {
+            var container = $('[data-grav-array]'), blockParent, options;
+            DynFields2.container = container;
+            container.parent().on('click', '[data-grav-addfield]', DynFields2.addField.bind(DynFields2));
+            container.on('click', '[data-grav-remfield]', DynFields2.remField.bind(DynFields2));
+
+            $.each(DynFields2.container, function(index, block){
+                block       = $(block);
+                blockParent = $(block.parents('.grav-array'));
+                options     = DynFields2.getOptions(block);
+
+                if (options && options.sortable_root){
+                    blockParent.nestable({
+                        rootClass:       'grav-array',
+                        handleClass:     'dd-root-handle',
+                        maxDepth:        1,
+                        expandBtnHTML:   false,
+                        collapseBtnHTML: false,
+                        group:           ++GROUP
+                    });
+
+                    blockParent.on('change', function(){
+                        DynFields2.updateNames(block);
+                    });
+                } else {
+                    block.find('.dd-root-handle').remove();
+                }
+
+
+                if (options && options.sortable_children){
+                    $.each(block.find('.dd3-content'), function(index, content){
+                        DynFields2.makeSortable(content);
+                    });
+                } else {
+                    block.find('.dd3-content .dd-grav-handle').remove();
+                }
+            });
+        },
+
+        getOptions: function(container){
+            var data = container.data('grav-array'),
+                options;
+
+            $.each(data, function(name, values){
+                options = values.options;
+            });
+
+            return options;
+        },
+
+        getSchema: function(container){
+            var data = container.data('grav-array'),
+                schema;
+
+            $.each(data, function(name, values){
+                schema = values.schema;
+            });
+
+            return schema;
+        },
+
+        addField: function(event){
+            var element   = $(event.target),
+                location  = 'insertAfter',
+                container = element.parents('[data-grav-array]'),
+                parents   = element.parents('li');
+
+            if (!container.length) {
+                container = element.next('[data-grav-array]');
+                location = 'appendTo';
+            }
+            if (!parents.length)   parents   = container.last();
+
+            var schema  = DynFields2.buildSchema(container),
+                li      = $('<li  class="dd-item dd3-item" />').html(schema)[location](parents);
+
+            DynFields2.updateNames(container);
+            DynFields2.makeSortable(li.find('.dd3-content'));
+        },
+
+        remField: function(event){
+            var element   = $(event.target),
+                container = element.parents('[data-grav-array]');
+
+            element.parents('li').remove();
+
+            DynFields2.updateNames(container);
+        },
+
+        updateNames: function(container){
+            var items, name;
+
+            $.each(container.children(), function(index, item){
+                items = $(item).find('[name]');
+
+                $.each(items, function(key, input){
+                    input = $(input);
+                    input.attr('name', input.attr('name').replace(/\[\w\]/, '[' + index + ']'));
+                });
+            });
+
+        },
+
+        makeSortable: function(context){
+            context = $(context);
+            context.nestable({
+                maxDepth:        1,
+                expandBtnHTML:   false,
+                collapseBtnHTML: false,
+                listClass:       'dd-grav-list',
+                itemClass:       'dd-grav-item',
+                rootClass:       'dd3-content',
+                handleClass:     'dd-grav-handle',
+                group:           ++GROUP
+            });
+
+            context.on('change', function(){
+                DynFields2.updateNames(context.parents('[data-grav-array]'));
+            });
+        },
+
+        buildSchema: function(container){
+            var data      = container.data('grav-array'),
+                options   =     DynFields2.getOptions(container),
+                html      = [],
+                input     = '',
+                inputName = '',
+                index;
+
+            if (options && options.sortable_root) html.push(' <div class="dd-handle dd3-handle dd-root-handle"></div>');
+            html.push(' <div class="dd-grav-actions">');
+            html.push('     <span data-grav-remfield class="button fa fa-minus"></span>');
+            html.push('     <span data-grav-addfield class="button fa fa-plus"></span></span>');
+            html.push(' </div>');
+            html.push(' <ol class="dd3-content dd-grav-list">');
+
+            $.each(DynFields2.getSchema(container), function(key, value){
+                html.push('<li class="dd-grav-item">');
+                if (options && options.sortable_children) html.push(' <div class="dd-handle dd3-handle dd-grav-handle"></div>');
+                html.push(' <span class="label">' + (value.label || key.capitalize()) + '</span>');
+
+                inputName = name + '[X]' + '[' + key + ']';
+                switch(value.type || 'input'){
+                    case 'text': case 'hidden':
+                        input = '<input type="' + (value.type || 'input') + '" placeholder="' + (value.placeholder || '') + '" name="' + inputName + '" />';
+                        break;
+
+                    case 'textarea':
+                        input = '<textarea placeholder="' + (value.placeholder || '') + '" name="' + inputName + '"></textarea>';
+                        break;
+
+                    case 'select':
+                        input  = '<select name="' + inputName + '">';
+                        $.each(value.options || [], function(sValue, sLabel){
+                            input += '<option value="' + sValue + '">' + sLabel + '</option>';
+                        });
+                        input += '</select>';
+                        break;
+
+                    case 'radio':
+                        input = '';
+                        index = 0;
+                        $.each(value.options || [], function(sValue, sLabel){
+                            input += '<label>';
+                            input += '  <input type="' + value.type + '" name="' + inputName + '" value="' + sValue + '" ' + (!index ? 'checked' : '') + '/> ';
+                            input +=    sLabel;
+                            input += '</label> ';
+                            index++;
+                        });
+                        break;
+                }
+
+                html.push(input);
+                html.push('</li>');
+            });
+
+            html.push(' </ol>');
+
+            return html.join("\n");
+        }
+    };
+
+    $(DynFields2.init);
+
+})(jQuery);

themes/grav/js/dynfields/dynfields.js

@@ -0,0 +1,36 @@
+(function($){
+
+    var DynFields = {
+        init: function () {
+            var container = $('[data-grav-dynfields]');
+            DynFields.container = container;
+            container.on('click', '[data-grav-addfield]', DynFields.addField.bind(DynFields));
+            container.on('click', '[data-grav-remfield]', DynFields.remField.bind(DynFields));
+            container.on('keyup', 'input:not([name])', DynFields.updateFields.bind(DynFields));
+        },
+        addField: function (event, element) {
+            element = $(event.target);
+            var div = $('<div />').html(this.layout());
+            div.insertAfter(element.parent('div'));
+        },
+        remField: function (event, element) {
+            element = $(event.target);
+            element.parent('div').remove();
+        },
+        updateFields: function (event, element) {
+            element = $(event.target);
+            var sibling = element.next();
+            sibling.attr('name', this.getName() + '[' + element.val() + ']');
+        },
+        getName: function () {
+            return this.container.data('grav-dynfields') || 'generic';
+        },
+        layout: function () {
+            var name = this.getName();
+            return '' + '   <input type="text" value=""  placeholder="/Your/Alias" />' + '   <input type="text" name="' + name + '[]" value="" placeholder="/Your/Real/Route" />' + '   <span data-grav-remfield class="button fa fa-minus"></span>   <span data-grav-addfield class="button fa fa-plus"></span>' + '';
+        }
+    };
+
+    $(DynFields.init);
+
+})(jQuery);

themes/grav/js/dynfields/dynfields.min.js

@@ -0,0 +1 @@
+(function(e){var t={init:function(){var n=e("[data-grav-dynfields]");t.container=n;n.on("click","[data-grav-addfield]",t.addField.bind(t));n.on("click","[data-grav-remfield]",t.remField.bind(t));n.on("keyup","input:not([name])",t.updateFields.bind(t))},addField:function(t,n){n=e(t.target);var r=e("<div />").html(this.layout());r.insertAfter(n.parent("div"))},remField:function(t,n){n=e(t.target);n.parent("div").remove()},updateFields:function(t,n){n=e(t.target);var r=n.next();r.attr("name",this.getName()+"["+n.val()+"]")},getName:function(){return this.container.data("grav-dynfields")||"generic"},layout:function(){var e=this.getName();return""+'   <input type="text" value=""  placeholder="/Your/Alias" />'+'   <input type="text" name="'+e+'[]" value="" placeholder="/Your/Real/Route" />'+"   <span data-grav-remfield>[ - ]</span>   <span data-grav-addfield>[ + ]</span>"+""}};e(t.init)})(jQuery);

themes/grav/scss/template/_forms.scss

@@ -168,18 +168,23 @@ form {
 
         input[type=text] {
             width: 40%;
-        }
-        .inline > div {
-            margin-left: 30%;
+            float: left;
+            margin: 0 5px 5px 0;
         }
 
-        .button {
+        .form-row {
+            display: inline-block;
+            span {
                 padding: 0.5rem;
                 display: inline-block;
-            background: #999;
+                line-height: 1.7;
+                cursor: pointer;
             }
         }
 
+
+    }
+
     .button-bar {
         margin-top: 50px;
         background: lighten($form-border,7%);

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

@@ -1,8 +1,8 @@
 {% set value = (value is null ? field.default : value) %}
 
-<div class="form-field">
-    <div class="dynfields" data-grav-dynfields="{{ field.name|fieldName }}">
-        <span class="inline">
+<div class="form-field grid pure-g dynfields" data-grav-dynfields="{{ field.name|fieldName }}">
+    <div class="form-label block size-1-3 pure-u-1-3">
+        <label>
             <span>
                 {% if field.help %}
                 <span class="tooltip" data-asTooltip-position="w" title="{{ field.help|e }}">{{ field.label }}</span>
@@ -10,25 +10,26 @@
                 {{ field.label }}
                 {% endif %}
             </span>
-
+        </label>
+    </div>
+    <div class="form-data block size-2-3 pure-u-2-3">
 
             {% if value|length %}
                 {% for key, text in value %}
-            <div>
+                <div class="form-row">
                     <input type="text" value="{{ (scope ~ key)|fieldName }}" placeholder="" />
                     <input type="text" name="{{ (scope ~ field.name)|fieldName }}[{{ key }}]" value="{{ text|join(', ') }}" placeholder="{{ field.placeholder }}" />
-                <span data-grav-remfield class="button fa fa-minus"></span>
-                <span data-grav-addfield class="button fa fa-plus"></span>
+                    <span data-grav-remfield class="fa fa-minus"></span>
+                    <span data-grav-addfield class="fa fa-plus"></span>
                 </div>
                 {% endfor %}
             {% else %}
-                <div>
+                <div class="form-row">
                     <input type="text" placeholder="" />
                     <input type="text" placeholder="{{ field.placeholder }}" />
-                    <span data-grav-remfield class="button fa fa-minus"></span>
-                    <span data-grav-addfield class="button fa fa-plus"></span>
+                    <span data-grav-remfield class="fa fa-minus"></span>
+                    <span data-grav-addfield class="fa fa-plus"></span>
                 </div>
             {% endif %}
-        </span>
      </div>
 </div>