@themarioga/grid-editor 3.2.1 → 4.1.0

package/dist/plugins/grideditor.spacing.js

@@ -0,0 +1,299 @@
+/**
+ * Spacing for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and every row, column,
+ * element and container can have its padding and margin set per breakpoint,
+ * with Bootstrap's p-{breakpoint}-*, pt-, px- … and m-{breakpoint}-*, mt-, mx-
+ * … 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.spacing.min.js"></script>
+ *
+ * Fourteen families would be fourteen fields, so the panel has two, padding
+ * and margin, each a choice of side and a value for that side.
+ *
+ * utilities.spacing.values narrows the values offered, and
+ * utilities.spacing.scale is what 0 to 5 come to, for a page that changed
+ * Bootstrap's $spacers.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.padding': 'Padding',
+    'utility.margin': 'Margin',
+    'utility.side_all': 'All sides',
+    'utility.side_x': 'Left and right',
+    'utility.side_y': 'Top and bottom',
+    'utility.side_t': 'Top',
+    'utility.side_b': 'Bottom',
+    'utility.side_s': 'Start',
+    'utility.side_e': 'End',
+    'utility.spacing_gutter': 'A column\'s side padding is its gutter: changing it changes the gutter',
+});
+
+var VALUES = ['0', '1', '2', '3', '4', '5'];
+
+/** Bootstrap's $spacers. */
+var SCALE = ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'];
+
+/**
+ * The sides, in the order Bootstrap's css writes their rules: within one
+ * breakpoint a later rule wins, so p-3 pt-1 has a top of .25rem.
+ */
+var SIDES = ['', 'x', 'y', 't', 'e', 'b', 's'];
+
+/** What each side sets. Start and end are left and right: Bootstrap's css is left to right. */
+var SET = {
+    '': ['top', 'right', 'bottom', 'left'],
+    x: ['left', 'right'],
+    y: ['top', 'bottom'],
+    t: ['top'],
+    e: ['right'],
+    b: ['bottom'],
+    s: ['left'],
+};
+
+var INFIXES = ['', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+var PROPERTIES = { p: 'padding', m: 'margin' };
+
+/** Every class of the plugin's, padding or margin. */
+function pattern(key) {
+    return new RegExp('^' + key + '[xytbse]?-(?:(?:sm|md|lg|xl|xxl)-)?(?:[0-5]|auto)$');
+}
+
+$.fn.gridEditor.utilities.spacing = function(ge) {
+
+    var options = $.extend({ values: VALUES, scale: SCALE }, ge.settings.utilities.spacing);
+    var patterns = { p: pattern('p'), m: pattern('m') };
+
+    function applies(node, kind) {
+        return kind === 'row' || kind === 'column' || kind === 'element' ||
+            node.is('[data-ge-container]');
+    }
+
+    function classes(node) {
+        return (node.attr('class') || '').split(/\s+/);
+    }
+
+    function carries(node, key) {
+        return classes(node).some(function(name) { return patterns[key].test(name); });
+    }
+
+    /**
+     * The class of one family that decides a side at a breakpoint: the
+     * widest breakpoint up to it that has one, as { tier, value }.
+     */
+    function source(node, family, tier) {
+        var names = classes(node);
+        var values = family.charAt(0) === 'm' ? VALUES.concat(['auto']) : VALUES;
+
+        for (var i = tier; i >= 0; i--) {
+            for (var v = 0; v < values.length; v++) {
+                var name = family + (INFIXES[i] ? '-' + INFIXES[i] : '') + '-' + values[v];
+                if (names.indexOf(name) !== -1) { return { tier: i, value: values[v] }; }
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * What padding or margin is on each side with none of the plugin's
+     * classes: the editor's frame for a row or a column, the host's css
+     * for anything else. Read by taking the classes off for a moment,
+     * since that is the only way to ask the browser.
+     */
+    function without(node, key) {
+        var original = node.attr('class');
+        var style;
+        var bare = {};
+
+        node.attr('class', classes(node).filter(function(name) { return !patterns[key].test(name); }).join(' '));
+        style = getComputedStyle(node[0]);
+        ['top', 'right', 'bottom', 'left'].forEach(function(side) {
+            bare[side] = style.getPropertyValue(PROPERTIES[key] + '-' + side);
+        });
+        node.attr('class', original);
+
+        return bare;
+    }
+
+    /**
+     * Each side the way Bootstrap's css settles it: the class from the
+     * widest breakpoint wins, and within one breakpoint the side written
+     * later in the css. A side no class reaches shows what it is without
+     * any, over a wider breakpoint's class that is live in a wide window.
+     */
+    function sides(node, key, breakpoint) {
+        var tier = ge.breakpoints.indexOf(breakpoint);
+        var winners = {};
+        var styles = {};
+        var neutral = null;
+
+        SIDES.forEach(function(side, order) {
+            var found = source(node, key + side, tier);
+            if (!found) { return; }
+
+            SET[side].forEach(function(set) {
+                var current = winners[set];
+                if (!current || found.tier > current.tier || (found.tier === current.tier && order > current.order)) {
+                    winners[set] = { tier: found.tier, order: order, value: found.value };
+                }
+            });
+        });
+
+        ['top', 'right', 'bottom', 'left'].forEach(function(set) {
+            var winner = winners[set];
+
+            if (!winner) {
+                neutral = neutral || without(node, key);
+                styles[PROPERTIES[key] + '-' + set] = neutral[set];
+            } else {
+                styles[PROPERTIES[key] + '-' + set] = winner.value === 'auto' ? 'auto' : options.scale[winner.value];
+            }
+        });
+
+        return styles;
+    }
+
+    /** The side a group's select starts on: the first that has a class, or all. */
+    function startingSide(node, key) {
+        var names = classes(node).filter(function(name) { return patterns[key].test(name); });
+        var found = SIDES.filter(function(side) {
+            return names.some(function(name) { return name.indexOf(key + side + '-') === 0; });
+        });
+
+        return found.length ? found[0] : '';
+    }
+
+    function sideLabel(side) {
+        switch (side) {
+            case 'x': return ge.t('utility.side_x');
+            case 'y': return ge.t('utility.side_y');
+            case 't': return ge.t('utility.side_t');
+            case 'b': return ge.t('utility.side_b');
+            case 's': return ge.t('utility.side_s');
+            case 'e': return ge.t('utility.side_e');
+            default: return ge.t('utility.side_all');
+        }
+    }
+
+    /** A padding or margin group: its name, the side, and the field of that side's family. */
+    function group(node, key, labelText) {
+        var box = $('<div class="ge-spacing-group" />').attr('data-ge-spacing', key);
+        var side = $('<select class="ge-spacing-side" />');
+
+        $('<span class="ge-utility-label" />').text(labelText).appendTo(box);
+
+        SIDES.forEach(function(value) {
+            $('<option />').attr('value', value).text(sideLabel(value)).appendTo(side);
+        });
+
+        var field = ge.utilityField(node, key + startingSide(node, key));
+
+        side.val(field.attr('data-ge-family').slice(1))
+            .on('change', function() {
+                var next = ge.utilityField(node, key + this.value);
+                field.replaceWith(next);
+                field = next;
+            })
+            .appendTo(box)
+        ;
+        field.appendTo(box);
+
+        return box;
+    }
+
+    var NODES = '.row, .column, .ge-element, [data-ge-container]';
+
+    /**
+     * Keep each drawer on its node's edges. A drawer is pulled out over the
+     * editor's frame by as much as the frame pads the node, and a padding
+     * class replaces the frame, so a padded node's drawer is pulled out by
+     * its real padding instead. And a column padded at the sides gets a word
+     * about what that does to its gutter.
+     */
+    function mark(scope) {
+        scope.find(NODES).addBack(NODES).each(function() {
+            var node = $(this);
+            var drawer = node.children('.ge-tools-drawer');
+
+            if (!drawer.length || !applies(node, ge.kindOf(node))) { return; }
+
+            if (carries(node, 'p')) {
+                var style = getComputedStyle(node[0]);
+
+                drawer.css({
+                    marginTop: '-' + style.paddingTop,
+                    marginLeft: '-' + style.paddingLeft,
+                    marginRight: '-' + style.paddingRight,
+                    width: 'calc(100% + ' + style.paddingLeft + ' + ' + style.paddingRight + ')',
+                });
+            } else {
+                drawer.css({ marginTop: '', marginLeft: '', marginRight: '', width: '' });
+            }
+
+            if (node.hasClass('column')) {
+                drawer.find('.ge-spacing-gutter').toggle(classes(node).some(function(name) {
+                    return /^p[xse]?-/.test(name) && patterns.p.test(name);
+                }));
+            }
+        });
+    }
+
+    function families(key, labelKey) {
+        var values = key === 'm' ? VALUES.concat(['auto']) : VALUES;
+        var offered = options.values.concat(key === 'm' ? ['auto'] : []);
+
+        return SIDES.map(function(side) {
+            return {
+                name: key + side,
+                prefix: key + side,
+                values: values,
+                appliesTo: ['row', 'column', 'element', 'container'],
+                labelKey: labelKey,
+                panel: false,
+                choices: function() {
+                    return values.filter(function(value) { return offered.indexOf(value) !== -1; });
+                },
+            };
+        });
+    }
+
+    return {
+        families: families('p', 'utility.padding').concat(families('m', 'utility.margin')),
+
+        panel: function(node, kind) {
+            if (!applies(node, kind)) { return null; }
+
+            var box = $('<div class="ge-spacing" />')
+                .append(group(node, 'p', ge.t('utility.padding')))
+                .append(group(node, 'm', ge.t('utility.margin')))
+            ;
+
+            if (kind === 'column') {
+                $('<small class="ge-spacing-gutter" />').text(ge.t('utility.spacing_gutter')).appendTo(box);
+            }
+
+            return box;
+        },
+
+        preview: function(node, kind, breakpoint) {
+            if (!applies(node, kind)) { return {}; }
+
+            var styles = {};
+
+            ['p', 'm'].forEach(function(key) {
+                if (carries(node, key)) { $.extend(styles, sides(node, key, breakpoint)); }
+            });
+
+            return styles;
+        },
+
+        onRefresh: mark,
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +1,2 @@
+(o=>{o.extend(o.fn.gridEditor.locales.en,{"utility.padding":"Padding","utility.margin":"Margin","utility.side_all":"All sides","utility.side_x":"Left and right","utility.side_y":"Top and bottom","utility.side_t":"Top","utility.side_b":"Bottom","utility.side_s":"Start","utility.side_e":"End","utility.spacing_gutter":"A column's side padding is its gutter: changing it changes the gutter"});var m=["0","1","2","3","4","5"],n=["0",".25rem",".5rem","1rem","1.5rem","3rem"],y=["","x","y","t","e","b","s"],h={"":["top","right","bottom","left"],x:["left","right"],y:["top","bottom"],t:["top"],e:["right"],b:["bottom"],s:["left"]},v=["","sm","md","lg","xl","xxl"],x={p:"padding",m:"margin"};function l(t){return new RegExp("^"+t+"[xytbse]?-(?:(?:sm|md|lg|xl|xxl)-)?(?:[0-5]|auto)$")}o.fn.gridEditor.utilities.spacing=function(d){var g=o.extend({values:m,scale:n},d.settings.utilities.spacing),p={p:l("p"),m:l("m")};function r(t,e){return"row"===e||"column"===e||"element"===e||t.is("[data-ge-container]")}function f(t){return(t.attr("class")||"").split(/\s+/)}function a(t,e){return f(t).some(function(t){return p[e].test(t)})}function u(u,l,t){var e=d.breakpoints.indexOf(t),o={},s={},c=null;return y.forEach(function(t,i){var n=((t,e,i)=>{for(var n=f(t),r="m"===e.charAt(0)?m.concat(["auto"]):m,a=i;0<=a;a--)for(var u=0;u<r.length;u++){var l=e+(v[a]?"-"+v[a]:"")+"-"+r[u];if(-1!==n.indexOf(l))return{tier:a,value:r[u]}}return null})(u,l+t,e);n&&h[t].forEach(function(t){var e=o[t];(!e||n.tier>e.tier||n.tier===e.tier&&i>e.order)&&(o[t]={tier:n.tier,order:i,value:n.value})})}),["top","right","bottom","left"].forEach(function(t){var e,i,n,r,a=o[t];a?s[x[l]+"-"+t]="auto"===a.value?"auto":g.scale[a.value]:(c=c||(e=l,n=(a=u).attr("class"),r={},a.attr("class",f(a).filter(function(t){return!p[e].test(t)}).join(" ")),i=getComputedStyle(a[0]),["top","right","bottom","left"].forEach(function(t){r[t]=i.getPropertyValue(x[e]+"-"+t)}),a.attr("class",n),r),s[x[l]+"-"+t]=c[t])}),s}function i(e,i,t){var n,r,a=o('<div class="ge-spacing-group" />').attr("data-ge-spacing",i),u=o('<select class="ge-spacing-side" />'),l=(o('<span class="ge-utility-label" />').text(t).appendTo(a),y.forEach(function(t){o("<option />").attr("value",t).text((t=>{switch(t){case"x":return d.t("utility.side_x");case"y":return d.t("utility.side_y");case"t":return d.t("utility.side_t");case"b":return d.t("utility.side_b");case"s":return d.t("utility.side_s");case"e":return d.t("utility.side_e");default:return d.t("utility.side_all")}})(t)).appendTo(u)}),d.utilityField(e,i+(n=i,r=f(t=e).filter(function(t){return p[n].test(t)}),(t=y.filter(function(e){return r.some(function(t){return 0===t.indexOf(n+e+"-")})})).length?t[0]:"")));return u.val(l.attr("data-ge-family").slice(1)).on("change",function(){var t=d.utilityField(e,i+this.value);l.replaceWith(t),l=t}).appendTo(a),l.appendTo(a),a}var e=".row, .column, .ge-element, [data-ge-container]";function t(e,i){var n="m"===e?m.concat(["auto"]):m,r=g.values.concat("m"===e?["auto"]:[]);return y.map(function(t){return{name:e+t,prefix:e+t,values:n,appliesTo:["row","column","element","container"],labelKey:i,panel:!1,choices:function(){return n.filter(function(t){return-1!==r.indexOf(t)})}}})}return{families:t("p","utility.padding").concat(t("m","utility.margin")),panel:function(t,e){return r(t,e)?(t=o('<div class="ge-spacing" />').append(i(t,"p",d.t("utility.padding"))).append(i(t,"m",d.t("utility.margin"))),"column"===e&&o('<small class="ge-spacing-gutter" />').text(d.t("utility.spacing_gutter")).appendTo(t),t):null},preview:function(e,t,i){var n;return r(e,t)?(n={},["p","m"].forEach(function(t){a(e,t)&&o.extend(n,u(e,t,i))}),n):{}},onRefresh:function(t){t.find(e).addBack(e).each(function(){var t,e=o(this),i=e.children(".ge-tools-drawer");i.length&&r(e,d.kindOf(e))&&(a(e,"p")?(t=getComputedStyle(e[0]),i.css({marginTop:"-"+t.paddingTop,marginLeft:"-"+t.paddingLeft,marginRight:"-"+t.paddingRight,width:"calc(100% + "+t.paddingLeft+" + "+t.paddingRight+")"})):i.css({marginTop:"",marginLeft:"",marginRight:"",width:""}),e.hasClass("column"))&&i.find(".ge-spacing-gutter").toggle(f(e).some(function(t){return/^p[xse]?-/.test(t)&&p.p.test(t)}))})}}}})(jQuery);
+//# sourceMappingURL=grideditor.spacing.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.spacing.min.js","sources":["../../src/js/plugins/grideditor.spacing.js"],"names":["$","extend","fn","gridEditor","locales","en","utility.padding","utility.margin","utility.side_all","utility.side_x","utility.side_y","utility.side_t","utility.side_b","utility.side_s","utility.side_e","utility.spacing_gutter","VALUES","SCALE","SIDES","SET","","x","y","t","e","b","s","INFIXES","PROPERTIES","p","m","pattern","key","RegExp","utilities","spacing","ge","options","values","scale","settings","patterns","applies","node","kind","is","classes","attr","split","carries","some","name","test","sides","breakpoint","tier","breakpoints","indexOf","winners","styles","neutral","forEach","side","order","found","family","names","charAt","concat","i","v","length","value","set","current","style","original","bare","winner","filter","join","getComputedStyle","getPropertyValue","group","labelText","box","field","text","appendTo","utilityField","val","slice","on","next","this","replaceWith","NODES","families","labelKey","offered","map","prefix","appliesTo","panel","choices","append","preview","onRefresh","scope","find","addBack","each","drawer","children","kindOf","css","marginTop","paddingTop","marginLeft","paddingLeft","marginRight","paddingRight","width","hasClass","toggle","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.tabs.js

@@ -73,6 +73,14 @@ $.fn.gridEditor.containers.tabs = function(ge) {
 
     return {
         labelKey: 'container.add_tabs',
+
+        // A tab strip sorts its own tabs, and the panes follow them. No
+        // group: a tab belongs to the strip it was made in.
+        onSortable: function(sortable) {
+            sortable(ge.canvas.find('.ge-container-tabs > .nav-tabs'), {
+                draggable: '.ge-tab',
+            });
+        },
         addPaneKey: 'container.add_tab',
         paneKind: 'tab',
 

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

@@ -1,2 +1,2 @@
-(b=>{b.extend(b.fn.gridEditor.locales.en,{"container.add_tabs":"Tabs","container.add_tab":"Add tab","container.tab_label":"Tab {number}","confirm.delete_tab":"Delete this tab and everything in it?"}),b.fn.gridEditor.containers.tabs=function(d){function r(a,t){t=t||{};var n=a.find("> .nav-tabs"),e=a.find("> .tab-content"),i=d.containerId("tab"),r=n.children(".nav-item").length+1,n=(b('<li class="nav-item ge-tab" role="presentation" />').append(b('<button class="nav-link" type="button" role="tab" data-bs-toggle="tab" />').attr("data-bs-target","#"+i).attr("aria-controls",i).append(b('<span class="ge-pane-label" />').text(t.label||d.t("container.tab_label",{number:r})))).appendTo(n),b('<div class="tab-pane fade" role="tabpanel" tabindex="0" />').attr("id",i).append(d.defaultRegion()).appendTo(e));return!t.activate&&1!==r||s(a,n),n}function s(a,t){var n=t.attr("id");a.find("> .tab-content > .tab-pane").removeClass("show active"),t.addClass("show active"),a.find("> .nav-tabs .nav-link").each(function(){var a=b(this),t=a.attr("data-bs-target")==="#"+n;a.toggleClass("active",t).attr("aria-selected",t?"true":"false")})}function l(a,t){return a.find(t.find(".nav-link").attr("data-bs-target"))}return{labelKey:"container.add_tabs",addPaneKey:"container.add_tab",paneKind:"tab",create:function(a){var t=b("<div />").attr("data-ge-container","tabs"),n=a.labels||[],e=a.tabs||n.length||2;b('<ul class="nav nav-tabs" role="tablist" />').appendTo(t),b('<div class="tab-content" />').appendTo(t);for(var i=0;i<e;i++)r(t,{label:n[i]});return t},addPane:r,mark:function(i){i.find("> .tab-content > .tab-pane").addClass("ge-tab-pane"),i.find("> .nav-tabs > .nav-item").each(function(){var a=b(this).addClass("ge-tab");d.makeLabelEditable(d.labelIn(a.find(".nav-link"))),a.find("> .ge-tools-drawer").length||d.createPaneControls(a,"tab",d.settings.tab_tools,d.t("confirm.delete_tab"),function(t){var n=l(i,a),e=n.hasClass("active");a.fadeOut(200,function(){n.remove(),t();var a=i.find("> .tab-content > .tab-pane").first();e&&a.length&&s(i,a)})})})},unmark:function(a){d.resumeToggles(a),a.find(".ge-tab-pane").removeClass("ge-tab-pane"),d.unwrapLabels(a)},afterPaneMove:function(a){var t=a.find("> .tab-content");a.find("> .nav-tabs > .nav-item").each(function(){t.append(l(a,b(this)))})}}}})(jQuery);
+(o=>{o.extend(o.fn.gridEditor.locales.en,{"container.add_tabs":"Tabs","container.add_tab":"Add tab","container.tab_label":"Tab {number}","confirm.delete_tab":"Delete this tab and everything in it?"}),o.fn.gridEditor.containers.tabs=function(d){function r(a,t){t=t||{};var n=a.find("> .nav-tabs"),e=a.find("> .tab-content"),i=d.containerId("tab"),r=n.children(".nav-item").length+1,n=(o('<li class="nav-item ge-tab" role="presentation" />').append(o('<button class="nav-link" type="button" role="tab" data-bs-toggle="tab" />').attr("data-bs-target","#"+i).attr("aria-controls",i).append(o('<span class="ge-pane-label" />').text(t.label||d.t("container.tab_label",{number:r})))).appendTo(n),o('<div class="tab-pane fade" role="tabpanel" tabindex="0" />').attr("id",i).append(d.defaultRegion()).appendTo(e));return!t.activate&&1!==r||s(a,n),n}function s(a,t){var n=t.attr("id");a.find("> .tab-content > .tab-pane").removeClass("show active"),t.addClass("show active"),a.find("> .nav-tabs .nav-link").each(function(){var a=o(this),t=a.attr("data-bs-target")==="#"+n;a.toggleClass("active",t).attr("aria-selected",t?"true":"false")})}function b(a,t){return a.find(t.find(".nav-link").attr("data-bs-target"))}return{labelKey:"container.add_tabs",onSortable:function(a){a(d.canvas.find(".ge-container-tabs > .nav-tabs"),{draggable:".ge-tab"})},addPaneKey:"container.add_tab",paneKind:"tab",create:function(a){var t=o("<div />").attr("data-ge-container","tabs"),n=a.labels||[],e=a.tabs||n.length||2;o('<ul class="nav nav-tabs" role="tablist" />').appendTo(t),o('<div class="tab-content" />').appendTo(t);for(var i=0;i<e;i++)r(t,{label:n[i]});return t},addPane:r,mark:function(i){i.find("> .tab-content > .tab-pane").addClass("ge-tab-pane"),i.find("> .nav-tabs > .nav-item").each(function(){var a=o(this).addClass("ge-tab");d.makeLabelEditable(d.labelIn(a.find(".nav-link"))),a.find("> .ge-tools-drawer").length||d.createPaneControls(a,"tab",d.settings.tab_tools,d.t("confirm.delete_tab"),function(t){var n=b(i,a),e=n.hasClass("active");a.fadeOut(200,function(){n.remove(),t();var a=i.find("> .tab-content > .tab-pane").first();e&&a.length&&s(i,a)})})})},unmark:function(a){d.resumeToggles(a),a.find(".ge-tab-pane").removeClass("ge-tab-pane"),d.unwrapLabels(a)},afterPaneMove:function(a){var t=a.find("> .tab-content");a.find("> .nav-tabs > .nav-item").each(function(){t.append(b(a,o(this)))})}}}})(jQuery);
 //# sourceMappingURL=grideditor.tabs.min.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"grideditor.tabs.min.js","sources":["../../src/js/plugins/grideditor.tabs.js"],"names":["$","extend","fn","gridEditor","locales","en","container.add_tabs","container.add_tab","container.tab_label","confirm.delete_tab","containers","tabs","ge","addTabTo","container","options","strip","find","content","id","containerId","number","children","length","pane","append","attr","text","label","t","appendTo","defaultRegion","activate","activatePane","removeClass","addClass","each","button","this","active","toggleClass","paneOf","tab","labelKey","addPaneKey","paneKind","create","labels","count","i","addPane","mark","makeLabelEditable","labelIn","createPaneControls","settings","tab_tools","removed","wasActive","hasClass","fadeOut","remove","first","unmark","resumeToggles","unwrapLabels","afterPaneMove","jQuery"],"mappings":"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"}
+{"version":3,"file":"grideditor.tabs.min.js","sources":["../../src/js/plugins/grideditor.tabs.js"],"names":["$","extend","fn","gridEditor","locales","en","container.add_tabs","container.add_tab","container.tab_label","confirm.delete_tab","containers","tabs","ge","addTabTo","container","options","strip","find","content","id","containerId","number","children","length","pane","append","attr","text","label","t","appendTo","defaultRegion","activate","activatePane","removeClass","addClass","each","button","this","active","toggleClass","paneOf","tab","labelKey","onSortable","sortable","canvas","draggable","addPaneKey","paneKind","create","labels","count","i","addPane","mark","makeLabelEditable","labelIn","createPaneControls","settings","tab_tools","removed","wasActive","hasClass","fadeOut","remove","first","unmark","resumeToggles","unwrapLabels","afterPaneMove","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.visibility.js

@@ -0,0 +1,172 @@
+/**
+ * Visibility for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and every row, column,
+ * element and container can be hidden at some breakpoints and shown at
+ * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or
+ * -flex, for a row, which is a flex container and stops being a grid as a
+ * block). 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.visibility.min.js"></script>
+ *
+ * A hidden node is never hidden from the editor, which would leave nothing to
+ * click to show it again. It stays on the canvas, faded and striped in a view
+ * where it is hidden, and in the all view says at which breakpoints it is.
+ *
+ * utilities.visibility.drawer: false leaves the eye out of the drawers, and
+ * the panel field is the only control.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.visibility': 'Visibility',
+    'utility.visibility_hidden': 'Hidden',
+    'utility.visibility_shown': 'Shown',
+    'tool.hide_in_view': 'Hide in this view',
+    'tool.show_in_view': 'Show in this view',
+    'badge.hidden_in': 'Hidden at {breakpoints}',
+});
+
+/** A node that carries any class of the family, at any breakpoint. */
+var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
+
+var NODES = '.row, .column, .ge-element, [data-ge-container]';
+
+$.fn.gridEditor.utilities.visibility = function(ge) {
+
+    var options = $.extend({ drawer: true }, ge.settings.utilities.visibility);
+
+    /** What "shown" is written as on this kind of node. */
+    function shown(kind) {
+        return kind === 'row' ? 'flex' : 'block';
+    }
+
+    function applies(node, kind) {
+        return kind === 'row' || kind === 'column' || kind === 'element' ||
+            node.is('[data-ge-container]');
+    }
+
+    function hiddenAt(node, view) {
+        return ge.getUtility(node, 'visibility', view) === 'none';
+    }
+
+    /** The breakpoints at which the node is hidden, smallest first. */
+    function hiddenTiers(node) {
+        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });
+    }
+
+    /**
+     * Whether the node is hidden in the view being edited. In the all view
+     * that means hidden at every breakpoint, since "hidden at some" is what
+     * the badge is for.
+     */
+    function hiddenHere(node) {
+        return ge.view() === 'all'
+            ? hiddenTiers(node).length === ge.breakpoints.length
+            : hiddenAt(node, ge.view());
+    }
+
+    /** What the breakpoint below the view shows, which an inherit falls back to. */
+    function hiddenBelow(node) {
+        var index = ge.breakpoints.indexOf(ge.view());
+
+        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
+    }
+
+    /**
+     * Hide or show the node in the view being edited, with as few classes as
+     * that takes. In a breakpoint view that is often none at all: showing a
+     * node the breakpoint below shows removes this breakpoint's d-*-none
+     * rather than writing a d-*-block on top of it. In the all view a node
+     * is hidden everywhere or shown everywhere, and shown is no class.
+     */
+    function toggle(node, kind) {
+        var hide = !hiddenHere(node);
+        var value;
+
+        if (ge.view() === 'all') {
+            value = hide ? 'none' : null;
+        } else if (hide) {
+            value = hiddenBelow(node) ? null : 'none';
+        } else {
+            value = hiddenBelow(node) ? shown(kind) : null;
+        }
+
+        ge.setUtility(node, 'visibility', value, { source: 'tool' });
+    }
+
+    /**
+     * The canvas shows each node as the view sees it. ge-visibility keeps a
+     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,
+     * and data-ge-hidden-in carries the badge text for the all view.
+     */
+    function mark(scope) {
+        scope.find(NODES).addBack(NODES).each(function() {
+            var node = $(this);
+            var kind = ge.kindOf(node);
+            var carries = applies(node, kind) && CLASS_PATTERN.test(node.attr('class') || '');
+            var tiers = carries ? hiddenTiers(node) : [];
+            var here = carries && hiddenHere(node);
+            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
+
+            node.toggleClass('ge-visibility', carries).toggleClass('ge-hidden-in-view', here);
+
+            if (partly) {
+                node.attr('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
+            } else {
+                node.removeAttr('data-ge-hidden-in');
+            }
+
+            node.children('.ge-tools-drawer').children('.ge-visibility-tool').each(function() {
+                $(this)
+                    .attr('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'))
+                    .find('i').attr('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+            });
+        });
+    }
+
+    function unmark() {
+        ge.canvas.find('.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').each(function() {
+            var node = $(this)
+                .removeClass('ge-visibility ge-hidden-in-view')
+                .removeAttr('data-ge-hidden-in')
+            ;
+
+            if (!node.attr('class')) { node.removeAttr('class'); }
+        });
+    }
+
+    return {
+        families: [{
+            name: 'visibility',
+            prefix: 'd',
+            values: ['none', 'block', 'flex'],
+            appliesTo: ['row', 'column', 'element', 'container'],
+            labelKey: 'utility.visibility',
+
+            /** Hidden, or shown the way this kind of node is shown. */
+            choices: function(node, kind) {
+                return ['none', shown(kind)];
+            },
+
+            label: function(value) {
+                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');
+            },
+        }],
+
+        drawerTools: function(drawer, node, kind) {
+            if (!options.drawer || !applies(node, kind)) { return; }
+
+            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {
+                toggle(node, kind);
+            });
+        },
+
+        onRefresh: mark,
+        onDeinit: unmark,
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +1,2 @@
+(v=>{v.extend(v.fn.gridEditor.locales.en,{"utility.visibility":"Visibility","utility.visibility_hidden":"Hidden","utility.visibility_shown":"Shown","tool.hide_in_view":"Hide in this view","tool.show_in_view":"Show in this view","badge.hidden_in":"Hidden at {breakpoints}"});var c=/(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/,n=".row, .column, .ge-element, [data-ge-container]";v.fn.gridEditor.utilities.visibility=function(o){var e=v.extend({drawer:!0},o.settings.utilities.visibility);function r(i){return"row"===i?"flex":"block"}function s(i,e){return"row"===e||"column"===e||"element"===e||i.is("[data-ge-container]")}function t(i,e){return"none"===o.getUtility(i,"visibility",e)}function a(e){return o.breakpoints.filter(function(i){return t(e,i)})}function d(i){return"all"===o.view()?a(i).length===o.breakpoints.length:t(i,o.view())}function u(i){var e=o.breakpoints.indexOf(o.view());return 0<e&&t(i,o.breakpoints[e-1])}return{families:[{name:"visibility",prefix:"d",values:["none","block","flex"],appliesTo:["row","column","element","container"],labelKey:"utility.visibility",choices:function(i,e){return["none",r(e)]},label:function(i){return"none"===i?o.t("utility.visibility_hidden"):o.t("utility.visibility_shown")}}],drawerTools:function(i,n,l){e.drawer&&s(n,l)&&o.createTool(i,o.t("tool.hide_in_view"),"ge-visibility-tool","bi bi-eye",function(){var i,e,t;e=l,t=!d(i=n),t="all"===o.view()?t?"none":null:t?u(i)?null:"none":u(i)?r(e):null,o.setUtility(i,"visibility",t,{source:"tool"})})},onRefresh:function(i){i.find(n).addBack(n).each(function(){var i=v(this),e=s(i,o.kindOf(i))&&c.test(i.attr("class")||""),t=e?a(i):[],n=e&&d(i),l=e&&"all"===o.view()&&0<t.length&&!n;i.toggleClass("ge-visibility",e).toggleClass("ge-hidden-in-view",n),l?i.attr("data-ge-hidden-in",o.t("badge.hidden_in",{breakpoints:t.join(", ")})):i.removeAttr("data-ge-hidden-in"),i.children(".ge-tools-drawer").children(".ge-visibility-tool").each(function(){v(this).attr("title",n?o.t("tool.show_in_view"):o.t("tool.hide_in_view")).find("i").attr("class",n?"bi bi-eye-slash":"bi bi-eye")})})},onDeinit:function(){o.canvas.find(".ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]").each(function(){var i=v(this).removeClass("ge-visibility ge-hidden-in-view").removeAttr("data-ge-hidden-in");i.attr("class")||i.removeAttr("class")})}}}})(jQuery);
+//# sourceMappingURL=grideditor.visibility.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.visibility.min.js","sources":["../../src/js/plugins/grideditor.visibility.js"],"names":["$","extend","fn","gridEditor","locales","en","utility.visibility","utility.visibility_hidden","utility.visibility_shown","tool.hide_in_view","tool.show_in_view","badge.hidden_in","CLASS_PATTERN","NODES","utilities","visibility","ge","options","drawer","settings","shown","kind","applies","node","is","hiddenAt","view","getUtility","hiddenTiers","breakpoints","filter","key","hiddenHere","length","hiddenBelow","index","indexOf","families","name","prefix","values","appliesTo","labelKey","choices","label","value","t","drawerTools","createTool","hide","setUtility","source","onRefresh","scope","find","addBack","each","this","carries","kindOf","test","attr","tiers","here","partly","toggleClass","join","removeAttr","children","onDeinit","canvas","removeClass","jQuery"],"mappings":"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"}

package/docs/events.md

@@ -56,6 +56,9 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `grideditor:before-indent` | — | yes | before a column's offset changes |
 | `grideditor:after-indent` | — | no | after the offset class is written |
 | `grideditor:popup-orphan` | — | no | on `init`, once per trigger whose popup is missing and cannot be re-pointed |
+| `grideditor:before-utility` | — | yes | before a utility class is written, from the panel, a plugin's tool or `setUtility` |
+| `grideditor:after-utility` | — | no | after the class is written and the preview redrawn, only if something changed |
+| `grideditor:view-change` | — | no | after the view changes, only if it actually changed |
 
 Two things here are not in the 3.0 specification's catalogue. The indent pair,
 because the indent tools are an operation like any other and announce
@@ -74,7 +77,7 @@ The payload
     parent: jQuery,       // where it is going, or where it came from on a delete
     canvas: jQuery,
     breakpoint: 'lg',     // the view at the time: a breakpoint key, or 'all'
-    source: 'tool',       // tool | api | dragdrop
+    source: 'tool',       // tool | api | dragdrop | panel
 
     // move only
     from: { parent: jQuery, index: 2 },
@@ -89,9 +92,23 @@ The payload
 
     // popup-orphan only
     missing: 'ge-popup-3-a91',   // the id the trigger pointed at
+
+    // utility only
+    family: 'order',      // the utility, as its plugin names it
+    from: '1',            // what applied in the view before, or null
+    to: '2',              // what was asked for; null is "inherit"
+    tiers: ['md'],        // the breakpoints whose class was written
+    cleared: [            // the all view only: what the breakpoints said,
+        { breakpoint: 'lg', value: '3' },   // and the write took away
+    ],
 }
 ```
 
+`view-change` carries no node: its payload is `canvas`, `breakpoint` (the new
+view), `from` and `to`. A utility's `breakpoint` is the view it was written
+in, which `setUtility` can be asked to make a different one from the view on
+screen, and its `source` is `panel`, `tool` or `api`.
+
 `source` matters to a host that both drives the editor from its own palette and
 listens for what the user does: `api` is your own call coming back to you,
 `tool` is a click in the editor, `dragdrop` is a gesture.
@@ -114,14 +131,15 @@ cancels a `before-*`. What that means depends on the operation:
   then remove the node and call `reset()`. The editor's own confirmation modal
   never appears for a canceled delete — the host's handler runs first, on
   purpose.
-- **Move.** jQuery UI cannot refuse a drag once it has started, so
-  `before-move` fires from the sortable's `start` handler and canceling marks
-  the drag: on drop the item returns to where it came from and no `after-move`
-  fires. The drag is visible and then reverts; it is not prevented outright.
-- **Resize.** From a tool, nothing is written. From a drag, the drag is refused
-  at every step, so the column ends where it began — jQuery UI's `resizable`
-  ignores `false` from its start handler, unlike its `draggable`.
+- **Move.** A drag cannot be refused once it has started, so `before-move`
+  fires as the drag begins and canceling marks it: on drop the item is put back
+  where it came from and no `after-move` fires. The drag is visible and then
+  reverts; it is not prevented outright.
+- **Resize.** From a tool, nothing is written. From a drag, the gesture never
+  starts: the column does not move and nothing is written.
 - **Indent.** Nothing is written.
+- **Utility.** Nothing is written, `setUtility` returns `false`, and the panel
+  field goes back to the value that stands.
 
 `after-move` is suppressed when the drop leaves the node in the same parent at
 the same index, and `after-resize` when the snapped size equals the old one, so