@themarioga/grid-editor 3.1.0

package/dist/plugins/grideditor.elements.js

@@ -0,0 +1,141 @@
+/**
+ * Element level controls for grid-editor.
+ *
+ * A feature plugin: load this file after the editor and the nodes a host
+ * marked inside a content area become elements - one movable, deletable thing
+ * each, instead of rich text. 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.elements.min.js"></script>
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'tool.delete_element': 'Remove element',
+    'tool.element_info': 'Element: {name}',
+    'confirm.delete_element': 'Delete element?',
+});
+
+$.fn.gridEditor.features.elements = function(ge) {
+
+    function elementsEnabled() {
+        if (ge.settings.elements.enabled !== 'auto') { return !!ge.settings.elements.enabled; }
+
+        return ge.settings.elements.auto || ge.canvas.find(ge.settings.elements.selector).length > 0;
+    }
+
+    function elementsIn(contentArea) {
+        return ge.settings.elements.auto
+            ? contentArea.children()
+            : contentArea.children(ge.settings.elements.selector);
+    }
+
+    function markElements() {
+        if (!elementsEnabled()) { return; }
+
+        ge.canvas.find('.ge-content').each(function() {
+            elementsIn($(this)).each(function() {
+                var element = $(this).addClass('ge-element').attr('contenteditable', 'false');
+
+                if (element.find('> .ge-tools-drawer').length) { return; }
+
+                createElementControls(element);
+            });
+        });
+    }
+
+    function unmarkElements() {
+        ge.canvas.find('.ge-element').each(function() {
+            var element = $(this).removeClass('ge-element').removeAttr('contenteditable');
+
+            // A host element that had no class of its own should not come
+            // back from getHtml carrying an empty one
+            if (!element.attr('class')) { element.removeAttr('class'); }
+        });
+    }
+
+    function createElementControls(element) {
+        // data-mce-bogus="all" is how tinyMCE is told that a node is the
+        // editor's furniture rather than content: it leaves the subtree
+        // alone and keeps it out of what it serializes. Without it the
+        // drawer's tools are inline elements with no text, which is
+        // exactly what its cleanup removes, so an element inside an open
+        // editor would lose its move and delete tools.
+        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />')
+            .attr('data-mce-bogus', 'all')
+            .prependTo(element)
+        ;
+
+        ge.createMoveTool(drawer);
+        ge.createTool(drawer, ge.t('tool.element_info', { name: elementName(element) }),
+            'ge-element-info', 'bi bi-info-circle');
+        ge.addSettingsTool(drawer, element, ge.settings.element_classes);
+
+        ge.settings.element_tools.forEach(function(hostTool) {
+            ge.createTool(drawer, hostTool.title || '', hostTool.className || '',
+                hostTool.iconClass || 'bi bi-wrench', hostTool.on);
+        });
+
+        ge.createTool(drawer, ge.t('tool.delete_element'), 'ge-delete-element', 'bi bi-trash', function() {
+            ge.deleteNode('element', element, ge.t('confirm.delete_element'), function(removed) {
+                element.animate({ opacity: 'hide', height: 'hide' }, 300, removed);
+            });
+        });
+    }
+
+    function elementName(element) {
+        var type = element.attr('data-ge-element');
+        var label = element.attr('data-ge-label');
+
+        if (label && type) { return label + ' (' + type + ')'; }
+
+        return label || type || element[0].tagName.toLowerCase();
+    }
+
+    function apiCreateElement(content, options) {
+        options = options || {};
+
+        var element = $('<div class="ge-element" />')
+            .attr('data-ge-element', options.type || 'element')
+            .append(content)
+        ;
+        if (options.label !== undefined) {
+            element.attr('data-ge-label', options.label);
+        }
+
+        return ge.place(element, 'element', options);
+    }
+
+    return {
+        methods: {
+            createElement: apiCreateElement,
+        },
+
+        /** A node this plugin marked is an element, whatever else it is. */
+        kindOf: function(node) {
+            return node.hasClass('ge-element') ? 'element' : null;
+        },
+
+        onInit: markElements,
+        onDeinit: unmarkElements,
+
+        /**
+         * An editor rewrites the content area as it takes it over, drawers
+         * included, so they go back in when it says it is ready.
+         */
+        onContentReady: markElements,
+
+        /** Elements move within a content area and between them. */
+        onSortable: function(shared) {
+            if (!elementsEnabled()) { return; }
+
+            ge.canvas.find('.ge-content').sortable($.extend({
+                items: '> .ge-element',
+                connectWith: '.ge-canvas .ge-content',
+            }, shared, ge.settings.sortable_options));
+        },
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +1,2 @@
+(a=>{a.extend(a.fn.gridEditor.locales.en,{"tool.delete_element":"Remove element","tool.element_info":"Element: {name}","confirm.delete_element":"Delete element?"}),a.fn.gridEditor.features.elements=function(l){function t(){return"auto"!==l.settings.elements.enabled?l.settings.elements.enabled:l.settings.elements.auto||0<l.canvas.find(l.settings.elements.selector).length}function e(){t()&&l.canvas.find(".ge-content").each(function(){var e;e=a(this),(l.settings.elements.auto?e.children():e.children(l.settings.elements.selector)).each(function(){var t,n,e=a(this).addClass("ge-element").attr("contenteditable","false");e.find("> .ge-tools-drawer").length||(t=e,n=a('<div class="ge-tools-drawer ge-element-drawer" />').attr("data-mce-bogus","all").prependTo(t),l.createMoveTool(n),l.createTool(n,l.t("tool.element_info",{name:(e=>{var t=e.attr("data-ge-element"),n=e.attr("data-ge-label");return n&&t?n+" ("+t+")":n||t||e[0].tagName.toLowerCase()})(t)}),"ge-element-info","bi bi-info-circle"),l.addSettingsTool(n,t,l.settings.element_classes),l.settings.element_tools.forEach(function(e){l.createTool(n,e.title||"",e.className||"",e.iconClass||"bi bi-wrench",e.on)}),l.createTool(n,l.t("tool.delete_element"),"ge-delete-element","bi bi-trash",function(){l.deleteNode("element",t,l.t("confirm.delete_element"),function(e){t.animate({opacity:"hide",height:"hide"},300,e)})}))})})}return{methods:{createElement:function(e,t){return t=t||{},e=a('<div class="ge-element" />').attr("data-ge-element",t.type||"element").append(e),void 0!==t.label&&e.attr("data-ge-label",t.label),l.place(e,"element",t)}},kindOf:function(e){return e.hasClass("ge-element")?"element":null},onInit:e,onDeinit:function(){l.canvas.find(".ge-element").each(function(){var e=a(this).removeClass("ge-element").removeAttr("contenteditable");e.attr("class")||e.removeAttr("class")})},onContentReady:e,onSortable:function(e){t()&&l.canvas.find(".ge-content").sortable(a.extend({items:"> .ge-element",connectWith:".ge-canvas .ge-content"},e,l.settings.sortable_options))}}}})(jQuery);
+//# sourceMappingURL=grideditor.elements.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.elements.min.js","sources":["../../src/js/plugins/grideditor.elements.js"],"names":["$","extend","fn","gridEditor","locales","en","tool.delete_element","tool.element_info","confirm.delete_element","features","elements","ge","elementsEnabled","settings","enabled","auto","canvas","find","selector","length","markElements","each","contentArea","this","children","element","drawer","addClass","attr","prependTo","createMoveTool","createTool","t","name","type","label","tagName","toLowerCase","addSettingsTool","element_classes","element_tools","forEach","hostTool","title","className","iconClass","on","deleteNode","removed","animate","opacity","height","methods","createElement","content","options","append","undefined","place","kindOf","node","hasClass","onInit","onDeinit","removeClass","removeAttr","onContentReady","onSortable","shared","sortable","items","connectWith","sortable_options","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.popup.js

