@themarioga/grid-editor 8.1.0 → 8.3.0

package/src/js/grideditor.js

@@ -35,6 +35,8 @@ var METHODS = {
     setLocale:        {},
     getUtility:       { value: true },
     setUtility:       { value: true },
+    getActiveTarget:  { value: true },
+    setActiveTarget:  {},
 };
 
 /**
@@ -364,6 +366,8 @@ function build(instance, baseElem, optionsOrMethod) {
             'row_tools'         : [],
             '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
+            '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
             // content_types, text_tools and text_classes are the text editor
@@ -416,6 +420,9 @@ function build(instance, baseElem, optionsOrMethod) {
         var sizePicker = null; // The open column size picker, if there is one
         var sourceOpen = false; // Whether the canvas is being edited as html
         var dropMarker = null; // The line showing where a dragged toolbar button would land
+        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 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
@@ -460,7 +467,7 @@ function build(instance, baseElem, optionsOrMethod) {
             removeConfirmModal();
             removeSettingsPanels();
             removeDialog();
-            mainControls.remove();
+            removeMainControls();
             createMainControls();
             reset();
         }
@@ -979,6 +986,35 @@ function build(instance, baseElem, optionsOrMethod) {
             dom.delegate(canvas, 'click', '.ge-popup-trigger, [data-ge-popup-target]', function(e) {
                 if (dom.hasClass(canvas, 'ge-editing')) { e.preventDefault(); }
             }, signal);
+
+            if (settings.active_target) {
+                // Whatever the click was for - a text, a tool - it also says
+                // where the toolbar adds next. A click on no column or region
+                // says nowhere, and the toolbar adds to the canvas again.
+                // The click a drag ends in - a resize, a move - is not one:
+                // it comes where the pointer let go, not where it pressed
+                var pressed = null;
+                canvas.addEventListener('pointerdown', function(e) {
+                    pressed = { x: e.clientX, y: e.clientY };
+                }, signal);
+                canvas.addEventListener('click', function(e) {
+                    var from = pressed;
+                    pressed = null;
+                    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());
+                    changeTarget(region && region !== canvas && canvas.contains(region) ? region : null);
+                }, signal);
+
+                // Escape is the panel's, the dialog's, and a field's or a
+                // text's while one has the focus; after those, it is this
+                document.addEventListener('keydown', function(e) {
+                    if (e.key !== 'Escape' || !activeTarget || openSettingsState || dialogState) { return; }
+                    var focus = document.activeElement;
+                    if (focus && (dom.is(focus, 'input, textarea, select') || focus.isContentEditable)) { return; }
+                    changeTarget(null);
+                }, signal);
+            }
         }
 
         /**
@@ -1002,8 +1038,17 @@ function build(instance, baseElem, optionsOrMethod) {
             htmlTextArea.parentNode.insertBefore(mainControls, htmlTextArea);
             wrapper = mainControls.appendChild(dom.element('div', { 'class': 'ge-wrapper ge-top' }));
 
+            // With the overflow menu, the add buttons stand in a line of
+            // their own that keeps to one line, beside the menu's button
+            var overflowMenu = settings.toolbar_overflow !== 'wrap';
+            var start = wrapper;
+            if (overflowMenu) {
+                dom.addClass(wrapper, 'ge-toolbar-menu');
+                start = wrapper.appendChild(dom.element('div', { 'class': 'ge-toolbar-start' }));
+            }
+
             // Add row
-            addRowGroup = wrapper.appendChild(dom.element('div', { 'class': 'ge-addRowGroup btn-group' }));
+            addRowGroup = start.appendChild(dom.element('div', { 'class': 'ge-addRowGroup btn-group' }));
             addContainerGroup = dom.element('div', { 'class': 'ge-addContainerGroup btn-group ms-1' });
             settings.new_row_layouts.forEach(function(layout) {
                 var grouped = !Array.isArray(layout);
@@ -1019,6 +1064,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 });
 
                 btn.addEventListener('click', function() {
+                    if (activeTarget) { addToTarget(btn, 'tool'); return; }
+
                     var row = rowFromLayoutValue(layout);
 
                     var added = addNode('row', row, function() {
@@ -1044,7 +1091,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 btn.appendChild(dom.create(icon));
             });
 
-            wrapper.appendChild(addContainerGroup);
+            start.appendChild(addContainerGroup);
 
             // A container starts in a row of its own, the way the add row
             // buttons next to these ones do
@@ -1055,6 +1102,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
                 dom.attr(button, { 'data-ge-toolbar': 'container', 'data-ge-container-type': type });
                 button.addEventListener('click', function() {
+                    if (activeTarget) { addToTarget(button, 'tool'); return; }
+
                     var row = createRow();
                     var column = row.appendChild(createColumn(MAX_COL_SIZE));
                     var container = column.appendChild(definition.create({}));
@@ -1149,9 +1198,111 @@ function build(instance, baseElem, optionsOrMethod) {
                 endItems.forEach(function(button) { end.appendChild(button); });
             }
 
+            if (overflowMenu) { createOverflowMenu(start); }
+
             makeToolbarDraggable();
         }
 
+        /** The toolbar off the page, with what keeps its overflow menu up to date. */
+        function removeMainControls() {
+            if (toolbarLifetime) { toolbarLifetime.abort(); }
+            toolbarLifetime = null;
+            closeOverflowMenu = function() {};
+            mainControls.remove();
+        }
+
+        /**
+         * The add buttons that don't fit on the toolbar's line, behind a
+         * button at its end. They are the same buttons, moved rather than
+         * copied, so a click, a drag or a plugin finding them with
+         * toolbarItems works as it does on the line. Which ones go is worked
+         * out again whenever the toolbar or what is on it changes size.
+         */
+        function createOverflowMenu(start) {
+            var more = dom.create('<div class="ge-toolbar-more">' +
+                '<button type="button" class="btn btn-sm btn-primary"><i class="bi bi-three-dots"></i></button>' +
+                '<div class="ge-toolbar-overflow">' +
+                    '<div class="ge-addRowGroup btn-group"></div>' +
+                    '<div class="ge-addContainerGroup btn-group"></div>' +
+                '</div>' +
+            '</div>');
+            start.parentNode.insertBefore(more, start.nextSibling);
+
+            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] });
+                });
+            });
+
+            toggle.setAttribute('title', t('tool.more'));
+            toggle.setAttribute('aria-haspopup', 'true');
+            toggle.setAttribute('aria-expanded', 'false');
+
+            var menuLifetime = toolbarLifetime = new AbortController();
+            var signal = { signal: menuLifetime.signal };
+
+            toggle.addEventListener('click', function() { openOverflow(!dom.hasClass(more, 'ge-open')); });
+            // A button in the menu has done its job once it is clicked
+            panel.addEventListener('click', function(e) {
+                if (dom.closest(e.target, '[data-ge-toolbar]')) { openOverflow(false); }
+            });
+            document.addEventListener('pointerdown', function(e) {
+                if (!more.contains(e.target)) { openOverflow(false); }
+            }, signal);
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') { openOverflow(false); }
+            }, signal);
+            closeOverflowMenu = function() { openOverflow(false); };
+
+            fit();
+
+            if (window.ResizeObserver) {
+                // Not in the callback itself: moving buttons there would
+                // resize what is being observed before the frame is drawn
+                var pending = false;
+                var observer = new window.ResizeObserver(function() {
+                    if (pending) { return; }
+                    pending = true;
+                    window.requestAnimationFrame(function() {
+                        pending = false;
+                        if (!menuLifetime.signal.aborted) { fit(); }
+                    });
+                });
+                // The toolbar's width, and the buttons on the right of it
+                // showing and hiding, as the paste button does
+                observer.observe(wrapper);
+                observer.observe(start);
+                menuLifetime.signal.addEventListener('abort', function() { observer.disconnect(); });
+            }
+
+            function openOverflow(open) {
+                open = open && dom.hasClass(more, 'ge-needed');
+                dom.toggleClass(more, 'ge-open', open);
+                toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+            }
+
+            /** Back on the line, then the last ones off it until the rest fit. */
+            function fit() {
+                homes.forEach(function(entry) { entry.home.appendChild(entry.button); });
+                dom.removeClass(more, 'ge-needed');
+
+                if (start.scrollWidth <= start.clientWidth) {
+                    openOverflow(false);
+                    return;
+                }
+
+                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);
+                }
+            }
+        }
+
         /**
          * A toolbar button's face: the plugin's icon alone when it has one,
          * with its label as the title, or a plus and the label otherwise.
@@ -1184,6 +1335,8 @@ function build(instance, baseElem, optionsOrMethod) {
                 'data-ge-item': index,
             });
             button.addEventListener('click', function() {
+                if (activeTarget) { addToTarget(button, item.source || 'tool'); return; }
+
                 var made = item.create();
 
                 // One that belongs in a column brings a row and a column
@@ -1259,6 +1412,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
                     helper = dom.addClass(button.cloneNode(true), 'ge-toolbar-helper');
                     document.body.appendChild(helper);
+                    // The menu a button came from would hide where it lands
+                    closeOverflowMenu();
                     dom.addClass(canvas, 'ge-dropping');
                 }
 
@@ -1339,7 +1494,7 @@ function build(instance, baseElem, optionsOrMethod) {
          * not have what it makes - a section dropped on a column - gives way
          * to the canvas, just after the top level block the pointer was in.
          */
