Scrollreveal+cat+datenews

2019-01-07 11:43:39 +01:00
parent e4cac3d01e
commit 762a1ad170
3158 changed files with 140699 additions and 73915 deletions
@@ -2,7 +2,7 @@ import $ from 'jquery';
 import { config, uri_params } from 'grav-config';
 import request from '../../utils/request';

-const insertTextAt = (string, index, text) => [string.slice(0, index), text, string.slice(index)].join('');
+// const insertTextAt = (string, index, text) => [string.slice(0, index), text, string.slice(index)].join('');

 export default class FilePickerField {

@@ -79,14 +79,12 @@ export default class FilePickerField {
        let renderOption = function renderOption(item, escape) {
            let image = '';
            if (imagesPreview && folder && (!item.status || item.status === 'available') && item.name.match(/\.(jpg|jpeg|png|gif)$/i)) {
-                const fallback2x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@2x');
-                const fallback3x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@3x');
+                // const fallback2x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@2x');
+                // const fallback3x = insertTextAt(`${config.base_url_relative}/../${folder}/${item.name}`, -4, '@3x');
                const source = thumbs[item.name] || `${config.base_url_relative}/../${folder}/${item.name}`;

-                image = `
-                    <img class="filepicker-field-image"
-                         src="${source}"
-                         onerror="if(this.src==='${fallback2x}'){this.src='${fallback3x}';this.onerror='';}else{this.src='${fallback2x}'}" />`;
+                // onerror="if(this.src==='${fallback2x}'){this.src='${fallback3x}';}else{this.src='${fallback2x}'}"
+                image = `<img class="filepicker-field-image" src="${source}" />`;
            }

            return `<div>
@@ -14,9 +14,8 @@ import request from './utils/request';
 import './utils/2fa';

 // bootstrap jQuery extensions
-import 'bootstrap/js/transition';
-import 'bootstrap/js/dropdown';
-import 'bootstrap/js/collapse';
+import './utils/bootstrap-transition';
+import './utils/bootstrap-collapse';

 // tabs memory
 import './utils/tabs-memory';
@@ -113,7 +113,7 @@ export default class Updates {
            <p>
                <a href="#" class="button button-small secondary" data-remodal-target="update-packages" data-packages-slugs="${Object.keys(resources).join()}" data-${singles[index]}-action="start-packages-update">${translations.PLUGIN_ADMIN.UPDATE} ${translations.PLUGIN_ADMIN.ALL} ${type_translation}</a>
                <i class="fa fa-bullhorn"></i>
-                ${length} ${translations.PLUGIN_ADMIN.OF_YOUR} ${type} ${translations.PLUGIN_ADMIN.HAVE_AN_UPDATE_AVAILABLE}
+                ${length} ${translations.PLUGIN_ADMIN.OF_YOUR} ${type_translation} ${translations.PLUGIN_ADMIN.HAVE_AN_UPDATE_AVAILABLE}
            </p>
            `);

@@ -0,0 +1,210 @@
+import jQuery from 'jquery';
+
+/* ========================================================================
+ * Bootstrap: collapse.js v3.4.0
+ * http://getbootstrap.com/javascript/#collapse
+ * ========================================================================
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+/* jshint latedef: false */
+
+(function($) {
+    'use strict';
+
+    // COLLAPSE PUBLIC CLASS DEFINITION
+    // ================================
+
+    var Collapse = function(element, options) {
+        this.$element = $(element);
+        this.options = $.extend({}, Collapse.DEFAULTS, options);
+        this.$trigger = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
+                           '[data-toggle="collapse"][data-target="#' + element.id + '"]');
+        this.transitioning = null;
+
+        if (this.options.parent) {
+            this.$parent = this.getParent();
+        } else {
+            this.addAriaAndCollapsedClass(this.$element, this.$trigger);
+        }
+
+        if (this.options.toggle) this.toggle();
+    };
+
+    Collapse.VERSION = '3.4.0';
+
+    Collapse.TRANSITION_DURATION = 350;
+
+    Collapse.DEFAULTS = {
+        toggle: true
+    };
+
+    Collapse.prototype.dimension = function() {
+        var hasWidth = this.$element.hasClass('width');
+        return hasWidth ? 'width' : 'height';
+    };
+
+    Collapse.prototype.show = function() {
+        if (this.transitioning || this.$element.hasClass('in')) return;
+
+        var activesData;
+        var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing');
+
+        if (actives && actives.length) {
+            activesData = actives.data('bs.collapse');
+            if (activesData && activesData.transitioning) return;
+        }
+
+        var startEvent = $.Event('show.bs.collapse');
+        this.$element.trigger(startEvent);
+        if (startEvent.isDefaultPrevented()) return;
+
+        if (actives && actives.length) {
+            Plugin.call(actives, 'hide');
+            activesData || actives.data('bs.collapse', null);
+        }
+
+        var dimension = this.dimension();
+
+        this.$element
+            .removeClass('collapse')
+            .addClass('collapsing')[dimension](0)
+            .attr('aria-expanded', true);
+
+        this.$trigger
+            .removeClass('collapsed')
+            .attr('aria-expanded', true);
+
+        this.transitioning = 1;
+
+        var complete = function() {
+            this.$element
+                .removeClass('collapsing')
+                .addClass('collapse in')[dimension]('');
+            this.transitioning = 0;
+            this.$element
+                .trigger('shown.bs.collapse');
+        };
+
+        if (!$.support.transition) return complete.call(this);
+
+        var scrollSize = $.camelCase(['scroll', dimension].join('-'));
+
+        this.$element
+            .one('bsTransitionEnd', $.proxy(complete, this))
+            .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize]);
+    };
+
+    Collapse.prototype.hide = function() {
+        if (this.transitioning || !this.$element.hasClass('in')) return;
+
+        var startEvent = $.Event('hide.bs.collapse');
+        this.$element.trigger(startEvent);
+        if (startEvent.isDefaultPrevented()) return;
+
+        var dimension = this.dimension();
+
+        this.$element[dimension](this.$element[dimension]())[0].offsetHeight;
+
+        this.$element
+            .addClass('collapsing')
+            .removeClass('collapse in')
+            .attr('aria-expanded', false);
+
+        this.$trigger
+            .addClass('collapsed')
+            .attr('aria-expanded', false);
+
+        this.transitioning = 1;
+
+        var complete = function() {
+            this.transitioning = 0;
+            this.$element
+                .removeClass('collapsing')
+                .addClass('collapse')
+                .trigger('hidden.bs.collapse');
+        };
+
+        if (!$.support.transition) return complete.call(this);
+
+        this.$element[dimension](0)
+            .one('bsTransitionEnd', $.proxy(complete, this))
+            .emulateTransitionEnd(Collapse.TRANSITION_DURATION);
+    };
+
+    Collapse.prototype.toggle = function() {
+        this[this.$element.hasClass('in') ? 'hide' : 'show']();
+    };
+
+    Collapse.prototype.getParent = function() {
+        return $(this.options.parent)
+            .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
+            .each($.proxy(function(i, element) {
+                var $element = $(element);
+                this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element);
+            }, this))
+            .end();
+    };
+
+    Collapse.prototype.addAriaAndCollapsedClass = function($element, $trigger) {
+        var isOpen = $element.hasClass('in');
+
+        $element.attr('aria-expanded', isOpen);
+        $trigger
+            .toggleClass('collapsed', !isOpen)
+            .attr('aria-expanded', isOpen);
+    };
+
+    function getTargetFromTrigger($trigger) {
+        var href;
+        var target = $trigger.attr('data-target') ||
+      (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); // strip for ie7
+
+        return $(target);
+    }
+
+    // COLLAPSE PLUGIN DEFINITION
+    // ==========================
+
+    function Plugin(option) {
+        return this.each(function() {
+            var $this = $(this);
+            var data = $this.data('bs.collapse');
+            var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option === 'object' && option);
+
+            if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false;
+            if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)));
+            if (typeof option === 'string') data[option]();
+        });
+    }
+
+    var old = $.fn.collapse;
+
+    $.fn.collapse = Plugin;
+    $.fn.collapse.Constructor = Collapse;
+
+    // COLLAPSE NO CONFLICT
+    // ====================
+
+    $.fn.collapse.noConflict = function() {
+        $.fn.collapse = old;
+        return this;
+    };
+
+    // COLLAPSE DATA-API
+    // =================
+
+    $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function(e) {
+        var $this = $(this);
+
+        if (!$this.attr('data-target')) e.preventDefault();
+
+        var $target = getTargetFromTrigger($this);
+        var data = $target.data('bs.collapse');
+        var option = data ? 'toggle' : $this.data();
+
+        Plugin.call($target, option);
+    });
+
+}(jQuery));
@@ -0,0 +1,52 @@
+import jQuery from 'jquery';
+
+(function($) {
+    'use strict';
+
+    // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
+    // ============================================================
+
+    function transitionEnd() {
+        var el = document.createElement('bootstrap');
+
+        var transEndEventNames = {
+            WebkitTransition: 'webkitTransitionEnd',
+            MozTransition: 'transitionend',
+            OTransition: 'oTransitionEnd otransitionend',
+            transition: 'transitionend'
+        };
+
+        for (var name in transEndEventNames) {
+            if (el.style[name] !== undefined) {
+                return { end: transEndEventNames[name] };
+            }
+        }
+
+        return false; // explicit for ie8 (  ._.)
+    }
+
+    // http://blog.alexmaccaw.com/css-transitions
+    $.fn.emulateTransitionEnd = function(duration) {
+        var called = false;
+        var $el = this;
+        $(this).one('bsTransitionEnd', function() { called = true; });
+        var callback = function() { if (!called) $($el).trigger($.support.transition.end); };
+        setTimeout(callback, duration);
+        return this;
+    };
+
+    $(function() {
+        $.support.transition = transitionEnd();
+
+        if (!$.support.transition) return;
+
+        $.event.special.bsTransitionEnd = {
+            bindType: $.support.transition.end,
+            delegateType: $.support.transition.end,
+            handle: function(e) {
+                if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments);
+            }
+        };
+    });
+
+}(jQuery));
@@ -0,0 +1,80 @@
+(function($) {
+    $(function() {
+        /**
+         * polyfill for html5 form attr
+         */
+
+        // detect if browser supports this
+        var sampleElement = $('[form]').get(0);
+        var isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window;
+        if (sampleElement && window.HTMLFormElement && sampleElement.form instanceof HTMLFormElement && !isIE11) {
+            // browser supports it, no need to fix
+            return;
+        }
+
+        /**
+         * Append a field to a form
+         *
+         */
+        $.fn.appendField = function(data) {
+            // for form only
+            if (!this.is('form')) return;
+
+            // wrap data
+            if (!$.isArray(data) && data.name && data.value) {
+                data = [data];
+            }
+
+            var $form = this;
+
+            // attach new params
+            $.each(data, function(i, item) {
+                $('<input/>')
+                    .attr('type', 'hidden')
+                    .attr('name', item.name)
+                    .val(item.value).appendTo($form);
+            });
+
+            return $form;
+        };
+
+        /**
+         * Find all input fields with form attribute point to jQuery object
+         *
+         */
+        $('form[id]').submit(function(e) {
+            // serialize data
+            var data = $('[form=' + this.id + ']').serializeArray();
+            // append data to form
+            $(this).appendField(data);
+        }).each(function() {
+            var form    = this,
+                $fields = $('[form=' + this.id + ']');
+
+            $fields.filter('button, input')
+                .filter('[type=reset],[type=submit],[type=image],button')
+                .click(function() {
+                    var type = this.type.toLowerCase();
+                    if (type === 'reset') {
+                        // reset form
+                        form.reset();
+                        // for elements outside form
+                        $fields.each(function() {
+                            this.value = this.defaultValue;
+                            this.checked = this.defaultChecked;
+                        }).filter('select').each(function() {
+                            $(this).find('option').each(function() {
+                                this.selected = this.defaultSelected;
+                            });
+                        });
+                    } else {
+                        $(form).appendField({
+                            name: this.name,
+                            value: this.value
+                        }).submit();
+                    }
+                });
+        });
+    });
+
+})(jQuery);
@@ -13,7 +13,6 @@
  "author": "RocketTheme, LLC",
  "license": "MIT",
  "dependencies": {
-    "bootstrap": "^3.3.7",
    "chartist": "0.11.0",
    "codemirror": "^5.30.0",
    "cookies-js": "^1.2.3",
@@ -28,6 +27,7 @@
    "immutablediff": "^0.4.4",
    "js-yaml": "^3.10.0",
    "mout": "^1.0.0",
+    "popper.js": "^1.14.4",
    "rangetouch": "^1.0.5",
    "remodal": "^1.1.1",
    "selectize": "^0.12.4",
@@ -251,7 +251,7 @@ tr {

            &:focus, &:hover {
                color: $button-text;
-                background-color: $button-bg;
+                background-color: darken($button-bg, 5%);
            }
        }

@@ -1,13 +1,5 @@
 {% extends "forms/field.html.twig" %}

-{% block global_attributes %}
-    data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
-    data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
-    data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
-    data-grav-array-textarea="{{ field.value_type == 'textarea' }}"
-    {{ parent() }}
-{% endblock %}
-
 {% macro renderer(key, text, field, scope) %}

    {% if text is not iterable %}
@@ -20,26 +12,26 @@
                {% endif %}

                <input
-                    data-grav-array-type="key"
-                    type="text" value="{{ key }}"
-                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-                    placeholder="{{ field.placeholder_key|e|tu }}" />
+                        data-grav-array-type="key"
+                        type="text" value="{{ key }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        placeholder="{{ field.placeholder_key|e|tu }}" />
            {% endif %}

            {% if field.value_type == 'textarea' %}
                <textarea
-                    data-grav-array-type="value"
-                    name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
-                    placeholder="{{ field.placeholder_value|e|tu }}"
-                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}>{{ text }}</textarea>
+                        data-grav-array-type="value"
+                        name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
+                        placeholder="{{ field.placeholder_value|e|tu }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}>{{ text }}</textarea>
            {% else %}
                <input
