@themarioga/grid-editor 8.3.0 → 8.4.0

package/src/js/grideditor.js

@@ -198,6 +198,15 @@ function translate(settings, key, params) {
     });
 }
 
+/** Whether some locale has a string for the key, asked without the warning a missing one gets. */
+function hasString(settings, key) {
+    var locales = GridEditor.locales;
+
+    return (settings.locale_strings || {})[key] !== undefined ||
+        (locales[settings.locale] || {})[key] !== undefined ||
+        locales.en[key] !== undefined;
+}
+
 function warn(message) {
     if (window.console && window.console.warn) {
         window.console.warn('grid-editor: ' + message);
@@ -367,6 +376,8 @@ function build(instance, baseElem, optionsOrMethod) {
             'drag_handle'       : 'tool', // 'tool' for the move tool, 'drawer' for the whole drawer
             'toolbar_drag'      : 'auto', // Drag the toolbar's buttons onto the canvas. 'auto' follows drag_handle
             'toolbar_overflow'  : 'menu', // What doesn't fit on one line: 'menu' behind a button, 'wrap' onto another line
+            'drawer_overflow'   : 'menu', // The same for the drawers' tools: 'menu' behind a button, 'wrap' onto another line
+            'toolbar_groups'    : false, // The add buttons in categories, one shown at a time, picked with tabs
             'active_target'     : false, // A click in a column makes it where the toolbar's buttons add
             'element_tools'     : [], // Host tools on element drawers, same shape as row_tools
             'element_classes'   : [], // Preset class toggles on an element's settings panel
@@ -423,6 +434,9 @@ function build(instance, baseElem, optionsOrMethod) {
         var activeTarget = null; // The column or region the toolbar adds to, with active_target
         var toolbarLifetime = null; // Aborted when the toolbar is rebuilt or taken away
         var closeOverflowMenu = function() {}; // Folds the toolbar's overflow menu away, when it has one
+        var refitToolbar = function() {}; // Works out again what the toolbar's overflow menu holds, when it has one
+        var addButtons = []; // The toolbar's add buttons, in toolbar order: { button, home, group }
+        var toolbarGroup = null; // The category shown, with toolbar_groups. Kept when the toolbar is rebuilt
         var warnedHere = {}; // Some warnings are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
         var instanceId = ++editorCounter; // Scopes the sortable groups to this editor
@@ -972,6 +986,7 @@ function build(instance, baseElem, optionsOrMethod) {
             canvas.parentNode.insertBefore(htmlTextArea, canvas);
 
             createMainControls();
+            watchDrawers();
 
             var signal = { signal: lifetime.signal };
 
@@ -1003,6 +1018,16 @@ function build(instance, baseElem, optionsOrMethod) {
                     if (!dom.hasClass(canvas, 'ge-editing')) { return; }
                     if (from && Math.abs(e.clientX - from.x) + Math.abs(e.clientY - from.y) > settings.drag.threshold) { return; }
                     var region = dom.closest(e.target, targetSelector());
+
+                    // The target's own background, or its drawer's, clicked
+                    // again takes it back. What is in it - a text, a tool, a
+                    // nested column - keeps it, or makes that the target
+                    if (region && region === activeTarget &&
+                        (e.target === region || e.target === dom.child(region, '.ge-tools-drawer'))) {
+                        changeTarget(null);
+                        return;
+                    }
+
                     changeTarget(region && region !== canvas && canvas.contains(region) ? region : null);
                 }, signal);
 
@@ -1047,6 +1072,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 start = wrapper.appendChild(dom.element('div', { 'class': 'ge-toolbar-start' }));
             }
 
+            addButtons = [];
+
             // Add row
             addRowGroup = start.appendChild(dom.element('div', { 'class': 'ge-addRowGroup btn-group' }));
             addContainerGroup = dom.element('div', { 'class': 'ge-addContainerGroup btn-group ms-1' });
@@ -1077,6 +1104,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     }
                 });
                 addRowGroup.appendChild(btn);
