@themarioga/grid-editor 8.7.1 → 8.8.0

package/dist/grideditor.d.ts

@@ -77,6 +77,40 @@ export interface CreateTabsOptions extends Placement, TabsOptions {
     labels?: string[];
 }
 
+/**
+ * A carousel's options, which are Bootstrap's classes and attributes: arrows,
+ * indicators, fade, dark theme, autoplay and its interval, and the pause,
+ * wrap, keyboard and touch behaviours. All on or off unless said, as
+ * Bootstrap has them.
+ */
+export interface CarouselOptions {
+    /** Previous and next arrows. Default true. */
+    controls?: boolean;
+    /** One indicator a slide. Default true. */
+    indicators?: boolean;
+    /** Slides fade into each other instead of sliding. Default false. */
+    fade?: boolean;
+    /** `data-bs-theme="dark"`. Default false. */
+    dark?: boolean;
+    /** Autoplay: false, `'carousel'` on load, `'true'` after the first interaction. Default false. */
+    ride?: false | 'carousel' | 'true';
+    /** Milliseconds, 1000 or more, between slides; null is Bootstrap's own. Default null. */
+    interval?: number | null;
+    /** Pauses while the pointer is over it. Default true. */
+    pause?: boolean;
+    /** Goes from the last slide to the first. Default true. */
+    wrap?: boolean;
+    /** Answers the arrow keys. Default true. */
+    keyboard?: boolean;
+    /** Answers a swipe. Default true. */
+    touch?: boolean;
+    /** How many slides a new one has, 1 or more. Default 2. */
+    slides?: number;
+}
+
+/** createContainer('carousel', …): the options, and how many slides. */
+export interface CreateCarouselOptions extends Placement, CarouselOptions {}
+
 /** The inline-style plugin's settings. */
 export interface InlineStyleOptions {
     /** Every section is on unless it is turned off here. */
@@ -104,6 +138,8 @@ export interface GridEditorOptions {
     container_tools?: HostTool[];
     tab_tools?: HostTool[];
     accordion_tools?: HostTool[];
+    /** Host tools on carousel slide drawers. */
+    carousel_tools?: HostTool[];
     text_tools?: HostTool[];
     drag_handle?: 'tool' | 'drawer';
     toolbar_drag?: 'auto' | boolean;
@@ -125,6 +161,8 @@ export interface GridEditorOptions {
     inline_style?: InlineStyleOptions;
     /** The tabs plugin: the variant of the tabs containers made new. */
     tabs?: TabsOptions;
+    /** The carousel plugin: the options of the carousels made new. */
+    carousel?: CarouselOptions;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean; types?: ElementType[] };
     /** The autosave plugin: what is edited, kept in the browser's storage as it changes. */
     autosave?: AutosaveOptions;
@@ -211,7 +249,7 @@ export interface Cleared {
 
 /** What every notification carries. */
 export interface Payload {
-    /** What the node is: row, column, text, plain, element, tab, accordion-item, a container's type… */
+    /** What the node is: row, column, text, plain, element, tab, accordion-item, carousel-item, a container's type… */
     kind: string;
     node: HTMLElement;
     /** Where the node is going, or coming from on a delete; null while it is detached. */
@@ -297,6 +335,8 @@ export interface GridEditorEventMap {
     'grideditor:after-add-tab': Payload;
     'grideditor:before-add-accordion-item': Payload;
     'grideditor:after-add-accordion-item': Payload;
+    'grideditor:before-add-carousel-item': Payload;
+    'grideditor:after-add-carousel-item': Payload;
     'grideditor:before-add-section': Payload;
     'grideditor:after-add-section': Payload;
     'grideditor:before-delete': Payload;
@@ -437,9 +477,12 @@ export declare class GridEditor {
     createElement(content: string | Node | ArrayLike<Node>, options?: CreateElementOptions): HTMLElement | null;
     createSection(options?: CreateSectionOptions): HTMLElement | null;
     createContainer(type: 'tabs', options?: CreateTabsOptions): HTMLElement | null;
+    createContainer(type: 'carousel', options?: CreateCarouselOptions): HTMLElement | null;
     createContainer(type: string, options?: Placement & Record<string, unknown>): HTMLElement | null;
     addTab(container: Target, options?: PaneOptions): HTMLElement | null;
     addAccordionItem(container: Target, options?: PaneOptions): HTMLElement | null;
+    /** A pane added to a container of any type that has panes; a carousel's takes `interval`. Null for one that has none. */
+    addPane(container: Target, options?: PaneOptions & { interval?: number }): HTMLElement | null;
     /** A utility's value on a node in a view (the current one by default), or null. */
     getUtility(node: Target, family: string, view?: View): string | null;
     /** Write one through the events; null is inherit. False when canceled or nothing changed. */

package/dist/grideditor.esm.js

@@ -323,6 +323,7 @@ var METHODS = {
   createContainer: { value: true },
   addTab: { value: true },
   addAccordionItem: { value: true },
+  addPane: { value: true },
   setLocale: {},
   getUtility: { value: true },
   setUtility: { value: true },
@@ -1032,6 +1033,16 @@ function build(instance, baseElem, optionsOrMethod) {
     if (node.getAttribute("data-ge-container")) {
       return node.getAttribute("data-ge-container");
     }
+    var paneKind = null;
+    Object.keys(CONTAINERS).forEach(function(type) {
+      var definition = CONTAINERS[type];
+      if (!paneKind && definition.paneClass && hasClass(node, definition.paneClass)) {
+        paneKind = definition.paneKind;
+      }
+    });
+    if (paneKind) {
+      return paneKind;
+    }
     if (hasClass(node, "ge-tab")) {
       return "tab";
     }
@@ -2794,6 +2805,9 @@ function build(instance, baseElem, optionsOrMethod) {
     if (definition.addPane) {
       createTool(drawer, t(definition.addPaneKey), "ge-add-pane", "bi bi-plus-circle", function() {
         var pane = definition.addPane(container, {});
+        if (!pane) {
+          return;
+        }
         addNode(definition.paneKind, pane, function() {
         }, {
           parent: container,
@@ -2815,12 +2829,15 @@ function build(instance, baseElem, optionsOrMethod) {
     });
     return drawer;
   }
+  var TOGGLE_ATTRIBUTES = ["toggle", "dismiss", "slide", "slide-to", "ride"];
   function suspendToggles(scope) {
     if (!scope) {
       return;
     }
-    selfAndAll(scope, "[data-bs-toggle], [data-bs-dismiss]").forEach(function(node) {
-      ["toggle", "dismiss"].forEach(function(name) {
+    selfAndAll(scope, TOGGLE_ATTRIBUTES.map(function(name) {
+      return "[data-bs-" + name + "]";
+    }).join(", ")).forEach(function(node) {
+      TOGGLE_ATTRIBUTES.forEach(function(name) {
         var value = node.getAttribute("data-bs-" + name);
         if (value === null) {
           return;
@@ -2834,8 +2851,10 @@ function build(instance, baseElem, optionsOrMethod) {
     if (!scope) {
       return;
     }
-    selfAndAll(scope, "[data-ge-bs-toggle], [data-ge-bs-dismiss]").forEach(function(node) {
-      ["toggle", "dismiss"].forEach(function(name) {
+    selfAndAll(scope, TOGGLE_ATTRIBUTES.map(function(name) {
+      return "[data-ge-bs-" + name + "]";
+    }).join(", ")).forEach(function(node) {
+      TOGGLE_ATTRIBUTES.forEach(function(name) {
         var value = node.getAttribute("data-ge-bs-" + name);
         if (value === null) {
           return;
@@ -3723,6 +3742,12 @@ function build(instance, baseElem, optionsOrMethod) {
     if (CONTAINERS[kind] && CONTAINERS[kind].labelKey) {
       return t(CONTAINERS[kind].labelKey);
     }
+    var paneLabel = Object.keys(CONTAINERS).filter(function(type) {
+      return CONTAINERS[type].paneKind === kind && CONTAINERS[type].paneLabelKey;
+    })[0];
+    if (paneLabel) {
+      return t(CONTAINERS[paneLabel].paneLabelKey);
+    }
     switch (kind) {
       case "row":
         return t("panel.kind_row");
@@ -4356,6 +4381,9 @@ function build(instance, baseElem, optionsOrMethod) {
       return null;
     }
     var pane = definition.addPane(container, options);
+    if (!pane) {
+      return null;
+    }
     return addNode(definition.paneKind, pane, function() {
     }, {
       parent: container,
@@ -4363,6 +4391,15 @@ function build(instance, baseElem, optionsOrMethod) {
       container
     });
   }
+  function apiAddPane(container, options) {
+    container = nodeFrom(container);
+    var type = containerTypeOf(container);
+    if (!CONTAINERS[type] || !CONTAINERS[type].addPane) {
+      warn("addPane: this is not a container with panes");
+      return null;
+    }
+    return addPaneTo(container, type, options);
+  }
   function settingsCopy() {
     var copy = {};
     Object.keys(settings).forEach(function(key) {
@@ -4652,6 +4689,7 @@ function build(instance, baseElem, optionsOrMethod) {
     addAccordionItem: function(container, options) {
       return addPaneTo(container, "accordion", options);
     },
+    addPane: apiAddPane,
     setLocale,
     getUtility,
     setUtility,
@@ -4709,7 +4747,7 @@ GridEditor.t = translate;
 GridEditor._plainHtml = plainHtml;
 GridEditor.Sortable = null;
 GridEditor.bootstrap = null;
-GridEditor.version = false ? "dev" : "8.7.1";
+GridEditor.version = false ? "dev" : "8.8.0";
 GridEditor.locales = {
   en: {
     "tool.move": "Move",

package/dist/grideditor.js

@@ -324,6 +324,7 @@
     createContainer: { value: true },
     addTab: { value: true },
     addAccordionItem: { value: true },
+    addPane: { value: true },
     setLocale: {},
     getUtility: { value: true },
     setUtility: { value: true },
@@ -1033,6 +1034,16 @@
       if (node.getAttribute("data-ge-container")) {
         return node.getAttribute("data-ge-container");
       }
+      var paneKind = null;
+      Object.keys(CONTAINERS).forEach(function(type) {
+        var definition = CONTAINERS[type];
+        if (!paneKind && definition.paneClass && hasClass(node, definition.paneClass)) {
+          paneKind = definition.paneKind;
+        }
+      });
+      if (paneKind) {
+        return paneKind;
+      }
       if (hasClass(node, "ge-tab")) {
         return "tab";
       }
@@ -2795,6 +2806,9 @@
       if (definition.addPane) {
         createTool(drawer, t(definition.addPaneKey), "ge-add-pane", "bi bi-plus-circle", function() {
           var pane = definition.addPane(container, {});
+          if (!pane) {
+            return;
+          }
           addNode(definition.paneKind, pane, function() {
           }, {
             parent: container,
@@ -2816,12 +2830,15 @@
       });
       return drawer;
     }
+    var TOGGLE_ATTRIBUTES = ["toggle", "dismiss", "slide", "slide-to", "ride"];
     function suspendToggles(scope) {
       if (!scope) {
         return;
       }
-      selfAndAll(scope, "[data-bs-toggle], [data-bs-dismiss]").forEach(function(node) {
-        ["toggle", "dismiss"].forEach(function(name) {
+      selfAndAll(scope, TOGGLE_ATTRIBUTES.map(function(name) {
+        return "[data-bs-" + name + "]";
+      }).join(", ")).forEach(function(node) {
+        TOGGLE_ATTRIBUTES.forEach(function(name) {
           var value = node.getAttribute("data-bs-" + name);
           if (value === null) {
             return;
@@ -2835,8 +2852,10 @@
       if (!scope) {
         return;
       }
-      selfAndAll(scope, "[data-ge-bs-toggle], [data-ge-bs-dismiss]").forEach(function(node) {
-        ["toggle", "dismiss"].forEach(function(name) {
+      selfAndAll(scope, TOGGLE_ATTRIBUTES.map(function(name) {
+        return "[data-ge-bs-" + name + "]";
+      }).join(", ")).forEach(function(node) {
+        TOGGLE_ATTRIBUTES.forEach(function(name) {
           var value = node.getAttribute("data-ge-bs-" + name);
           if (value === null) {
             return;
@@ -3724,6 +3743,12 @@
       if (CONTAINERS[kind] && CONTAINERS[kind].labelKey) {
         return t(CONTAINERS[kind].labelKey);
       }
+      var paneLabel = Object.keys(CONTAINERS).filter(function(type) {
+        return CONTAINERS[type].paneKind === kind && CONTAINERS[type].paneLabelKey;
+      })[0];
+      if (paneLabel) {
+        return t(CONTAINERS[paneLabel].paneLabelKey);
+      }
       switch (kind) {
         case "row":
           return t("panel.kind_row");
@@ -4357,6 +4382,9 @@
         return null;
       }
       var pane = definition.addPane(container, options);
+      if (!pane) {
+        return null;
+      }
       return addNode(definition.paneKind, pane, function() {
       }, {
         parent: container,
@@ -4364,6 +4392,15 @@
         container
       });
     }
+    function apiAddPane(container, options) {
+      container = nodeFrom(container);
+      var type = containerTypeOf(container);
+      if (!CONTAINERS[type] || !CONTAINERS[type].addPane) {
+        warn("addPane: this is not a container with panes");
+        return null;
+      }
+      return addPaneTo(container, type, options);
+    }
     function settingsCopy() {
       var copy = {};
       Object.keys(settings).forEach(function(key) {
@@ -4653,6 +4690,7 @@
       addAccordionItem: function(container, options) {
         return addPaneTo(container, "accordion", options);
       },
+      addPane: apiAddPane,
       setLocale,
       getUtility,
       setUtility,
@@ -4710,7 +4748,7 @@
   GridEditor._plainHtml = plainHtml;
   GridEditor.Sortable = null;
   GridEditor.bootstrap = null;
-  GridEditor.version = false ? "dev" : "8.7.1";
+  GridEditor.version = false ? "dev" : "8.8.0";
   GridEditor.locales = {
     en: {
       "tool.move": "Move",