@themarioga/grid-editor 4.0.0 → 5.0.0

package/dist/plugins/grideditor.order.js

@@ -0,0 +1,206 @@
+/**
+ * Column order for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and a column's place in
+ * its row can differ per breakpoint, with Bootstrap's order-{breakpoint}-*
+ * classes. What it can ask the editor for is the handle its factory is called
+ * with, described in docs/plugins.md.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.order.min.js"></script>
+ *
+ * Two arrows in each column's drawer move it one place earlier or later in
+ * the view being edited, by numbering the row's columns; the markup does not
+ * move. Dragging still moves the markup, as it always has.
+ *
+ * utilities.order.drawer: false leaves the arrows out, and the panel field is
+ * the only control.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.order': 'Order',
+    'utility.order_first': 'First',
+    'utility.order_last': 'Last',
+    'tool.order_earlier': 'Earlier in this view',
+    'tool.order_later': 'Later in this view',
+    'badge.order': 'Order: {value}',
+});
+
+var VALUES = ['first', '0', '1', '2', '3', '4', '5', 'last'];
+
+/** Where each value puts a column, as Bootstrap's css has it. */
+var RANK = { first: -1, last: 6 };
+
+/** A column that carries any class of the family, at any breakpoint. */
+var CLASS_PATTERN = /(?:^|\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\s|$)/;
+
+$.fn.gridEditor.utilities.order = function(ge) {
+
+    var options = $.extend({ drawer: true }, ge.settings.utilities.order);
+    var warnedAboutDrag = false;
+
+    function rank(value) {
+        if (value === null) { return 0; }
+
+        return RANK[value] !== undefined ? RANK[value] : parseInt(value, 10);
+    }
+
+    function label(value) {
+        if (value === 'first') { return ge.t('utility.order_first'); }
+        if (value === 'last') { return ge.t('utility.order_last'); }
+
+        return value;
+    }
+
+    /** The columns of a row in the order a view shows them, given what each one's order is. */
+    function visualOrder(columns, read) {
+        return columns.get()
+            .map(function(element, index) {
+                return { element: element, index: index, rank: rank(read($(element))) };
+            })
+            .sort(function(a, b) { return a.rank - b.rank || a.index - b.index; })
+            .map(function(entry) { return entry.element; });
+    }
+
+    function sameOrder(a, b) {
+        return a.every(function(element, index) { return element === b[index]; });
+    }
+
+    /**
+     * The values that put n columns in n places, or null past eight: that
+     * is how many places Bootstrap's order classes have.
+     */
+    function slots(count) {
+        if (count <= 6) { return VALUES.slice(1, 1 + count); }
+        if (count === 7) { return VALUES.slice(1); }
+        if (count === 8) { return VALUES.slice(); }
+
+        return null;
+    }
+
+    /**
+     * Move a column one place earlier or later in the view being edited.
+     *
+     * The row's columns are numbered in their new order. When that order is
+     * the markup's own, the numbers are taken off instead - unless what is
+     * left underneath, the breakpoint below, would then order them some other
+     * way, and the numbers are what keep them in the markup's order.
+     */
+    function move(col, direction) {
+        var view = ge.view();
+        var columns = col.parent().children('.column');
+        var shown = visualOrder(columns, function(column) { return ge.getUtility(column, 'order', view); });
+        var from = shown.indexOf(col[0]);
+        var to = from + direction;
+
+        if (to < 0 || to >= shown.length) { return; }
+
+        shown.splice(to, 0, shown.splice(from, 1)[0]);
+
+        var values = null;
+        if (!sameOrder(shown, columns.get()) || !inheritsMarkupOrder(columns, view)) {
+            values = slots(shown.length);
+
+            if (!values) {
+                ge.warn('a row of ' + shown.length + ' columns cannot be reordered with Bootstrap\'s ' +
+                    'order classes, which have eight places');
+                return;
+            }
+        }
+
+        ge.operate(function() {
+            shown.forEach(function(element, index) {
+                ge.setUtility($(element), 'order', values ? values[index] : null, { source: 'tool' });
+            });
+        });
+    }
+
+    /** Whether taking this view's classes off leaves the columns in the markup's order. */
+    function inheritsMarkupOrder(columns, view) {
+        var index = ge.breakpoints.indexOf(view);
+        if (index <= 0) { return true; }
+
+        var below = ge.breakpoints[index - 1];
+
+        return sameOrder(visualOrder(columns, function(column) {
+            return ge.getUtility(column, 'order', below);
+        }), columns.get());
+    }
+
+    /** Whether a row's columns are ordered by class, rather than by the markup, in this view. */
+    function ordered(row) {
+        return row.children('.column').get().some(function(element) {
+            return ge.getUtility($(element), 'order', ge.view()) !== null;
+        });
+    }
+
+    /** The badge: a column ordered by class in this view says where. */
+    function mark(scope) {
+        scope.find('.column').addBack('.column').each(function() {
+            var col = $(this);
+            var value = CLASS_PATTERN.test(col.attr('class') || '')
+                ? ge.getUtility(col, 'order', ge.view())
+                : null;
+
+            if (value === null) {
+                col.removeAttr('data-ge-order');
+            } else {
+                col.attr('data-ge-order', ge.t('badge.order', { value: label(value) }));
+            }
+        });
+    }
+
+    /**
+     * A column dropped in a row ordered by class lands where the markup puts
+     * it, and shows up where its order does, which is worth saying once.
+     */
+    function afterMove(e, payload) {
+        if (warnedAboutDrag || payload.kind !== 'column' || !payload.to) { return; }
+        if (!ordered(payload.to.parent)) { return; }
+
+        warnedAboutDrag = true;
+        ge.warn('a column was dropped in a row whose columns carry order classes in this view: ' +
+            'where it shows is set by those classes, not by where it sits in the markup');
+    }
+
+    return {
+        families: [{
+            name: 'order',
+            prefix: 'order',
+            values: VALUES,
+            appliesTo: ['column'],
+            labelKey: 'utility.order',
+            label: label,
+            preview: function(value) {
+                return { order: rank(value) };
+            },
+        }],
+
+        drawerTools: function(drawer, node, kind) {
+            if (!options.drawer || kind !== 'column') { return; }
+
+            ge.createTool(drawer, ge.t('tool.order_earlier'), 'ge-order-earlier', 'bi bi-chevron-left', function() {
+                move(node, -1);
+            });
+            ge.createTool(drawer, ge.t('tool.order_later'), 'ge-order-later', 'bi bi-chevron-right', function() {
+                move(node, 1);
+            });
+        },
+
+        // init runs again whenever a node is added, without a deinit
+        // between, so the listener is replaced rather than stacked
+        onInit: function() {
+            ge.canvas.off('grideditor:after-move.ge-order').on('grideditor:after-move.ge-order', afterMove);
+        },
+
+        onRefresh: mark,
+
+        onDeinit: function() {
+            ge.canvas.off('grideditor:after-move.ge-order');
+            ge.canvas.find('[data-ge-order]').removeAttr('data-ge-order');
+        },
+    };
+};
+
+})(jQuery);

