@themarioga/grid-editor 8.7.1 → 8.8.1

package/docs/locale-keys.md

@@ -36,7 +36,11 @@ The tools in a drawer, and the buttons in the toolbar above the canvas.
 | `tool.delete_column` | Remove col | Column drawer |
 | `tool.delete_element` | Remove element | Element drawer |
 | `tool.delete_container` | Remove container | Container drawer |
-| `tool.delete_pane` | Remove pane | Drawer of a tab or an accordion item |
+| `tool.delete_pane` | Remove pane | Drawer of a tab, an accordion item or a carousel slide |
+| `tool.carousel_show_previous` | Previous slide | Carousel drawer, shows the previous slide |
+| `tool.carousel_show_next` | Next slide | Carousel drawer, shows the next slide |
+| `tool.carousel_move_back` | Move back | Slide drawer, moves the slide a place back |
+| `tool.carousel_move_forward` | Move forward | Slide drawer, moves the slide a place on |
 | `tool.rename` | Double click to rename | Tooltip of a pane's label, which is edited in place |
 | `tool.toggle_popup` | Fold this popup away while editing | Popup drawer. Editing shows a popup unfolded, and this folds it away |
 | `tool.element_info` | Element: {name} | Tooltip of the element drawer's info tool. `{name}` is the element's `data-ge-label`, its `data-ge-element` type, or both |
@@ -90,12 +94,13 @@ title. `{kind}` is one of the `panel.kind_*` keys, or a container's own label.
 | `panel.kind_section` | Section | For a section |
 | `panel.kind_tab` | Tab | For a tab |
 | `panel.kind_accordion_item` | Accordion item | For an accordion item |
+| `panel.kind_carousel_item` | Slide | For a carousel slide |
 
 
 container.*
 -----------
 
-The containers: tabs, accordions and popups, and the panes inside them.
+The containers: tabs, accordions, popups, carousels and cards, and the panes inside them.
 
 | Key | English | Where |
 | --- | --- | --- |
@@ -122,6 +127,27 @@ The containers: tabs, accordions and popups, and the panes inside them.
 | `container.add_accordion` | Accordion | Toolbar button that adds an accordion |
 | `container.add_accordion_item` | Add item | Container drawer, adds an item |
 | `container.accordion_label` | Item {number} | Label of a new accordion item |
+| `container.add_carousel` | Carousel | Toolbar button that adds a carousel |
+| `container.add_carousel_item` | Add slide | Container drawer, adds a slide |
+| `container.carousel_previous` | Previous | The text, hidden, of a carousel's previous arrow in the page |
+| `container.carousel_next` | Next | The same for the next arrow |
+| `container.carousel_slide_label` | Slide {number} | `aria-label` of a carousel's indicator. `{number}` is the slide's position |
+| `container.carousel_counter` | {current} / {total} | The container's drawer says which slide is shown, and how many there are |
+| `container.carousel_section` | Carousel | Heading of the carousel's section of its settings panel |
+| `container.carousel_controls` | Arrows | Its checkbox for the previous and next arrows |
+| `container.carousel_indicators` | Indicators | Its checkbox for the indicators |
+| `container.carousel_fade` | Fade | Its checkbox for `carousel-fade` |
+| `container.carousel_dark` | Dark theme | Its checkbox for `data-bs-theme="dark"` |
+| `container.carousel_ride` | Autoplay | Its autoplay select, `data-bs-ride` |
+| `container.carousel_ride_no` | No | Its choice for no autoplay |
+| `container.carousel_ride_load` | On load | Its choice for `data-bs-ride="carousel"` |
+| `container.carousel_ride_interaction` | After first interaction | Its choice for `data-bs-ride="true"` |
+| `container.carousel_interval` | Interval (s) | The interval field, in seconds, of the carousel's section and of a slide's. `data-bs-interval` |
+| `container.carousel_pause` | Pause on hover | Its checkbox for `data-bs-pause` |
+| `container.carousel_wrap` | Wrap around | Its checkbox for `data-bs-wrap` |
+| `container.carousel_keyboard` | Keyboard | Its checkbox for `data-bs-keyboard` |
+| `container.carousel_touch` | Touch swipe | Its checkbox for `data-bs-touch` |
+| `container.carousel_item_section` | Slide | Heading of a slide's section of its settings panel |
 | `container.add_popup` | Popup | Toolbar button that adds a popup |
 | `container.popup_title` | Title | Title of a new popup, in its modal header |
 | `container.popup_trigger` | Open | Label of the button a popup makes to open itself |
