@themarioga/grid-editor 8.1.0 → 8.3.0

package/dist/grideditor.js

@@ -326,7 +326,9 @@
     addAccordionItem: { value: true },
     setLocale: {},
     getUtility: { value: true },
-    setUtility: { value: true }
+    setUtility: { value: true },
+    getActiveTarget: { value: true },
+    setActiveTarget: {}
   };
   var PLACEMENTS = ["appendTo", "prependTo", "insertAfter", "insertBefore"];
   var BREAKPOINTS = [
@@ -569,6 +571,10 @@
       // '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": [],
       // Host tools on element drawers, same shape as row_tools
       "element_classes": [],
@@ -630,6 +636,10 @@
     var sizePicker = null;
     var sourceOpen = false;
     var dropMarker = null;
+    var activeTarget = null;
+    var toolbarLifetime = null;
+    var closeOverflowMenu = function() {
+    };
     var warnedHere = {};
     var sortables = [];
     var instanceId = ++editorCounter;
@@ -657,7 +667,7 @@
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
-      mainControls.remove();
+      removeMainControls();
       createMainControls();
       reset();
     }
@@ -1034,6 +1044,34 @@
           e.preventDefault();
         }
       }, signal);
+      if (settings.active_target) {
+        var pressed = null;
+        canvas.addEventListener("pointerdown", function(e) {
+          pressed = { x: e.clientX, y: e.clientY };
+        }, signal);
+        canvas.addEventListener("click", function(e) {
+          var from = pressed;
+          pressed = null;
+          if (!hasClass(canvas, "ge-editing")) {
+            return;
+          }
+          if (from && Math.abs(e.clientX - from.x) + Math.abs(e.clientY - from.y) > settings.drag.threshold) {
+            return;
+          }
+          var region = closest(e.target, targetSelector());
+          changeTarget(region && region !== canvas && canvas.contains(region) ? region : null);
+        }, signal);
+        document.addEventListener("keydown", function(e) {
+          if (e.key !== "Escape" || !activeTarget || openSettingsState || dialogState) {
+            return;
+          }
+          var focus = document.activeElement;
+          if (focus && (is(focus, "input, textarea, select") || focus.isContentEditable)) {
+            return;
+          }
+          changeTarget(null);
+        }, signal);
+      }
     }
     function textReady(block) {
       if (!is(block, ".ge-content") || !canvas.contains(block)) {
@@ -1046,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);
@@ -1059,6 +1103,10 @@
           "data-ge-layout": grouped ? JSON.stringify(layout) : layout.join(",")
         });
         btn.addEventListener("click", function() {
+          if (activeTarget) {
+            addToTarget(btn, "tool");
+            return;
+          }
           var row = rowFromLayoutValue(layout);
           var added = addNode("row", row, function() {
             canvas.appendChild(row);
@@ -1077,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(
@@ -1087,6 +1135,10 @@
         );
         attr(button, { "data-ge-toolbar": "container", "data-ge-container-type": type });
         button.addEventListener("click", function() {
+          if (activeTarget) {
+            addToTarget(button, "tool");
+            return;
+          }
           var row = createRow();
           var column = row.appendChild(createColumn(MAX_COL_SIZE));
           var container = column.appendChild(definition.create({}));
@@ -1157,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) {
@@ -1180,6 +1323,10 @@
         "data-ge-item": index
       });
       button.addEventListener("click", function() {
+        if (activeTarget) {
+          addToTarget(button, item.source || "tool");
+          return;
+        }
         var made = item.create();
         var placed = item.inColumn ? inRowOfItsOwn(made) : made;
         var added = addNode(item.kind, made, function() {
@@ -1229,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 });
@@ -1285,7 +1433,7 @@
       });
       return { region, before };
     }
-    function insertFeatureFromToolbar(button, where) {
+    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();
       var placed = made;
@@ -1304,7 +1452,7 @@
         } else {
           where.region.appendChild(placed);
         }
-      }, { parent: where.region, source: item.source || "dragdrop" });
+      }, { parent: where.region, source: item.source || source || "dragdrop" });
     }
     function inRowOfItsOwn(node) {
       var row = createRow();
@@ -1331,9 +1479,9 @@
         dropMarker.remove();
       }
     }