+                addButtons.push({ button: btn, home: addRowGroup, group: 'rows' });
 
                 btn.appendChild(dom.create('<i class="bi bi-plus"></i>'));
 
@@ -1113,6 +1141,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     }, { parent: canvas, source: 'tool' });
                 });
                 addContainerGroup.appendChild(button);
+                addButtons.push({ button: button, home: addContainerGroup, group: toolbarGroupOf(definition.group) || 'content' });
             });
 
             // A feature plugin's own buttons, beside the containers': what
@@ -1128,6 +1157,8 @@ function build(instance, baseElem, optionsOrMethod) {
                         endItems.push(button);
                     } else {
                         addContainerGroup.appendChild(button);
+                        // One that names no category of its own has its plugin's
+                        addButtons.push({ button: button, home: addContainerGroup, group: toolbarGroupOf(item.group) || name });
                     }
                 });
             });
@@ -1198,16 +1229,96 @@ function build(instance, baseElem, optionsOrMethod) {
                 endItems.forEach(function(button) { end.appendChild(button); });
             }
 
+            if (settings.toolbar_groups) { createGroupTabs(start); }
             if (overflowMenu) { createOverflowMenu(start); }
 
             makeToolbarDraggable();
         }
 
+        /** The core's categories, ahead of the plugins' own. */
+        var CORE_GROUPS = [
+            { name: 'rows', labelKey: 'group.rows' },
+            { name: 'content', labelKey: 'group.content' },
+        ];
+
+        /** A plugin's category, when it names one. */
+        function toolbarGroupOf(value) {
+            return typeof value === 'string' && value.trim() !== '' ? value : null;
+        }
+
+        /**
+         * toolbar_groups: tabs at the start of the toolbar, one per category
+         * of add buttons, and only the chosen one's buttons on it. The rest
+         * wait in a hidden stash inside the toolbar, so toolbarItems still
+         * finds them and the btn-groups round the corners of what shows. With
+         * a single category there is nothing to choose, and no tabs.
+         */
+        function createGroupTabs(start) {
+            // The core's two first, then the rest as their first button comes
+            var names = CORE_GROUPS.map(function(group) { return group.name; });
+            addButtons.forEach(function(entry) {
+                if (names.indexOf(entry.group) < 0) { names.push(entry.group); }
+            });
+            names = names.filter(function(name) {
+                return addButtons.some(function(entry) { return entry.group === name; });
+            });
+
+            if (names.length < 2) { return; }
+
+            var tabs = dom.element('div', { 'class': 'ge-toolbar-groups btn-group', role: 'tablist', 'aria-label': t('group.select') });
+            start.insertBefore(tabs, start.firstChild);
+            var stash = mainControls.appendChild(dom.element('div', { 'class': 'ge-toolbar-stash', hidden: 'hidden' }));
+
+            names.forEach(function(name) {
+                var tab = tabs.appendChild(dom.element('button', {
+                    type: 'button',
+                    'class': 'btn btn-sm btn-outline-primary',
+                    role: 'tab',
+                    'data-ge-group': name,
+                }, groupLabel(name)));
+
+                tab.addEventListener('click', function() { showGroup(name); });
+            });
+
+            showGroup(names.indexOf(toolbarGroup) >= 0 ? toolbarGroup : names[0]);
+
+            function showGroup(name) {
+                toolbarGroup = name;
+
+                addButtons.forEach(function(entry) {
+                    (entry.group === name ? entry.home : stash).appendChild(entry.button);
+                });
+
+                dom.children(tabs).forEach(function(tab) {
+                    var chosen = tab.getAttribute('data-ge-group') === name;
+                    dom.toggleClass(tab, 'active', chosen);
+                    tab.setAttribute('aria-selected', chosen ? 'true' : 'false');
+                });
+
+                refitToolbar();
+            }
+        }
+
+        /** A category's label: its group.<name> string, or its first button's when it has none. */
+        function groupLabel(name) {
+            var key = 'group.' + name;
+            if (hasString(settings, key)) { return t(key); }
+
+            var first = addButtons.filter(function(entry) { return entry.group === name; })[0];
+            return first.button.getAttribute('title') || name;
+        }
+
+        /** The add buttons on the toolbar's line: all of them, or the chosen category's. */
+        function shownAddButtons() {
+            return addButtons.filter(function(entry) { return !dom.closest(entry.button, '.ge-toolbar-stash'); });
+        }
+
         /** The toolbar off the page, with what keeps its overflow menu up to date. */
         function removeMainControls() {
             if (toolbarLifetime) { toolbarLifetime.abort(); }
             toolbarLifetime = null;
             closeOverflowMenu = function() {};
+            refitToolbar = function() {};
             mainControls.remove();
         }
 