@@ -234,6 +260,7 @@ browser's own confirm instead.
 | `confirm.delete_container` | Delete this container and everything in it? | Before a container is removed |
 | `confirm.delete_tab` | Delete this tab and everything in it? | Before a tab and its pane are removed |
 | `confirm.delete_accordion_item` | Delete this item and everything in it? | Before an accordion item is removed |
+| `confirm.delete_carousel_item` | Delete this slide and everything in it? | Before a carousel slide is removed |
 
 
 view.*

package/docs/plugins.md

@@ -1,7 +1,7 @@
 Writing a plugin
 ================
 
-Tabs, accordions, popups, cards and the element level controls are not built
+Tabs, accordions, popups, carousels, cards and the element level controls are not built
 into grid-editor: each is a file you load beside it, and loading the file is
 what turns the feature on. `grideditor.card.js` is the shortest of them, and
 the one to read first if you are about to write your own.
@@ -51,23 +51,26 @@ called once per editor, with the handle below, and returns the definition:
 
 ```javascript
 Object.assign(GridEditor.locales.en, {
-    'container.add_carousel': 'Carousel',
-    'container.carousel_label': 'Slide {number}',
+    'container.add_gallery': 'Gallery',
+    'container.gallery_label': 'Picture {number}',
 });
 
-GridEditor.containers.carousel = function(ge) {
+GridEditor.containers.gallery = function(ge) {
 
-    function addSlideTo(container, options) { … }
+    function addPictureTo(container, options) { … }
 
     return {
-        labelKey: 'container.add_carousel',   // the toolbar button's label
+        labelKey: 'container.add_gallery',    // the toolbar button's label
         iconClass: 'bi bi-images',            // optional: the button shows it in place of the label
         group: 'media',                       // optional: its toolbar tab, with toolbar_groups
-        addPaneKey: 'container.add_slide',    // the drawer's add pane tool
-        paneKind: 'slide',                    // the kind its panes report
+        addPaneKey: 'container.add_picture',  // the drawer's add pane tool
+        paneKind: 'picture',                  // the kind its panes report
+        paneClass: 'ge-picture',              // optional: the class mark gives its panes, which is how
+                                              // the editor knows one is a picture
+        paneLabelKey: 'panel.kind_picture',   // optional: what a pane's settings panel calls it
 
         create: function(options) { … },              // returns the container
-        addPane: addSlideTo,                          // returns the new pane
+        addPane: addPictureTo,                        // returns the new pane
         mark: function(container) { … },              // editing furniture on
         unmark: function(container) { … },            // and off again
         cleanMarkup: function(root, liveOf) { … },     // the same, on a copy: see "Reading on a copy"
@@ -86,11 +89,11 @@ it is imported, which is how the shipped plugins' modules work:
 ```javascript
 import { GridEditor } from '@themarioga/grid-editor';
 
