@themarioga/grid-editor 8.3.0 → 8.5.0

package/dist/grideditor.js

@@ -393,8 +393,10 @@
       // '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,
@@ -445,6 +447,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);
@@ -573,6 +579,10 @@
       // 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": [],
@@ -640,6 +650,10 @@
     var toolbarLifetime = null;
     var closeOverflowMenu = function() {
     };
+    var refitToolbar = function() {
+    };
+    var addButtons = [];
+    var toolbarGroup = null;
     var warnedHere = {};
     var sortables = [];
     var instanceId = ++editorCounter;
@@ -1036,6 +1050,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);
@@ -1059,6 +1074,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) {
@@ -1090,6 +1109,7 @@
         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) {
@@ -1116,6 +1136,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">';
@@ -1147,6 +1168,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) {
@@ -1156,6 +1178,7 @@
             endItems.push(button);
           } else {
             addContainerGroup.appendChild(button);
+            addButtons.push({ button, home: addContainerGroup, group: toolbarGroupOf(item.group) || name });
           }
         });
       });
@@ -1209,11 +1232,82 @@
           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();
@@ -1221,6 +1315,8 @@
       toolbarLifetime = null;
       closeOverflowMenu = function() {
       };
+      refitToolbar = function() {
+      };
       mainControls.remove();
     }
     function createOverflowMenu(start) {
@@ -1229,12 +1325,9 @@
       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");
@@ -1261,6 +1354,7 @@
       closeOverflowMenu = function() {
         openOverflow(false);
       };
+      refitToolbar = fit;
       fit();
       if (window.ResizeObserver) {
         var pending = false;
@@ -1288,6 +1382,7 @@
         toggle2.setAttribute("aria-expanded", open ? "true" : "false");
       }
       function fit() {
+        var homes = shownAddButtons();
         homes.forEach(function(entry) {
           entry.home.appendChild(entry.button);
         });
@@ -1298,7 +1393,8 @@
         }
         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);
         }
       }
     }
@@ -1328,6 +1424,9 @@
           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);
@@ -1436,6 +1535,9 @@
     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")) {
@@ -2825,6 +2927,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 }));
@@ -4324,7 +4522,7 @@
   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",
@@ -4350,6 +4548,10 @@
       "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",