@themarioga/grid-editor 8.2.0 → 8.4.0

package/dist/grideditor.js

@@ -445,6 +445,10 @@
       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);
@@ -571,6 +575,12 @@
       // '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": [],
@@ -635,6 +645,13 @@
     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;
@@ -662,7 +679,7 @@
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
-      mainControls.remove();
+      removeMainControls();
       createMainControls();
       reset();
     }
@@ -1031,6 +1048,7 @@
       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);
@@ -1054,6 +1072,10 @@
             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) {
@@ -1079,7 +1101,14 @@
       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);
@@ -1105,6 +1134,7 @@
           }
         });
         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">';
@@ -1114,7 +1144,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(
@@ -1136,6 +1166,7 @@
           }, { 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) {
@@ -1145,6 +1176,7 @@
             endItems.push(button);
           } else {
             addContainerGroup.appendChild(button);
+            addButtons.push({ button, home: addContainerGroup, group: toolbarGroupOf(item.group) || name });
           }
         });
       });
@@ -1198,8 +1230,171 @@
           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) {
@@ -1274,6 +1469,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 +1951,7 @@
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
-      mainControls.remove();
+      removeMainControls();
       htmlTextArea.remove();
       lifetime.abort();
       instances.delete(canvas);
@@ -2722,6 +2918,102 @@
       }
       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 }));
@@ -4221,7 +4513,7 @@
   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",
@@ -4246,6 +4538,10 @@
       "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",