-                    data-grav-array-type="value"
-                    type="text"
-                    name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
-                    placeholder="{{ field.placeholder_value|e|tu }}"
-                    {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
-                    value={% if text == 'true' %}true{% elseif text == 'false' %}false{% else %}"{{ text|join(', ')|e }}"{% endif %} />
+                        data-grav-array-type="value"
+                        type="text"
+                        name="{{ ((scope ~ field.name)|fieldName) ~ '[' ~ key ~ ']' }}"
+                        placeholder="{{ field.placeholder_value|e|tu }}"
+                        {% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}
+                        value={% if text == 'true' %}true{% elseif text == 'false' %}false{% else %}"{{ text|join(', ')|e }}"{% endif %} />
            {% endif %}

            <span data-grav-array-action="rem" class="fa fa-minus"></span>
@@ -48,8 +40,17 @@
    {% endif %}
 {% endmacro %}

+{% import _self as array_field %}
+
+{% block global_attributes %}
+    data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
+    data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
+    data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
+    data-grav-array-textarea="{{ field.value_type == 'textarea' }}"
+    {{ parent() }}
+{% endblock %}
+
 {% block input %}
-    {% import _self as array_field %}
    <div class="{{ field.size }}" data-grav-array-type="container"{% if field.value_only %} data-grav-array-mode="value_only"{% endif %}{{ value|length <= 1 ? ' class="one-child"' : '' }}>
        {% if value|length %}
            {% for key, text in value -%}
@@ -32,13 +32,13 @@
            {% if field.resizer is not defined or field.resizer not in ['off', 'false', 0] %}<div class="grav-editor-resizer"></div>{% endif %}
            {% if field.description %}
                <div class="form-extra-wrapper {{ field.size }} {{ field.wrapper_classes }}">
-                        <span class="form-description">
-                            {% if field.markdown %}
-                                {{ field.description|tu|markdown(false)|raw }}
-                            {% else %}
-                                {{ field.description|tu|raw }}
-                            {% endif %}
-                        </span>
+                    <span class="form-description">
+                        {% if field.markdown %}
+                            {{ field.description|tu|markdown(false)|raw }}
+                        {% else %}
+                            {{ field.description|tu|raw }}
+                        {% endif %}
+                    </span>
                </div>
            {% endif %}
        </div>
@@ -1,9 +1,4 @@
 {% extends "forms/field.html.twig" %}
-{% set defaults = config.plugins.form %}
-{% set files = defaults.files|merge(field|default([])) %}
-{% set limit = not field.multiple ? 1 : files.limit %}
-
-

 {% macro bytesToSize(bytes) -%}
    {% spaceless %}
@@ -43,20 +38,26 @@
        {% set real_path = global.admin.getPagePathFromToken(path) %}
        {% set remove = global.file_url_remove ? global.file_url_remove : (global.base_url_relative ~ '/media.json') %}
        {% set remove = uri.addNonce(
-        remove ~
-        '/route' ~ config.system.param_sep ~ base64_encode(global.base_path ~ '/' ~ real_path) ~
-        '/task' ~ config.system.param_sep ~ 'removeFileFromBlueprint' ~
-        '/proute' ~ config.system.param_sep ~ base64_encode(route) ~
-        '/blueprint' ~ config.system.param_sep ~ blueprint ~
-        '/type' ~ config.system.param_sep ~ type ~
-        '/field' ~ config.system.param_sep ~ files.name ~
-        '/path' ~ config.system.param_sep ~ base64_encode(value.path), 'admin-form', 'admin-nonce') %}
+            remove ~
+            '/route' ~ config.system.param_sep ~ base64_encode(global.base_path ~ '/' ~ real_path) ~
+            '/task' ~ config.system.param_sep ~ 'removeFileFromBlueprint' ~
+            '/proute' ~ config.system.param_sep ~ base64_encode(route) ~
+            '/blueprint' ~ config.system.param_sep ~ blueprint ~
+            '/type' ~ config.system.param_sep ~ type ~
+            '/field' ~ config.system.param_sep ~ files.name ~
+            '/path' ~ config.system.param_sep ~ base64_encode(value.path), 'admin-form', 'admin-nonce') %}

        {% set file = value|merge({remove: remove, path: (uri.rootUrl == '/' ? '/' : uri.rootUrl ~ '/' ~ real_path) }) %}
        <div class="hidden" data-file="{{ file|json_encode|e('html_attr') }}"></div>
    {% endif %}
 {% endmacro %}

