@themarioga/grid-editor 8.0.0 → 8.2.0

package/docs/events.md

@@ -89,6 +89,7 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `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 |
+| `grideditor:target-change` | — | no | with `active_target`, after the column or section the toolbar adds to changes, only if it actually changed |
 | `grideditor:after-copy` | — | no | with the clipboard plugin, after a node is copied |
 
 Two things here are not in the 3.0 specification's catalogue. The indent pair,
@@ -160,6 +161,12 @@ 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`.
 
+`target-change` carries no node either: its payload is `canvas`, `target` - the
+column or section the toolbar adds to now, or `null` for the end of the canvas
+- and `from`, the one before. What a toolbar button then adds fires its add
+events as any click does, with `source: 'tool'` (or `'paste'`) and the target,
+or the canvas for a section, as the `parent`.
+
 `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, and `paste` is a node

package/docs/locale-keys.md

@@ -329,6 +329,7 @@ The inline-style plugin's accordion, in a node's settings panel or in the dialog
 | `inline_style.shadow_color` | Color | A part of the shadow builder |
 | `inline_style.shadow_inset` | Inset | The shadow builder's inset checkbox |
 | `inline_style.shadow_text_mode` | Edit as text | Link under the shadow builder that edits the value as text |
+| `inline_style.shadow_builder_mode` | Edit with the builder | Link under a shadow edited as text that goes back to the builder, when the value is one shadow or none |
 | `inline_style.prop_width` | Width | Label of the `width` field |
 | `inline_style.prop_height` | Height | Label of the `height` field |
 | `inline_style.prop_min_width` | Min width | Label of the `min-width` field |

package/package.json

@@ -33,7 +33,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "8.0.0",
+  "version": "8.2.0",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.jquery.js

@@ -67,6 +67,8 @@ function install() {
         setLocale:        {},
         getUtility:       { value: true },
         setUtility:       { value: true },
+        getActiveTarget:  { value: true },
+        setActiveTarget:  {},
     };
 
     /** The *_tools settings, whose handlers 6.x bound with jQuery. */

package/src/js/grideditor.js

@@ -35,6 +35,8 @@ var METHODS = {
     setLocale:        {},
     getUtility:       { value: true },
     setUtility:       { value: true },
+    getActiveTarget:  { value: true },
+    setActiveTarget:  {},
 };
 
 /**
@@ -142,10 +144,14 @@ var NESTED_SETTINGS = {
         auto: false, // Treat every child of a content area as an element
     },
     resize: {
-        enabled: true,
+        enabled: true, // The handle on the column's edge
+        tools: true, // The narrower and wider tools in the column's drawer
         handles: 'e', // Which edges carry a handle: 'e', 'w', or 'e, w'
         balance: 'next', // 'next' takes the units out of the following column
     },
+    indent: {
+        tools: true, // The indent tools in the column's drawer
+    },
     drag: {
         delay: 0, // Milliseconds to hold before a drag starts
         touch_delay: 100, // The same for touch, where 0 eats the page's scrolling
@@ -360,6 +366,7 @@ 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
+            '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
@@ -380,6 +387,7 @@ function build(instance, baseElem, optionsOrMethod) {
             'layout_modes'      : VIEW_KEYS.slice(), // Which views the dropdown offers
             'default_view'      : ALL_VIEW,
             'resize'            : NESTED_SETTINGS.resize, // Resizing a column by dragging its edge
+            'indent'            : NESTED_SETTINGS.indent, // Indenting a column, offset-*
             'source_textarea'   : '',
             'edit_source'       : true, // The toolbar's button to edit the canvas as html
             'locale'            : 'en', // Code of a locale in GridEditor.locales
@@ -411,6 +419,7 @@ 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 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
@@ -974,6 +983,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);
+            }
         }
 
         /**
@@ -1014,6 +1052,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() {
@@ -1050,6 +1090,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({}));
@@ -1179,6 +1221,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
@@ -1334,7 +1378,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;
@@ -1355,7 +1399,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`. */
@@ -1391,9 +1435,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';
@@ -1413,7 +1457,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 } else {
                     where.region.appendChild(placed);
                 }
