@themarioga/grid-editor 8.8.2 → 8.9.0

package/dist/grideditor.css

@@ -504,6 +504,57 @@
   --bs-offcanvas-width: 340px;
   --bs-offcanvas-height: 60vh;
 }
+/* The sidebar: always there while editing, with the page making room for it
+   (html.ge-sidebar-open) where the window is wide enough. Narrower than
+   Bootstrap's sm it covers the page instead. */
+.ge-settings-sidebar {
+  --bs-offcanvas-width: 340px;
+}
+.ge-settings-sidebar .ge-sidebar-empty {
+  margin: 0;
+  color: var(--bs-secondary-color, #6c757d);
+}
+html.ge-sidebar-open {
+  padding-right: 340px;
+}
+/* On the panel's left edge, centred; folded away, on the window's right edge.
+   Its own element, so the panel can slide out from under it. */
+.ge-sidebar-toggle {
+  position: fixed;
+  top: 50%;
+  right: 340px;
+  z-index: 1045;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 3rem;
+  padding: 0;
+  transform: translateY(-50%);
+  border: 1px solid var(--bs-border-color, #dee2e6);
+  border-right: 0;
+  border-radius: 0.375rem 0 0 0.375rem;
+  background: var(--bs-body-bg, #fff);
+  color: var(--bs-body-color, #212529);
+  transition: right 0.3s ease-in-out;
+}
+.ge-sidebar-toggle[aria-expanded="false"] {
+  right: 0;
+}
+.ge-sidebar-toggle.ge-under-dialog {
+  z-index: 1040;
+}
+@media (max-width: 575.98px) {
+  .ge-settings-sidebar {
+    --bs-offcanvas-width: 100vw;
+  }
+  .ge-sidebar-toggle[aria-expanded="true"] {
+    right: calc(100vw - 1.5rem);
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-left: 0;
+    border-radius: 0 0.375rem 0.375rem 0;
+  }
+}
 .ge-settings-popover {
   /* Popper would position it; without Popper that is the editor's job */
   position: absolute;

package/dist/grideditor.d.ts

@@ -121,6 +121,18 @@ export interface InlineStyleOptions {
     visibility?: { drawer?: boolean };
 }
 
+/** What the sidebar shows while nothing is selected, instead of its message. */
+export interface SidebarContent {
+    /** Text, not html. Default the sidebar's own title. */
+    title?: string;
+    body: Element;
+}
+
+export interface SidebarSettings {
+    /** Called whenever the sidebar is left with nothing selected. Null gives the message. */
+    empty?: ((ge: GridEditor) => SidebarContent | null) | null;
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -183,7 +195,10 @@ export interface GridEditorOptions {
     locale_strings?: Record<string, string>;
     callbacks?: Partial<GridEditorCallbacks>;
     confirm_delete?: boolean;
-    settings_panel?: 'offcanvas' | 'popover' | 'modal' | 'inline';
+    /** Where a node's settings open. 'sidebar' is a panel that stays on the right while editing, showing the selected node's; one editor per page has it. */
+    settings_panel?: 'offcanvas' | 'popover' | 'modal' | 'inline' | 'sidebar';
+    /** The 'sidebar' panel. */
+    sidebar?: SidebarSettings;
     drag?: { delay?: number; touch_delay?: number; threshold?: number; animation?: number; scroll?: boolean };
     tinymce?: { config?: Record<string, unknown> };
     ckeditor?: { config?: Record<string, unknown> };
@@ -317,6 +332,13 @@ export interface TargetChangePayload {
     from: HTMLElement | null;
 }
 
+/** The selection changed, with settings_panel 'sidebar': the node whose settings the sidebar shows, or null. */
+export interface SelectionChangePayload {
+    canvas: HTMLElement;
+    node: HTMLElement | null;
+    from: HTMLElement | null;
+}
+
 /** The events, by name, with their payloads. Adding fires a specific name and the generic one. */
 export interface GridEditorEventMap {
     'grideditor:before-add': Payload;
@@ -357,6 +379,7 @@ export interface GridEditorEventMap {
     'grideditor:popup-orphan': PopupOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
     'grideditor:target-change': TargetChangePayload;
+    'grideditor:selection-change': SelectionChangePayload;
     'grideditor:after-autosave': AutosavePayload;
     'grideditor:after-restore-draft': RestoreDraftPayload;
     'grideditor:autosave-error': AutosaveErrorPayload;
@@ -468,6 +491,10 @@ export declare class GridEditor {
     getActiveTarget(): HTMLElement | null;
     /** Make a column or region, or the first a selector matches, where the toolbar adds; null for none. */
     setActiveTarget(target: HTMLElement | string | null): this;
+    /** The node whose settings the sidebar shows, or null. Null unless settings_panel is 'sidebar'. */
+    getSelected(): HTMLElement | null;
+    /** Select a node with settings, or the first a selector matches, or null for none. Does nothing unless settings_panel is 'sidebar'. */
+    setSelected(node: HTMLElement | string | null): this;
     getView(): View;
     setLocale(code: string): this;
     createRow(layout?: RowLayout, options?: Placement): HTMLElement | null;

package/dist/grideditor.esm.js

@@ -328,7 +328,9 @@ var METHODS = {
   getUtility: { value: true },
   setUtility: { value: true },
   getActiveTarget: { value: true },
-  setActiveTarget: {}
+  setActiveTarget: {},
+  getSelected: { value: true },
+  setSelected: {}
 };
 var PLACEMENTS = ["appendTo", "prependTo", "insertAfter", "insertBefore"];
 var BREAKPOINTS = [
@@ -412,6 +414,10 @@ var NESTED_SETTINGS = {
     tools: true
     // The indent tools in the column's drawer
   },
+  sidebar: {
+    empty: null
+    // function(ge) -> { title, body } shown while nothing is selected, or null for the message
+  },
   drag: {
     delay: 0,
     // Milliseconds to hold before a drag starts
@@ -428,6 +434,8 @@ var NESTED_SETTINGS = {
 var warned = {};
 var editorCounter = 0;
 var instances = /* @__PURE__ */ new WeakMap();
+var sidebarHolder = null;
+var EDITOR_CONTROLS = ".ge-mainControls, .ge-settings-panel, .ge-sidebar-toggle, .ge-dialog, .ge-confirm, .ge-size-picker, .modal, .modal-backdrop";
 function translate(settings, key, params) {
   var locales = GridEditor.locales;
   var locale = locales[settings.locale] || {};
@@ -633,7 +641,9 @@ function build(instance, baseElem, optionsOrMethod) {
     "confirm_delete": true,
     // Ask before deleting a row or a column
     "settings_panel": "offcanvas",
-    // Where a node's settings open: 'offcanvas', 'popover', 'modal' or 'inline'
+    // Where a node's settings open: 'offcanvas', 'popover', 'modal', 'inline' or 'sidebar'
+    "sidebar": NESTED_SETTINGS.sidebar,
+    // The 'sidebar' panel: what it shows while nothing is selected
     "drag": NESTED_SETTINGS.drag
     // How a drag behaves, whatever drives it
   }, optionsOrMethod);
@@ -659,6 +669,17 @@ function build(instance, baseElem, optionsOrMethod) {
   var sortables = [];
   var instanceId = ++editorCounter;
   var destroyed = false;
+  var selected = null;
+  var sidebarCollapsed = null;
+  var pluginHandle = null;
+  if (settings.settings_panel === "sidebar") {
+    if (sidebarHolder) {
+      warnOnceHere("sidebar", 'settings_panel "sidebar" is in use by another editor on the page, which has one sidebar: using offcanvas');
+      settings.settings_panel = "offcanvas";
+    } else {
+      sidebarHolder = instance;
+    }
+  }
   var detailsFor = /* @__PURE__ */ new WeakMap();
   var moves = /* @__PURE__ */ new WeakMap();
   var resizes = /* @__PURE__ */ new WeakMap();
@@ -1096,7 +1117,8 @@ function build(instance, baseElem, optionsOrMethod) {
         e.preventDefault();
       }
     }, signal);
-    if (settings.active_target) {
+    var sidebarMode = panelMode() === "sidebar";
+    if (settings.active_target || sidebarMode) {
       var pressed = null;
       canvas.addEventListener("pointerdown", function(e) {
         pressed = { x: e.clientX, y: e.clientY };
@@ -1110,24 +1132,61 @@ function build(instance, baseElem, optionsOrMethod) {
         if (from && Math.abs(e.clientX - from.x) + Math.abs(e.clientY - from.y) > settings.drag.threshold) {
           return;
         }
-        var region = closest(e.target, targetSelector());
-        if (region && region === activeTarget && (e.target === region || e.target === child(region, ".ge-tools-drawer"))) {
-          changeTarget(null);
-          return;
+        if (settings.active_target) {
+          clickTarget(e);
+        }
+        if (sidebarMode && canvas.contains(e.target)) {
+          changeSelection(settingsNodeAt(e.target));
         }
-        changeTarget(region && region !== canvas && canvas.contains(region) ? region : null);
       }, signal);
       document.addEventListener("keydown", function(e) {
-        if (e.key !== "Escape" || !activeTarget || openSettingsState || dialogState) {
+        if (e.key !== "Escape" || openSettingsState || dialogState) {
+          return;
+        }
+        if (confirmDialog && hasClass(confirmDialog, "show")) {
           return;
         }
         var focus = document.activeElement;
         if (focus && (is(focus, "input, textarea, select") || focus.isContentEditable)) {
           return;
         }
-        changeTarget(null);
+        if (selected && isEditing()) {
+          changeSelection(null);
+        } else if (activeTarget) {
+          changeTarget(null);
+        }
       }, signal);
     }
+    if (sidebarMode) {
+      canvas.addEventListener("focusin", function(e) {
+        var node = isEditing() ? settingsNodeAt(e.target) : null;
+        if (node) {
+          changeSelection(node);
+        }
+      }, signal);
+      document.addEventListener("click", function(e) {
+        var target = e.target;
+        if (!selected || !isEditing() || !target || target.nodeType !== 1) {
+          return;
+        }
+        if (!attached(target) || canvas.contains(target)) {
+          return;
+        }
+        if (closest(target, EDITOR_CONTROLS) || canvas.querySelector(".ge-rte-active")) {
+          return;
+        }
+        changeSelection(null);
+      }, signal);
+      window.addEventListener("resize", reserveSidebarRoom, signal);
+    }
+    function clickTarget(e) {
+      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);
+    }
   }
   function textReady(block) {
     if (!is(block, ".ge-content") || !canvas.contains(block)) {
@@ -1898,6 +1957,7 @@ function build(instance, baseElem, optionsOrMethod) {
   function openSource() {
     deinit();
     changeTarget(null);
+    changeSelection(null);
     htmlTextArea.style.height = 0.8 * document.documentElement.clientHeight + "px";
     htmlTextArea.value = canvas.innerHTML;
     show(htmlTextArea);
@@ -1943,6 +2003,9 @@ function build(instance, baseElem, optionsOrMethod) {
     if (openSettingsState && !attached(openSettingsState.node)) {
       closeSettings();
     }
+    if (selected && !canvas.contains(selected)) {
+      changeSelection(null);
+    }
     if (dialogState && dialogState.home && !attached(dialogState.home)) {
       closeDialog();
     }
@@ -1967,9 +2030,11 @@ function build(instance, baseElem, optionsOrMethod) {
     } else if (activeTarget) {
       addClass(activeTarget, "ge-active-target");
     }
+    showSidebar();
   }
   function deinit() {
     closeSettings();
+    hideSidebar();
     removeClass(canvas, "ge-editing ge-drag-drawer ge-dropping");
     if (activeTarget) {
       removeClass(activeTarget, "ge-active-target");
@@ -2130,6 +2195,10 @@ function build(instance, baseElem, optionsOrMethod) {
     }
     deinit();
     activeTarget = null;
+    selected = null;
+    if (sidebarHolder === instance) {
+      sidebarHolder = null;
+    }
     removeConfirmModal();
     removeSettingsPanels();
     removeDialog();
@@ -2140,7 +2209,7 @@ function build(instance, baseElem, optionsOrMethod) {
     destroyed = true;
   }
   function loadPlugins() {
-    var api = pluginApi();
+    var api = pluginHandle = pluginApi();
     registerFamily("grid", {}, widthFamily());
     if (settings.row_cols !== false) {
       registerFamily("grid", {}, rowColsFamily());
@@ -3261,9 +3330,11 @@ function build(instance, baseElem, optionsOrMethod) {
   function addSettingsTool(drawer, node, presets) {
     var details = createDetails(node, presets || []);
     detailsFor.set(node, details);
-    createTool(drawer, t("tool.settings"), "ge-settings", "bi bi-gear-fill", function() {
-      toggleSettings(node, details, this);
-    });
+    if (panelMode() !== "sidebar") {
+      createTool(drawer, t("tool.settings"), "ge-settings", "bi bi-gear-fill", function() {
+        toggleSettings(node, details, this);
+      });
+    }
     var kind = kindOf(node);
     Object.keys(UTILITIES).forEach(function(name) {
       if (UTILITIES[name].drawerTools) {
@@ -3354,7 +3425,7 @@ function build(instance, baseElem, optionsOrMethod) {
           return;
         }
         var holder = element("div", { "class": "ge-panel-section", "data-ge-plugin": name });
-        if (mode === "offcanvas" || mode === "modal") {
+        if (mode === "offcanvas" || mode === "modal" || mode === "sidebar") {
           holder.appendChild(sectionTitle(t(section.labelKey)));
           holder.appendChild(section.body);
         } else {
@@ -3378,7 +3449,7 @@ function build(instance, baseElem, optionsOrMethod) {
     });
     return sections;
   }
-  var PANEL_MODES = ["offcanvas", "popover", "modal", "inline"];
+  var PANEL_MODES = ["offcanvas", "popover", "modal", "inline", "sidebar"];
   var settingsPanels = {};
   var openSettingsState = null;
   var modalState = /* @__PURE__ */ new WeakMap();
@@ -3393,7 +3464,14 @@ function build(instance, baseElem, optionsOrMethod) {
     return node && detailsFor.get(node) || null;
   }
   function settingsScope() {
-    return openSettingsState && openSettingsState.mode !== "inline" ? [canvas, openSettingsState.details] : [canvas];
+    var scope = [canvas];
+    if (openSettingsState && openSettingsState.mode !== "inline") {
+      scope.push(openSettingsState.details);
+    }
+    if (sidebarShown) {
+      scope.push(sidebarShown.details);
+    }
+    return scope;
   }
   function toggleSettings(node, details, gear) {
     var mode = panelMode();
@@ -3483,6 +3561,9 @@ function build(instance, baseElem, optionsOrMethod) {
     } else {
       hideModal(panel);
     }
+    returnPanel(open);
+  }
+  function returnPanel(open) {
     removeClass(open.node, "ge-settings-target");
     open.details.style.removeProperty("display");
     dropEmptyStyle(open.details);
@@ -3515,6 +3596,11 @@ function build(instance, baseElem, optionsOrMethod) {
       panel = create('<div class="popover bs-popover-bottom ge-settings-panel ge-settings-popover" role="dialog"><div class="popover-arrow"></div><div class="popover-header"><span class="ge-settings-title"></span></div><div class="popover-body ge-settings-body"></div></div>');
       one(panel, ".popover-header").appendChild(closeButton());
       hide(panel);
+    } else if (mode === "sidebar") {
+      panel = create('<div class="offcanvas offcanvas-end ge-settings-panel ge-settings-sidebar" tabindex="-1" role="complementary"><div class="offcanvas-header"><h5 class="offcanvas-title ge-settings-title"></h5></div><div class="offcanvas-body ge-settings-body"></div></div>');
+      panel.id = "ge-settings-sidebar-" + instanceId;
+      one(panel, ".offcanvas-header").appendChild(closeButton());
+      settingsPanels["sidebar-toggle"] = document.body.appendChild(sidebarToggle(panel));
     } else {
       panel = create('<div class="modal fade ge-settings-panel ge-settings-modal" 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-settings-title"></h5></div><div class="modal-body ge-settings-body"></div><div class="modal-footer"></div></div></div></div>');
       one(panel, ".modal-header").appendChild(closeButton());
@@ -3525,13 +3611,19 @@ function build(instance, baseElem, optionsOrMethod) {
     }
     delegate(panel, "click", ".ge-settings-close", function(e) {
       e.preventDefault();
-      closeSettings();
+      if (mode === "sidebar") {
+        changeSelection(null);
+      } else {
+        closeSettings();
+      }
     });
     settingsPanels[mode] = document.body.appendChild(panel);
     return panel;
   }
   function removeSettingsPanels() {
     closeSettings();
+    unshowSidebar();
+    removeClass(document.documentElement, "ge-sidebar-open");
     Object.keys(settingsPanels).forEach(function(mode) {
       if (mode === "modal") {
         retireModal(settingsPanels[mode]);
@@ -3544,6 +3636,180 @@ function build(instance, baseElem, optionsOrMethod) {
     });
     settingsPanels = {};
   }
+  var SIDEBAR_MIN_WIDTH = 576;
+  var sidebarShown = null;
+  var sidebarEmpty = null;
+  function isEditing() {
+    return hasClass(canvas, "ge-editing");
+  }
+  function sidebarToggle(panel) {
+    var button = element("button", { type: "button", "class": "ge-sidebar-toggle", "aria-controls": panel.id });
+    button.appendChild(element("i"));
+    button.addEventListener("click", function() {
+      foldSidebar(!sidebarCollapsed);
+    });
+    return button;
+  }
+  function foldSidebar(collapsed) {
+    sidebarCollapsed = collapsed;
+    applySidebar();
+  }
+  function applySidebar() {
+    var panel = settingsPanels.sidebar;
+    var toggle2 = settingsPanels["sidebar-toggle"];
+    if (!panel) {
+      return;
+    }
+    var open = !sidebarCollapsed;
+    if (open && !hasClass(panel, "show")) {
+      removeClass(panel, "hiding");
+      panel.getBoundingClientRect();
+      addClass(panel, "show");
+    } else if (!open && hasClass(panel, "show")) {
+      removeClass(panel, "show");
+      addClass(panel, "hiding");
+      window.setTimeout(function() {
+        removeClass(panel, "hiding");
+      }, 300);
+    }
+    var label = open ? t("panel.collapse") : t("panel.expand");
+    toggle2.setAttribute("aria-expanded", open ? "true" : "false");
+    toggle2.setAttribute("aria-label", label);
+    toggle2.setAttribute("title", label);
+    one(toggle2, "i").className = "bi " + (open ? "bi-chevron-right" : "bi-chevron-left");
+    reserveSidebarRoom();
+  }
+  function reserveSidebarRoom() {
+    toggleClass(
+      document.documentElement,
+      "ge-sidebar-open",
+      !!settingsPanels.sidebar && isEditing() && !sidebarCollapsed && window.innerWidth >= SIDEBAR_MIN_WIDTH
+    );
+  }
+  function showSidebar() {
+    if (panelMode() !== "sidebar") {
+      return;
+    }
+    var panel = settingsPanel("sidebar");
+    if (sidebarCollapsed === null) {
+      sidebarCollapsed = window.innerWidth < SIDEBAR_MIN_WIDTH;
+    }
+    panel.style.removeProperty("display");
+    settingsPanels["sidebar-toggle"].style.removeProperty("display");
+    renderSidebar();
+    applySidebar();
+  }
+  function hideSidebar() {
+    unshowDetails();
+    var panel = settingsPanels.sidebar;
+    if (!panel) {
+      return;
+    }
+    panel.style.display = "none";
+    settingsPanels["sidebar-toggle"].style.display = "none";
+    removeClass(document.documentElement, "ge-sidebar-open");
+  }
+  function setSidebarTitle(text) {
+    var panel = settingsPanels.sidebar;
+    one(panel, ".ge-settings-title").textContent = text;
+    panel.setAttribute("aria-label", text);
+  }
+  function unshowDetails() {
+    var shown = sidebarShown;
+    sidebarShown = null;
+    if (shown) {
+      returnPanel(shown);
+    }
+  }
+  function unshowSidebar() {
+    unshowDetails();
+    if (sidebarEmpty) {
+      sidebarEmpty.body.remove();
+      sidebarEmpty = null;
+    }
+  }
+  function renderSidebar() {
+    var panel = settingsPanels.sidebar;
+    if (!panel || !isEditing()) {
+      return;
+    }
+    var details = selected ? detailsOf(selected) : null;
+    if (details ? sidebarShown && sidebarShown.details === details : !sidebarShown && sidebarEmpty) {
+      return;
+    }
+    unshowSidebar();
+    var holder = one(panel, ".ge-settings-body");
+    if (!details) {
+      var content = emptyContent();
+      var body = content ? content.body : element("p", { "class": "ge-sidebar-empty" }, t("panel.sidebar_empty"));
+      setSidebarTitle(content ? content.title : t("panel.sidebar_title"));
+      holder.appendChild(body);
+      sidebarEmpty = { body };
+      return;
+    }
+    sidebarShown = { node: selected, details, home: details.parentElement, next: details.nextElementSibling };
+    setSidebarTitle(t("panel.title", { kind: kindLabel(selected) }));
+    holder.appendChild(details);
+    show(details);
+    addClass(selected, "ge-settings-target");
+  }
+  function emptyContent() {
+    var fromHost = settings.sidebar.empty;
+    var found = null;
+    if (typeof fromHost === "function") {
+      found = emptyContentOf(fromHost(instance), function(result) {
+        return result.title;
+      });
+    } else if (fromHost !== null && fromHost !== void 0) {
+      warnOnceHere("sidebar.empty", "sidebar.empty is a function(ge) returning { title, body }, not " + typeof fromHost + ": ignored");
+    }
+    [CONTAINERS, FEATURES, UTILITIES].forEach(function(registry) {
+      Object.keys(registry).forEach(function(name) {
+        var plugin = registry[name];
+        if (found || !plugin.sidebarEmpty) {
+          return;
+        }
+        found = emptyContentOf(plugin.sidebarEmpty(pluginHandle), function(result) {
+          return typeof result.titleKey === "string" && result.titleKey !== "" ? t(result.titleKey) : "";
+        });
+      });
+    });
+    return found;
+  }
+  function emptyContentOf(result, titleOf) {
+    if (!result || !result.body || result.body.nodeType !== 1) {
+      return null;
+    }
+    var title = titleOf(result);
+    return { title: typeof title === "string" && title !== "" ? title : t("panel.sidebar_title"), body: result.body };
+  }
+  function settingsNodeAt(target) {
+    var drawer = closest(target, ".ge-tools-drawer", canvas);
+    if (drawer) {
+      var home = drawer.parentElement;
+      var owner = detailsFor.has(home) ? home : children(home).filter(function(each) {
+        return detailsFor.has(each);
+      })[0];
+      if (owner) {
+        return owner;
+      }
+    }
+    for (var node = target; node && node !== canvas; node = node.parentElement) {
+      if (detailsFor.has(node)) {
+        return node;
+      }
+    }
+    return null;
+  }
+  function changeSelection(node) {
+    if (node === selected) {
+      return;
+    }
+    var from = selected;
+    selected = node;
+    renderSidebar();
+    emit("selection-change", { canvas, node, from });
+  }
   function placePopover(panel, gear) {
     if (!attached(gear)) {
       return;
@@ -4658,6 +4924,23 @@ function build(instance, baseElem, optionsOrMethod) {
     }
     changeTarget(node);
   }
+  function apiSetSelected(value) {
+    if (panelMode() !== "sidebar") {
+      warnOnceHere("sidebar-api", 'setSelected needs settings_panel "sidebar": without it, it does nothing');
+      return;
+    }
+    if (value === null || value === void 0) {
+      changeSelection(null);
+      return;
+    }
+    var node = nodeFrom(value);
+    if (!node || node === canvas || !canvas.contains(node) || !detailsFor.has(node)) {
+      var named = typeof value === "string" ? value : node ? "<" + node.tagName.toLowerCase() + ">" : String(value);
+      warn("setSelected: " + named + " is not a node of the canvas with settings");
+      return;
+    }
+    changeSelection(node);
+  }
   var own = {
     getHtml,
     getPlainHtml,
@@ -4696,7 +4979,11 @@ function build(instance, baseElem, optionsOrMethod) {
     getActiveTarget: function() {
       return settings.active_target ? activeTarget : null;
     },
-    setActiveTarget: apiSetActiveTarget
+    setActiveTarget: apiSetActiveTarget,
+    getSelected: function() {
+      return panelMode() === "sidebar" ? selected : null;
+    },
+    setSelected: apiSetSelected
   };
   Object.keys(own).forEach(function(name) {
     var value = !!(METHODS[name] && METHODS[name].value);
@@ -4747,7 +5034,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.8.2";
+GridEditor.version = false ? "dev" : "8.9.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",
@@ -4780,6 +5067,10 @@ GridEditor.locales = {
     "panel.title": "{kind} settings",
     "panel.close": "Close",
     "panel.done": "Done",
+    "panel.sidebar_title": "Settings",
+    "panel.sidebar_empty": "Click an element to see its settings",
+    "panel.collapse": "Hide settings",
+    "panel.expand": "Show settings",
     "panel.id": "Id",
     "panel.classes": "Classes",
     "panel.section_general": "Id and classes",

package/dist/grideditor.jquery.js

@@ -47,7 +47,9 @@
       getUtility: { value: true },
       setUtility: { value: true },
       getActiveTarget: { value: true },
-      setActiveTarget: {}
+      setActiveTarget: {},
+      getSelected: { value: true },
+      setSelected: {}
     };
     var TOOL_SETTINGS = [
       "row_tools",

package/dist/grideditor.jquery.min.js

@@ -1 +1 @@
-(()=>{var u=window.GridEditor;if(!u||typeof u.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");var i=window.jQuery,T=function(a,o){return u.t({locale:"en"},a,o)},m={};function b(a,o){m[a]||(m[a]=!0,window.console&&window.console.warn&&window.console.warn("grid-editor: "+o))}!i||!i.fn?b("no-jquery",T("warning.adapter_no_jquery")):x();function x(){var a={getHtml:{value:!0},getPlainHtml:{value:!0},init:{},deinit:{},reset:{},destroy:{},changeView:{},getView:{value:!0},createRow:{value:!0},createColumn:{value:!0},createElement:{value:!0},createText:{value:!0},createSection:{value:!0},createContainer:{value:!0},addTab:{value:!0},addAccordionItem:{value:!0},setLocale:{},getUtility:{value:!0},setUtility:{value:!0},getActiveTarget:{value:!0},setActiveTarget:{}},o=["row_tools","col_tools","element_tools","container_tools","tab_tools","accordion_tools","text_tools"];function g(r){return!!r&&r.nodeType===1}function l(r){return r instanceof i?r[0]||null:r}function h(r){if(r instanceof i)return l(r);if(r&&typeof r=="object"&&!Array.isArray(r)&&!g(r)){var t={};return Object.keys(r).forEach(function(e){t[e]=l(r[e])}),t}return r}function w(r){return g(r)?i(r):r}var s=new WeakMap;function p(r){if(!r||typeof r!="object")return r;if(s.has(r))return s.get(r);var t=Object.assign({},r);return["node","parent","canvas"].forEach(function(e){e in r&&(t[e]=i(r[e]||[]))}),r.container&&(t.container=i(r.container)),Array.isArray(r.nodes)&&(t.node=i(r.nodes)),["from","to"].forEach(function(e){var n=r[e];n&&typeof n=="object"&&"parent"in n&&(t[e]=Object.assign({},n,{parent:i(n.parent||[])}))}),s.set(r,t),t}var v=i.event.dispatch;i.event.dispatch=function(r){return arguments.length===1&&r instanceof window.CustomEvent&&typeof r.type=="string"&&r.type.indexOf("grideditor:")===0?v.call(this,r,p(r.detail)):v.apply(this,arguments)};function y(r){return function(t){return r.call(this,i.event.fix(t))}}function _(r){if(!r||!r.on)return r;var t;return typeof r.on=="function"?t=y(r.on):(t={},Object.keys(r.on).forEach(function(e){t[e]=y(r.on[e])})),Object.assign({},r,{on:t})}function j(r){return function(t,e){var n=typeof r=="string"?window[r]:r;return n(i(t),e)}}function E(r){if(r=Object.assign({},r||{}),r.callbacks){var t={};Object.keys(r.callbacks).forEach(function(n){var c=r.callbacks[n];t[n]=typeof c=="function"?function(f){return c(p(f))}:c}),r.callbacks=t}if(r.custom_filter&&r.custom_filter.length){var e=typeof r.custom_filter=="string"||typeof r.custom_filter=="function"?[r.custom_filter]:Array.prototype.slice.call(r.custom_filter);r.custom_filter=e.map(j)}return o.forEach(function(n){Array.isArray(r[n])&&(r[n]=r[n].map(_))}),r.source_textarea=l(r.source_textarea),r}function A(r){var t={canvas:i(r.canvas)};return Object.keys(a).forEach(function(e){t[e]=function(){var n=r[e].apply(r,Array.prototype.map.call(arguments,h));return n===r?void 0:w(n)}}),Object.defineProperty(t,"settings",{enumerable:!0,get:function(){return r.settings}}),t}u._created.push(function(r){i.data(r.canvas,"grideditor",A(r));var t=r.destroy;r.destroy=function(){var e=t.apply(this,arguments);return i.removeData(r.canvas,"grideditor"),e}});function O(r,t,e){var n=a[t];if(!n)return b("method:"+t,'unknown method "'+t+'"'),r;if(e=e.map(h),n.value){var c=r.first();if(!c.length)return null;var f=u.get(c[0]);return f?w(f[t].apply(f,e)):t==="getHtml"?c.html():t==="getPlainHtml"?u._plainHtml(c.html()):null}return r.each(function(){var d=u.get(this);d&&d[t].apply(d,e)}),r}i.fn.gridEditor=function(r){if(typeof r=="string")return O(this,r,Array.prototype.slice.call(arguments,1));var t=E(r);return this.each(function(){u.create(this,t)}),this},i.fn.gridEditor.locales=u.locales,i.fn.gridEditor.t=u.t}})();
+(()=>{var u=window.GridEditor;if(!u||typeof u.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");var i=window.jQuery,T=function(a,o){return u.t({locale:"en"},a,o)},m={};function b(a,o){m[a]||(m[a]=!0,window.console&&window.console.warn&&window.console.warn("grid-editor: "+o))}!i||!i.fn?b("no-jquery",T("warning.adapter_no_jquery")):x();function x(){var a={getHtml:{value:!0},getPlainHtml:{value:!0},init:{},deinit:{},reset:{},destroy:{},changeView:{},getView:{value:!0},createRow:{value:!0},createColumn:{value:!0},createElement:{value:!0},createText:{value:!0},createSection:{value:!0},createContainer:{value:!0},addTab:{value:!0},addAccordionItem:{value:!0},setLocale:{},getUtility:{value:!0},setUtility:{value:!0},getActiveTarget:{value:!0},setActiveTarget:{},getSelected:{value:!0},setSelected:{}},o=["row_tools","col_tools","element_tools","container_tools","tab_tools","accordion_tools","text_tools"];function g(r){return!!r&&r.nodeType===1}function l(r){return r instanceof i?r[0]||null:r}function h(r){if(r instanceof i)return l(r);if(r&&typeof r=="object"&&!Array.isArray(r)&&!g(r)){var t={};return Object.keys(r).forEach(function(e){t[e]=l(r[e])}),t}return r}function v(r){return g(r)?i(r):r}var s=new WeakMap;function w(r){if(!r||typeof r!="object")return r;if(s.has(r))return s.get(r);var t=Object.assign({},r);return["node","parent","canvas"].forEach(function(e){e in r&&(t[e]=i(r[e]||[]))}),r.container&&(t.container=i(r.container)),Array.isArray(r.nodes)&&(t.node=i(r.nodes)),["from","to"].forEach(function(e){var n=r[e];n&&typeof n=="object"&&"parent"in n&&(t[e]=Object.assign({},n,{parent:i(n.parent||[])}))}),s.set(r,t),t}var p=i.event.dispatch;i.event.dispatch=function(r){return arguments.length===1&&r instanceof window.CustomEvent&&typeof r.type=="string"&&r.type.indexOf("grideditor:")===0?p.call(this,r,w(r.detail)):p.apply(this,arguments)};function y(r){return function(t){return r.call(this,i.event.fix(t))}}function _(r){if(!r||!r.on)return r;var t;return typeof r.on=="function"?t=y(r.on):(t={},Object.keys(r.on).forEach(function(e){t[e]=y(r.on[e])})),Object.assign({},r,{on:t})}function j(r){return function(t,e){var n=typeof r=="string"?window[r]:r;return n(i(t),e)}}function E(r){if(r=Object.assign({},r||{}),r.callbacks){var t={};Object.keys(r.callbacks).forEach(function(n){var c=r.callbacks[n];t[n]=typeof c=="function"?function(f){return c(w(f))}:c}),r.callbacks=t}if(r.custom_filter&&r.custom_filter.length){var e=typeof r.custom_filter=="string"||typeof r.custom_filter=="function"?[r.custom_filter]:Array.prototype.slice.call(r.custom_filter);r.custom_filter=e.map(j)}return o.forEach(function(n){Array.isArray(r[n])&&(r[n]=r[n].map(_))}),r.source_textarea=l(r.source_textarea),r}function A(r){var t={canvas:i(r.canvas)};return Object.keys(a).forEach(function(e){t[e]=function(){var n=r[e].apply(r,Array.prototype.map.call(arguments,h));return n===r?void 0:v(n)}}),Object.defineProperty(t,"settings",{enumerable:!0,get:function(){return r.settings}}),t}u._created.push(function(r){i.data(r.canvas,"grideditor",A(r));var t=r.destroy;r.destroy=function(){var e=t.apply(this,arguments);return i.removeData(r.canvas,"grideditor"),e}});function O(r,t,e){var n=a[t];if(!n)return b("method:"+t,'unknown method "'+t+'"'),r;if(e=e.map(h),n.value){var c=r.first();if(!c.length)return null;var f=u.get(c[0]);return f?v(f[t].apply(f,e)):t==="getHtml"?c.html():t==="getPlainHtml"?u._plainHtml(c.html()):null}return r.each(function(){var d=u.get(this);d&&d[t].apply(d,e)}),r}i.fn.gridEditor=function(r){if(typeof r=="string")return O(this,r,Array.prototype.slice.call(arguments,1));var t=E(r);return this.each(function(){u.create(this,t)}),this},i.fn.gridEditor.locales=u.locales,i.fn.gridEditor.t=u.t}})();