package/dist/plugins/grideditor.order.min.js

@@ -0,0 +1,2 @@
+(u=>{u.extend(u.fn.gridEditor.locales.en,{"utility.order":"Order","utility.order_first":"First","utility.order_last":"Last","tool.order_earlier":"Earlier in this view","tool.order_later":"Later in this view","badge.order":"Order: {value}"});var c=["first","0","1","2","3","4","5","last"],r={first:-1,last:6},f=/(?:^|\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\s|$)/;u.fn.gridEditor.utilities.order=function(l){var n=u.extend({drawer:!0},l.settings.utilities.order),t=!1;function i(e){return null===e?0:void 0!==r[e]?r[e]:parseInt(e,10)}function o(e){return"first"===e?l.t("utility.order_first"):"last"===e?l.t("utility.order_last"):e}function a(e,t){return e.get().map(function(e,r){return{element:e,index:r,rank:i(t(u(e)))}}).sort(function(e,r){return e.rank-r.rank||e.index-r.index}).map(function(e){return e.element})}function d(e,t){return e.every(function(e,r){return e===t[r]})}function s(e,r){var t,n=l.view(),i=e.parent().children(".column"),o=a(i,function(e){return l.getUtility(e,"order",n)}),e=o.indexOf(e[0]),r=e+r;r<0||r>=o.length||(o.splice(r,0,o.splice(e,1)[0]),t=null,d(o,i.get())&&((e,r)=>{var t;return(r=l.breakpoints.indexOf(r))<=0||(t=l.breakpoints[r-1],d(a(e,function(e){return l.getUtility(e,"order",t)}),e.get()))})(i,n)||(r=o.length,t=r<=6?c.slice(1,1+r):7===r?c.slice(1):8===r?c.slice():null)?l.operate(function(){o.forEach(function(e,r){l.setUtility(u(e),"order",t?t[r]:null,{source:"tool"})})}):l.warn("a row of "+o.length+" columns cannot be reordered with Bootstrap's order classes, which have eight places"))}function e(e,r){!t&&"column"===r.kind&&r.to&&r.to.parent.children(".column").get().some(function(e){return null!==l.getUtility(u(e),"order",l.view())})&&(t=!0,l.warn("a column was dropped in a row whose columns carry order classes in this view: where it shows is set by those classes, not by where it sits in the markup"))}return{families:[{name:"order",prefix:"order",values:c,appliesTo:["column"],labelKey:"utility.order",label:o,preview:function(e){return{order:i(e)}}}],drawerTools:function(e,r,t){n.drawer&&"column"===t&&(l.createTool(e,l.t("tool.order_earlier"),"ge-order-earlier","bi bi-chevron-left",function(){s(r,-1)}),l.createTool(e,l.t("tool.order_later"),"ge-order-later","bi bi-chevron-right",function(){s(r,1)}))},onInit:function(){l.canvas.off("grideditor:after-move.ge-order").on("grideditor:after-move.ge-order",e)},onRefresh:function(e){e.find(".column").addBack(".column").each(function(){var e=u(this),r=f.test(e.attr("class")||"")?l.getUtility(e,"order",l.view()):null;null===r?e.removeAttr("data-ge-order"):e.attr("data-ge-order",l.t("badge.order",{value:o(r)}))})},onDeinit:function(){l.canvas.off("grideditor:after-move.ge-order"),l.canvas.find("[data-ge-order]").removeAttr("data-ge-order")}}}})(jQuery);
+//# sourceMappingURL=grideditor.order.min.js.map