@@ -0,0 +1,143 @@
+/**
+ * Popups for grid-editor.
+ *
+ * A container plugin: load this file after the editor and the toolbar offers
+ * a popup: a bootstrap modal and its trigger. 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.popup.min.js"></script>
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'container.add_popup': 'Popup',
+    'container.popup_title': 'Title',
+    'container.popup_trigger': 'Open',
+    'tool.toggle_popup': 'Fold this popup away while editing',
+});
+
+$.fn.gridEditor.containers.popup = function(ge) {
+
+    function popupIdOf(container) {
+        return container.attr('data-ge-popup-id');
+    }
+
+    function wirePopupTriggers() {
+        ge.canvas.find('[data-ge-popup-target]').each(function() {
+            var trigger = $(this).addClass('ge-popup-trigger');
+            var wanted = trigger.attr('data-ge-popup-target');
+
+            // Bootstrap's own attributes are written at getHtml time, not
+            // while editing, so a click here cannot open a real modal
+            trigger.removeAttr('data-bs-toggle').removeAttr('data-bs-target');
+
+            if (ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) {
+                trigger.removeClass('ge-popup-orphan');
+                return;
+            }
+
+            var nearby = trigger.closest('.column').find('[data-ge-popup-id]');
+
+            if (nearby.length === 1) {
+                trigger.attr('data-ge-popup-target', popupIdOf(nearby)).removeClass('ge-popup-orphan');
+                return;
+            }
+
+            trigger.addClass('ge-popup-orphan');
+
+            ge.operate(function() {
+                ge.emit('popup-orphan', ge.payloadFor('popup', trigger, {
+                    parent: trigger.parent(),
+                    source: 'api',
+                    missing: wanted,
+                }));
+            });
+        });
+    }
+
+    function writePopupTriggerAttributes() {
+        ge.canvas.find('[data-ge-popup-target]').each(function() {
+            var trigger = $(this);
+            var wanted = trigger.attr('data-ge-popup-target');
+
+            // The warning marking is editing furniture, whether or not
+            // the trigger can be wired up
+            trigger.removeClass('ge-popup-orphan');
+            if (!trigger.attr('class')) { trigger.removeAttr('class'); }
+
+            if (!ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) { return; }
+
+            trigger.attr('data-bs-toggle', 'modal').attr('data-bs-target', '#' + wanted);
+        });
+    }
+
+    return {
+        labelKey: 'container.add_popup',
+        paneKind: 'popup',
+
+        // Triggers are markup the host owns, anywhere in the canvas, so they
+        // are looked at whenever the canvas is initialized rather than only
+        // when a popup is touched
+        onInit: wirePopupTriggers,
+        onDeinit: writePopupTriggerAttributes,
+
+        create: function(options) {
+            var id = ge.containerId('popup');
+            var container = $('<div />')
+                .attr('data-ge-container', 'popup')
+                .attr('data-ge-popup-id', id)
+            ;
+
+            if (options.trigger !== false) {
+                $('<button type="button" class="btn btn-primary ge-popup-trigger" />')
+                    .attr('data-ge-popup-target', id)
+                    .text(options.trigger_label || ge.t('container.popup_trigger'))
+                    .appendTo(container)
+                ;
+            }
+
+            var dialog = $('<div class="modal-dialog" />');
+            if (options.size) { dialog.addClass('modal-' + options.size); }
+
+            $('<div class="modal fade" tabindex="-1" aria-hidden="true" />')
+                .attr('id', id)
+                .append(dialog.append($('<div class="modal-content" />')
+                    .append($('<div class="modal-header" />')
+                        .append($('<h5 class="modal-title" />')
+                            .append($('<span class="ge-pane-label" />')
+                                .text(options.title || ge.t('container.popup_title'))))
+                        .append('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'))
+                    .append($('<div class="modal-body" />').append(ge.defaultRegion()))))
+                .appendTo(container)
+            ;
+
+            return container;
+        },
+
+        mark: function(container) {
+            // Nothing in a popup may reach Bootstrap while editing:
+            // the modal is rendered unfolded and static, and a real
+            // modal opening over it would be the editor fighting
+            // itself
+            ge.suspendToggles(container.find('[data-bs-dismiss]'));
+            ge.makeLabelEditable(ge.labelIn(container.find('.modal-title')));
+        },
+
+        unmark: function(container) {
+            ge.resumeToggles(container);
+            container.removeClass('ge-popup-collapsed');
+            ge.unwrapLabels(container);
+        },
+
+        /** A page of unfolded modals stays workable if they can be folded away. */
+        tools: function(drawer, container) {
+            ge.createTool(drawer, ge.t('tool.toggle_popup'), 'ge-toggle-popup', 'bi bi-chevron-bar-contract',
+                function() {
+                    container.toggleClass('ge-popup-collapsed');
+                });
+        },
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +1,2 @@
+(n=>{n.extend(n.fn.gridEditor.locales.en,{"container.add_popup":"Popup","container.popup_title":"Title","container.popup_trigger":"Open","tool.toggle_popup":"Fold this popup away while editing"}),n.fn.gridEditor.containers.popup=function(o){return{labelKey:"container.add_popup",paneKind:"popup",onInit:function(){o.canvas.find("[data-ge-popup-target]").each(function(){var a,t=n(this).addClass("ge-popup-trigger"),p=t.attr("data-ge-popup-target");t.removeAttr("data-bs-toggle").removeAttr("data-bs-target"),o.canvas.find('[data-ge-popup-id="'+p+'"]').length?t.removeClass("ge-popup-orphan"):1===(a=t.closest(".column").find("[data-ge-popup-id]")).length?t.attr("data-ge-popup-target",a.attr("data-ge-popup-id")).removeClass("ge-popup-orphan"):(t.addClass("ge-popup-orphan"),o.operate(function(){o.emit("popup-orphan",o.payloadFor("popup",t,{parent:t.parent(),source:"api",missing:p}))}))})},onDeinit:function(){o.canvas.find("[data-ge-popup-target]").each(function(){var a=n(this),t=a.attr("data-ge-popup-target");a.removeClass("ge-popup-orphan"),a.attr("class")||a.removeAttr("class"),o.canvas.find('[data-ge-popup-id="'+t+'"]').length&&a.attr("data-bs-toggle","modal").attr("data-bs-target","#"+t)})},create:function(a){var t=o.containerId("popup"),p=n("<div />").attr("data-ge-container","popup").attr("data-ge-popup-id",t),e=(!1!==a.trigger&&n('<button type="button" class="btn btn-primary ge-popup-trigger" />').attr("data-ge-popup-target",t).text(a.trigger_label||o.t("container.popup_trigger")).appendTo(p),n('<div class="modal-dialog" />'));return a.size&&e.addClass("modal-"+a.size),n('<div class="modal fade" tabindex="-1" aria-hidden="true" />').attr("id",t).append(e.append(n('<div class="modal-content" />').append(n('<div class="modal-header" />').append(n('<h5 class="modal-title" />').append(n('<span class="ge-pane-label" />').text(a.title||o.t("container.popup_title")))).append('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>')).append(n('<div class="modal-body" />').append(o.defaultRegion())))).appendTo(p),p},mark:function(a){o.suspendToggles(a.find("[data-bs-dismiss]")),o.makeLabelEditable(o.labelIn(a.find(".modal-title")))},unmark:function(a){o.resumeToggles(a),a.removeClass("ge-popup-collapsed"),o.unwrapLabels(a)},tools:function(a,t){o.createTool(a,o.t("tool.toggle_popup"),"ge-toggle-popup","bi bi-chevron-bar-contract",function(){t.toggleClass("ge-popup-collapsed")})}}}})(jQuery);
+//# sourceMappingURL=grideditor.popup.min.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grideditor.popup.min.js","sources":["../../src/js/plugins/grideditor.popup.js"],"names":["$","extend","fn","gridEditor","locales","en","container.add_popup","container.popup_title","container.popup_trigger","tool.toggle_popup","containers","popup","ge","labelKey","paneKind","onInit","canvas","find","each","nearby","trigger","this","addClass","wanted","attr","removeAttr","length","removeClass","closest","operate","emit","payloadFor","parent","source","missing","onDeinit","create","options","id","containerId","container","dialog","text","trigger_label","t","appendTo","size","append","title","defaultRegion","mark","suspendToggles","makeLabelEditable","labelIn","unmark","resumeToggles","unwrapLabels","tools","drawer","createTool","toggleClass","jQuery"],"mappings":"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"}