+{% import _self as macro %}
+
+{% set defaults = config.plugins.form %}
+{% set files = defaults.files|merge(field|default([])) %}
+{% set limit = not field.multiple ? 1 : files.limit %}
+
 {% block input %}
    {% set upload_limit = config.system.media.upload_limit  / 1024 / 1024 %}
    {% set page_can_upload = exists or (type == 'page' and not exists and not (field.destination starts with '@self' or field.destination starts with 'self@')) %}
@@ -78,7 +79,7 @@
        />

        {% for path, file in value %}
-            {{ _self.preview(path, file, _context) }}
+            {{ macro.preview(path, file, _context) }}
        {% endfor %}
        {% include 'forms/fields/hidden/hidden.html.twig' with {field: {name: '_json.' ~ field.name}, value:value|raw|json_encode} %}
    </div>
@@ -77,7 +77,7 @@
                                {% set childName = itemName -%}
                            {%- elseif childName starts with '.' -%}
                                {% set childKey = childName|trim('.') %}
-                                {% set childValue = val[childName[1:]] %}
+                                {% set childValue = val|nested(childName) %}
                                {% set childName = itemName ~ childName %}
                            {% else %}
                                {% set childKey = childName %}
@@ -1,13 +1,8 @@
 {% extends "forms/field.html.twig" %}

