@themarioga/grid-editor 8.2.0 → 8.4.0

package/dist/grideditor.css

@@ -2,6 +2,13 @@
   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
+       floating them puts them. */
 }
 .ge-mainControls .ge-wrapper {
   padding-top: 5px;
@@ -45,6 +52,84 @@
 .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;
+}
+.ge-mainControls .ge-wrapper.ge-toolbar-menu > .pull-right {
+  float: none;
+}
+.ge-mainControls .ge-wrapper.ge-toolbar-menu > .ge-toolbar-end {
+  order: 1;
+}
+.ge-mainControls .ge-wrapper.ge-toolbar-menu > .btn-group.pull-right {
+  order: 2;
+}
+.ge-mainControls .ge-wrapper.ge-toolbar-menu > .ge-layout-mode {
+  order: 3;
+}
+.ge-mainControls .ge-toolbar-start {
+  display: flex;
+  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;
+  position: relative;
+  flex: none;
+  margin: 0 5px 0 4px;
+}
+.ge-mainControls .ge-toolbar-more.ge-needed {
+  display: block;
+}
+.ge-mainControls .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, 0.15);
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+  /* Wrapped onto several lines, a group's buttons stand apart */
+}
+.ge-mainControls .ge-toolbar-overflow > .btn-group {
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0;
+}
+.ge-mainControls .ge-toolbar-overflow > .btn-group:empty {
+  display: none;
+}
+.ge-mainControls .ge-toolbar-overflow > .btn-group > .btn.btn {
+  margin-left: 0;
+  border-radius: 4px;
+}
+.ge-mainControls .ge-toolbar-more.ge-open > .ge-toolbar-overflow {
+  display: flex;
+}
 .ge-mainControls .ge-toolbar-end {
   margin-right: 5px;
 }
@@ -899,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

@@ -107,6 +107,12 @@ 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';
+    /** 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. */

package/dist/grideditor.esm.js

@@ -444,6 +444,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);
@@ -570,6 +574,12 @@ function build(instance, baseElem, optionsOrMethod) {
     // '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": [],
@@ -634,6 +644,13 @@ function build(instance, baseElem, optionsOrMethod) {
   var sourceOpen = false;
   var dropMarker = null;
   var activeTarget = null;
+  var toolbarLifetime = null;
+  var closeOverflowMenu = function() {
+  };
+  var refitToolbar = function() {
+  };
+  var addButtons = [];
+  var toolbarGroup = null;
   var warnedHere = {};
   var sortables = [];
   var instanceId = ++editorCounter;
@@ -661,7 +678,7 @@ function build(instance, baseElem, optionsOrMethod) {
     removeConfirmModal();
     removeSettingsPanels();
     removeDialog();
-    mainControls.remove();
+    removeMainControls();
     createMainControls();
     reset();
   }
@@ -1030,6 +1047,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);
@@ -1053,6 +1071,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) {
@@ -1078,7 +1100,14 @@ function build(instance, baseElem, optionsOrMethod) {
     mainControls = element("div", { "class": "ge-mainControls" });
     htmlTextArea.parentNode.insertBefore(mainControls, htmlTextArea);
     wrapper = mainControls.appendChild(element("div", { "class": "ge-wrapper ge-top" }));
-    addRowGroup = wrapper.appendChild(element("div", { "class": "ge-addRowGroup btn-group" }));
+    var overflowMenu = settings.toolbar_overflow !== "wrap";
+    var start = wrapper;
+    if (overflowMenu) {
+      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) {
       var grouped = !Array.isArray(layout);
@@ -1104,6 +1133,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">';
@@ -1113,7 +1143,7 @@ function build(instance, baseElem, optionsOrMethod) {
       icon += "</div>";
       btn.appendChild(create(icon));
     });
-    wrapper.appendChild(addContainerGroup);
+    start.appendChild(addContainerGroup);
     Object.keys(CONTAINERS).forEach(function(type) {
       var definition = CONTAINERS[type];
       var button = labelButton(
@@ -1135,6 +1165,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) {
@@ -1144,6 +1175,7 @@ function build(instance, baseElem, optionsOrMethod) {
           endItems.push(button);
         } else {
           addContainerGroup.appendChild(button);
+          addButtons.push({ button, home: addContainerGroup, group: toolbarGroupOf(item.group) || name });
         }
       });
     });
@@ -1197,8 +1229,171 @@ 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" }
+  ];
+  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();
+    }
+    toolbarLifetime = null;
+    closeOverflowMenu = function() {
+    };
+    refitToolbar = function() {
+    };
+    mainControls.remove();
+  }
+  function createOverflowMenu(start) {
+    var more = 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 toggle2 = one(more, "button");
+    var panel = one(more, ".ge-toolbar-overflow");
+    var spares = all(panel, ".btn-group");
+    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");
+    var menuLifetime = toolbarLifetime = new AbortController();
+    var signal = { signal: menuLifetime.signal };
+    toggle2.addEventListener("click", function() {
+      openOverflow(!hasClass(more, "ge-open"));
+    });
+    panel.addEventListener("click", function(e) {
+      if (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);
+    };
+    refitToolbar = fit;
+    fit();
+    if (window.ResizeObserver) {
+      var pending = false;
+      var observer = new window.ResizeObserver(function() {
+        if (pending) {
+          return;
+        }
+        pending = true;
+        window.requestAnimationFrame(function() {
+          pending = false;
+          if (!menuLifetime.signal.aborted) {
+            fit();
+          }
+        });
+      });
+      observer.observe(wrapper);
+      observer.observe(start);
+      menuLifetime.signal.addEventListener("abort", function() {
+        observer.disconnect();
+      });
+    }
+    function openOverflow(open) {
+      open = open && hasClass(more, "ge-needed");
+      toggleClass(more, "ge-open", open);
+      toggle2.setAttribute("aria-expanded", open ? "true" : "false");
+    }
+    function fit() {
+      var homes = shownAddButtons();
+      homes.forEach(function(entry) {
+        entry.home.appendChild(entry.button);
+      });
+      removeClass(more, "ge-needed");
+      if (start.scrollWidth <= start.clientWidth) {
+        openOverflow(false);
+        return;
+      }
+      addClass(more, "ge-needed");
+      for (var i = homes.length - 1; i >= 0 && start.scrollWidth > start.clientWidth; i--) {
+        var into = spareOf(homes[i].home);
+        into.insertBefore(homes[i].button, into.firstChild);
+      }
+    }
+  }
   function labelButton(button, label, iconClass) {
     button.setAttribute("title", label);
     if (iconClass) {
@@ -1273,6 +1468,7 @@ function build(instance, baseElem, optionsOrMethod) {
         }
         helper = addClass(button.cloneNode(true), "ge-toolbar-helper");
         document.body.appendChild(helper);
+        closeOverflowMenu();
         addClass(canvas, "ge-dropping");
       }
       css(helper, { left: move.pageX - 14, top: move.pageY - 14 });
@@ -1754,7 +1950,7 @@ function build(instance, baseElem, optionsOrMethod) {
     removeConfirmModal();
     removeSettingsPanels();
     removeDialog();
-    mainControls.remove();
+    removeMainControls();
     htmlTextArea.remove();
     lifetime.abort();
     instances.delete(canvas);
@@ -2721,6 +2917,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 }));
@@ -4220,7 +4512,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.2.0";
+GridEditor.version = false ? "dev" : "8.4.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4245,6 +4537,10 @@ GridEditor.locales = {
     "tool.indent_increase": "Increase indent\n(hold shift for max)",
     "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",