@@ -1231,13 +1342,10 @@ function build(instance, baseElem, optionsOrMethod) {
             var toggle = dom.one(more, 'button');
             var panel = dom.one(more, '.ge-toolbar-overflow');
             var spares = dom.all(panel, '.btn-group');
-            // Every add button with the group it belongs in, in toolbar order
-            var homes = [];
-            [addRowGroup, addContainerGroup].forEach(function(group, index) {
-                Array.prototype.slice.call(group.children).forEach(function(button) {
-                    homes.push({ button: button, home: group, spare: spares[index] });
-                });
-            });
+            // The spare group in the menu for each group on the line
+            function spareOf(home) {
+                return home === addRowGroup ? spares[0] : spares[1];
+            }
 
             toggle.setAttribute('title', t('tool.more'));
             toggle.setAttribute('aria-haspopup', 'true');
@@ -1258,6 +1366,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 if (e.key === 'Escape') { openOverflow(false); }
             }, signal);
             closeOverflowMenu = function() { openOverflow(false); };
+            // A category chosen: another set of buttons to fit
+            refitToolbar = fit;
 
             fit();
 
@@ -1288,6 +1398,9 @@ function build(instance, baseElem, optionsOrMethod) {
 
             /** Back on the line, then the last ones off it until the rest fit. */
             function fit() {
+                // Only the chosen category's, with toolbar_groups: the others
+                // wait in their stash
+                var homes = shownAddButtons();
                 homes.forEach(function(entry) { entry.home.appendChild(entry.button); });
                 dom.removeClass(more, 'ge-needed');
 
@@ -1298,7 +1411,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
                 dom.addClass(more, 'ge-needed');
                 for (var i = homes.length - 1; i >= 0 && start.scrollWidth > start.clientWidth; i--) {
-                    homes[i].spare.insertBefore(homes[i].button, homes[i].spare.firstChild);
+                    var into = spareOf(homes[i].home);
+                    into.insertBefore(homes[i].button, into.firstChild);
                 }
             }
         }
@@ -3330,6 +3444,127 @@ function build(instance, baseElem, optionsOrMethod) {
             return createTool(drawer, t('tool.move'), 'ge-move', 'bi bi-arrows-move');
         }
 