-GridEditor.containers.carousel = function(ge) { … };
+GridEditor.containers.gallery = function(ge) { … };
 ```
 
 A page or an app imports it for that side effect, after the editor:
-`import './carousel.js'`. Either way there is one registry per page, and the
+`import './gallery.js'`. Either way there is one registry per page, and the
 editors made after a plugin registered have it.
 
 Everything the editor hands a plugin, and everything a plugin hands back, is
@@ -141,11 +144,11 @@ element, and where there may be several, an array.
 | `ge.detailsOf(node)` | A node's settings panel, wherever it is: in its drawer, or open in the offcanvas, popover or modal `settings_panel` names, outside the canvas. Find a panel's fields through it, never through the drawer. Null for a node with none |
 | `ge.deleteNode(kind, node, confirmText, animate)` | Remove a node: ask, animate, announce |
 | `ge.place(node, kind, options)` | Put a created node where `appendTo` and friends say, through the add events. `options.source` is the payload's `source`, `api` by default |
-| `ge.createPaneControls(pane, kind, hostTools, confirmText, remove)` | The drawer a pane gets: move, the host's tools, delete |
+| `ge.createPaneControls(pane, kind, hostTools, confirmText, remove)` | The drawer a pane gets: move, the host's tools, delete. Returns the drawer, for a plugin that wants other tools in it |
 | `ge.makeLabelEditable(label)` | Rename in place, with the Bootstrap toggle suspended while typing |
 | `ge.labelIn(button)` | The label span inside a button, wrapped if it is not already |
 | `ge.unwrapLabels(scope)` | Take those wrappers off again, for `unmark` |
-| `ge.suspendToggles(scope)` / `ge.resumeToggles(scope)` | Move `data-bs-toggle` aside while editing, and back on the way out |
+| `ge.suspendToggles(scope)` / `ge.resumeToggles(scope)` | Move the attributes Bootstrap's data api acts on - `data-bs-toggle`, `data-bs-dismiss`, `data-bs-slide`, `data-bs-slide-to` and `data-bs-ride` - aside while editing, and back on the way out. They take `scope` and everything under it: a plugin whose container holds others passes the elements that are its own |
 | `ge.emit(name, payload)` | Fire an event and its callbacks; false means a handler canceled |
 | `ge.payloadFor(kind, node, extra)` | Build a payload the documented way |
 | `ge.operate(body)` | Run `body` as one operation, so a handler calling back in is queued |
@@ -297,7 +300,7 @@ is, called for each container of the type under `root`:
 ```javascript
 cleanMarkup: function(root) {
     var definition = this;
-    root.querySelectorAll('[data-ge-container="carousel"]').forEach(function(container) {
+    root.querySelectorAll('[data-ge-container="gallery"]').forEach(function(container) {
         definition.unmark(container);
     });
 },

package/example/containers.html

@@ -23,6 +23,7 @@
     <script src="../dist/plugins/grideditor.accordion.min.js"></script>
     <script src="../dist/plugins/grideditor.popup.min.js"></script>
     <script src="../dist/plugins/grideditor.card.min.js"></script>
+    <script src="../dist/plugins/grideditor.carousel.min.js"></script>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -87,9 +88,9 @@
                 <p class="form-text">
                     A container holds regions, and every region is an ordinary
                     one: rows, columns, content areas and elements nest inside
-                    it exactly as they do at the top level. The four buttons in
-                    the toolbar add a tabs container, an accordion, a popup and
-                    a card &mdash; the first three hold a pane each, a card
+                    it exactly as they do at the top level. The five buttons in
+                    the toolbar add a tabs container, an accordion, a popup, a
+                    carousel and a card &mdash; the first four hold a pane each, a card
                     holds one region and an editable header.
                 </p>
                 <p class="form-text">
@@ -104,7 +105,11 @@
                     an accordion item. A tabs container's gear has a Tabs
                     section for its variant - tabs, pills or underline, full
                     width, alignment, and vertical from a breakpoint up - and
-                    the last row has two of them.
+                    the row after has two of them. The last row is a carousel:
+                    one slide shows at a time, the arrows in its drawer move
+                    between them, and the gear has a Carousel section for
+                    fade, autoplay and the rest of Bootstrap's options, and a
+                    slide&rsquo;s own gear has its interval.
                 </p>
                 <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
                 <button class="btn btn-sm btn-primary" id="authored" type="button">Open that html as a real page</button>
@@ -118,10 +123,10 @@
                 <div class="col-lg-6">
                     <div data-ge-container="tabs">
                         <ul class="nav nav-tabs" role="tablist">
-                            <li class="nav-item ge-tab" role="presentation">
+                            <li class="nav-item" role="presentation">
                                 <button class="nav-link active" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-tab-one" aria-controls="example-tab-one" aria-selected="true">Overview</button>
                             </li>
-                            <li class="nav-item ge-tab" role="presentation">
+                            <li class="nav-item" role="presentation">
                                 <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-tab-two" aria-controls="example-tab-two">Details</button>
                             </li>
                         </ul>
@@ -214,10 +219,10 @@
                                     <div class="accordion-body">
                                         <div data-ge-container="tabs">
                                             <ul class="nav nav-tabs" role="tablist">
-                                                <li class="nav-item ge-tab" role="presentation">
+                                                <li class="nav-item" role="presentation">
                                                     <button class="nav-link active" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#nested-tab-one" aria-controls="nested-tab-one" aria-selected="true">Nested</button>
                                                 </li>
-                                                <li class="nav-item ge-tab" role="presentation">
+                                                <li class="nav-item" role="presentation">
                                                     <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#nested-tab-two" aria-controls="nested-tab-two">Two levels</button>
                                                 </li>
                                             </ul>
@@ -301,6 +306,41 @@
                 </div>
             </div>
 
+            <div class="row">
+                <div class="col-lg-12">
+                    <div data-ge-container="carousel">
+                        <div class="carousel slide carousel-fade" id="example-carousel" data-bs-ride="carousel" data-bs-interval="5000">
+                            <div class="carousel-indicators">
+                                <button type="button" data-bs-target="#example-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+                                <button type="button" data-bs-target="#example-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+                            </div>
+                            <div class="carousel-inner">
+                                <div class="carousel-item active">
+                                    <div class="row"><div class="col-lg-12">
+                                        <div class="ge-content" data-ge-content-type="tinymce"><p>A carousel that fades and starts by itself on the page. In the editor it stays on one slide until you move it with the arrows in its drawer.</p></div>
+                                    </div></div>
+                                </div>
+                                <div class="carousel-item" data-bs-interval="2000">
+                                    <div class="row"><div class="col-lg-6">
+                                        <div class="ge-content" data-ge-content-type="tinymce"><p>A slide is a region like any other, and this one stays for two seconds only.</p></div>
+                                    </div><div class="col-lg-6">
+                                        <div class="ge-content" data-ge-content-type="tinymce"><p>So it takes rows and columns of its own.</p></div>
+                                    </div></div>
+                                </div>
+                            </div>
+                            <button class="carousel-control-prev" type="button" data-bs-target="#example-carousel" data-bs-slide="prev">
+                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Previous</span>
+                            </button>
+                            <button class="carousel-control-next" type="button" data-bs-target="#example-carousel" data-bs-slide="next">
+                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span class="visually-hidden">Next</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div> <!-- /#myGrid -->
     </div> <!-- /.container -->
 

package/package.json

@@ -32,7 +32,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "8.7.1",
+  "version": "8.8.1",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/grideditor.js

@@ -32,6 +32,7 @@ var METHODS = {
     createContainer:  { value: true },
     addTab:           { value: true },
     addAccordionItem: { value: true },
+    addPane:          { value: true },
     setLocale:        {},
     getUtility:       { value: true },
     setUtility:       { value: true },
@@ -985,6 +986,17 @@ function build(instance, baseElem, optionsOrMethod) {
             if (fromPlugin) { return fromPlugin; }
 
             if (node.getAttribute('data-ge-container')) { return node.getAttribute('data-ge-container'); }
+
+            // A container plugin's pane, by the class it marks its panes with
+            var paneKind = null;
+            Object.keys(CONTAINERS).forEach(function(type) {
+                var definition = CONTAINERS[type];
+                if (!paneKind && definition.paneClass && dom.hasClass(node, definition.paneClass)) {
+                    paneKind = definition.paneKind;
+                }
+            });
+            if (paneKind) { return paneKind; }
+
             if (dom.hasClass(node, 'ge-tab')) { return 'tab'; }
             if (dom.hasClass(node, 'ge-accordion-item')) { return 'accordion-item'; }
             if (dom.hasClass(node, 'row')) { return 'row'; }
@@ -3150,7 +3162,7 @@ function build(instance, baseElem, optionsOrMethod) {
         }
 
         /* --------------------------------------------------------------
-         * Containers: tabs, accordions and popups.
+         * Containers: tabs, accordions, popups, carousels and cards.
          *
          * A container holds panes, and a pane is an ordinary canvas region -
          * rows, columns, content areas and elements nest inside one exactly
@@ -3260,6 +3272,7 @@ 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,
@@ -3300,33 +3313,41 @@ function build(instance, baseElem, optionsOrMethod) {
          * for its selector to match, so the attribute is moved aside while
          * the editor needs the control not to react, and moved back on the
          * way out.
+         *
+         * The attributes are the ones Bootstrap's data api acts on: the tabs',
+         * accordions' and popups' toggles and dismisses, and a carousel's
+         * slide controls and autoplay.
          */
+        var TOGGLE_ATTRIBUTES = ['toggle', 'dismiss', 'slide', 'slide-to', 'ride'];
+
         function suspendToggles(scope) {
             if (!scope) { return; }
 
-            dom.selfAndAll(scope, '[data-bs-toggle], [data-bs-dismiss]').forEach(function(node) {
-                ['toggle', 'dismiss'].forEach(function(name) {
-                    var value = node.getAttribute('data-bs-' + name);
-                    if (value === null) { return; }
+            dom.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; }
 
-                    node.setAttribute('data-ge-bs-' + name, value);
-                    node.removeAttribute('data-bs-' + name);
+                        node.setAttribute('data-ge-bs-' + name, value);
+                        node.removeAttribute('data-bs-' + name);
+                    });
                 });
-            });
         }
 
         function resumeToggles(scope) {
             if (!scope) { return; }
 
-            dom.selfAndAll(scope, '[data-ge-bs-toggle], [data-ge-bs-dismiss]').forEach(function(node) {
-                ['toggle', 'dismiss'].forEach(function(name) {
-                    var value = node.getAttribute('data-ge-bs-' + name);
-                    if (value === null) { return; }
+            dom.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; }
 
-                    node.setAttribute('data-bs-' + name, value);
-                    node.removeAttribute('data-ge-bs-' + name);
+                        node.setAttribute('data-bs-' + name, value);
+                        node.removeAttribute('data-ge-bs-' + name);
+                    });
                 });
-            });
         }
 
         /**
@@ -4480,6 +4501,11 @@ 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');
                 case 'column': return t('panel.kind_column');
@@ -5437,6 +5463,7 @@ function build(instance, baseElem, optionsOrMethod) {
             }
 
             var pane = definition.addPane(container, options);
+            if (!pane) { return null; }
 
             return addNode(definition.paneKind, pane, function() {}, {
                 parent: container,
@@ -5445,6 +5472,19 @@ function build(instance, baseElem, optionsOrMethod) {
             });
         }
 
+        /** A pane appended to a container of any type that has panes. */
+        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);
+        }
+
         /**
          * A shallow frozen copy of the settings for the instance, so a host
          * can read what the editor is running with without changing it
@@ -5868,6 +5908,7 @@ function build(instance, baseElem, optionsOrMethod) {
             addAccordionItem: function(container, options) {
                 return addPaneTo(container, 'accordion', options);
             },
+            addPane: apiAddPane,
             setLocale: setLocale,
             getUtility: getUtility,
             setUtility: setUtility,
@@ -5930,13 +5971,13 @@ function build(instance, baseElem, optionsOrMethod) {
 GridEditor._created = [];
 
 /**
- * Container plugins: tabs, accordions, popups, and whatever a host writes.
+ * Container plugins: tabs, accordions, popups, carousels, cards, and whatever a host writes.
  *
  * A plugin is a factory registered under the type it builds, called once per
  * editor with the handle described in docs/plugins.md. Loading its file is
  * what makes the type available; the `plugins` setting narrows that list.
  *
- *   GridEditor.containers.carousel = function(ge) {
+ *   GridEditor.containers.gallery = function(ge) {
  *       return { labelKey: ..., create: ..., mark: ..., unmark: ... };
  *   };
  */