-{% block global_attributes %}
-    data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
-    data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
-    data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
-    {{ parent() }}
-{% endblock %}
-
 {% macro renderer(key, content, field, scope, level, parent_key, up_level) %}
+    {% import _self as self %}
+
    {% macro field(value, key, level, globalvars, disable_name, hidden) %}
        {% set name = 'data[' ~ globalvars.field.name|replace({'.': ']['}) ~ ']' ~ key %}
        <div class="form-row array-field-value_only js__multilevel-field {{ level == 0 ? 'top' : '' }}"
@@ -28,14 +23,14 @@

    {% if level == 0 %}

-        {{ _self.field(key, '', level, _context, true, (is_numeric(key) ? true : false)) }}
+        {{ self.field(key, '', level, _context, true, (is_numeric(key) ? true : false)) }}

        {% if content is not iterable %}
            {% set level2 = level + 1 %}

            <div class="children-wrapper">
                <div class="element-wrapper">
-                    {{ _self.field(content, '[' ~ key ~ ']', level2, _context) }}
+                    {{ self.field(content, '[' ~ key ~ ']', level2, _context) }}
                </div>
            </div>
        {% endif %}
@@ -51,9 +46,9 @@
            <div class="element-wrapper">
                {% if not is_numeric(inner_key) %}
                    {% if (content|length > 1) %}
-                        {{ _self.field(inner_key, parent_key, level, _context, true) }}
+                        {{ self.field(inner_key, parent_key, level, _context, true) }}
                    {% else %}