-        function insertFeatureFromToolbar(button, where) {
+        function insertFeatureFromToolbar(button, where, source) {
             var item = FEATURES[button.getAttribute('data-ge-feature')].toolbar[parseInt(button.getAttribute('data-ge-item'), 10)];
             var made = item.create();
             var placed = made;
@@ -1360,7 +1515,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 } else {
                     where.region.appendChild(placed);
                 }
-            }, { parent: where.region, source: item.source || 'dragdrop' });
+            }, { parent: where.region, source: item.source || source || 'dragdrop' });
         }
 
         /** A detached row with one full width column holding `node`. */
@@ -1396,9 +1551,9 @@ function build(instance, baseElem, optionsOrMethod) {
          * The row or container a toolbar button stands for, made and put where
          * the pointer left it.
          */
-        function insertFromToolbar(button, where) {
+        function insertFromToolbar(button, where, source) {
             if (button.getAttribute('data-ge-toolbar') === 'feature') {
-                return insertFeatureFromToolbar(button, where);
+                return insertFeatureFromToolbar(button, where, source);
             }
 
             var container = button.getAttribute('data-ge-toolbar') === 'container';
@@ -1418,7 +1573,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 } else {
                     where.region.appendChild(placed);
                 }
-            }, { parent: where.region, source: 'dragdrop' });
+            }, { parent: where.region, source: source || 'dragdrop' });
         }
 
         /**
@@ -1710,6 +1865,8 @@ function build(instance, baseElem, optionsOrMethod) {
          */
         function openSource() {
             deinit();
+            // The canvas is made again from the html when it comes back
+            changeTarget(null);
             htmlTextArea.style.height = (0.8 * document.documentElement.clientHeight) + 'px';
             htmlTextArea.value = canvas.innerHTML;
             dom.show(htmlTextArea);
@@ -1732,6 +1889,39 @@ function build(instance, baseElem, optionsOrMethod) {
             dom.hide(htmlTextArea);
         }
 
+        /**
+         * What can be the active target: a column, or a plugin's region - a
+         * section. Not the canvas, which is where the toolbar adds without one.
+         */
+        function targetSelector() {
+            return ['.column'].concat(pluginHooks('regions')).join(', ');
+        }
+
+        function isTarget(node) {
+            return !!node && node !== canvas && canvas.contains(node) && dom.is(node, targetSelector());
+        }
+
+        /** The one way the active target changes, told only when it does. */
+        function changeTarget(node) {
+            if (node === activeTarget) { return; }
+
+            var from = activeTarget;
+            if (from) { dom.removeClass(from, 'ge-active-target'); }
+            activeTarget = node;
+            if (node && dom.hasClass(canvas, 'ge-editing')) { dom.addClass(node, 'ge-active-target'); }
+
+            emit('target-change', { canvas: canvas, target: node, from: from });
+        }
+
+        /**
+         * A toolbar button's click with an active target: what it makes goes
+         * where a drop at the target's end would put it.
+         */
+        function addToTarget(button, source) {
+            var made = insertFromToolbar(button, { region: activeTarget, before: null }, source);
+            if (made && made.scrollIntoView) { made.scrollIntoView({ behavior: 'smooth' }); }
+        }
+
         function init() {
             // The node whose settings were open is gone - deleted, say - and
             // its panel with it
@@ -1759,12 +1949,21 @@ function build(instance, baseElem, optionsOrMethod) {
             makeResizable();
             switchLayout(curView);
             refreshPreviews(canvas);
+
+            // Deleted, or taken out some other way, it is a target no more
+            if (activeTarget && !canvas.contains(activeTarget)) {
+                changeTarget(null);
+            } else if (activeTarget) {
+                dom.addClass(activeTarget, 'ge-active-target');
+            }
         }
 
         function deinit() {
             // Its panel goes home to its drawer first, and both go together
             closeSettings();
             dom.removeClass(canvas, 'ge-editing ge-drag-drawer ge-dropping');
+            // The mark goes, the target stays: getHtml comes straight back
+            if (activeTarget) { dom.removeClass(activeTarget, 'ge-active-target'); }
             // Before the drawers and the text blocks come off: an editor
             // plugin closes its editors here, and finds them where it left them
             plugins('onBeforeDeinit');
@@ -1826,10 +2025,11 @@ function build(instance, baseElem, optionsOrMethod) {
             // The html being edited is what the canvas is left with
             if (sourceOpen) { closeSource(); }
             deinit();
+            activeTarget = null;
             removeConfirmModal();
             removeSettingsPanels();
             removeDialog();
-            mainControls.remove();
+            removeMainControls();
             htmlTextArea.remove();
             lifetime.abort();
             instances.delete(canvas);
@@ -5150,6 +5350,23 @@ function build(instance, baseElem, optionsOrMethod) {
          * finishes before the canvas is rebuilt. The ones that do something,
          * rather than answer something, hand back the instance, to chain.
          */
+        function apiSetActiveTarget(value) {
+            if (!settings.active_target) {
+                warnOnceHere('active_target', 'setActiveTarget needs the active_target setting: without it, it does nothing');
+                return;
+            }
+            if (value === null || value === undefined) { changeTarget(null); return; }
+
+            var node = nodeFrom(value);
+            if (!isTarget(node)) {
+                var named = typeof value === 'string' ? value : (node ? '<' + node.tagName.toLowerCase() + '>' : String(value));
+                warn('setActiveTarget: ' + named + ' is not a column or a region of the canvas');
+                return;
+            }
+
+            changeTarget(node);
+        }
+
         var own = {
             getHtml: getHtml,
             getPlainHtml: getPlainHtml,
@@ -5180,6 +5397,8 @@ function build(instance, baseElem, optionsOrMethod) {
             setLocale: setLocale,
             getUtility: getUtility,
             setUtility: setUtility,
+            getActiveTarget: function() { return settings.active_target ? activeTarget : null; },
+            setActiveTarget: apiSetActiveTarget,
         };
 
         Object.keys(own).forEach(function(name) {
@@ -5313,6 +5532,7 @@ GridEditor.locales = {
         'tool.indent_increase': 'Increase indent\n(hold shift for max)',
         'tool.edit_source': 'Edit Source Code',
         'tool.preview': 'Preview',
+        'tool.more': 'More',
         'panel.title': '{kind} settings',
         'panel.close': 'Close',
         'panel.done': 'Done',

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

@@ -51,6 +51,7 @@ GridEditor.locales.es = {
     'tool.indent_increase': 'Aumentar sangría\n(Mayús para el máximo)',
     'tool.edit_source': 'Editar el código fuente',
     'tool.preview': 'Vista previa',
+    'tool.more': 'Más',
     'panel.title': 'Ajustes: {kind}',
     'panel.close': 'Cerrar',
     'panel.done': 'Hecho',

package/src/less/grideditor.less

@@ -67,6 +67,82 @@
         margin-left: 5px;
     }
 
+    /* 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
+       floating them puts them. */
+    .ge-wrapper.ge-toolbar-menu {
+        display: flex;
+        align-items: flex-start;
+
+        > .pull-right {
+            float: none;
+        }
+        > .ge-toolbar-end {
+            order: 1;
+        }
+        > .btn-group.pull-right {
+            order: 2;
+        }
+        > .ge-layout-mode {
+            order: 3;
+        }
+    }
+
+    .ge-toolbar-start {
+        display: flex;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+    }
+
+    .ge-toolbar-more {
+        display: none;
+        position: relative;
+        flex: none;
+        margin: 0 5px 0 4px;
+
+        &.ge-needed {
+            display: block;
+        }
+    }
+
+    .ge-toolbar-overflow {
+        display: none;
+        position: absolute;
+        z-index: 30;
+        top: ~"calc(100% + 4px)";
+        right: 0;
+        flex-direction: column;
+        gap: 6px;
+        width: max-content;
+        max-width: ~"min(420px, calc(100vw - 32px))";
+        padding: 6px;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, .15);
+        border-radius: 6px;
+        box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
+
+        > .btn-group {
+            flex-wrap: wrap;
+            gap: 4px;
+            margin: 0;
+
+            &:empty {
+                display: none;
+            }
+        }
+        /* Wrapped onto several lines, a group's buttons stand apart */
+        > .btn-group > .btn.btn {
+            margin-left: 0;
+            border-radius: 4px;
+        }
+    }
+
+    .ge-toolbar-more.ge-open > .ge-toolbar-overflow {
+        display: flex;
+    }
+
     .ge-toolbar-end {
         margin-right: 5px;
 
@@ -516,6 +592,16 @@
     outline-offset: 1px;
 }
 
+/* Where the toolbar's buttons add, with active_target. A node that is both
+   shows both: this one a little further out */
+.ge-canvas.ge-editing .ge-active-target {
+    outline: 2px dashed var(--bs-success, #198754);
+    outline-offset: -2px;
+}
+.ge-canvas.ge-editing .ge-active-target.ge-settings-target {
+    box-shadow: 0 0 0 4px var(--bs-success, #198754);
+}
+
 /* While editing */
 .ge-canvas.ge-editing {
     

package/types/grideditor.d.ts

@@ -107,6 +107,10 @@ export interface GridEditorOptions {
     text_tools?: HostTool[];
     drag_handle?: 'tool' | 'drawer';
     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';
+    /** 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. */
     plugins?: string[] | null;
     /** The text editors offered, in order. */
@@ -218,6 +222,13 @@ export interface ViewChangePayload {
     to: View;
 }
 
+/** The active target changed: the column or region the toolbar adds to, or null for the canvas. */
+export interface TargetChangePayload {
+    canvas: HTMLElement;
+    target: HTMLElement | null;
+    from: HTMLElement | null;
+}
+
 /** The events, by name, with their payloads. Adding fires a specific name and the generic one. */
 export interface GridEditorEventMap {
     'grideditor:before-add': Payload;
@@ -255,6 +266,7 @@ export interface GridEditorEventMap {
     'grideditor:after-copy': Payload;
     'grideditor:popup-orphan': PopupOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
+    'grideditor:target-change': TargetChangePayload;
 }
 
 /** An event the editor dispatches on its canvas: a CustomEvent whose detail is the payload. */
@@ -343,6 +355,10 @@ export declare class GridEditor {
     /** Take the editor off: the markup stays, everything else goes. */
     destroy(): this;
     changeView(view: View): this;
+    /** The column or region the toolbar adds to, or null. Null without active_target. */
+    getActiveTarget(): HTMLElement | null;
+    /** Make a column or region, or the first a selector matches, where the toolbar adds; null for none. */
+    setActiveTarget(target: HTMLElement | string | null): this;
     getView(): View;
     setLocale(code: string): this;
     createRow(layout?: RowLayout, options?: Placement): HTMLElement | null;