package/dist/plugins/grideditor.order.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.order.min.js","sources":["../../src/js/plugins/grideditor.order.js"],"names":["$","extend","fn","gridEditor","locales","en","utility.order","utility.order_first","utility.order_last","tool.order_earlier","tool.order_later","badge.order","VALUES","RANK","first","last","CLASS_PATTERN","utilities","order","ge","options","drawer","settings","warnedAboutDrag","rank","value","undefined","parseInt","label","t","visualOrder","columns","read","get","map","element","index","sort","a","b","entry","sameOrder","every","move","col","direction","values","view","parent","children","shown","column","getUtility","from","indexOf","to","length","splice","below","breakpoints","count","slice","operate","forEach","setUtility","source","warn","afterMove","e","payload","kind","some","families","name","prefix","appliesTo","labelKey","preview","drawerTools","node","createTool","onInit","canvas","off","on","onRefresh","scope","find","addBack","each","this","test","attr","removeAttr","onDeinit","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.sections.js

@@ -0,0 +1,199 @@
+/**
+ * Sections for grid-editor.
+ *
+ * A feature plugin: load this file after the editor and the canvas can hold
+ * sections - Bootstrap's .container, .container-fluid and .container-{bp} -
+ * each grouping rows at a width of its own. What it can ask the editor for is
+ * the handle its factory is called with, described in docs/plugins.md.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.sections.min.js"></script>
+ *
+ * Called sections, not containers, because a container is what the tabs,
+ * accordion, popup and card plugins make. A section is recognised by its
+ * Bootstrap class alone, and only as a child of the canvas: a .container
+ * somewhere inside an element's markup is that element's business.
+ *
+ * sections.widths narrows the widths the field offers.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'section.add': 'Section',
+    'section.width': 'Width',
+    'section.fixed': 'Fixed',
+    'section.fluid': 'Full width',
+    'section.from': 'Fixed from {breakpoint}',
+    'tool.add_row_to_section': 'Add row',
+    'tool.delete_section': 'Remove section',
+    'confirm.delete_section': 'Delete this section and everything in it?',
+});
+
+/** Each width, and the class that gives it. */
+var WIDTHS = {
+    fixed: 'container',
+    fluid: 'container-fluid',
+    sm: 'container-sm',
+    md: 'container-md',
+    lg: 'container-lg',
+    xl: 'container-xl',
+    xxl: 'container-xxl',
+};
+
+var ORDER = ['fixed', 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'];
+
+$.fn.gridEditor.features.sections = function(ge) {
+
+    var options = $.extend({ widths: ORDER }, ge.settings.sections);
+
+    function widthOf(section) {
+        var found = null;
+
+        $.each(WIDTHS, function(width, className) {
+            if (!found && section.hasClass(className)) { found = width; }
+        });
+
+        return found;
+    }
+
+    function isSection(node) {
+        return node.parent()[0] === ge.canvas[0] && widthOf(node) !== null;
+    }
+
+    function sections() {
+        return ge.canvas.children().filter(function() { return isSection($(this)); });
+    }
+
+    function label(width) {
+        if (width === 'fixed') { return ge.t('section.fixed'); }
+        if (width === 'fluid') { return ge.t('section.fluid'); }
+
+        return ge.t('section.from', { breakpoint: width });
+    }
+
+    /**
+     * Change a section's width, announced like a utility: the width is its
+     * one container class, the same at every breakpoint.
+     */
+    function setWidth(section, width, source) {
+        var from = widthOf(section);
+        if (from === width || !WIDTHS[width]) { return false; }
+
+        return ge.operate(function() {
+            var payload = ge.payloadFor('section', section, {
+                family: 'section',
+                breakpoint: 'all',
+                tiers: [],
+                from: from,
+                to: width,
+                source: source || 'api',
+            });
+
+            if (!ge.emit('before-utility', payload)) {
+                section.find('> .ge-tools-drawer .ge-section-width select').val(from);
+                return false;
+            }
+
+            section.removeClass(WIDTHS[from]).addClass(WIDTHS[width]);
+            ge.emit('after-utility', payload);
+
+            return true;
+        });
+    }
+
+    function widthField(section) {
+        var select = $('<select />');
+        var current = widthOf(section);
+        var offered = options.widths.indexOf(current) === -1 ? options.widths.concat([current]) : options.widths;
+
+        ORDER.forEach(function(width) {
+            if (offered.indexOf(width) === -1) { return; }
+            $('<option />').attr('value', width).text(label(width)).appendTo(select);
+        });
+
+        select.val(current).on('change', function() { setWidth(section, this.value, 'panel'); });
+
+        return $('<label class="ge-utility ge-section-width" />')
+            .append($('<span class="ge-utility-label" />').text(ge.t('section.width')))
+            .append(select);
+    }
+
+    function createControls(section) {
+        var drawer = $('<div class="ge-tools-drawer ge-section-drawer" />').prependTo(section);
+
+        ge.createMoveTool(drawer);
+        ge.addSettingsTool(drawer, section, ge.settings.section_classes || []).append(widthField(section));
+
+        ge.createTool(drawer, ge.t('tool.add_row_to_section'), 'ge-add-row', 'bi bi-plus-circle', function() {
+            ge.place(ge.rowFromLayout([12]), 'row', { appendTo: section });
+        });
+
+        ge.createTool(drawer, ge.t('tool.delete_section'), 'ge-delete-section', 'bi bi-trash', function() {
+            ge.deleteNode('section', section, ge.t('confirm.delete_section'), function(removed) {
+                section.slideUp(removed);
+            });
+        });
+    }
+
+    function mark() {
+        sections().each(function() {
+            var section = $(this).addClass('ge-section');
+            if (!section.children('.ge-tools-drawer').length) { createControls(section); }
+        });
+    }
+
+    function unmark() {
+        ge.canvas.children('.ge-section').removeClass('ge-section');
+    }
+
+    /** createSection(options): a section, detached unless a placement is given. */
+    function createSection(settings) {
+        settings = settings || {};
+
+        var section = $('<div />').addClass(WIDTHS[settings.width] || WIDTHS.fixed);
+
+        (settings.rows || [[12]]).forEach(function(layout) {
+            ge.rowFromLayout(layout).appendTo(section);
+        });
+
+        return ge.place(section, 'section', settings);
+    }
+
+    return {
+        methods: {
+            createSection: createSection,
+        },
+
+        kindOf: function(node) {
+            return node.hasClass('ge-section') ? 'section' : null;
+        },
+
+        // A section is a block the canvas moves, and a region rows move in
+        blocks: '.ge-section',
+        regions: '.ge-section',
+
+        /** A section goes on the canvas and nowhere else, and holds rows and nothing else. */
+        accepts: function(region, node) {
+            if (node.hasClass('ge-section') || isSectionMade(node)) { return region[0] === ge.canvas[0]; }
+            if (region.hasClass('ge-section')) { return node.hasClass('row'); }
+
+            return true;
+        },
+
+        toolbar: [{
+            labelKey: 'section.add',
+            kind: 'section',
+            create: function() { return createSection(); },
+        }],
+
+        onInit: mark,
+        onDeinit: unmark,
+    };
+
+    /** A section the toolbar just made, before init has marked it. */
+    function isSectionMade(node) {
+        return !node.parent().length && widthOf(node) !== null;
+    }
+};
+
+})(jQuery);

