@themarioga/grid-editor 8.0.0 → 8.2.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 = [
@@ -396,11 +398,18 @@
     },
     resize: {
       enabled: true,
+      // The handle on the column's edge
+      tools: true,
+      // The narrower and wider tools in the column's drawer
       handles: "e",
       // Which edges carry a handle: 'e', 'w', or 'e, w'
       balance: "next"
       // 'next' takes the units out of the following column
     },
+    indent: {
+      tools: true
+      // The indent tools in the column's drawer
+    },
     drag: {
       delay: 0,
       // Milliseconds to hold before a drag starts
@@ -562,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
+      "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": [],
@@ -596,6 +607,8 @@
       "default_view": ALL_VIEW,
       "resize": NESTED_SETTINGS.resize,
       // Resizing a column by dragging its edge
+      "indent": NESTED_SETTINGS.indent,
+      // Indenting a column, offset-*
       "source_textarea": "",
       "edit_source": true,
       // The toolbar's button to edit the canvas as html
@@ -621,6 +634,7 @@
     var sizePicker = null;
     var sourceOpen = false;
     var dropMarker = null;
+    var activeTarget = null;
     var warnedHere = {};
     var sortables = [];
     var instanceId = ++editorCounter;
@@ -1025,6 +1039,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)) {
@@ -1050,6 +1092,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);
@@ -1078,6 +1124,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({}));
@@ -1171,6 +1221,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() {
@@ -1276,7 +1330,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;
@@ -1295,7 +1349,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();
@@ -1322,9 +1376,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");
@@ -1339,7 +1393,7 @@
         } else {
           where.region.appendChild(placed);
         }
-      }, { parent: where.region, source: "dragdrop" });
+      }, { parent: where.region, source: source || "dragdrop" });
     }
     function widthFamily() {
       var values = [];
@@ -1579,6 +1633,7 @@
     }
     function openSource() {
       deinit();
+      changeTarget(null);
       htmlTextArea.style.height = 0.8 * document.documentElement.clientHeight + "px";
       htmlTextArea.value = canvas.innerHTML;
       show(htmlTextArea);
@@ -1594,6 +1649,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();
@@ -1617,10 +1698,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();
@@ -1662,6 +1751,7 @@
         closeSource();
       }
       deinit();
+      activeTarget = null;
       removeConfirmModal();
       removeSettingsPanels();
       removeDialog();
@@ -2530,30 +2620,34 @@
         }
         var drawer = prependDrawer(col, "ge-tools-drawer");
         createMoveTool(drawer);
-        createTool(drawer, t("tool.column_narrower"), "ge-decrease-col-width", "bi bi-dash-lg", function(e) {
-          resizeColumn(
-            col,
-            e.shiftKey ? smallest(settings.valid_col_sizes) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
-            "tool"
-          );
-        });
-        createTool(drawer, t("tool.column_wider"), "ge-increase-col-width", "bi bi-plus-lg", function(e) {
-          resizeColumn(
-            col,
-            e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
-            "tool"
-          );
-        });
-        createTool(drawer, t("tool.indent_decrease"), "ge-decrease-col-offset", "bi bi-text-indent-right", function(e) {
-          indentColumn(
-            col,
-            e.shiftKey ? smallest(settings.valid_col_offsets) : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
-            "tool"
-          );
-        });
-        createTool(drawer, t("tool.indent_increase"), "ge-increase-col-offset", "bi bi-text-indent-left", function(e) {
-          indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), "tool");
-        });
+        if (settings.resize.tools !== false) {
+          createTool(drawer, t("tool.column_narrower"), "ge-decrease-col-width", "bi bi-dash-lg", function(e) {
+            resizeColumn(
+              col,
+              e.shiftKey ? smallest(settings.valid_col_sizes) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), -1),
+              "tool"
+            );
+          });
+          createTool(drawer, t("tool.column_wider"), "ge-increase-col-width", "bi bi-plus-lg", function(e) {
+            resizeColumn(
+              col,
+              e.shiftKey ? widestFor(col) : stepThrough(settings.valid_col_sizes.filter(isUnits), currentUnits(col), 1),
+              "tool"
+            );
+          });
+        }
+        if (settings.indent.tools !== false) {
+          createTool(drawer, t("tool.indent_decrease"), "ge-decrease-col-offset", "bi bi-text-indent-right", function(e) {
+            indentColumn(
+              col,
+              e.shiftKey ? smallest(settings.valid_col_offsets) : stepThrough(settings.valid_col_offsets, currentOffset(col), -1),
+              "tool"
+            );
+          });
+          createTool(drawer, t("tool.indent_increase"), "ge-increase-col-offset", "bi bi-text-indent-left", function(e) {
+            indentColumn(col, e.shiftKey ? deepestFor(col) : stepThrough(settings.valid_col_offsets, currentOffset(col), 1), "tool");
+          });
+        }
         addSettingsTool(drawer, col, settings.col_classes);
         hostTools(drawer, settings.col_tools);
         createTool(drawer, t("tool.delete_column"), "ge-delete-column", "bi bi-trash", function() {
@@ -4034,6 +4128,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,
@@ -4067,7 +4178,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);
@@ -4106,7 +4221,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "8.0.0";
+  GridEditor.version = false ? "dev" : "8.2.0";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",