-    function insertFromToolbar(button, where) {
+    function insertFromToolbar(button, where, source) {
       if (button.getAttribute("data-ge-toolbar") === "feature") {
-        return insertFeatureFromToolbar(button, where);
+        return insertFeatureFromToolbar(button, where, source);
       }
       var container = button.getAttribute("data-ge-toolbar") === "container";
       var type = button.getAttribute("data-ge-container-type");
@@ -1348,7 +1496,7 @@
         } else {
           where.region.appendChild(placed);
         }
-      }, { parent: where.region, source: "dragdrop" });
+      }, { parent: where.region, source: source || "dragdrop" });
     }
     function widthFamily() {
       var values = [];
@@ -1588,6 +1736,7 @@
     }
     function openSource() {
       deinit();
+      changeTarget(null);
       htmlTextArea.style.height = 0.8 * document.documentElement.clientHeight + "px";
       htmlTextArea.value = canvas.innerHTML;
       show(htmlTextArea);
@@ -1603,6 +1752,32 @@
       init();
       hide(htmlTextArea);
     }
+    function targetSelector() {
+      return [".column"].concat(pluginHooks("regions")).join(", ");
+    }
+    function isTarget(node) {
+      return !!node && node !== canvas && canvas.contains(node) && is(node, targetSelector());
+    }
+    function changeTarget(node) {
+      if (node === activeTarget) {
+        return;
+      }
+      var from = activeTarget;
+      if (from) {
+        removeClass(from, "ge-active-target");
+      }
+      activeTarget = node;
+      if (node && hasClass(canvas, "ge-editing")) {
+        addClass(node, "ge-active-target");
+      }
+      emit("target-change", { canvas, target: node, from });
+    }
+    function addToTarget(button, source) {
+      var made = insertFromToolbar(button, { region: activeTarget, before: null }, source);
+      if (made && made.scrollIntoView) {
+        made.scrollIntoView({ behavior: "smooth" });
+      }
+    }
     function init() {
       if (openSettingsState && !attached(openSettingsState.node)) {
         closeSettings();
@@ -1626,10 +1801,18 @@
       makeResizable();
       switchLayout(curView);
       refreshPreviews(canvas);
+      if (activeTarget && !canvas.contains(activeTarget)) {
+        changeTarget(null);
+      } else if (activeTarget) {
+        addClass(activeTarget, "ge-active-target");
+      }
     }
     function deinit() {
       closeSettings();
       removeClass(canvas, "ge-editing ge-drag-drawer ge-dropping");
+      if (activeTarget) {
+        removeClass(activeTarget, "ge-active-target");
+      }
       plugins("onBeforeDeinit");
       closeSizePicker();
       hideDropMarker();
@@ -1671,10 +1854,11 @@
         closeSource();
       }
       deinit();
+      activeTarget = null;
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
-      mainControls.remove();
+      removeMainControls();
       htmlTextArea.remove();
       lifetime.abort();
       instances.delete(canvas);
@@ -4047,6 +4231,23 @@
         return featureMethods[name].apply(null, arguments);
       };
     }
+    function apiSetActiveTarget(value) {
+      if (!settings.active_target) {
+        warnOnceHere("active_target", "setActiveTarget needs the active_target setting: without it, it does nothing");
+        return;
+      }
+      if (value === null || value === void 0) {
+        changeTarget(null);
+        return;
+      }
+      var node = nodeFrom(value);
+      if (!isTarget(node)) {
+        var named = typeof value === "string" ? value : node ? "<" + node.tagName.toLowerCase() + ">" : String(value);
+        warn("setActiveTarget: " + named + " is not a column or a region of the canvas");
+        return;
+      }
+      changeTarget(node);
+    }
     var own = {
       getHtml,
       getPlainHtml,
@@ -4080,7 +4281,11 @@
       },
       setLocale,
       getUtility,
-      setUtility
+      setUtility,
+      getActiveTarget: function() {
+        return settings.active_target ? activeTarget : null;
+      },
+      setActiveTarget: apiSetActiveTarget
     };
     Object.keys(own).forEach(function(name) {
       var value = !!(METHODS[name] && METHODS[name].value);
@@ -4119,7 +4324,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "8.1.0";
+  GridEditor.version = false ? "dev" : "8.3.0";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",
@@ -4144,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",