package/dist/plugins/grideditor.tabs.js

@@ -0,0 +1,140 @@
+/**
+ * Tabs for grid-editor.
+ *
+ * A container plugin: load this file after the editor and the toolbar offers
+ * a tabs container. 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.tabs.min.js"></script>
+ */
+(function($) {
+
+$.extend($.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?',
+});
+
+$.fn.gridEditor.containers.tabs = function(ge) {
+
+    function addTabTo(container, options) {
+        options = options || {};
+
+        var strip = container.find('> .nav-tabs');
+        var content = container.find('> .tab-content');
+        var id = ge.containerId('tab');
+        var number = strip.children('.nav-item').length + 1;
+
+        $('<li class="nav-item ge-tab" role="presentation" />')
+            .append($('<button class="nav-link" type="button" role="tab" data-bs-toggle="tab" />')
+                .attr('data-bs-target', '#' + id)
+                .attr('aria-controls', id)
+                .append($('<span class="ge-pane-label" />')
+                    .text(options.label || ge.t('container.tab_label', { number: number })))
+            )
+            .appendTo(strip)
+        ;
+
+        var pane = $('<div class="tab-pane fade" role="tabpanel" tabindex="0" />')
+            .attr('id', id)
+            .append(ge.defaultRegion())
+            .appendTo(content)
+        ;
+
+        if (options.activate || number === 1) { activatePane(container, pane); }
+
+        return pane;
+    }
+
+    function activatePane(container, pane) {
+        var id = pane.attr('id');
+
+        container.find('> .tab-content > .tab-pane').removeClass('show active');
+        pane.addClass('show active');
+
+        container.find('> .nav-tabs .nav-link').each(function() {
+            var button = $(this);
+            var active = button.attr('data-bs-target') === '#' + id;
+
+            button.toggleClass('active', active).attr('aria-selected', active ? 'true' : 'false');
+        });
+    }
+
+    function tabOf(container, pane) {
+        return container.find('> .nav-tabs .nav-link[data-bs-target="#' + pane.attr('id') + '"]')
+            .closest('.nav-item');
+    }
+
+    function paneOf(container, tab) {
+        return container.find(tab.find('.nav-link').attr('data-bs-target'));
+    }
+
+    return {
+        labelKey: 'container.add_tabs',
+        addPaneKey: 'container.add_tab',
+        paneKind: 'tab',
+
+        create: function(options) {
+            var container = $('<div />').attr('data-ge-container', 'tabs');
+            var labels = options.labels || [];
+            var count = options.tabs || labels.length || 2;
+
+            $('<ul class="nav nav-tabs" role="tablist" />').appendTo(container);
+            $('<div class="tab-content" />').appendTo(container);
+
+            for (var i = 0; i < count; i++) {
+                addTabTo(container, { label: labels[i] });
+            }
+
+            return container;
+        },
+
+        addPane: addTabTo,
+
+        mark: function(container) {
+            container.find('> .tab-content > .tab-pane').addClass('ge-tab-pane');
+
+            container.find('> .nav-tabs > .nav-item').each(function() {
+                var tab = $(this).addClass('ge-tab');
+
+
+                ge.makeLabelEditable(ge.labelIn(tab.find('.nav-link')));
+
+                if (tab.find('> .ge-tools-drawer').length) { return; }
+
+                ge.createPaneControls(tab, 'tab', ge.settings.tab_tools, ge.t('confirm.delete_tab'),
+                    function(removed) {
+                        var pane = paneOf(container, tab);
+                        var wasActive = pane.hasClass('active');
+
+                        tab.fadeOut(200, function() {
+                            pane.remove();
+                            removed();
+
+                            var first = container.find('> .tab-content > .tab-pane').first();
+                            if (wasActive && first.length) { activatePane(container, first); }
+                        });
+                    });
+            });
+        },
+
+        unmark: function(container) {
+            ge.resumeToggles(container);
+            container.find('.ge-tab-pane').removeClass('ge-tab-pane');
+            ge.unwrapLabels(container);
+        },
+
+        /** Panes read in tab order, whatever order they were dropped in. */
+        afterPaneMove: function(container) {
+            var content = container.find('> .tab-content');
+
+            container.find('> .nav-tabs > .nav-item').each(function() {
+                content.append(paneOf(container, $(this)));
+            });
+        },
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +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);
+//# sourceMappingURL=grideditor.tabs.min.js.map

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

@@ -0,0 +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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"}

package/docs/events.md

@@ -0,0 +1,158 @@
+grid-editor events
+==================
+
+Every operation grid-editor performs is announced, twice: as a jQuery event on
+the canvas, and as a callback in the `callbacks` setting. The event is the
+primary mechanism — several listeners, namespacing, `off()` — and the callback
+is there for hosts that configure the plugin once, from generated or
+server-side code, and cannot easily bind.
+
+```javascript
+// as events
+$('#myGrid').on('grideditor:before-add-row', function(e, payload) {
+    if (payload.parent.hasClass('locked')) { e.preventDefault(); }
+});
+
+// as callbacks
+$('#myGrid').gridEditor({
+    callbacks: {
+        before_add_row: function(payload) { return !payload.parent.hasClass('locked'); },
+        after_move: function(payload) { console.log(payload.from, payload.to); },
+    },
+});
+```
+
+A callback's name is its event name with `grideditor:` dropped and the dashes
+turned into underscores: `before-add-row` → `before_add_row`.
+
+
+The catalogue
+-------------
+
+Adding fires a specific event and then a generic one, so a listener that cares
+about every insertion can bind `grideditor:before-add` and switch on
+`payload.kind`.
+
+| Specific | Generic | Cancelable | Fires |
+| --- | --- | --- | --- |
+| `grideditor:before-add-row` | `grideditor:before-add` | yes | before a row is inserted |
+| `grideditor:after-add-row` | `grideditor:after-add` | no | after insertion, once the canvas is up to date |
+| `grideditor:before-add-column` | `grideditor:before-add` | yes | before a column is inserted |
+| `grideditor:after-add-column` | `grideditor:after-add` | no | |
+| `grideditor:before-add-container` | `grideditor:before-add` | yes | before a container is inserted; `payload.kind` is `tabs`, `accordion` or `popup` |
+| `grideditor:after-add-container` | `grideditor:after-add` | no | |
+| `grideditor:before-add-tab` | `grideditor:before-add` | yes | before a tab is added to a tabs container |
+| `grideditor:after-add-tab` | `grideditor:after-add` | no | |
+| `grideditor:before-add-accordion-item` | `grideditor:before-add` | yes | before an item is added to an accordion |
+| `grideditor:after-add-accordion-item` | `grideditor:after-add` | no | |
+| `grideditor:before-add-element` | `grideditor:before-add` | yes | before an element is inserted |
+| `grideditor:after-add-element` | `grideditor:after-add` | no | |
+| `grideditor:before-delete` | — | yes | before any node is removed, whatever its kind |
+| `grideditor:after-delete` | — | no | after removal completes, animation included |
+| `grideditor:before-move` | — | yes | on drag start (see *Canceling*) |
+| `grideditor:after-move` | — | no | on drop, only if the node actually changed position |
+| `grideditor:before-resize` | — | yes | before a column's size changes, from a tool or a drag |
+| `grideditor:after-resize` | — | no | after the size class is written, only if the size changed |
+| `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 |
+
+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
+themselves like one. And the add events for panes — a tab, an accordion item —
+which follow the same pattern as the rest.
+
+
+The payload
+-----------
+
+```javascript
+{
+    kind: 'row',          // row | column | content | element
+                          // tabs | accordion | popup | tab | accordion-item
+    node: jQuery,         // the node added, deleted, moved or resized
+    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
+
+    // move only
+    from: { parent: jQuery, index: 2 },
+    to:   { parent: jQuery, index: 0 },
+
+    // resize and indent only: units, not pixels
+    from: 6,
+    to: 7,
+
+    // a pane inside a container
+    container: jQuery,
+
+    // popup-orphan only
+    missing: 'ge-popup-3-a91',   // the id the trigger pointed at
+}
+```
+
+`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.
+
+`kind: 'content'` appears when a content area itself is dragged between
+columns. The kinds for containers are the container's own type, so a listener
+can tell a tabs container from an accordion without reading the markup.
+
+
+Canceling, and what it can honestly do
+--------------------------------------
+
+`preventDefault()` on either event, or returning `false` from the callback,
+cancels a `before-*`. What that means depends on the operation:
+
+- **Add.** Nothing is inserted and no `after-*` fires. A `create*` method
+  returns `null` instead of the node, so a host can tell.
+- **Delete.** The node is left alone. This is how a host replaces the built-in
+  question with a dialog of its own: cancel the event, ask in your own way, and
+  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`.
+- **Indent.** Nothing is written.
+
+`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
+a click-drag that goes nowhere is not reported as an operation.
+
+
+Ordering
+--------
+
+1. `before-*`, the specific name and then the generic one, then the matching
+   callbacks — any of them may cancel
+2. the DOM change
+3. `init()`, so drawers and sortables exist for the new markup
+4. `after-*`, in the same order
+
+An `after-*` handler therefore sees a canvas that is ready to be edited.
+
+
+Calling back into the editor
+----------------------------
+
+A handler may call the editor. `init`, `reset` and the `create*` methods called
+from inside a handler are queued and run when the operation that called them
+has finished, rather than rebuilding the canvas underneath it:
+
+```javascript
+$('#myGrid').on('grideditor:after-add-row', function(e, payload) {
+    // runs after this add has finished, not in the middle of it
+    $('#myGrid').gridEditor('createRow', [6, 6], { appendTo: payload.canvas });
+});
+```
+
+A `create*` called this way returns the node it made, but cannot say yet
+whether its own `before-add` will be canceled.