@themarioga/grid-editor 7.2.0 → 7.3.0

package/dist/grideditor.d.ts

@@ -53,6 +53,22 @@ export interface PresetClass {
 }
 
 /** A content filter: run on init and deinit with the canvas. A string names a function on window. */
+/** A section of the style plugin's accordion. */
+export type StyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'position' | 'custom';
+
+/** A section on or off, or on with some of its properties and without its catalog. */
+export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
+
+/** The style plugin's settings. */
+export interface StyleOptions {
+    /** Every section is on unless it is turned off here. */
+    sections?: Partial<Record<StyleSectionKey, StyleSection>>;
+    /** What utilities.spacing was: the values offered, and what 0 to 5 come to. */
+    spacing?: { values?: string[]; scale?: string[] };
+    /** What utilities.visibility was: false leaves the eye out of the drawers. */
+    visibility?: { drawer?: boolean };
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -79,6 +95,8 @@ export interface GridEditorOptions {
     content_types?: string[];
     row_cols?: boolean;
     utilities?: Record<string, unknown>;
+    /** The style plugin's sections, and the options of the utilities it carries. */
+    style?: StyleOptions;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];

package/dist/grideditor.esm.js

@@ -659,6 +659,7 @@ function build(instance, baseElem, optionsOrMethod) {
     instance.settings = settingsCopy();
     removeConfirmModal();
     removeSettingsPanels();
+    removeDialog();
     mainControls.remove();
     createMainControls();
     reset();
@@ -1609,6 +1610,9 @@ function build(instance, baseElem, optionsOrMethod) {
     if (openSettingsState && !attached(openSettingsState.node)) {
       closeSettings();
     }
+    if (dialogState && dialogState.home && !attached(dialogState.home)) {
+      closeDialog();
+    }
     runFilter(true);
     addClass(canvas, "ge-editing");
     toggleClass(canvas, "ge-drag-drawer", settings.drag_handle === "drawer");
@@ -1632,9 +1636,11 @@ function build(instance, baseElem, optionsOrMethod) {
     plugins("onBeforeDeinit");
     closeSizePicker();
     hideDropMarker();
+    closeDialog();
     all(canvas, ".ge-tools-drawer").forEach(function(drawer) {
       drawer.remove();
     });
+    pluginFields.clear();
     unwrapTexts();
     plugins("onDeinit");
     clearPreviews(canvas);
@@ -1670,6 +1676,7 @@ function build(instance, baseElem, optionsOrMethod) {
     deinit();
     removeConfirmModal();
     removeSettingsPanels();
+    removeDialog();
     mainControls.remove();
     htmlTextArea.remove();
     lifetime.abort();
@@ -1682,25 +1689,53 @@ function build(instance, baseElem, optionsOrMethod) {
     if (settings.row_cols !== false) {
       registerFamily("grid", {}, rowColsFamily());
     }
-    var wanted = function(name) {
+    var replacedBy = {};
+    [GridEditor.containers, GridEditor.features, GridEditor.utilities].forEach(function(registry) {
+      Object.keys(registry).forEach(function(name) {
+        (registry[name].replaces || []).forEach(function(old) {
+          if (!replacedBy[old]) {
+            replacedBy[old] = name;
+          }
+        });
+      });
+    });
+    var named = function(name) {
       return !settings.plugins || settings.plugins.indexOf(name) !== -1;
     };
+    var namedAsOld = function(name) {
+      return !!settings.plugins && settings.plugins.some(function(old) {
+        return replacedBy[old] === name;
+      });
+    };
+    var standsDown = function(name) {
+      return !!replacedBy[name] && wanted(replacedBy[name]);
+    };
+    var wanted = function(name) {
+      return !standsDown(name) && (named(name) || namedAsOld(name));
+    };
+    var replaced = function(name) {
+      if (!standsDown(name) || !named(name)) {
+        return false;
+      }
+      warnOnceHere("replaced:" + name, 'the "' + name + '" plugin is part of "' + replacedBy[name] + '", which is loaded: ignoring it');
+      return true;
+    };
     var featureWanted = function(name, factory) {
       return factory.always === true || wanted(name);
     };
     Object.keys(GridEditor.containers).forEach(function(type) {
-      if (wanted(type)) {
+      if (!replaced(type) && wanted(type)) {
         CONTAINERS[type] = GridEditor.containers[type](api);
       }
     });
     Object.keys(GridEditor.features).forEach(function(name) {
       var factory = GridEditor.features[name];
-      if (featureWanted(name, factory)) {
+      if (!replaced(name) && featureWanted(name, factory)) {
         FEATURES[name] = factory(api);
       }
     });
     Object.keys(GridEditor.utilities).forEach(function(name) {
-      if (!wanted(name)) {
+      if (replaced(name) || !wanted(name)) {
         return;
       }
       UTILITIES[name] = GridEditor.utilities[name](api);
@@ -1718,6 +1753,10 @@ function build(instance, baseElem, optionsOrMethod) {
       if (CONTAINERS[name] || FEATURES[name] || UTILITIES[name]) {
         return;
       }
+      if (standsDown(name)) {
+        warnOnceHere("renamed:" + name, 'the "' + name + '" plugin is part of "' + replacedBy[name] + '" now: name "' + replacedBy[name] + '" in the plugins setting instead');
+        return;
+      }
       warnOnceHere("plugin:" + name, 'the "' + name + '" plugin is not loaded: include dist/plugins/grideditor.' + name + ".js after the editor");
     });
   }
@@ -1766,6 +1805,12 @@ function build(instance, baseElem, optionsOrMethod) {
       setUtility,
       utilityField,
       bareStyle,
+      // The host's own style, under the preview
+      hostStyle,
+      setHostStyle,
+      // A modal of the editor's own, over the settings
+      openDialog,
+      closeDialog,
       rowFromLayout: rowFromLayoutValue,
       nodeHtml,
       // A text editor has rewritten a content area, so whatever the
@@ -2002,6 +2047,7 @@ function build(instance, baseElem, optionsOrMethod) {
         renderUtilities(section);
       });
     }
+    renderPluginFields(node);
     refreshPreviews(node);
   }
   function utilityNodes(scope) {
@@ -2068,6 +2114,61 @@ function build(instance, baseElem, optionsOrMethod) {
       dropEmptyStyle(node);
     });
   }
+  function hostDeclaration(node) {
+    var scratch = document.createElement("div");
+    var was = {};
+    scratch.style.cssText = node.style.cssText;
+    try {
+      was = JSON.parse(node.getAttribute(PREVIEW_ATTR)) || {};
+    } catch (error) {
+    }
+    Object.keys(was).forEach(function(property) {
+      var before = was[property];
+      if (before && before[0]) {
+        scratch.style.setProperty(property, before[0], before[1]);
+      } else {
+        scratch.style.removeProperty(property);
+      }
+    });
+    return scratch.style;
+  }
+  function hostStyle(node, property) {
+    var declaration = hostDeclaration(node);
+    if (property === void 0) {
+      return declaration.cssText;
+    }
+    return {
+      value: declaration.getPropertyValue(property),
+      priority: declaration.getPropertyPriority(property)
+    };
+  }
+  function setHostStyle(node, property, value, priority) {
+    value = value === null || value === void 0 ? "" : String(value).trim();
+    if (priority === void 0) {
+      priority = hostStyle(node, property).priority;
+    }
+    if (value !== "") {
+      var check = document.createElement("div").style;
+      check.setProperty(property, value, priority || "");
+      if (check.getPropertyValue(property) === "") {
+        return false;
+      }
+    }
+    var previewed = node.hasAttribute(PREVIEW_ATTR);
+    if (previewed) {
+      clearPreviews(node);
+    }
+    if (value === "") {
+      node.style.removeProperty(property);
+    } else {
+      node.style.setProperty(property, value, priority || "");
+    }
+    dropEmptyStyle(node);
+    if (previewed) {
+      refreshPreviews(node);
+    }
+    return true;
+  }
   function createUtilitiesSection(node) {
     var kind = kindOf(node);
     var fields = familiesFor(kind).filter(function(family) {
@@ -2124,8 +2225,25 @@ function build(instance, baseElem, optionsOrMethod) {
     }
     var field = createField(node, family);
     renderField(field, node);
+    pluginFields.set(field, node);
     return field;
   }
+  var pluginFields = /* @__PURE__ */ new Map();
+  function renderPluginFields(node) {
+    pluginFields.forEach(function(fieldNode, field) {
+      if (!field.isConnected) {
+        pluginFields.delete(field);
+        return;
+      }
+      if (node && fieldNode !== node) {
+        return;
+      }
+      if (closest(field, ".ge-utilities")) {
+        return;
+      }
+      renderField(field, fieldNode);
+    });
+  }
   function renderUtilities(section) {
     var node = sectionNodes.get(section);
     children(section, ".ge-utilities-toggle").forEach(function(toggle2) {
@@ -2669,12 +2787,50 @@ function build(instance, baseElem, optionsOrMethod) {
       });
       classGroup.appendChild(btn);
     });
+    pluginSections(container).forEach(function(section) {
+      detailsDiv.appendChild(section);
+    });
     var utilities = createUtilitiesSection(container);
     if (utilities) {
       detailsDiv.appendChild(utilities);
     }
     return detailsDiv;
   }
+  function pluginSections(node) {
+    var kind = kindOf(node);
+    var mode = panelMode();
+    var sections = [];
+    [CONTAINERS, FEATURES, UTILITIES].forEach(function(registry) {
+      Object.keys(registry).forEach(function(name) {
+        var plugin = registry[name];
+        var section = plugin.panelSection ? plugin.panelSection(node, kind) : null;
+        if (!section || !section.body) {
+          return;
+        }
+        var holder = element("div", { "class": "ge-panel-section", "data-ge-plugin": name });
+        if (mode === "offcanvas" || mode === "modal") {
+          holder.appendChild(section.body);
+        } else {
+          var label = t(section.labelKey);
+          var open = holder.appendChild(element("button", {
+            type: "button",
+            "class": "btn btn-sm btn-outline-secondary ge-panel-section-open"
+          }, label));
+          hide(section.body);
+          holder.appendChild(section.body);
+          open.addEventListener("click", function() {
+            openDialog(
+              section.titleKey ? t(section.titleKey, { kind: kindLabel(node) }) : label,
+              section.body,
+              open
+            );
+          });
+        }
+        sections.push(holder);
+      });
+    });
+    return sections;
+  }
   var PANEL_MODES = ["offcanvas", "popover", "modal", "inline"];
   var settingsPanels = {};
   var openSettingsState = null;
@@ -2722,7 +2878,7 @@ function build(instance, baseElem, optionsOrMethod) {
     addClass(node, "ge-settings-target");
     var signal = { signal: listening.signal };
     document.addEventListener("keydown", function(e) {
-      if (e.key === "Escape") {
+      if (e.key === "Escape" && !dialogState) {
         closeSettings();
       }
     }, signal);
@@ -2745,15 +2901,20 @@ function build(instance, baseElem, optionsOrMethod) {
         openSettingsState.observer.observe(details);
       }
       on(document, "mousedown touchstart", function(e) {
-        if (!panel.contains(e.target) && !gear.contains(e.target)) {
+        if (!dialogState && !panel.contains(e.target) && !gear.contains(e.target)) {
           closeSettings();
         }
       }, signal);
     } else {
-      showModal(panel);
+      showModal(panel, function() {
+        if (openSettingsState && openSettingsState.mode === "modal") {
+          closeSettings();
+        }
+      });
     }
   }
   function closeSettings() {
+    closeDialog();
     var open = openSettingsState;
     if (!open) {
       return;
@@ -2831,10 +2992,9 @@ function build(instance, baseElem, optionsOrMethod) {
         settingsPanels[mode].remove();
       }
     });
-    if (settingsBackdrop) {
-      settingsBackdrop.remove();
-      settingsBackdrop = null;
-    }
+    Object.keys(settingsPanels).forEach(function(mode) {
+      removeBackdrop(settingsPanels[mode]);
+    });
     settingsPanels = {};
   }
   function placePopover(panel, gear) {
@@ -2865,25 +3025,30 @@ function build(instance, baseElem, optionsOrMethod) {
       left: Math.max(gap, Math.min(tool.left + tool.width / 2 - left - 8, width - 24))
     });
   }
-  var settingsBackdrop = null;
-  function showModal(panel) {
+  function showModal(panel, dismissed) {
     var Modal = modalLibrary();
+    var state = modalState.get(panel);
+    if (!state) {
+      state = { wanted: null, busy: false, backdrop: null, dismissed };
+      modalState.set(panel, state);
+    }
+    state.dismissed = dismissed;
     if (!Modal) {
-      settingsBackdrop = element("div", { "class": "modal-backdrop fade show ge-settings-backdrop" });
-      settingsBackdrop.addEventListener("click", function() {
-        closeSettings();
-      });
-      document.body.appendChild(settingsBackdrop);
+      if (!state.backdrop) {
+        state.backdrop = element("div", { "class": "modal-backdrop fade show ge-settings-backdrop" });
+        state.backdrop.addEventListener("click", function() {
+          state.dismissed();
+        });
+        document.body.appendChild(state.backdrop);
+      }
       addClass(panel, "show");
       panel.style.display = "block";
       panel.removeAttribute("aria-hidden");
       return;
     }
     var modal = Modal.getOrCreateInstance(panel);
-    var state = modalState.get(panel);
-    if (!state) {
-      state = { wanted: null, busy: false };
-      modalState.set(panel, state);
+    if (!state.watched) {
+      state.watched = true;
       trackModal(panel);
       panel.addEventListener("hide.bs.modal", function() {
         if (state.wanted === "open") {
@@ -2900,9 +3065,9 @@ function build(instance, baseElem, optionsOrMethod) {
       panel.addEventListener("hidden.bs.modal", function() {
         state.busy = false;
         if (state.wanted === "open") {
-          showModal(panel);
-        } else if (openSettingsState && openSettingsState.mode === "modal") {
-          closeSettings();
+          showModal(panel, state.dismissed);
+        } else {
+          state.dismissed();
         }
       });
     }
@@ -2914,23 +3079,117 @@ function build(instance, baseElem, optionsOrMethod) {
   }
   function hideModal(panel) {
     var Modal = modalLibrary();
+    var state = modalState.get(panel);
+    if (!state) {
+      return;
+    }
+    state.wanted = "closed";
     if (!Modal) {
-      if (settingsBackdrop) {
-        settingsBackdrop.remove();
-        settingsBackdrop = null;
+      if (state.backdrop) {
+        state.backdrop.remove();
+        state.backdrop = null;
       }
       removeClass(panel, "show");
       panel.style.removeProperty("display");
       panel.setAttribute("aria-hidden", "true");
       return;
     }
-    var state = modalState.get(panel) || { wanted: null, busy: false };
-    state.wanted = "closed";
     if (!state.busy && hasClass(panel, "show")) {
       state.busy = true;
       Modal.getOrCreateInstance(panel).hide();
     }
   }
+  function removeBackdrop(panel) {
+    var state = modalState.get(panel);
+    if (state && state.backdrop) {
+      state.backdrop.remove();
+      state.backdrop = null;
+    }
+  }
+  var dialogPanel = null;
+  var dialogState = null;
+  function dialog() {
+    if (dialogPanel) {
+      return dialogPanel;
+    }
+    dialogPanel = create('<div class="modal fade ge-dialog" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"><div class="modal-content"><div class="modal-header"><h5 class="modal-title ge-dialog-title"></h5></div><div class="modal-body ge-dialog-body"></div><div class="modal-footer"></div></div></div></div>');
+    one(dialogPanel, ".modal-header").appendChild(element("button", {
+      type: "button",
+      "class": "btn-close ge-dialog-close",
+      "aria-label": t("panel.close")
+    }));
+    one(dialogPanel, ".modal-footer").appendChild(element("button", {
+      type: "button",
+      "class": "btn btn-primary ge-dialog-close"
+    }, t("panel.done")));
+    delegate(dialogPanel, "click", ".ge-dialog-close", function(e) {
+      e.preventDefault();
+      closeDialog();
+    });
+    return document.body.appendChild(dialogPanel);
+  }
+  function openDialog(title, body, opener) {
+    closeDialog();
+    var panel = dialog();
+    var listening = new AbortController();
+    dialogState = {
+      body,
+      home: body.parentElement,
+      next: body.nextElementSibling,
+      opener: opener || document.activeElement,
+      listening
+    };
+    one(panel, ".ge-dialog-title").textContent = title;
+    one(panel, ".ge-dialog-body").appendChild(body);
+    show(body);
+    if (!modalLibrary()) {
+      document.addEventListener("keydown", function(e) {
+        if (e.key === "Escape") {
+          closeDialog();
+        }
+      }, { signal: listening.signal });
+    }
+    Object.keys(settingsPanels).forEach(function(mode) {
+      addClass(settingsPanels[mode], "ge-under-dialog");
+    });
+    showModal(panel, function() {
+      closeDialog();
+    });
+  }
+  function closeDialog() {
+    var open = dialogState;
+    if (!open) {
+      return;
+    }
+    dialogState = null;
+    open.listening.abort();
+    hideModal(dialogPanel);
+    Object.keys(settingsPanels).forEach(function(mode) {
+      removeClass(settingsPanels[mode], "ge-under-dialog");
+    });
+    hide(open.body);
+    if (open.home && attached(open.home)) {
+      if (open.next && open.next.parentElement === open.home) {
+        open.home.insertBefore(open.body, open.next);
+      } else {
+        open.home.appendChild(open.body);
+      }
+    } else {
+      open.body.remove();
+    }
+    if (open.opener && attached(open.opener) && open.opener.focus) {
+      open.opener.focus();
+    }
+  }
+  function removeDialog() {
+    closeDialog();
+    if (!dialogPanel) {
+      return;
+    }
+    removeBackdrop(dialogPanel);
+    retireModal(dialogPanel);
+    dialogPanel = null;
+  }
   function kindLabel(node) {
     var kind = kindOf(node);
     if (CONTAINERS[kind] && CONTAINERS[kind].labelKey) {
@@ -3801,6 +4060,7 @@ function build(instance, baseElem, optionsOrMethod) {
         renderUtilities(section);
       });
     });
+    renderPluginFields(null);
     refreshPreviews(canvas);
     plugins("onViewChange", key);
     emit("view-change", { canvas, breakpoint: key, from, to: key });
@@ -3889,7 +4149,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "7.2.0";
+GridEditor.version = false ? "dev" : "7.3.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",