@themarioga/grid-editor 8.3.0 → 8.5.0

package/dist/grideditor.css

@@ -2,6 +2,9 @@
   position: relative;
   min-height: 22px;
   margin-bottom: 10px;
+  /* 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 */
   /* 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
@@ -49,6 +52,13 @@
 .ge-mainControls .ge-layout-mode {
   margin-left: 5px;
 }
+.ge-mainControls .ge-toolbar-groups {
+  flex: none;
+  margin-right: 8px;
+}
+.ge-mainControls .ge-toolbar-groups > .btn {
+  white-space: nowrap;
+}
 .ge-mainControls .ge-wrapper.ge-toolbar-menu {
   display: flex;
   align-items: flex-start;
@@ -70,6 +80,14 @@
   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 */
+}
+.ge-mainControls .ge-toolbar-start > .btn-group {
+  flex: none;
+}
+.ge-mainControls .ge-toolbar-start .btn {
+  white-space: nowrap;
 }
 .ge-mainControls .ge-toolbar-more {
   display: none;
@@ -966,6 +984,37 @@
 .ge-canvas.ge-editing .column.ge-resizing > .ge-tools-drawer > .ge-resize-size {
   display: block;
 }
+/* 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-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit > .ge-details {
+  white-space: normal;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit > a.ge-tool-overflow,
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit > a.ge-drawer-more {
+  display: none;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit.ge-drawer-overflow {
+  padding-right: 26px;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit.ge-drawer-overflow > a.ge-drawer-more {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit.ge-drawer-expanded {
+  white-space: normal;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit.ge-drawer-expanded > a.ge-tool-overflow {
+  display: inline-block;
+}
+.ge-canvas.ge-editing .ge-tools-drawer.ge-drawer-fit.ge-drawer-expanded > 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/dist/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. */
@@ -121,7 +125,7 @@ export interface GridEditorOptions {
     inline_style?: InlineStyleOptions;
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
-    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
+    elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean; types?: ElementType[] };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];
     valid_col_offsets?: number[];
@@ -282,6 +286,22 @@ export type GridEditorCallbacks = {
 };
 
 /** A plugin's factory: called once per editor with the handle in docs/plugins.md. */
+/** An element the toolbar offers, from elements.types. */
+export interface ElementType {
+    /** What it is: its data-ge-element. */
+    type: string;
+    /** Its markup: html, or a function called for each one made that returns html or a node. */
+    html: string | (() => string | Node);
+    /** Its button's label, as it is. */
+    label?: string;
+    /** Its button's label, a locale key: wins over label, and follows setLocale. */
+    labelKey?: string;
+    /** The button shows this icon alone, with the label as its title. */
+    iconClass?: string;
+    /** Its toolbar_groups category. Default 'elements'. */
+    group?: string;
+}
+
 export type PluginFactory = ((ge: any) => Record<string, unknown>) & { always?: boolean };
 
 export interface CreateColumnOptions extends Placement {

package/dist/grideditor.esm.js

@@ -392,8 +392,10 @@ var NESTED_SETTINGS = {
     // 'auto' turns them on when the page has any
     selector: "[data-ge-element]",
     // What the host marks an element with
-    auto: false
+    auto: false,
     // Treat every child of a content area as an element
+    types: []
+    // The elements the toolbar offers: { type, html, label | labelKey, iconClass, group }
   },
   resize: {
     enabled: true,
@@ -444,6 +446,10 @@ function translate(settings, key, params) {
     return params && params[name] !== void 0 ? params[name] : placeholder;
   });
 }
