@themarioga/grid-editor 7.2.0 → 8.0.0-beta.2

package/dist/grideditor.js

@@ -342,7 +342,6 @@
   var VIEW_KEYS = [ALL_VIEW].concat(BREAKPOINTS.map(function(tier) {
     return tier.key;
   }));
-  var LEGACY_VIEW_INDEXES = ["lg", "sm", "xs"];
   var MAX_COL_SIZE = 12;
   var MAX_COL_OFFSET = 11;
   var FLEX_SIZES = ["equal", "auto"];
@@ -415,10 +414,6 @@
       // Scroll the page when a drag reaches its edge
     }
   };
-  var REMOVED_SETTINGS = {
-    sortable_options: "drag",
-    resizable_options: "resize"
-  };
   var warned = {};
   var editorCounter = 0;
   var instances = /* @__PURE__ */ new WeakMap();
@@ -572,7 +567,7 @@
       "element_classes": [],
       // Preset class toggles on an element's settings panel
       // content_types, text_tools and text_classes are the text editor
-      // plugins' settings since 6.0: see grideditor.text.js
+      // plugins' settings: see grideditor.text.js
       "container_classes": [],
       // The same, on a container's panel
       "pane_classes": [],
@@ -620,14 +615,6 @@
     Object.keys(NESTED_SETTINGS).forEach(function(name) {
       settings[name] = Object.assign({}, NESTED_SETTINGS[name], settings[name]);
     });
-    Object.keys(REMOVED_SETTINGS).forEach(function(name) {
-      if (optionsOrMethod && optionsOrMethod[name] !== void 0) {
-        warn(translate(settings, "warning.setting_removed", {
-          setting: name,
-          replacement: REMOVED_SETTINGS[name]
-        }));
-      }
-    });
     var canvas, mainControls, wrapper, addRowGroup, addContainerGroup, layoutDropdown, htmlTextArea;
     var curView = settings.default_view;
     var confirmDialog = null;
@@ -660,6 +647,7 @@
       instance.settings = settingsCopy();
       removeConfirmModal();
       removeSettingsPanels();
+      removeDialog();
       mainControls.remove();
       createMainControls();
       reset();
@@ -1610,6 +1598,9 @@
       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");
@@ -1633,9 +1624,11 @@
       plugins("onBeforeDeinit");
       closeSizePicker();
       hideDropMarker();
+      closeDialog();
       all(canvas, ".ge-tools-drawer").forEach(function(drawer) {
         drawer.remove();
       });
+      pluginFields.clear();
       unwrapTexts();
       plugins("onDeinit");
       clearPreviews(canvas);
@@ -1671,6 +1664,7 @@
       deinit();
       removeConfirmModal();
       removeSettingsPanels();
+      removeDialog();
       mainControls.remove();
       htmlTextArea.remove();
       lifetime.abort();
@@ -1767,6 +1761,12 @@
         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
@@ -2003,6 +2003,7 @@
           renderUtilities(section);
         });
       }
+      renderPluginFields(node);
       refreshPreviews(node);
     }
     function utilityNodes(scope) {
@@ -2069,6 +2070,61 @@
         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) {
@@ -2125,8 +2181,25 @@
       }
       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) {
@@ -2670,12 +2743,50 @@
         });
         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;
@@ -2723,7 +2834,7 @@
       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);
@@ -2746,15 +2857,20 @@
           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;
@@ -2832,10 +2948,9 @@
           settingsPanels[mode].remove();
         }
       });
-      if (settingsBackdrop) {
-        settingsBackdrop.remove();
-        settingsBackdrop = null;
-      }
+      Object.keys(settingsPanels).forEach(function(mode) {
+        removeBackdrop(settingsPanels[mode]);
+      });
       settingsPanels = {};
     }
     function placePopover(panel, gear) {
@@ -2866,25 +2981,30 @@
         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") {
@@ -2901,9 +3021,9 @@
         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();
           }
         });
       }
@@ -2915,23 +3035,117 @@
     }
     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) {
@@ -3780,10 +3994,6 @@
       one(layoutDropdown, "button").textContent = t(labelKeyFor(view));
     }
     function viewKey(view) {
-      if (typeof view == "number") {
-        warnOnceHere("changeView-index", "changeView(" + view + "): layout modes are identified by breakpoint key now, so pass one of " + JSON.stringify(VIEW_KEYS) + ". Numeric indexes still work, but they mean what they meant in 2.x (" + LEGACY_VIEW_INDEXES.join(", ") + ") and will be dropped.");
-        return LEGACY_VIEW_INDEXES[view] || null;
-      }
       return VIEW_KEYS.indexOf(view) === -1 ? null : view;
     }
     function changeView(view) {
@@ -3802,6 +4012,7 @@
           renderUtilities(section);
         });
       });
+      renderPluginFields(null);
       refreshPreviews(canvas);
       plugins("onViewChange", key);
       emit("view-change", { canvas, breakpoint: key, from, to: key });
@@ -3890,7 +4101,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "7.2.0";
+  GridEditor.version = false ? "dev" : "8.0.0-beta.2";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",
@@ -3960,14 +4171,12 @@
       "utility.inherit": "Inherit: {value} (from {breakpoint})",
       "utility.varies": "Changes at {breakpoints}; choosing here replaces that",
       "error.sortable_missing": "SortableJS not available! Make sure you loaded the Sortable js file; dragging is off without it.",
-      "warning.setting_removed": "The {setting} setting was removed in 4.0. Use {replacement} instead.",
       "warning.already_editing": "This element already has an editor: that one is handed back, with the options it was made with.",
       "warning.destroyed": "{method}() was called on an editor that has been destroyed, and does nothing.",
       "warning.duplicate_build": "grideditor.js was loaded twice: the first GridEditor is kept.",
-      "warning.plugin_6x": 'The "{name}" plugin is written for grid-editor 6 and is not loaded. Plugins register on GridEditor since 7.0: see UPGRADING.md.',
       "warning.adapter_no_jquery": "grideditor.jquery.js needs jQuery 4, and there is no jQuery on the page: the jQuery API is not there.",
       "error.tinymce_missing": "tinyMCE not available! Make sure you loaded the tinyMCE js file.",
-      "error.ckeditor_missing": "CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file: CKEditor 4 is no longer supported.",
+      "error.ckeditor_missing": "CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file.",
       "error.summernote_missing": "Summernote not available! Make sure you loaded jQuery and the Summernote js file."
     }
   };