package/dist/plugins/grideditor.sections.min.js

@@ -0,0 +1,2 @@
+(c=>{c.extend(c.fn.gridEditor.locales.en,{"section.add":"Section","section.width":"Width","section.fixed":"Fixed","section.fluid":"Full width","section.from":"Fixed from {breakpoint}","tool.add_row_to_section":"Add row","tool.delete_section":"Remove section","confirm.delete_section":"Delete this section and everything in it?"});var r={fixed:"container",fluid:"container-fluid",sm:"container-sm",md:"container-md",lg:"container-lg",xl:"container-xl",xxl:"container-xxl"},l=["fixed","sm","md","lg","xl","xxl","fluid"];c.fn.gridEditor.features.sections=function(s){var o=c.extend({widths:l},s.settings.sections);function a(n){var i=null;return c.each(r,function(e,t){!i&&n.hasClass(t)&&(i=e)}),i}function e(){return s.canvas.children().filter(function(){return(e=c(this)).parent()[0]===s.canvas[0]&&null!==a(e);var e})}function n(e){var t=c("<select />"),n=a(e),i=-1===o.widths.indexOf(n)?o.widths.concat([n]):o.widths;return l.forEach(function(e){-1!==i.indexOf(e)&&c("<option />").attr("value",e).text("fixed"===(e=e)?s.t("section.fixed"):"fluid"===e?s.t("section.fluid"):s.t("section.from",{breakpoint:e})).appendTo(t)}),t.val(n).on("change",function(){var t,n,i,o;t=e,n=this.value,i="panel",(o=a(t))!==n&&r[n]&&s.operate(function(){var e=s.payloadFor("section",t,{family:"section",breakpoint:"all",tiers:[],from:o,to:n,source:i||"api"});return s.emit("before-utility",e)?(t.removeClass(r[o]).addClass(r[n]),s.emit("after-utility",e),!0):(t.find("> .ge-tools-drawer .ge-section-width select").val(o),!1)})}),c('<label class="ge-utility ge-section-width" />').append(c('<span class="ge-utility-label" />').text(s.t("section.width"))).append(t)}function t(e){e=e||{};var t=c("<div />").addClass(r[e.width]||r.fixed);return(e.rows||[[12]]).forEach(function(e){s.rowFromLayout(e).appendTo(t)}),s.place(t,"section",e)}return{methods:{createSection:t},kindOf:function(e){return e.hasClass("ge-section")?"section":null},blocks:".ge-section",regions:".ge-section",accepts:function(e,t){var n;return t.hasClass("ge-section")||!(n=t).parent().length&&null!==a(n)?e[0]===s.canvas[0]:!e.hasClass("ge-section")||t.hasClass("row")},toolbar:[{labelKey:"section.add",kind:"section",create:function(){return t()}}],onInit:function(){e().each(function(){var t,e=c(this).addClass("ge-section");e.children(".ge-tools-drawer").length||(t=e,e=c('<div class="ge-tools-drawer ge-section-drawer" />').prependTo(t),s.createMoveTool(e),s.addSettingsTool(e,t,s.settings.section_classes||[]).append(n(t)),s.createTool(e,s.t("tool.add_row_to_section"),"ge-add-row","bi bi-plus-circle",function(){s.place(s.rowFromLayout([12]),"row",{appendTo:t})}),s.createTool(e,s.t("tool.delete_section"),"ge-delete-section","bi bi-trash",function(){s.deleteNode("section",t,s.t("confirm.delete_section"),function(e){t.slideUp(e)})}))})},onDeinit:function(){s.canvas.children(".ge-section").removeClass("ge-section")}}}})(jQuery);
+//# sourceMappingURL=grideditor.sections.min.js.map

package/dist/plugins/grideditor.sections.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.sections.min.js","sources":["../../src/js/plugins/grideditor.sections.js"],"names":["$","extend","fn","gridEditor","locales","en","section.add","section.width","section.fixed","section.fluid","section.from","tool.add_row_to_section","tool.delete_section","confirm.delete_section","WIDTHS","fixed","fluid","sm","md","lg","xl","xxl","ORDER","features","sections","ge","options","widths","settings","widthOf","section","found","each","width","className","hasClass","canvas","children","filter","node","this","parent","widthField","select","current","offered","indexOf","concat","forEach","attr","text","t","breakpoint","appendTo","val","on","source","from","value","operate","payload","payloadFor","family","tiers","to","emit","removeClass","addClass","find","append","createSection","rows","layout","rowFromLayout","place","methods","kindOf","blocks","regions","accepts","region","length","toolbar","labelKey","kind","create","onInit","drawer","prependTo","createMoveTool","addSettingsTool","section_classes","createTool","deleteNode","removed","slideUp","onDeinit","jQuery"],"mappings":"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"}