+function hasString(settings, key) {
+  var locales = GridEditor.locales;
+  return (settings.locale_strings || {})[key] !== void 0 || (locales[settings.locale] || {})[key] !== void 0 || locales.en[key] !== void 0;
+}
 function warn(message) {
   if (window.console && window.console.warn) {
     window.console.warn("grid-editor: " + message);
@@ -572,6 +578,10 @@ function build(instance, baseElem, optionsOrMethod) {
     // 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": [],
@@ -639,6 +649,10 @@ function build(instance, baseElem, optionsOrMethod) {
   var toolbarLifetime = null;
   var closeOverflowMenu = function() {
   };
+  var refitToolbar = function() {
+  };
+  var addButtons = [];
+  var toolbarGroup = null;
   var warnedHere = {};
   var sortables = [];
   var instanceId = ++editorCounter;
@@ -1035,6 +1049,7 @@ function build(instance, baseElem, optionsOrMethod) {
     htmlTextArea = element("textarea", { "class": "ge-html-output" });
     canvas.parentNode.insertBefore(htmlTextArea, canvas);
     createMainControls();
+    watchDrawers();
     var signal = { signal: lifetime.signal };
     window.addEventListener("scroll", onScroll, signal);
     delegate(canvas, "click", ".ge-content", onContentClick, signal);
@@ -1058,6 +1073,10 @@ function build(instance, baseElem, optionsOrMethod) {
           return;
         }
         var region = closest(e.target, targetSelector());
+        if (region && region === activeTarget && (e.target === region || e.target === child(region, ".ge-tools-drawer"))) {
+          changeTarget(null);
+          return;
+        }
         changeTarget(region && region !== canvas && canvas.contains(region) ? region : null);
       }, signal);
       document.addEventListener("keydown", function(e) {
@@ -1089,6 +1108,7 @@ function build(instance, baseElem, optionsOrMethod) {
       addClass(wrapper, "ge-toolbar-menu");
       start = wrapper.appendChild(element("div", { "class": "ge-toolbar-start" }));
     }
+    addButtons = [];
     addRowGroup = start.appendChild(element("div", { "class": "ge-addRowGroup btn-group" }));
     addContainerGroup = element("div", { "class": "ge-addContainerGroup btn-group ms-1" });
     settings.new_row_layouts.forEach(function(layout) {
@@ -1115,6 +1135,7 @@ function build(instance, baseElem, optionsOrMethod) {
         }
       });
       addRowGroup.appendChild(btn);
+      addButtons.push({ button: btn, home: addRowGroup, group: "rows" });
       btn.appendChild(create('<i class="bi bi-plus"></i>'));
       var sizes = grouped ? rowColsIcon(layout) : layout;
       var icon = '<div class="row ge-row-icon">';
@@ -1146,6 +1167,7 @@ function build(instance, baseElem, optionsOrMethod) {
         }, { parent: canvas, source: "tool" });
       });
       addContainerGroup.appendChild(button);
+      addButtons.push({ button, home: addContainerGroup, group: toolbarGroupOf(definition.group) || "content" });
     });
     var endItems = [];
     Object.keys(FEATURES).forEach(function(name) {
@@ -1155,6 +1177,7 @@ function build(instance, baseElem, optionsOrMethod) {
           endItems.push(button);
         } else {
           addContainerGroup.appendChild(button);
+          addButtons.push({ button, home: addContainerGroup, group: toolbarGroupOf(item.group) || name });
         }
       });
     });
@@ -1208,11 +1231,82 @@ function build(instance, baseElem, optionsOrMethod) {
         end.appendChild(button);
       });
     }
+    if (settings.toolbar_groups) {
+      createGroupTabs(start);
+    }
     if (overflowMenu) {
       createOverflowMenu(start);
     }
     makeToolbarDraggable();
   }
