@themarioga/grid-editor 8.2.0 → 8.3.0

package/dist/grideditor.css

@@ -2,6 +2,10 @@
   position: relative;
   min-height: 22px;
   margin-bottom: 10px;
+  /* 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 +49,69 @@
 .ge-mainControls .ge-layout-mode {
   margin-left: 5px;
 }
+.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;
+}
+.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;
 }

package/dist/grideditor.d.ts

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

package/dist/grideditor.esm.js

@@ -570,6 +570,8 @@ 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
     "active_target": false,
     // A click in a column makes it where the toolbar's buttons add
     "element_tools": [],
@@ -634,6 +636,9 @@ function build(instance, baseElem, optionsOrMethod) {
   var sourceOpen = false;
   var dropMarker = null;
   var activeTarget = null;
+  var toolbarLifetime = null;
+  var closeOverflowMenu = function() {
+  };
   var warnedHere = {};
   var sortables = [];
   var instanceId = ++editorCounter;
@@ -661,7 +666,7 @@ function build(instance, baseElem, optionsOrMethod) {
     removeConfirmModal();
     removeSettingsPanels();
     removeDialog();
-    mainControls.remove();
+    removeMainControls();
     createMainControls();
     reset();
   }
@@ -1078,7 +1083,13 @@ 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" }));
+    }
+    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);
@@ -1113,7 +1124,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(
@@ -1197,8 +1208,99 @@ function build(instance, baseElem, optionsOrMethod) {
         end.appendChild(button);
       });
     }
+    if (overflowMenu) {
+      createOverflowMenu(start);
+    }
     makeToolbarDraggable();
   }
+  function removeMainControls() {
+    if (toolbarLifetime) {
+      toolbarLifetime.abort();
+    }
+    toolbarLifetime = null;
+    closeOverflowMenu = 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");
+    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] });
+      });
+    });
+    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);
+    };
+    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() {
+      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--) {
+        homes[i].spare.insertBefore(homes[i].button, homes[i].spare.firstChild);
+      }
+    }
+  }
   function labelButton(button, label, iconClass) {
     button.setAttribute("title", label);
     if (iconClass) {
@@ -1273,6 +1375,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 +1857,7 @@ function build(instance, baseElem, optionsOrMethod) {
     removeConfirmModal();
     removeSettingsPanels();
     removeDialog();
-    mainControls.remove();
+    removeMainControls();
     htmlTextArea.remove();
     lifetime.abort();
     instances.delete(canvas);
@@ -4220,7 +4323,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.3.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4245,6 +4348,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/dist/grideditor.js

@@ -571,6 +571,8 @@
       // '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": [],
@@ -635,6 +637,9 @@
     var sourceOpen = false;
     var dropMarker = null;
     var activeTarget = null;
+    var toolbarLifetime = null;
+    var closeOverflowMenu = function() {
+    };
     var warnedHere = {};
     var sortables = [];
     var instanceId = ++editorCounter;
@@ -662,7 +667,7 @@
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
-      mainControls.remove();
+      removeMainControls();
       createMainControls();
       reset();
     }
@@ -1079,7 +1084,13 @@
       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" }));
+      }
+      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);
@@ -1114,7 +1125,7 @@
         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(
@@ -1198,8 +1209,99 @@
           end.appendChild(button);
         });
       }
+      if (overflowMenu) {
+        createOverflowMenu(start);
+      }
       makeToolbarDraggable();
     }
+    function removeMainControls() {
+      if (toolbarLifetime) {
+        toolbarLifetime.abort();
+      }
+      toolbarLifetime = null;
+      closeOverflowMenu = 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");
+      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] });
+        });
+      });
+      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);
+      };
+      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() {
+        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--) {
+          homes[i].spare.insertBefore(homes[i].button, homes[i].spare.firstChild);
+        }
+      }
+    }
     function labelButton(button, label, iconClass) {
       button.setAttribute("title", label);
       if (iconClass) {
@@ -1274,6 +1376,7 @@
           }
           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 });
@@ -1755,7 +1858,7 @@
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
-      mainControls.remove();
+      removeMainControls();
       htmlTextArea.remove();
       lifetime.abort();
       instances.delete(canvas);
@@ -4221,7 +4324,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "8.2.0";
+  GridEditor.version = false ? "dev" : "8.3.0";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",
@@ -4246,6 +4349,7 @@
       "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",