+        /**
+         * The drawers that span their node - a row's, a column's, a
+         * container's, an element's, a section's - keep their tools to one
+         * line. The tools that don't fit are hidden from the end, and a more
+         * tool at the drawer's end unfolds it to show them all, wrapping as
+         * it would otherwise. They stay where they are, so whatever finds a
+         * tool in its drawer, or hangs a picker off it, still does.
+         *
+         * A text's drawer sits over the text, as wide as its tools, and a
+         * pane's sits by its label: neither is one of them.
+         */
+        var FITTED_DRAWERS = '.ge-tools-drawer:not(.ge-text-drawer):not(.ge-pane-drawer):not(.ge-code-inline)';
+
+        /**
+         * Fit every drawer as it comes onto the canvas, and again when it
+         * changes width or a tool is added to it, shown or hidden. Plugins
+         * add tools at their own moments, so this watches rather than
+         * waiting to be told.
+         */
+        function watchDrawers() {
+            if (settings.drawer_overflow === 'wrap' || !window.ResizeObserver || !window.MutationObserver) { return; }
+
+            var due = new Set();
+            var frame = null;
+
+            // Once a frame, after the layout: moving tools in the observers'
+            // callbacks would resize what they are watching
+            function schedule(drawer) {
+                due.add(drawer);
+                if (frame === null) { frame = window.requestAnimationFrame(flush); }
+            }
+
+            function flush() {
+                frame = null;
+                var drawers = Array.from(due);
+                due.clear();
+                drawers.forEach(function(drawer) {
+                    if (!drawer.isConnected) {
+                        drawerResizes.unobserve(drawer);
+                        return;
+                    }
+                    fitDrawer(drawer);
+                });
+            }
+
+            var drawerResizes = new window.ResizeObserver(function(entries) {
+                entries.forEach(function(entry) { schedule(entry.target); });
+            });
+
+            var mutations = new window.MutationObserver(function(records) {
+                records.forEach(function(record) {
+                    var target = record.target;
+
+                    // A tool shown or hidden
+                    if (record.type === 'attributes') {
+                        var parent = target.parentNode;
+                        if (parent && parent.nodeType === 1 && parent.matches(FITTED_DRAWERS)) { schedule(parent); }
+                        return;
+                    }
+
+                    // A tool added
+                    if (target.nodeType === 1 && target.matches(FITTED_DRAWERS)) {
+                        schedule(target);
+                        return;
+                    }
+
+                    record.addedNodes.forEach(function(node) {
+                        if (node.nodeType !== 1) { return; }
+                        dom.selfAndAll(node, FITTED_DRAWERS).forEach(function(drawer) {
+                            dom.addClass(drawer, 'ge-drawer-fit');
+                            drawerResizes.observe(drawer);
+                            schedule(drawer);
+                        });
+                    });
+                });
+            });
+            mutations.observe(canvas, { childList: true, subtree: true, attributes: true, attributeFilter: ['style'] });
+
+            lifetime.signal.addEventListener('abort', function() {
+                mutations.disconnect();
+                drawerResizes.disconnect();
+                if (frame !== null) { window.cancelAnimationFrame(frame); }
+            });
+        }
+
+        /** Hide the tools that don't fit on the drawer's line, from the end, behind its more tool. */
+        function fitDrawer(drawer) {
+            var tools = dom.children(drawer, 'a').filter(function(tool) { return !dom.hasClass(tool, 'ge-drawer-more'); });
+            var expanded = dom.hasClass(drawer, 'ge-drawer-expanded');
+
+            // Measured on one line, with every tool back on it
+            dom.removeClass(drawer, 'ge-drawer-overflow ge-drawer-expanded');
+            tools.forEach(function(tool) { dom.removeClass(tool, 'ge-tool-overflow'); });
+
+            if (!drawerOverflows(drawer, tools)) { return; }
+
+            dom.addClass(drawer, 'ge-drawer-overflow');
+            if (!dom.child(drawer, '.ge-drawer-more')) {
+                createTool(drawer, t('tool.more'), 'ge-drawer-more', 'bi bi-three-dots', function() {
+                    dom.toggleClass(drawer, 'ge-drawer-expanded');
+                });
+            }
+
+            for (var i = tools.length - 1; i >= 0 && drawerOverflows(drawer, tools); i--) {
+                dom.addClass(tools[i], 'ge-tool-overflow');
+            }
+
+            dom.toggleClass(drawer, 'ge-drawer-expanded', expanded);
+        }
+
+        function drawerOverflows(drawer, tools) {
+            var style = window.getComputedStyle(drawer);
+            var limit = drawer.getBoundingClientRect().right -
+                parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+
+            return tools.some(function(tool) {
+                var rects = tool.getClientRects();
+                return rects.length > 0 && rects[0].right > limit + 0.5;
+            });
+        }
+
         /**
          * A tool in a drawer: a link with an icon, and what it does. The
          * handlers are a click handler, or { eventName: handler }; each gets
@@ -5533,6 +5768,9 @@ GridEditor.locales = {
         'tool.edit_source': 'Edit Source Code',
         'tool.preview': 'Preview',
         'tool.more': 'More',
+        'group.rows': 'Rows',
+        'group.content': 'Content',
+        'group.select': 'Add',
         'panel.title': '{kind} settings',
         'panel.close': 'Close',
         'panel.done': 'Done',

package/src/js/locales/grideditor.es.js

@@ -52,6 +52,9 @@ GridEditor.locales.es = {
     'tool.edit_source': 'Editar el código fuente',
     'tool.preview': 'Vista previa',
     'tool.more': 'Más',
+    'group.rows': 'Filas',
+    'group.content': 'Contenido',
+    'group.select': 'Añadir',
     'panel.title': 'Ajustes: {kind}',
     'panel.close': 'Cerrar',
     'panel.done': 'Hecho',

package/src/js/plugins/grideditor.sections.js

@@ -192,6 +192,7 @@ GridEditor.features.sections = function(ge) {
         toolbar: [{
             labelKey: 'section.add',
             kind: 'section',
+            group: 'content',
             create: function() { return createSection(); },
         }],
 

package/src/js/text/grideditor.text.js

@@ -321,6 +321,7 @@ if (!GridEditor.features.text) {
                     iconClass: TEXTS[type].iconClass,
                     className: 'ge-add-text-button',
                     kind: 'text',
+                    group: 'content',
                     inColumn: true,
                     create: function() { return makeText(type); },
                 };

package/src/less/grideditor.less

@@ -67,6 +67,18 @@
         margin-left: 5px;
     }
 
+    /* toolbar_groups: the tabs choosing which category of add buttons
+       shows, at the start of the line. Never squeezed, and never behind the
+       more button */
+    .ge-toolbar-groups {
+        flex: none;
+        margin-right: 8px;
+
+        > .btn {
+            white-space: nowrap;
+        }
+    }
+
     /* toolbar_overflow: 'menu'. The add buttons keep to one line, and the
        ones that don't fit go behind a button at its end. The right-hand
        buttons come before in the markup, so they are ordered back to how
@@ -94,6 +106,15 @@
         flex: 1 1 auto;
         min-width: 0;
         overflow: hidden;
+
+        /* A group as wide as its buttons and a button as wide as its label:
+           squeezed, they would wrap their labels rather than overflow */
+        > .btn-group {
+            flex: none;
+        }
+        .btn {
+            white-space: nowrap;
+        }
     }
 
     .ge-toolbar-more {
@@ -1114,6 +1135,43 @@
     }
 }
 