-            }, { parent: where.region, source: 'dragdrop' });
+            }, { parent: where.region, source: source || 'dragdrop' });
         }
 
         /**
@@ -1705,6 +1749,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);
@@ -1727,6 +1773,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
@@ -1754,12 +1833,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');
@@ -1821,6 +1909,7 @@ 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();
@@ -2973,30 +3062,34 @@ function build(instance, baseElem, optionsOrMethod) {
 
                 createMoveTool(drawer);
 
-                createTool(drawer, t('tool.column_narrower'), 'ge-decrease-col-width', 'bi bi-dash-lg', function(e) {
-                    resizeColumn(col, e.shiftKey
-                        ? smallest(settings.valid_col_sizes)
-                        : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
-                        'tool');
-                });
+                if (settings.resize.tools !== false) {
+                    createTool(drawer, t('tool.column_narrower'), 'ge-decrease-col-width', 'bi bi-dash-lg', function(e) {
+                        resizeColumn(col, e.shiftKey
+                            ? smallest(settings.valid_col_sizes)
+                            : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
+                            'tool');
+                    });
 
-                createTool(drawer, t('tool.column_wider'), 'ge-increase-col-width', 'bi bi-plus-lg', function(e) {
-                    resizeColumn(col, e.shiftKey
-                        ? widestFor(col)
-                        : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
-                        'tool');
-                });
+                    createTool(drawer, t('tool.column_wider'), 'ge-increase-col-width', 'bi bi-plus-lg', function(e) {
+                        resizeColumn(col, e.shiftKey
+                            ? widestFor(col)
+                            : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
+                            'tool');
+                    });
+                }
 
-                createTool(drawer, t('tool.indent_decrease'), 'ge-decrease-col-offset', 'bi bi-text-indent-right', function(e) {
-                    indentColumn(col, e.shiftKey
-                        ? smallest(settings.valid_col_offsets)
-                        : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
-                        'tool');
-                });
+                if (settings.indent.tools !== false) {
+                    createTool(drawer, t('tool.indent_decrease'), 'ge-decrease-col-offset', 'bi bi-text-indent-right', function(e) {
+                        indentColumn(col, e.shiftKey
+                            ? smallest(settings.valid_col_offsets)
+                            : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
+                            'tool');
+                    });
 
-                createTool(drawer, t('tool.indent_increase'), 'ge-increase-col-offset', 'bi bi-text-indent-left', function(e) {
-                    indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), 'tool');
-                });
+                    createTool(drawer, t('tool.indent_increase'), 'ge-increase-col-offset', 'bi bi-text-indent-left', function(e) {
+                        indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), 'tool');
+                    });
+                }
 
                 addSettingsTool(drawer, col, settings.col_classes);
 
@@ -5141,6 +5234,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,
@@ -5171,6 +5281,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) {

package/src/js/inline-style/fields.js

@@ -276,6 +276,16 @@ function shadowControl(ge, node, property, changed) {
             }
             writeValue(input.value, input);
         });
+
+        // Back to the builder, when it can hold the value: one shadow, or none
+        if (parseShadow(value, box)) {
+            var toBuilder = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-inline-style-shadow-mode' }, ge.t('inline_style.shadow_builder_mode')));
+            toBuilder.addEventListener('click', function(e) {
+                e.preventDefault();
+                textMode = false;
+                render();
+            });
+        }
     }
 
     var shown = null; // The value the builder or the text was last built for

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

@@ -210,6 +210,7 @@ GridEditor.locales.es = {
     'inline_style.shadow_color': 'Color',
     'inline_style.shadow_inset': 'Interior',
     'inline_style.shadow_text_mode': 'Editar como texto',
+    'inline_style.shadow_builder_mode': 'Editar con el constructor',
     'inline_style.prop_width': 'Ancho',
     'inline_style.prop_height': 'Alto',
     'inline_style.prop_min_width': 'Ancho mínimo',

package/src/js/plugins/grideditor.inline-style.js

@@ -59,6 +59,7 @@ Object.assign(GridEditor.locales.en, {
     'inline_style.shadow_color': 'Color',
     'inline_style.shadow_inset': 'Inset',
     'inline_style.shadow_text_mode': 'Edit as text',
+    'inline_style.shadow_builder_mode': 'Edit with the builder',
     'inline_style.prop_width': 'Width',
     'inline_style.prop_height': 'Height',
     'inline_style.prop_min_width': 'Min width',

package/src/less/grideditor.less

@@ -516,6 +516,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,8 @@ export interface GridEditorOptions {
     text_tools?: HostTool[];
     drag_handle?: 'tool' | 'drawer';
     toolbar_drag?: 'auto' | 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. */
     plugins?: string[] | null;
     /** The text editors offered, in order. */
@@ -124,7 +126,10 @@ export interface GridEditorOptions {
     add_column?: { size?: ColumnSize | null; picker?: boolean; delay?: number };
     layout_modes?: View[];
     default_view?: View;
-    resize?: { enabled?: boolean; handles?: string; balance?: 'next' | false };
+    /** enabled is the handle on the column's edge, tools the narrower and wider tools in its drawer. */
+    resize?: { enabled?: boolean; tools?: boolean; handles?: string; balance?: 'next' | false };
+    /** tools is the indent tools in a column's drawer. */
+    indent?: { tools?: boolean };
     /** A textarea whose html the canvas starts with. */
     source_textarea?: Target | '';
     edit_source?: boolean;
@@ -215,6 +220,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;
@@ -252,6 +264,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. */
@@ -340,6 +353,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;