package/src/js/locales/grideditor.es.js

@@ -97,6 +97,33 @@ GridEditor.locales.es = {
     'container.tabs_layout_horizontal': 'Horizontal',
     'container.tabs_layout_vertical': 'Vertical',
     'container.tabs_layout_vertical_from': 'Vertical desde {breakpoint}',
+    'container.add_carousel': 'Carrusel',
+    'container.add_carousel_item': 'Añadir diapositiva',
+    'confirm.delete_carousel_item': '¿Borrar esta diapositiva y todo lo que contiene?',
+    'panel.kind_carousel_item': 'Diapositiva',
+    'container.carousel_previous': 'Anterior',
+    'container.carousel_next': 'Siguiente',
+    'container.carousel_slide_label': 'Diapositiva {number}',
+    'container.carousel_counter': '{current} / {total}',
+    'tool.carousel_show_previous': 'Diapositiva anterior',
+    'tool.carousel_show_next': 'Diapositiva siguiente',
+    'tool.carousel_move_back': 'Mover atrás',
+    'tool.carousel_move_forward': 'Mover adelante',
+    'container.carousel_section': 'Carrusel',
+    'container.carousel_controls': 'Flechas',
+    'container.carousel_indicators': 'Indicadores',
+    'container.carousel_fade': 'Fundido',
+    'container.carousel_dark': 'Tema oscuro',
+    'container.carousel_ride': 'Autoplay',
+    'container.carousel_ride_no': 'No',
+    'container.carousel_ride_load': 'Al cargar',
+    'container.carousel_ride_interaction': 'Tras la primera interacción',
+    'container.carousel_interval': 'Intervalo (s)',
+    'container.carousel_pause': 'Pausa al pasar el ratón',
+    'container.carousel_wrap': 'Volver al principio',
+    'container.carousel_keyboard': 'Teclado',
+    'container.carousel_touch': 'Táctil',
+    'container.carousel_item_section': 'Diapositiva',
     'container.add_accordion': 'Acordeón',
     'container.add_accordion_item': 'Añadir apartado',
     'container.accordion_label': 'Apartado {number}',