+/* drawer_overflow: 'menu'. A drawer keeps its tools to one line; the ones
+   that don't fit are hidden behind a more tool at its end, which unfolds it
+   to show them all */
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit {
+    white-space: nowrap;
+
+    > .ge-details {
+        white-space: normal;
+    }
+    > a.ge-tool-overflow,
+    > a.ge-drawer-more {
+        display: none;
+    }
+
+    &.ge-drawer-overflow {
+        padding-right: 26px;
+
+        > a.ge-drawer-more {
+            display: inline-block;
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+    }
+
+    &.ge-drawer-expanded {
+        white-space: normal;
+
+        > a.ge-tool-overflow {
+            display: inline-block;
+        }
+        > a.ge-drawer-more {
+            background: rgba(0, 0, 0, 0.08);
+        }
+    }
+}
+
 /* The handle belongs to editing, and never to the output */
 .ge-canvas:not(.ge-editing) .ge-resize-handle {
     display: none;

package/types/grideditor.d.ts

@@ -109,6 +109,10 @@ export interface GridEditorOptions {
     toolbar_drag?: 'auto' | boolean;
     /** The add buttons that don't fit on the toolbar's line: behind a more button, or onto another line. Default 'menu'. */
     toolbar_overflow?: 'menu' | 'wrap';
+    /** The drawers' tools that don't fit on one line: behind a more tool, or onto more lines. Default 'menu'. */
+    drawer_overflow?: 'menu' | 'wrap';
+    /** The add buttons in categories - rows, content, and a plugin's own - one shown at a time, chosen with tabs. Default false. */
+    toolbar_groups?: boolean;
     /** A click in a column or a section makes it where the toolbar's buttons add. Default false. */
     active_target?: boolean;
     /** The plugins to use, of any kind; null is every one loaded. */