-                        {{ _self.field(inner_key, parent_key, level, _context) }}
+                        {{ self.field(inner_key, parent_key, level, _context) }}
                    {% endif %}
                    {% set level2 = level + 1 %}
                    {% set up_level = true %}
@@ -70,7 +65,7 @@
                    {% endif %}

                    {% set last_key = (is_numeric(inner_key)) ? '' : inner_key %}
-                    {{ _self.field(inner_content, parent_key ~ '[' ~ inner_key ~ ']', level2, _context) }}
+                    {{ self.field(inner_content, parent_key ~ '[' ~ inner_key ~ ']', level2, _context) }}

                    {% if not is_numeric(inner_key) %}
                            </div>
@@ -79,19 +74,28 @@
                {% else %}

                    {% set inner_parent_key = parent_key ~ '[' ~ inner_key ~ ']' %}
-                    {{ _self.renderer(inner_key, inner_content, field, scope, level, inner_parent_key, up_level) }}
+                    {{ self.renderer(inner_key, inner_content, field, scope, level, inner_parent_key, up_level) }}
                {% endif %}
            </div>
        {% endfor %}
    </div>
 {% endmacro %}

+{% import _self as macro %}
+
+{% block global_attributes %}
+    data-grav-array-name="{{ (scope ~ field.name)|fieldName }}"
+    data-grav-array-keyname="{{ field.placeholder_key|e|tu }}"
+    data-grav-array-valuename="{{ field.placeholder_value|e|tu }}"
+    {{ parent() }}
+{% endblock %}
+
 {% block input %}
    <div data-id="{{random_string()}}" data-grav-multilevel-field data-grav-array-type="container" data-grav-array-mode="value_only"{{ value|length <= 1 ? ' class="one-child"' : '' }}>
        {% if value|length %}
            {% for key, content in value -%}
                <div class="element-wrapper">
-                    {{ _self.renderer(key, content, field, scope, 0, '[' ~ key ~ ']', true) }}
+                    {{ macro.renderer(key, content, field, scope, 0, '[' ~ key ~ ']', true) }}
                </div>
            {% endfor %}
        {%- else -%}
@@ -14,6 +14,8 @@
    {% endfor %}
 {% endmacro %}

+{% import _self as macro %}
+
 {% block global_attributes %}
    data-grav-selectize="{{ (field.selectize is defined ? field.selectize : {})|json_encode|e('html_attr') }}"
    data-grav-field="select"
@@ -43,7 +45,7 @@
        {% if field.show_root %}
            <option value="/">/ (root)</option>
        {% endif %}
-        {{ _self.page_options(_context, page_list) }}
+        {{ macro.page_options(_context, page_list) }}
        </select>
    </div>
 {% endblock %}
@@ -1,5 +1,12 @@
 {% extends "forms/field.html.twig" %}

+{% macro spanToggle(input, length) %}
+    {% set space = repeat('&nbsp;&nbsp;', (length - input|length) / 2) %}
+    {{ (space ~ input ~ space)|raw }}
+{% endmacro %}
+
+{% import _self as macro %}
+
 {% set value = (value is null ? field.default : value) %}
 {% set value = (value is same as(false) ? 0 : value) %}

@@ -8,11 +15,6 @@
    data-grav-default="{{ field.default|json_encode()|e('html_attr') }}"
 {% endblock %}

-{% macro spanToggle(input, length) %}
-    {% set space = repeat('&nbsp;&nbsp;', (length - input|length) / 2) %}
-    {{ (space ~ input ~ space)|raw }}
-{% endmacro %}
-
 {% block input %}
    <div class="permissions-container">
        {% set permissions = admin.getPermissions %}
