@themarioga/grid-editor 8.7.1 → 8.8.1

package/CHANGELOG.md

@@ -5,6 +5,34 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [8.8.1] - 2026-10-06
+
+### Fixed
+- tabs: `getHtml` gives the tabs without the editor's `ge-tab` class, which
+  it left on every tab since it was written. The canvas still uses it while
+  editing.
+
+## [8.8.0] - 2026-10-06
+
+### Added
+- The carousel plugin, `dist/plugins/grideditor.carousel.js`: a Bootstrap 5
+  carousel whose slides are regions. One slide shows at a time, the arrows in
+  the container's drawer move between them and each slide's drawer moves it a
+  place; Bootstrap's own arrows and indicators are drawn but do not answer.
+  `getHtml` gives the carousel starting at the first slide.
+- A carousel's options - arrows, indicators, fade, dark theme, autoplay and
+  its interval, pause, wrap, keyboard and touch - in a *Carousel* section of
+  its settings panel, in the `carousel` setting for the ones made new, and in
+  the options of `createContainer('carousel', …)`; a slide's own interval in
+  its settings panel. The setting `carousel_tools` adds host tools to a slide's
+  drawer.
+- `addPane(container, options?)` adds a pane to a container of any type that
+  has them, and `addTab` and `addAccordionItem` stay as they were.
+- For plugins: a container's definition can have `paneClass` and
+  `paneLabelKey`, which is how the editor names its panes in events and in
+  their settings panel; and `ge.suspendToggles` and `ge.resumeToggles` put
+  aside `data-bs-slide`, `data-bs-slide-to` and `data-bs-ride` as well.
+
 ## [8.7.1] - 2026-10-02
 
 ### Fixed

package/README.md

@@ -1,7 +1,7 @@
 Grid Editor
 ===========
 
-Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), in plain DOM: no jQuery needed. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), copy and paste them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. Bootstrap's responsive utilities — display, flex, order, alignment, gutters, spacing, text alignment, sticky and float — are edited per breakpoint too, and any row, column, container or element can be given inline css, with Bootstrap's classes for it offered as chips. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
+Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), in plain DOM: no jQuery needed. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), copy and paste them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. Bootstrap's responsive utilities — display, flex, order, alignment, gutters, spacing, text alignment, sticky and float — are edited per breakpoint too, and any row, column, container or element can be given inline css, with Bootstrap's classes for it offered as chips. It also edits tabs, accordions, popups, carousels and cards, and any markup you mark as an element, and it tells your application about every change it makes.
 
 This is a fork of [Friendly-Pixel/grid-editor](https://github.com/Friendly-Pixel/grid-editor)
 by Simon Epskamp, carrying it on from 2.x. It is published as
@@ -27,7 +27,7 @@ from any web server, or from GitHub Pages, with no build step.
 | [example/breakpoints.html](example/breakpoints.html) | The six breakpoints and the "all sizes" view | [live](https://themarioga.github.io/grid-editor/example/breakpoints.html) |
 | [example/plugins.html](example/plugins.html) | The plugin model, with one written in the page itself | [live](https://themarioga.github.io/grid-editor/example/plugins.html) |
 | [example/attributes.html](example/attributes.html) | A plugin of your own: a drawer tool, a modal, and its settings saved as an attribute | [live](https://themarioga.github.io/grid-editor/example/attributes.html) |
-| [example/containers.html](example/containers.html) | Tabs, accordions, popups and cards, two levels deep | [live](https://themarioga.github.io/grid-editor/example/containers.html) |
+| [example/containers.html](example/containers.html) | Tabs, accordions, popups, carousels and cards, two levels deep | [live](https://themarioga.github.io/grid-editor/example/containers.html) |
 | [example/elements.html](example/elements.html) | Element level controls, including an element with no visual output | [live](https://themarioga.github.io/grid-editor/example/elements.html) |
 | [example/autocols.html](example/autocols.html) | Equal and auto columns, columns per row, and sections | [live](https://themarioga.github.io/grid-editor/example/autocols.html) |
 | [example/utilities.html](example/utilities.html) | Bootstrap's responsive utilities, edited per breakpoint | [live](https://themarioga.github.io/grid-editor/example/utilities.html) |
@@ -190,9 +190,10 @@ has, with the options it was made with, and warns once.
 | `createSection` | `options?` | `Element` | A section, with the sections plugin. `options`: `width` (`'fixed'`, `'fluid'` or a breakpoint), `rows` (layouts), and a placement |
 | `createElement` | `content`, `options?` | `Element` | Host markup wrapped as an element. `options`: `type`, `label` |
 | `createText` | `type?`, `options?` | `Element` | A content area for a text editor, the first one offered by default. `options`: `content`, and a placement. `null` if the editor is not loaded, or no text editor is |
-| `createContainer` | `type`, `options?` | `Element` | `'tabs'`, `'accordion'` or `'popup'` |
+| `createContainer` | `type`, `options?` | `Element` | `'tabs'`, `'accordion'`, `'popup'`, `'carousel'` or `'card'` |
 | `addTab` | `container`, `options?` | `Element` | Appends a tab, returns its pane |
 | `addAccordionItem` | `container`, `options?` | `Element` | Appends an item, returns its body |
+| `addPane` | `container`, `options?` | `Element` | Appends a pane to a container of any type that has them - a tab, an item, a carousel slide, whose `options.interval` is its time in milliseconds - and returns it. `null`, and a warning, for a node that is not one |
 | `getUtility` | `node`, `family`, `view?` | `String` | A utility plugin's value on a node in a view (the current one by default), or `null` |
 | `setUtility` | `node`, `family`, `value`, `view?` | `Boolean` | Write it through the events; `null` is inherit. `false` if canceled or nothing changed |
 
@@ -893,8 +894,8 @@ place to keep work.
 
 ### Containers
 
-Tabs, accordions, popups and cards. A tabs, accordion or popup container holds
-panes; a card holds one region. Either way a region is an ordinary one: rows,
+Tabs, accordions, popups, carousels and cards. A tabs, accordion, popup or
+carousel container holds panes; a card holds one region. Either way a region is an ordinary one: rows,
 columns, content areas and elements nest inside it exactly as they do at the
 top level.
 
@@ -906,6 +907,7 @@ it available:
 <script src="grid-editor/dist/plugins/grideditor.tabs.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.accordion.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.popup.min.js"></script>
+<script src="grid-editor/dist/plugins/grideditor.carousel.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.card.min.js"></script>
 ```
 
@@ -925,7 +927,15 @@ new GridEditor('#myGrid', { tabs: { variant: 'pills', vertical: 'md' } });   //
 ge.createContainer('tabs', { variant: 'underline', width: 'fill' });          // an option given wins
 ```
 
-__`container_tools`, `tab_tools`, `accordion_tools`:__ Extra tools on the container drawer and on each pane's drawer, same shape as `row_tools`.
+__`carousel`:__ The options of the carousels made new, from the toolbar or with `createContainer`, as Bootstrap has them: `controls` and `indicators` (the arrows and the dots, both `true`), `fade`, `dark` (`data-bs-theme="dark"`), `ride` (`false`, `'carousel'` to start on load, or `'true'` to start after the first interaction), `interval` (milliseconds, 1000 or more, `null` for Bootstrap's own), `pause`, `wrap`, `keyboard` and `touch` (all `true`), and `slides` (how many, 2). A value a key does not take is warned about and its default used. Every carousel also has a *Carousel* section in its settings panel, which changes its own, and every slide an interval in its own. It is all Bootstrap's classes and attributes, so a page's markup says it too.
+
+```javascript
+new GridEditor('#myGrid', { carousel: { fade: true, ride: 'carousel', interval: 4000 } });
+ge.createContainer('carousel', { slides: 3, controls: false });   // an option given wins
+ge.addPane(carousel, { interval: 8000 });                         // a slide that stays for 8 seconds
+```
+
+__`container_tools`, `tab_tools`, `accordion_tools`, `carousel_tools`:__ Extra tools on the container drawer and on each pane's drawer, same shape as `row_tools`.
 
 ```javascript
 var tabs = ge.createContainer('tabs', {
@@ -951,6 +961,13 @@ the trigger. Any node in the canvas carrying
 `data-ge-popup-target="<popup id>"` is a trigger too — grid-editor leaves your
 markup alone and writes Bootstrap's attributes onto it in the output.
 
+A carousel shows one slide at a time while editing, as it does on the page.
+The container's drawer has the arrows and says which slide it is on, and
+Bootstrap's own arrows and indicators are drawn but do not answer: the editor
+puts the attributes Bootstrap's javascript acts on aside, so an autoplay never
+starts over the canvas. Each slide's drawer moves it a place back or on. What
+`getHtml` gives starts at the first slide, whichever one the canvas was on.
+
 See [example/containers.html](example/containers.html).
 
 ### Localization