+  var CORE_GROUPS = [
+    { name: "rows", labelKey: "group.rows" },
+    { name: "content", labelKey: "group.content" },
+    { name: "elements", labelKey: "group.elements" }
+  ];
+  function toolbarGroupOf(value) {
+    return typeof value === "string" && value.trim() !== "" ? value : null;
+  }
+  function createGroupTabs(start) {
+    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 = element("div", { "class": "ge-toolbar-groups btn-group", role: "tablist", "aria-label": t("group.select") });
+    start.insertBefore(tabs, start.firstChild);
+    var stash = mainControls.appendChild(element("div", { "class": "ge-toolbar-stash", hidden: "hidden" }));
+    names.forEach(function(name) {
+      var tab = tabs.appendChild(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);
+      });
+      children(tabs).forEach(function(tab) {
+        var chosen = tab.getAttribute("data-ge-group") === name;
+        toggleClass(tab, "active", chosen);
+        tab.setAttribute("aria-selected", chosen ? "true" : "false");
+      });
+      refitToolbar();
+    }
+  }
+  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;
+  }
+  function shownAddButtons() {
+    return addButtons.filter(function(entry) {
+      return !closest(entry.button, ".ge-toolbar-stash");
+    });
+  }
   function removeMainControls() {
     if (toolbarLifetime) {
       toolbarLifetime.abort();
@@ -1220,6 +1314,8 @@ function build(instance, baseElem, optionsOrMethod) {
     toolbarLifetime = null;
     closeOverflowMenu = function() {
     };
+    refitToolbar = function() {
+    };
     mainControls.remove();
   }
   function createOverflowMenu(start) {
@@ -1228,12 +1324,9 @@ function build(instance, baseElem, optionsOrMethod) {
     var toggle2 = one(more, "button");
     var panel = one(more, ".ge-toolbar-overflow");
     var spares = all(panel, ".btn-group");
-    var homes = [];
-    [addRowGroup, addContainerGroup].forEach(function(group, index) {
-      Array.prototype.slice.call(group.children).forEach(function(button) {
-        homes.push({ button, home: group, spare: spares[index] });
-      });
-    });
+    function spareOf(home) {
+      return home === addRowGroup ? spares[0] : spares[1];
+    }
     toggle2.setAttribute("title", t("tool.more"));
     toggle2.setAttribute("aria-haspopup", "true");
     toggle2.setAttribute("aria-expanded", "false");
@@ -1260,6 +1353,7 @@ function build(instance, baseElem, optionsOrMethod) {
     closeOverflowMenu = function() {
       openOverflow(false);
     };
+    refitToolbar = fit;
     fit();
     if (window.ResizeObserver) {
       var pending = false;
@@ -1287,6 +1381,7 @@ function build(instance, baseElem, optionsOrMethod) {
       toggle2.setAttribute("aria-expanded", open ? "true" : "false");
     }
     function fit() {
+      var homes = shownAddButtons();
       homes.forEach(function(entry) {
         entry.home.appendChild(entry.button);
       });
@@ -1297,7 +1392,8 @@ function build(instance, baseElem, optionsOrMethod) {
       }
       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);
       }
     }
   }
@@ -1327,6 +1423,9 @@ function build(instance, baseElem, optionsOrMethod) {
         return;
       }
       var made = item.create();
+      if (!made) {
+        return;
+      }
       var placed = item.inColumn ? inRowOfItsOwn(made) : made;
       var added = addNode(item.kind, made, function() {
         canvas.appendChild(placed);
@@ -1435,6 +1534,9 @@ function build(instance, baseElem, optionsOrMethod) {
   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();
+    if (!made) {
+      return null;
+    }
     var placed = made;
     if (item.inColumn) {
       if (!is(where.region, ".column")) {
@@ -2824,6 +2926,102 @@ function build(instance, baseElem, optionsOrMethod) {
     }
     return createTool(drawer, t("tool.move"), "ge-move", "bi bi-arrows-move");
   }
+  var FITTED_DRAWERS = ".ge-tools-drawer:not(.ge-text-drawer):not(.ge-pane-drawer):not(.ge-code-inline)";
+  function watchDrawers() {
+    if (settings.drawer_overflow === "wrap" || !window.ResizeObserver || !window.MutationObserver) {
+      return;
+    }
+    var due = /* @__PURE__ */ new Set();
+    var frame = null;
+    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;
+        if (record.type === "attributes") {
+          var parent = target.parentNode;
+          if (parent && parent.nodeType === 1 && parent.matches(FITTED_DRAWERS)) {
+            schedule(parent);
+          }
+          return;
+        }
+        if (target.nodeType === 1 && target.matches(FITTED_DRAWERS)) {
+          schedule(target);
+          return;
+        }
+        record.addedNodes.forEach(function(node) {
+          if (node.nodeType !== 1) {
+            return;
+          }
+          selfAndAll(node, FITTED_DRAWERS).forEach(function(drawer) {
+            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);
+      }
+    });
+  }
+  function fitDrawer(drawer) {
+    var tools = children(drawer, "a").filter(function(tool) {
+      return !hasClass(tool, "ge-drawer-more");
+    });
+    var expanded = hasClass(drawer, "ge-drawer-expanded");
+    removeClass(drawer, "ge-drawer-overflow ge-drawer-expanded");
+    tools.forEach(function(tool) {
+      removeClass(tool, "ge-tool-overflow");
+    });
+    if (!drawerOverflows(drawer, tools)) {
+      return;
+    }
+    addClass(drawer, "ge-drawer-overflow");
+    if (!child(drawer, ".ge-drawer-more")) {
+      createTool(drawer, t("tool.more"), "ge-drawer-more", "bi bi-three-dots", function() {
+        toggleClass(drawer, "ge-drawer-expanded");
+      });
+    }
+    for (var i = tools.length - 1; i >= 0 && drawerOverflows(drawer, tools); i--) {
+      addClass(tools[i], "ge-tool-overflow");
+    }
+    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;
+    });
+  }
   function createTool(drawer, title, className, iconClass, eventHandlers) {
     var tool = element("a", { title, "class": className });
     tool.appendChild(element("i", { "class": iconClass }));
@@ -4323,7 +4521,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.3.0";
+GridEditor.version = false ? "dev" : "8.5.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4349,6 +4547,10 @@ GridEditor.locales = {
     "tool.edit_source": "Edit Source Code",
     "tool.preview": "Preview",
     "tool.more": "More",
+    "group.rows": "Rows",
+    "group.content": "Content",
+    "group.elements": "Elements",
+    "group.select": "Add",
     "panel.title": "{kind} settings",
     "panel.close": "Close",
     "panel.done": "Done",