@@ -56,7 +58,7 @@
                            {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
                        />

-                        <label for="{{ id }}">{{ (_self.spanToggle(translation, maxLen)|trim)|raw }}</label>
+                        <label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
                    {% endfor %}
                    <a></a>
                </div>
@@ -7,11 +7,11 @@
    {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
    {% if field.validate.step %}step="{{ field.validate.step }}"{% endif %}
    {% if field.id is defined %}
-        id="range_{{ field.id|e|replace('.', '_') }}"
-        oninput="number_{{ field.id|e|replace('.', '_') }}_output.value = this.value"
+        id="range_{{ field.id|e|replace({'.': '_'}) }}"
+        oninput="number_{{ field.id|e|replace({'.': '_'}) }}_output.value = this.value"
    {% else %}
-        id="range_{{ field.name|e|replace('.', '_') }}"
-        oninput="number_{{ field.name|e|replace('.', '_') }}_output.value = this.value"
+        id="range_{{ field.name|e|replace({'.': '_'}) }}"
+        oninput="number_{{ field.name|e|replace({'.': '_'}) }}_output.value = this.value"
    {% endif %}
    {{ parent() }}
 {% endblock %}
@@ -30,11 +30,11 @@
            value="0"
        {% endif %}
        {% if field.id is defined %}
-            id="number_{{ field.id|e|replace('.', '_') }}_output"
-            oninput="range_{{ field.id|e|replace('.', '_') }}.value = this.value"
+            id="number_{{ field.id|e|replace({'.': '_'}) }}_output"
+            oninput="range_{{ field.id|e|replace({'.': '_'}) }}.value = this.value"
        {% else %}
-            id="number_{{ field.name|e|replace('.', '_') }}_output"
-            oninput="range_{{ field.name|e|replace('.', '_') }}.value = this.value"
+            id="number_{{ field.name|e|replace({'.': '_'}) }}_output"
+            oninput="range_{{ field.name|e|replace({'.': '_'}) }}.value = this.value"
        {% endif %}
    />
    <span class="range-append">{{ field.append }}</span>
@@ -1,5 +1,12 @@
 {% extends "forms/field.html.twig" %}

+{% macro spanToggle(input, length) %}
+    {% set space = repeat('&nbsp;&nbsp;', (length - input|length) / 2) %}
+    {{ (space ~ input ~ space)|raw }}
+{% endmacro %}
+
+{% import _self as macro %}
+
 {% set value = (value is null ? field.default : value) %}
 {% set value = (value is same as(false) ? 0 : value) %}

@@ -15,11 +22,6 @@
    data-grav-field-name="{{ (scope ~ field.name)|fieldName }}"
 {% endblock %}

-{% macro spanToggle(input, length) %}
-    {% set space = repeat('&nbsp;&nbsp;', (length - input|length) / 2) %}
-    {{ (space ~ input ~ space)|raw }}
-{% endmacro %}
-
 {% block input %}

    <div class="switch-toggle switch-grav {{ field.size }} switch-{{ field.options|length }} {{ field.classes }}">
@@ -54,7 +56,7 @@
                {% endif %}
                {% if field.validate.required in ['on', 'true', 1] %}required="required"{% endif %}
            />
-            <label for="{{ id }}">{{ (_self.spanToggle(translation, maxLen)|trim)|raw }}</label>
+            <label for="{{ id }}">{{ (macro.spanToggle(translation, maxLen)|trim)|raw }}</label>
        {% endfor %}
    </div>
 {% endblock %}
@@ -0,0 +1,6 @@
+{% set xss_header = data.value('header')|array %}
+{% set xss_content = data.value('content') %}
+{% set xss_status = xss({header: xss_header, content: xss_content}) %}
+{% if xss_status is not empty %}
+    <div class="notice alert">{{ "PLUGIN_ADMIN.XSS_ISSUE"|tu([xss_status])|raw }}</div>
+{% endif %}
@@ -4,6 +4,87 @@
    {{ (repeat('&nbsp;&nbsp;', (length - input|length) / 2) ~ input ~ repeat('&nbsp;&nbsp;', (length - input|length) / 2))|raw }}
 {% endmacro %}

+{% macro loop(page, depth, twig_vars) %}
+    {% import _self as self %}
+
+    {% set config = twig_vars['config'] %}
+    {% set separator = config.system.param_sep %}
+    {% set display_field = config.plugins.admin.pages_list_display_field %}
+    {% set base_url = twig_vars['base_url_relative'] %}
+    {% set base_url_relative_frontend = twig_vars['base_url_relative_frontend'] %}
+    {% set base_url_simple = twig_vars['base_url_simple'] %}
+    {% set admin_route = twig_vars['admin_route'] %}
+    {% set admin_lang = twig_vars['admin_lang'] %}
+    {% set warn = twig_vars['warn'] %}
+    {% set uri = twig_vars['uri'] %}
+
+    {% if page.header.admin.children_display_order == 'collection' and page.header.content.order.by %}
+        {% if page.header.content.order.custom %}
+            {% set pcol = page.children().order(page.header.content.order.by, page.header.content.order.dir|default('asc'), page.header.content.order.custom) %}
+        {% else %}
+            {% set pcol = page.children().order(page.header.content.order.by, page.header.content.order.dir|default('asc')) %}
+        {% endif %}
+    {% else %}
+        {% set pcol = page.children() %}
+    {% endif %}
+
+    {% for p in pcol %}
+        {% set description = (not p.page ? "PLUGIN_ADMIN.FOLDER"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.PAGE"|tu ~ ' &bull; ') ~
+            (p.modular ? "PLUGIN_ADMIN.MODULAR"|tu ~ ' &bull; ' : '') ~
+            (p.routable ? "PLUGIN_ADMIN.ROUTABLE"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.NON_ROUTABLE"|tu ~ ' &bull; ') ~
+            (p.visible ? "PLUGIN_ADMIN.VISIBLE"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.NON_VISIBLE"|tu ~ ' &bull; ') ~
+            (p.published ? "PLUGIN_ADMIN.PUBLISHED"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.NON_PUBLISHED"|tu ~ ' &bull; ') %}
+
+        {% set page_url = getPageUrl(p) %}
+
+        <li class="page-item" data-nav-id="{{ p.route }}">
+            <div class="row page-item__row">
+                <span class="page-item__toggle" {{ p.children(0).count > 0 ? 'data-toggle="children"' : ''}}>
+                    <i class="page-icon fa fa-fw fa-circle-o {{ p.children(0).count > 0 ? 'children-closed' : ''}} {{ p.modular ? 'modular' : (not p.routable ? 'not-routable' : (not p.visible ? 'not-visible' : (not p.page ? 'folder' :  ''))) }}"></i>
+                </span>
+                <div class="page-item__content">
+                    <div class="page-item__content-name">
+                        <span data-hint="{{ description|trim(' &bull; ')|raw }}" class="hint--top page-item__content-hint">
+                            {% set page_label = attribute(p.header, display_field)|defined(attribute(p, display_field))|defined(p.title) %}
+                            <a href="{{ page_url }}" class="page-edit">{{ page_label|e }}</a>
+                        </span>
+                        {% if p.language %}
+                            <span class="badge lang {% if p.language == admin_lang %}info{% endif %}">{{p.language}}</span>
+                        {% endif %}
+                        {% if p.home %}
+                            <span class="page-home"><i class="fa fa-home"></i></span>
+                        {% endif %}
+                    </div>
+                    <p class="page-route">{{ p.header.routes.default ?: p.route }} <span class="spacer"><i class="fa fa-long-arrow-right"></i></span> {{ p.template() }}</p>
+                </div>
+                <span class="page-item__tools">
+                    {% if config.plugins.admin.frontend_preview_target != 'inline' %}
+                        {% set preview_target = config.plugins.admin.frontend_preview_target %}
+                        {% set preview_html = (base_url_relative_frontend|rtrim('/') ~ (p.home ? '' : p.route)) ?: '/' %}
+                        {% set preview_link = p.routable ? '<a class="page-view" target="' ~ preview_target ~ '" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye"></i></a>' : '' %}
+                    {% else %}
+                        {% set preview_html = (base_url|rtrim('/') ~ '/preview' ~ (p.home ? '' : p.route)) ?: '/' %}
+                        {% set preview_link = p.routable ? '<a class="page-view" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye"></i></a>' : '' %}
+                    {% endif %}
+                    {{ preview_link|raw }}
+                    {% if warn %}
+                        <a href="#delete" data-remodal-target="delete" data-delete-url="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
+                    {% else %}
+                        <a href="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
+                    {% endif %}
+                </span>
+            </div>
+            {% if p.children().count > 0 %}
+                <ul class="depth-{{ depth + 1 }}" style="display:none;">
+                    {{ self.loop(p, depth + 1, twig_vars) }}
+                </ul>
+            {% endif %}
+        </li>
+    {% endfor %}
+{% endmacro %}
+
+{% import _self as macro %}
+
 {% if admin.route %}
    {% set context = admin.page(true) %}
 {% endif %}
@@ -50,85 +131,8 @@
    {% set preview_link = context.routable ? '<a class="button" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye" style="font-size:18px;margin-right:0;"></i></a>' : '' %}
 {% endif %}

-{% macro loop(page, depth, twig_vars) %}
-    {% set config = twig_vars['config'] %}
-    {% set separator = config.system.param_sep %}
-    {% set display_field = config.plugins.admin.pages_list_display_field %}
-    {% set base_url = twig_vars['base_url_relative'] %}
-    {% set base_url_relative_frontend = twig_vars['base_url_relative_frontend'] %}
-    {% set base_url_simple = twig_vars['base_url_simple'] %}
-    {% set admin_route = twig_vars['admin_route'] %}
-    {% set admin_lang = twig_vars['admin_lang'] %}
-    {% set warn = twig_vars['warn'] %}
-    {% set uri = twig_vars['uri'] %}
-
-    {% if page.header.admin.children_display_order == 'collection' and page.header.content.order.by %}
-        {% if page.header.content.order.custom %}
-            {% set pcol = page.children().order(page.header.content.order.by, page.header.content.order.dir|default('asc'), page.header.content.order.custom) %}
-        {% else %}
-            {% set pcol = page.children().order(page.header.content.order.by, page.header.content.order.dir|default('asc')) %}
-        {% endif %}
-    {% else %}
-        {% set pcol = page.children() %}
-    {% endif %}
-
-    {% for p in pcol %}
-        {% set description = (not p.page ? "PLUGIN_ADMIN.FOLDER"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.PAGE"|tu ~ ' &bull; ') ~
-                             (p.modular ? "PLUGIN_ADMIN.MODULAR"|tu ~ ' &bull; ' : '') ~
-                             (p.routable ? "PLUGIN_ADMIN.ROUTABLE"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.NON_ROUTABLE"|tu ~ ' &bull; ') ~
-                             (p.visible ? "PLUGIN_ADMIN.VISIBLE"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.NON_VISIBLE"|tu ~ ' &bull; ') ~
-                             (p.published ? "PLUGIN_ADMIN.PUBLISHED"|tu ~ ' &bull; ' : "PLUGIN_ADMIN.NON_PUBLISHED"|tu ~ ' &bull; ') %}
-
-        {% set page_url = getPageUrl(p) %}
-
-        <li class="page-item" data-nav-id="{{ p.route }}">
-            <div class="row page-item__row">
-                <span class="page-item__toggle" {{ p.children(0).count > 0 ? 'data-toggle="children"' : ''}}>
-                    <i class="page-icon fa fa-fw fa-circle-o {{ p.children(0).count > 0 ? 'children-closed' : ''}} {{ p.modular ? 'modular' : (not p.routable ? 'not-routable' : (not p.visible ? 'not-visible' : (not p.page ? 'folder' :  ''))) }}"></i>
-                </span>
-                <div class="page-item__content">
-                    <div class="page-item__content-name">
-                        <span data-hint="{{ description|trim(' &bull; ')|raw }}" class="hint--top page-item__content-hint">
-                            {% set page_label = attribute(p.header, display_field)|defined(attribute(p, display_field))|defined(p.title) %}
-                            <a href="{{ page_url }}" class="page-edit">{{ page_label|e }}</a>
-                        </span>
-                        {% if p.language %}
-                            <span class="badge lang {% if p.language == admin_lang %}info{% endif %}">{{p.language}}</span>
-                        {% endif %}
-                        {% if p.home %}
-                            <span class="page-home"><i class="fa fa-home"></i></span>
-                        {% endif %}
-                    </div>
-                    <p class="page-route">{{ p.header.routes.default ?: p.route }} <span class="spacer"><i class="fa fa-long-arrow-right"></i></span> {{ p.template() }}</p>
-                </div>
-                <span class="page-item__tools">
-                    {% if config.plugins.admin.frontend_preview_target != 'inline' %}
-                        {% set preview_target = config.plugins.admin.frontend_preview_target %}
-                        {% set preview_html = (base_url_relative_frontend|rtrim('/') ~ (p.home ? '' : p.route)) ?: '/' %}
-                        {% set preview_link = p.routable ? '<a class="page-view" target="' ~ preview_target ~ '" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye"></i></a>' : '' %}
-                    {% else %}
-                        {% set preview_html = (base_url|rtrim('/') ~ '/preview' ~ (p.home ? '' : p.route)) ?: '/' %}
-                        {% set preview_link = p.routable ? '<a class="page-view" href="' ~ preview_html ~ '" title="' ~ "PLUGIN_ADMIN.PREVIEW"|tu ~ '"> <i class="fa fa-fw fa-eye"></i></a>' : '' %}
-                    {% endif %}
-                    {{ preview_link|raw }}
-                    {% if warn %}
-                        <a href="#delete" data-remodal-target="delete" data-delete-url="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
-                    {% else %}
-                        <a href="{{ uri.addNonce(page_url ~ '/task' ~ separator ~ 'delete', 'admin-form', 'admin-nonce') }}" class="page-delete" ><i class="fa fa-close"></i></a>
-                    {% endif %}
-                </span>
-            </div>
-            {% if p.children().count > 0 %}
-                <ul class="depth-{{ depth + 1 }}" style="display:none;">
-                    {{ _self.loop(p, depth + 1, twig_vars) }}
-                </ul>
-            {% endif %}
-        </li>
-    {% endfor %}
-{% endmacro %}
-
-
 {% block titlebar %}
+
    <div class="button-bar">
        {% if mode == 'list' %}
            <a class="button" href="{{ base_url }}"><i class="fa fa-reply"></i> {{ "PLUGIN_ADMIN.BACK"|tu }}</a>
@@ -301,8 +305,8 @@
                {% set normalText = "PLUGIN_ADMIN.NORMAL"|tu %}
                {% set expertText = "PLUGIN_ADMIN.EXPERT"|tu %}
                {% set maxLen = max([normalText|length, expertText|length]) %}
-                {% set normalText = _self.spanToggle(normalText, maxLen) %}
-                {% set expertText = _self.spanToggle(expertText, maxLen) %}
+                {% set normalText = macro.spanToggle(normalText, maxLen) %}
+                {% set expertText = macro.spanToggle(expertText, maxLen) %}
                <form id="admin-mode-toggle">
                    <div class="switch-toggle switch-grav">
                        <input type="radio" value="normal" data-leave-url="{{ base_url }}/pages/{{ admin.route|trim('/') }}/mode{{ config.system.param_sep }}normal" id="normal" name="mode-switch" class="highlight" {% if admin.session.expert == '0' %} checked="checked"{% endif %}>
@@ -316,6 +320,11 @@

            </div>

+            {# Set current form data back into page content #}
+            {% if current_form_data %}
+                {% do context.header(current_form_data.header) %}
+                {% do context.content(current_form_data.content) %}
+            {% endif %}
            {% if context.blueprints.fields and admin.session.expert == '0' %}
                {% include 'partials/blueprints.html.twig' with { blueprints: context.blueprints, data: context } %}
            {% else %}
@@ -337,7 +346,7 @@
        </form>
        <div class="pages-list">
            <ul class="depth-0">
-                {{ _self.loop(pages, 0, _context) }}
+                {{ macro.loop(pages, 0, _context) }}
            </ul>
            {% include 'partials/page-legend.html.twig' %}
        </div>
@@ -1,13 +1,6 @@
-<div class="pages-list-container clear block size-1-4">
-    <h5>{{ "PLUGIN_ADMIN.PAGES"|tu|e }}</h5>
-    <div class="mediapicker-scroll">
-        <ul class="pages-list depth-0">
-            {{ _self.loop(pages, 0, _context) }}
-        </ul>
-    </div>
-</div>
-
 {% macro loop(page, depth, twig_vars) %}
+    {% import _self as self %}
+
    {% set separator = twig_vars['config'].system.param_sep %}
    {% set base_url = twig_vars['base_url_relative'] %}
    {% set base_url_simple = twig_vars['base_url_simple'] %}
@@ -37,10 +30,21 @@
            </div>
            {% if p.children().count > 0 %}

-            <ul class="depth-{{ depth + 1 }}" style="display:none;">
-                {{ _self.loop(p, depth + 1, twig_vars) }}
-            </ul>
+                <ul class="depth-{{ depth + 1 }}" style="display:none;">
+                    {{ self.loop(p, depth + 1, twig_vars) }}
+                </ul>
            {% endif %}
        </li>
    {% endfor %}
-{% endmacro %}
+{% endmacro %}
+
+{% import _self as macro %}
+
+<div class="pages-list-container clear block size-1-4">
+    <h5>{{ "PLUGIN_ADMIN.PAGES"|tu|e }}</h5>
+    <div class="mediapicker-scroll">
+        <ul class="pages-list depth-0">
+            {{ macro.loop(pages, 0, _context) }}
+        </ul>
+    </div>
+</div>