@themarioga/grid-editor 9.0.0-beta.3 → 9.0.0-beta.4

package/dist/plugins/grideditor.popup.min.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/js/register.js", "../../src/js/dom.js", "../../src/js/plugins/grideditor.popup.js"],
-  "sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n        'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * The DOM, the way grid-editor uses it.\n *\n * Small helpers over the browser's own API, for the core and the shipped\n * plugins. Not a public API: a plugin of a host's own is free to write its\n * DOM code however it likes, and this file makes no promise to it.\n *\n * Stateless on purpose. The build puts a copy of this file in each plugin's\n * classic script, so anything kept here would be kept once per copy; a\n * module that needs to remember something about a node keeps its own\n * WeakMap.\n */\n\n/** Every element under `root` matching `selector`, as an array. */\nexport function all(root, selector) {\n    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];\n}\n\n/** The first element under `root` matching `selector`, or null. */\nexport function one(root, selector) {\n    return root ? root.querySelector(selector) : null;\n}\n\n/** `root` itself when it matches, then every element under it that does. */\nexport function selfAndAll(root, selector) {\n    if (!root) { return []; }\n\n    var found = all(root, selector);\n    if (root.nodeType === 1 && root.matches(selector)) { found.unshift(root); }\n    return found;\n}\n\n/** The element children of `node`, those matching `selector` if one is given. */\nexport function children(node, selector) {\n    if (!node) { return []; }\n\n    return Array.prototype.filter.call(node.children, function(each) {\n        return !selector || each.matches(selector);\n    });\n}\n\n/** The first element child matching `selector`, or null. */\nexport function child(node, selector) {\n    return children(node, selector)[0] || null;\n}\n\n/** The nearest ancestor-or-self matching `selector` below `stopAt`, or null. */\nexport function closest(node, selector, stopAt) {\n    var found = node && node.nodeType === 1 ? node.closest(selector) : null;\n\n    if (found && stopAt && found !== stopAt && !stopAt.contains(found)) { return null; }\n    return found;\n}\n\n/** Whether `node` is an element matching `selector`. */\nexport function is(node, selector) {\n    return !!node && node.nodeType === 1 && node.matches(selector);\n}\n\n/** Whether `node` is in the document. */\nexport function attached(node) {\n    return !!node && document.documentElement.contains(node);\n}\n\n/** The element siblings after `node` that match `selector`. */\nexport function nextAll(node, selector) {\n    var found = [];\n\n    for (var next = node.nextElementSibling; next; next = next.nextElementSibling) {\n        if (!selector || next.matches(selector)) { found.push(next); }\n    }\n    return found;\n}\n\n/** The ancestors of `node` up to, and not including, `stop`, nearest first. */\nexport function parentsUntil(node, stop) {\n    var found = [];\n\n    for (var parent = node.parentElement; parent && parent !== stop; parent = parent.parentElement) {\n        found.push(parent);\n    }\n    return found;\n}\n\n/**\n * The nodes the html parses into, detached. Parsed the way innerHTML parses,\n * so a <script> in it never runs, here or once it is in the page.\n */\nexport function parse(html) {\n    var template = document.createElement('template');\n    template.innerHTML = html;\n    return Array.prototype.slice.call(template.content.childNodes);\n}\n\n/** The one element the html is, detached. */\nexport function create(html) {\n    var nodes = parse(html.trim());\n\n    for (var i = 0; i < nodes.length; i++) {\n        if (nodes[i].nodeType === 1) { return nodes[i]; }\n    }\n    return null;\n}\n\n/** An element of `tag`, with `attributes` and `text`. */\nexport function element(tag, attributes, text) {\n    var node = document.createElement(tag);\n\n    Object.keys(attributes || {}).forEach(function(name) {\n        var value = attributes[name];\n        if (value !== null && value !== undefined && value !== false) { node.setAttribute(name, value); }\n    });\n    if (text !== undefined && text !== null) { node.textContent = text; }\n\n    return node;\n}\n\n/** Replace what `node` holds with `html`. A <script> in it does not run. */\nexport function setHtml(node, html) {\n    node.innerHTML = html === undefined || html === null ? '' : String(html);\n    return node;\n}\n\n/** Add one or several space separated classes. */\nexport function addClass(node, names) {\n    split(names).forEach(function(name) { node.classList.add(name); });\n    return node;\n}\n\nexport function removeClass(node, names) {\n    split(names).forEach(function(name) { node.classList.remove(name); });\n    return node;\n}\n\n/** Each class on, or off, or flipped when `on` is not given. */\nexport function toggleClass(node, names, state) {\n    split(names).forEach(function(name) {\n        if (state === undefined) {\n            node.classList.toggle(name);\n        } else {\n            node.classList.toggle(name, !!state);\n        }\n    });\n    return node;\n}\n\nexport function hasClass(node, name) {\n    return !!node && node.nodeType === 1 && node.classList.contains(name);\n}\n\nfunction split(names) {\n    return String(names || '').split(/\\s+/).filter(Boolean);\n}\n\n/** Take the class attribute off when there is nothing left in it. */\nexport function dropEmptyClass(node) {\n    if (!node.getAttribute('class')) { node.removeAttribute('class'); }\n    return node;\n}\n\n/** Take the style attribute off when there is nothing left in it. */\nexport function dropEmptyStyle(node) {\n    if (!node.getAttribute('style')) { node.removeAttribute('style'); }\n    return node;\n}\n\n/** Set attributes; a null or undefined value takes the attribute off. */\nexport function attr(node, attributes) {\n    Object.keys(attributes).forEach(function(name) {\n        var value = attributes[name];\n\n        if (value === null || value === undefined) {\n            node.removeAttribute(name);\n        } else {\n            node.setAttribute(name, value);\n        }\n    });\n    return node;\n}\n\n/**\n * Inline styles, by css property name. A number is pixels for the properties\n * that take a length, as jQuery had it; an empty string takes one off.\n */\nexport function css(node, styles) {\n    Object.keys(styles).forEach(function(property) {\n        var value = styles[property];\n\n        if (typeof value === 'number' && !UNITLESS[property]) { value = value + 'px'; }\n        node.style.setProperty(property, value === null || value === undefined ? '' : String(value));\n    });\n    return node;\n}\n\nvar UNITLESS = { opacity: true, 'z-index': true, 'flex-grow': true, 'flex-shrink': true, order: true };\n\n/** What an element of this tag shows as when nothing hides it. */\nvar defaultDisplays = {};\n\nfunction defaultDisplay(node) {\n    var tag = node.nodeName;\n\n    if (!defaultDisplays[tag]) {\n        var probe = document.body.appendChild(document.createElement(tag));\n        defaultDisplays[tag] = getComputedStyle(probe).display;\n        probe.remove();\n        if (defaultDisplays[tag] === 'none') { defaultDisplays[tag] = 'block'; }\n    }\n    return defaultDisplays[tag];\n}\n\n/** Show a node: its inline display:none off, and a display of its own if a stylesheet hides it. */\nexport function show(node) {\n    node.style.removeProperty('display');\n    if (getComputedStyle(node).display === 'none') { node.style.display = defaultDisplay(node); }\n    return node;\n}\n\nexport function hide(node) {\n    node.style.display = 'none';\n    return node;\n}\n\n/** Show or hide; flip when `on` is not given. */\nexport function toggle(node, state) {\n    if (state === undefined) { state = !visible(node); }\n    return state ? show(node) : hide(node);\n}\n\n/** Whether a node takes up room: what jQuery's :visible meant. */\nexport function visible(node) {\n    return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length);\n}\n\n/** The border box's width, fractions included. */\nexport function outerWidth(node) {\n    return node.getBoundingClientRect().width;\n}\n\nexport function outerHeight(node) {\n    return node.getBoundingClientRect().height;\n}\n\n/** The content box's height, which is what jQuery's height() gave. */\nexport function contentHeight(node) {\n    var style = getComputedStyle(node);\n    return node.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);\n}\n\n/** Where a node is on the page, not in the window. */\nexport function offset(node) {\n    var box = node.getBoundingClientRect();\n    return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };\n}\n\n/** Its index among its parent's element children, those matching `selector` if given. */\nexport function indexIn(node, selector) {\n    return children(node.parentElement, selector).indexOf(node);\n}\n\n/** Put `node` right after `reference`. */\nexport function insertAfter(node, reference) {\n    reference.parentNode.insertBefore(node, reference.nextSibling);\n    return node;\n}\n\n/** Replace `node` with what it holds. */\nexport function unwrap(node) {\n    var parent = node.parentNode;\n\n    while (node.firstChild) { parent.insertBefore(node.firstChild, node); }\n    node.remove();\n}\n\n/** Put `node` inside `wrapper`, where `node` was. */\nexport function wrap(node, wrapper) {\n    node.parentNode.insertBefore(wrapper, node);\n    wrapper.appendChild(node);\n    return wrapper;\n}\n\n/**\n * Listen on `root` for `types` (space separated) on descendants that match\n * `selector`, with `this` the matched element, as jQuery's delegated\n * handlers had it. Hands back the listener, for removeEventListener; a\n * signal in `options` removes it too.\n */\nexport function delegate(root, types, selector, handler, options) {\n    var listener = function(event) {\n        var match = closest(event.target, selector, root);\n        if (match && root.contains(match)) { return handler.call(match, event); }\n        return undefined;\n    };\n\n    split(types).forEach(function(type) { root.addEventListener(type, listener, options); });\n    return listener;\n}\n\n/** Listen for several space separated event types with one handler. */\nexport function on(target, types, handler, options) {\n    split(types).forEach(function(type) { target.addEventListener(type, handler, options); });\n    return handler;\n}\n\nexport function off(target, types, handler, options) {\n    split(types).forEach(function(type) { target.removeEventListener(type, handler, options); });\n}\n\n/** A mouse event of `type` sent to `node`, the way a pointer would. */\nexport function fire(node, type) {\n    node.dispatchEvent(new MouseEvent(type, { bubbles: type !== 'mouseenter' && type !== 'mouseleave' }));\n}\n\n/* ------------------------------------------------------------------\n * Taking a node away, visibly.\n *\n * The durations are jQuery's: 400 ms unless the caller says otherwise. `done` runs once the node is out of sight, which is\n * when the caller removes it; a node that is already out of sight is done at\n * once, on the next task, as jQuery had it.\n * ------------------------------------------------------------------ */\n\nvar DEFAULT_DURATION = 400;\n\nfunction animateAway(node, frames, duration, done) {\n    duration = duration === undefined ? DEFAULT_DURATION : duration;\n\n    var finish = function() {\n        hide(node);\n        if (done) { done(); }\n    };\n\n    if (!visible(node) || !node.animate || duration <= 0) {\n        window.setTimeout(finish, 0);\n        return;\n    }\n\n    var animation = node.animate(frames(getComputedStyle(node)), {\n        duration: duration,\n        easing: 'ease-in-out',\n    });\n    var called = false;\n    var once = function() {\n        if (called) { return; }\n        called = true;\n        finish();\n    };\n\n    animation.onfinish = once;\n    animation.oncancel = once;\n}\n\n/** Fold a node up to nothing, then hide it. */\nexport function slideUp(node, duration, done) {\n    if (typeof duration === 'function') {\n        done = duration;\n        duration = undefined;\n    }\n\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        return [\n            {\n                height: style.height,\n                paddingTop: style.paddingTop,\n                paddingBottom: style.paddingBottom,\n                marginTop: style.marginTop,\n                marginBottom: style.marginBottom,\n            },\n            { height: '0px', paddingTop: '0px', paddingBottom: '0px', marginTop: '0px', marginBottom: '0px' },\n        ];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n\n/** Fade a node out, then hide it. */\nexport function fadeOut(node, duration, done) {\n    animateAway(node, function(style) {\n        return [{ opacity: style.opacity }, { opacity: 0 }];\n    }, duration, done);\n}\n\n/** Fade and fold a node, in height and, with `width`, sideways too, then hide it. */\nexport function shrinkAway(node, duration, done, width) {\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        var from = { opacity: style.opacity, height: style.height };\n        var to = { opacity: 0, height: '0px' };\n\n        if (width) {\n            from.width = style.width;\n            to.width = '0px';\n        }\n        return [from, to];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n", "/**\n * Popups for grid-editor.\n *\n * A container plugin: load this file after the editor and the toolbar offers\n * a popup: a bootstrap modal and its trigger. What it can ask the editor for is the handle its factory is\n * called with, described in docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.popup.min.js\"></script>\n */\nimport { GridEditor } from '../grideditor.js';\nimport * as dom from '../dom.js';\n\nObject.assign(GridEditor.locales.en, {\n    'container.add_popup': 'Popup',\n    'container.popup_title': 'Title',\n    'container.popup_trigger': 'Open',\n    'tool.toggle_popup': 'Fold this popup away while editing',\n});\n\nGridEditor.containers.popup = function(ge) {\n\n    function popupIdOf(container) {\n        return container.getAttribute('data-ge-popup-id');\n    }\n\n    /** Whether a popup with this id is on the canvas. */\n    function popupExists(id, root) {\n        return dom.all(root || ge.canvas, '[data-ge-popup-id]').some(function(popup) {\n            return popupIdOf(popup) === id;\n        });\n    }\n\n    function wirePopupTriggers() {\n        dom.all(ge.canvas, '[data-ge-popup-target]').forEach(function(trigger) {\n            dom.addClass(trigger, 'ge-popup-trigger');\n            var wanted = trigger.getAttribute('data-ge-popup-target');\n\n            // Bootstrap's own attributes are written at getHtml time, not\n            // while editing, so a click here cannot open a real modal\n            trigger.removeAttribute('data-bs-toggle');\n            trigger.removeAttribute('data-bs-target');\n\n            if (popupExists(wanted)) {\n                dom.removeClass(trigger, 'ge-popup-orphan');\n                return;\n            }\n\n            var column = trigger.closest('.column');\n            var nearby = column ? dom.all(column, '[data-ge-popup-id]') : [];\n\n            if (nearby.length === 1) {\n                trigger.setAttribute('data-ge-popup-target', popupIdOf(nearby[0]));\n                dom.removeClass(trigger, 'ge-popup-orphan');\n                return;\n            }\n\n            dom.addClass(trigger, 'ge-popup-orphan');\n\n            ge.operate(function() {\n                ge.emit('popup-orphan', ge.payloadFor('popup', trigger, {\n                    parent: trigger.parentElement,\n                    source: 'api',\n                    missing: wanted,\n                }));\n            });\n        });\n    }\n\n    function writePopupTriggerAttributes(root) {\n        root = root || ge.canvas;\n\n        dom.all(root, '[data-ge-popup-target]').forEach(function(trigger) {\n            var wanted = trigger.getAttribute('data-ge-popup-target');\n\n            // The warning marking is editing furniture, whether or not\n            // the trigger can be wired up\n            dom.removeClass(trigger, 'ge-popup-orphan');\n            dom.dropEmptyClass(trigger);\n\n            if (!popupExists(wanted, root)) { return; }\n\n            trigger.setAttribute('data-bs-toggle', 'modal');\n            trigger.setAttribute('data-bs-target', '#' + wanted);\n        });\n    }\n\n    return {\n        labelKey: 'container.add_popup',\n        paneKind: 'popup',\n\n        // Triggers are markup the host owns, anywhere in the canvas, so they\n        // are looked at whenever the canvas is initialized rather than only\n        // when a popup is touched\n        onInit: wirePopupTriggers,\n        onDeinit: function() { writePopupTriggerAttributes(); },\n\n        // What onDeinit and unmark do, on a copy of the canvas\n        cleanMarkup: function(root) {\n            var definition = this;\n            writePopupTriggerAttributes(root);\n            dom.all(root, '[data-ge-container=\"popup\"]').forEach(function(container) { definition.unmark(container); });\n        },\n\n        create: function(options) {\n            var id = ge.containerId('popup');\n            var container = dom.element('div', { 'data-ge-container': 'popup', 'data-ge-popup-id': id });\n\n            if (options.trigger !== false) {\n                container.appendChild(dom.element('button', {\n                    type: 'button',\n                    'class': 'btn btn-primary ge-popup-trigger',\n                    'data-ge-popup-target': id,\n                }, options.trigger_label || ge.t('container.popup_trigger')));\n            }\n\n            var modal = container.appendChild(dom.element('div', {\n                'class': 'modal fade',\n                tabindex: '-1',\n                'aria-hidden': 'true',\n                id: id,\n            }));\n            var dialog = modal.appendChild(dom.element('div', { 'class': 'modal-dialog' }));\n            if (options.size) { dom.addClass(dialog, 'modal-' + options.size); }\n\n            var content = dialog.appendChild(dom.element('div', { 'class': 'modal-content' }));\n            var header = content.appendChild(dom.element('div', { 'class': 'modal-header' }));\n            header.appendChild(dom.element('h5', { 'class': 'modal-title' }))\n                .appendChild(dom.element('span', { 'class': 'ge-pane-label' },\n                    options.title || ge.t('container.popup_title')));\n            header.appendChild(dom.create('<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>'));\n            content.appendChild(dom.element('div', { 'class': 'modal-body' })).appendChild(ge.defaultRegion());\n\n            return container;\n        },\n\n        mark: function(container) {\n            // Nothing in a popup may reach Bootstrap while editing:\n            // the modal is rendered unfolded and static, and a real\n            // modal opening over it would be the editor fighting\n            // itself\n            dom.all(container, '[data-bs-dismiss]').forEach(function(dismiss) {\n                ge.suspendToggles(dismiss);\n            });\n            dom.all(container, '.modal-title').forEach(function(title) {\n                ge.makeLabelEditable(ge.labelIn(title));\n            });\n        },\n\n        unmark: function(container) {\n            ge.resumeToggles(container);\n            dom.removeClass(container, 'ge-popup-collapsed');\n            ge.unwrapLabels(container);\n        },\n\n        /** A page of unfolded modals stays workable if they can be folded away. */\n        tools: function(drawer, container) {\n            ge.createTool(drawer, ge.t('tool.toggle_popup'), 'ge-toggle-popup', 'bi bi-chevron-bar-contract',\n                function() {\n                    dom.toggleClass(container, 'ge-popup-collapsed');\n                });\n        },\n    };\n};\n"],
-  "mappings": "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",
-  "names": ["GridEditor", "all", "root", "selector", "parse", "html", "template", "create", "nodes", "i", "element", "tag", "attributes", "text", "node", "name", "value", "addClass", "node", "names", "split", "name", "removeClass", "toggleClass", "state", "split", "names", "dropEmptyClass", "node", "GridEditor", "ge", "popupIdOf", "container", "popupExists", "id", "root", "all", "popup", "wirePopupTriggers", "trigger", "addClass", "wanted", "removeClass", "column", "nearby", "writePopupTriggerAttributes", "dropEmptyClass", "definition", "options", "element", "modal", "dialog", "content", "header", "create", "dismiss", "title", "drawer", "toggleClass"]
+  "sources": ["../../src/js/register.js", "../../src/js/dom.js", "../../src/js/triggers/triggers.js", "../../src/js/plugins/grideditor.popup.js"],
+  "sourcesContent": ["/**\n * What a plugin's or a locale's classic script imports in place of the\n * editor: the GridEditor the page already loaded.\n *\n * The build points `import { GridEditor } from '../grideditor.js'` here for\n * the classic scripts, so each registers on the editor the page has rather\n * than bringing its own. Loaded before the editor there is nothing to\n * register on, and saying so is better than a TypeError three calls later.\n */\nvar GridEditor = window.GridEditor;\n\nif (!GridEditor || typeof GridEditor.get !== 'function') {\n    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +\n        'its locales and grideditor.jquery.js');\n}\n\nexport { GridEditor };\nexport default GridEditor;\n", "/**\n * The DOM, the way grid-editor uses it.\n *\n * Small helpers over the browser's own API, for the core and the shipped\n * plugins. Not a public API: a plugin of a host's own is free to write its\n * DOM code however it likes, and this file makes no promise to it.\n *\n * Stateless on purpose. The build puts a copy of this file in each plugin's\n * classic script, so anything kept here would be kept once per copy; a\n * module that needs to remember something about a node keeps its own\n * WeakMap.\n */\n\n/** Every element under `root` matching `selector`, as an array. */\nexport function all(root, selector) {\n    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];\n}\n\n/** The first element under `root` matching `selector`, or null. */\nexport function one(root, selector) {\n    return root ? root.querySelector(selector) : null;\n}\n\n/** `root` itself when it matches, then every element under it that does. */\nexport function selfAndAll(root, selector) {\n    if (!root) { return []; }\n\n    var found = all(root, selector);\n    if (root.nodeType === 1 && root.matches(selector)) { found.unshift(root); }\n    return found;\n}\n\n/** The element children of `node`, those matching `selector` if one is given. */\nexport function children(node, selector) {\n    if (!node) { return []; }\n\n    return Array.prototype.filter.call(node.children, function(each) {\n        return !selector || each.matches(selector);\n    });\n}\n\n/** The first element child matching `selector`, or null. */\nexport function child(node, selector) {\n    return children(node, selector)[0] || null;\n}\n\n/** The nearest ancestor-or-self matching `selector` below `stopAt`, or null. */\nexport function closest(node, selector, stopAt) {\n    var found = node && node.nodeType === 1 ? node.closest(selector) : null;\n\n    if (found && stopAt && found !== stopAt && !stopAt.contains(found)) { return null; }\n    return found;\n}\n\n/** Whether `node` is an element matching `selector`. */\nexport function is(node, selector) {\n    return !!node && node.nodeType === 1 && node.matches(selector);\n}\n\n/** Whether `node` is in the document. */\nexport function attached(node) {\n    return !!node && document.documentElement.contains(node);\n}\n\n/** The element siblings after `node` that match `selector`. */\nexport function nextAll(node, selector) {\n    var found = [];\n\n    for (var next = node.nextElementSibling; next; next = next.nextElementSibling) {\n        if (!selector || next.matches(selector)) { found.push(next); }\n    }\n    return found;\n}\n\n/** The ancestors of `node` up to, and not including, `stop`, nearest first. */\nexport function parentsUntil(node, stop) {\n    var found = [];\n\n    for (var parent = node.parentElement; parent && parent !== stop; parent = parent.parentElement) {\n        found.push(parent);\n    }\n    return found;\n}\n\n/**\n * The nodes the html parses into, detached. Parsed the way innerHTML parses,\n * so a <script> in it never runs, here or once it is in the page.\n */\nexport function parse(html) {\n    var template = document.createElement('template');\n    template.innerHTML = html;\n    return Array.prototype.slice.call(template.content.childNodes);\n}\n\n/** The one element the html is, detached. */\nexport function create(html) {\n    var nodes = parse(html.trim());\n\n    for (var i = 0; i < nodes.length; i++) {\n        if (nodes[i].nodeType === 1) { return nodes[i]; }\n    }\n    return null;\n}\n\n/** An element of `tag`, with `attributes` and `text`. */\nexport function element(tag, attributes, text) {\n    var node = document.createElement(tag);\n\n    Object.keys(attributes || {}).forEach(function(name) {\n        var value = attributes[name];\n        if (value !== null && value !== undefined && value !== false) { node.setAttribute(name, value); }\n    });\n    if (text !== undefined && text !== null) { node.textContent = text; }\n\n    return node;\n}\n\n/** Replace what `node` holds with `html`. A <script> in it does not run. */\nexport function setHtml(node, html) {\n    node.innerHTML = html === undefined || html === null ? '' : String(html);\n    return node;\n}\n\n/** Add one or several space separated classes. */\nexport function addClass(node, names) {\n    split(names).forEach(function(name) { node.classList.add(name); });\n    return node;\n}\n\nexport function removeClass(node, names) {\n    split(names).forEach(function(name) { node.classList.remove(name); });\n    return node;\n}\n\n/** Each class on, or off, or flipped when `on` is not given. */\nexport function toggleClass(node, names, state) {\n    split(names).forEach(function(name) {\n        if (state === undefined) {\n            node.classList.toggle(name);\n        } else {\n            node.classList.toggle(name, !!state);\n        }\n    });\n    return node;\n}\n\nexport function hasClass(node, name) {\n    return !!node && node.nodeType === 1 && node.classList.contains(name);\n}\n\nfunction split(names) {\n    return String(names || '').split(/\\s+/).filter(Boolean);\n}\n\n/** Take the class attribute off when there is nothing left in it. */\nexport function dropEmptyClass(node) {\n    if (!node.getAttribute('class')) { node.removeAttribute('class'); }\n    return node;\n}\n\n/** Take the style attribute off when there is nothing left in it. */\nexport function dropEmptyStyle(node) {\n    if (!node.getAttribute('style')) { node.removeAttribute('style'); }\n    return node;\n}\n\n/** Set attributes; a null or undefined value takes the attribute off. */\nexport function attr(node, attributes) {\n    Object.keys(attributes).forEach(function(name) {\n        var value = attributes[name];\n\n        if (value === null || value === undefined) {\n            node.removeAttribute(name);\n        } else {\n            node.setAttribute(name, value);\n        }\n    });\n    return node;\n}\n\n/**\n * Inline styles, by css property name. A number is pixels for the properties\n * that take a length, as jQuery had it; an empty string takes one off.\n */\nexport function css(node, styles) {\n    Object.keys(styles).forEach(function(property) {\n        var value = styles[property];\n\n        if (typeof value === 'number' && !UNITLESS[property]) { value = value + 'px'; }\n        node.style.setProperty(property, value === null || value === undefined ? '' : String(value));\n    });\n    return node;\n}\n\nvar UNITLESS = { opacity: true, 'z-index': true, 'flex-grow': true, 'flex-shrink': true, order: true };\n\n/** What an element of this tag shows as when nothing hides it. */\nvar defaultDisplays = {};\n\nfunction defaultDisplay(node) {\n    var tag = node.nodeName;\n\n    if (!defaultDisplays[tag]) {\n        var probe = document.body.appendChild(document.createElement(tag));\n        defaultDisplays[tag] = getComputedStyle(probe).display;\n        probe.remove();\n        if (defaultDisplays[tag] === 'none') { defaultDisplays[tag] = 'block'; }\n    }\n    return defaultDisplays[tag];\n}\n\n/** Show a node: its inline display:none off, and a display of its own if a stylesheet hides it. */\nexport function show(node) {\n    node.style.removeProperty('display');\n    if (getComputedStyle(node).display === 'none') { node.style.display = defaultDisplay(node); }\n    return node;\n}\n\nexport function hide(node) {\n    node.style.display = 'none';\n    return node;\n}\n\n/** Show or hide; flip when `on` is not given. */\nexport function toggle(node, state) {\n    if (state === undefined) { state = !visible(node); }\n    return state ? show(node) : hide(node);\n}\n\n/** Whether a node takes up room: what jQuery's :visible meant. */\nexport function visible(node) {\n    return !!(node.offsetWidth || node.offsetHeight || node.getClientRects().length);\n}\n\n/** The border box's width, fractions included. */\nexport function outerWidth(node) {\n    return node.getBoundingClientRect().width;\n}\n\nexport function outerHeight(node) {\n    return node.getBoundingClientRect().height;\n}\n\n/** The content box's height, which is what jQuery's height() gave. */\nexport function contentHeight(node) {\n    var style = getComputedStyle(node);\n    return node.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);\n}\n\n/** Where a node is on the page, not in the window. */\nexport function offset(node) {\n    var box = node.getBoundingClientRect();\n    return { top: box.top + window.pageYOffset, left: box.left + window.pageXOffset };\n}\n\n/** Its index among its parent's element children, those matching `selector` if given. */\nexport function indexIn(node, selector) {\n    return children(node.parentElement, selector).indexOf(node);\n}\n\n/** Put `node` right after `reference`. */\nexport function insertAfter(node, reference) {\n    reference.parentNode.insertBefore(node, reference.nextSibling);\n    return node;\n}\n\n/** Replace `node` with what it holds. */\nexport function unwrap(node) {\n    var parent = node.parentNode;\n\n    while (node.firstChild) { parent.insertBefore(node.firstChild, node); }\n    node.remove();\n}\n\n/** Put `node` inside `wrapper`, where `node` was. */\nexport function wrap(node, wrapper) {\n    node.parentNode.insertBefore(wrapper, node);\n    wrapper.appendChild(node);\n    return wrapper;\n}\n\n/**\n * Listen on `root` for `types` (space separated) on descendants that match\n * `selector`, with `this` the matched element, as jQuery's delegated\n * handlers had it. Hands back the listener, for removeEventListener; a\n * signal in `options` removes it too.\n */\nexport function delegate(root, types, selector, handler, options) {\n    var listener = function(event) {\n        var match = closest(event.target, selector, root);\n        if (match && root.contains(match)) { return handler.call(match, event); }\n        return undefined;\n    };\n\n    split(types).forEach(function(type) { root.addEventListener(type, listener, options); });\n    return listener;\n}\n\n/** Listen for several space separated event types with one handler. */\nexport function on(target, types, handler, options) {\n    split(types).forEach(function(type) { target.addEventListener(type, handler, options); });\n    return handler;\n}\n\nexport function off(target, types, handler, options) {\n    split(types).forEach(function(type) { target.removeEventListener(type, handler, options); });\n}\n\n/** A mouse event of `type` sent to `node`, the way a pointer would. */\nexport function fire(node, type) {\n    node.dispatchEvent(new MouseEvent(type, { bubbles: type !== 'mouseenter' && type !== 'mouseleave' }));\n}\n\n/* ------------------------------------------------------------------\n * Taking a node away, visibly.\n *\n * The durations are jQuery's: 400 ms unless the caller says otherwise. `done` runs once the node is out of sight, which is\n * when the caller removes it; a node that is already out of sight is done at\n * once, on the next task, as jQuery had it.\n * ------------------------------------------------------------------ */\n\nvar DEFAULT_DURATION = 400;\n\nfunction animateAway(node, frames, duration, done) {\n    duration = duration === undefined ? DEFAULT_DURATION : duration;\n\n    var finish = function() {\n        hide(node);\n        if (done) { done(); }\n    };\n\n    if (!visible(node) || !node.animate || duration <= 0) {\n        window.setTimeout(finish, 0);\n        return;\n    }\n\n    var animation = node.animate(frames(getComputedStyle(node)), {\n        duration: duration,\n        easing: 'ease-in-out',\n    });\n    var called = false;\n    var once = function() {\n        if (called) { return; }\n        called = true;\n        finish();\n    };\n\n    animation.onfinish = once;\n    animation.oncancel = once;\n}\n\n/** Fold a node up to nothing, then hide it. */\nexport function slideUp(node, duration, done) {\n    if (typeof duration === 'function') {\n        done = duration;\n        duration = undefined;\n    }\n\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        return [\n            {\n                height: style.height,\n                paddingTop: style.paddingTop,\n                paddingBottom: style.paddingBottom,\n                marginTop: style.marginTop,\n                marginBottom: style.marginBottom,\n            },\n            { height: '0px', paddingTop: '0px', paddingBottom: '0px', marginTop: '0px', marginBottom: '0px' },\n        ];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n\n/** Fade a node out, then hide it. */\nexport function fadeOut(node, duration, done) {\n    animateAway(node, function(style) {\n        return [{ opacity: style.opacity }, { opacity: 0 }];\n    }, duration, done);\n}\n\n/** Fade and fold a node, in height and, with `width`, sideways too, then hide it. */\nexport function shrinkAway(node, duration, done, width) {\n    node.style.overflow = 'hidden';\n    animateAway(node, function(style) {\n        var from = { opacity: style.opacity, height: style.height };\n        var to = { opacity: 0, height: '0px' };\n\n        if (width) {\n            from.width = style.width;\n            to.width = '0px';\n        }\n        return [from, to];\n    }, duration, function() {\n        node.style.removeProperty('overflow');\n        if (done) { done(); }\n    });\n}\n", "/**\n * What the popup and the offcanvas plugins share: the host's triggers.\n *\n * A trigger is markup the host owns - a button, a link - anywhere in the\n * canvas, that points at a container by id. While editing it must not reach\n * Bootstrap, and one that points at nothing is warned about. Not a public\n * API: the build puts a copy of this file in each plugin that imports it,\n * so it keeps nothing of its own between plugins.\n */\nimport * as dom from '../dom.js';\n\n/**\n * The trigger handling of one kind of container.\n *\n * `kind` names the container (`popup`), its classes (`ge-popup-trigger`,\n * `ge-popup-orphan`) and the event for a trigger left pointing at nothing\n * (`popup-orphan`). `idAttribute` is the attribute a container has its id in,\n * `targetAttribute` the one a trigger names it with, and `toggle` is\n * Bootstrap's `data-bs-toggle` for it, written on the way out.\n *\n * Gives back `onInit` and `onDeinit`, for the plugin to hand the editor as\n * its own, and `write(root)`, what onDeinit does to the canvas, for\n * cleanMarkup to do to a copy.\n */\nexport function triggersFor(ge, kind, idAttribute, targetAttribute, toggle) {\n    var triggerClass = 'ge-' + kind + '-trigger';\n    var orphanClass = 'ge-' + kind + '-orphan';\n    var listening = null;\n\n    function idOf(container) {\n        return container.getAttribute(idAttribute);\n    }\n\n    /** Whether a container with this id is on the canvas. */\n    function exists(id, root) {\n        return dom.all(root || ge.canvas, '[' + idAttribute + ']').some(function(container) {\n            return idOf(container) === id;\n        });\n    }\n\n    function wire() {\n        dom.all(ge.canvas, '[' + targetAttribute + ']').forEach(function(trigger) {\n            dom.addClass(trigger, triggerClass);\n            var wanted = trigger.getAttribute(targetAttribute);\n\n            // Bootstrap's own attributes are written at getHtml time, not\n            // while editing, so a click here cannot open a real container\n            trigger.removeAttribute('data-bs-toggle');\n            trigger.removeAttribute('data-bs-target');\n\n            if (exists(wanted)) {\n                dom.removeClass(trigger, orphanClass);\n                return;\n            }\n\n            var column = trigger.closest('.column');\n            var nearby = column ? dom.all(column, '[' + idAttribute + ']') : [];\n\n            if (nearby.length === 1) {\n                trigger.setAttribute(targetAttribute, idOf(nearby[0]));\n                dom.removeClass(trigger, orphanClass);\n                return;\n            }\n\n            dom.addClass(trigger, orphanClass);\n\n            ge.operate(function() {\n                ge.emit(kind + '-orphan', ge.payloadFor(kind, trigger, {\n                    parent: trigger.parentElement,\n                    source: 'api',\n                    missing: wanted,\n                }));\n            });\n        });\n    }\n\n    function write(root) {\n        root = root || ge.canvas;\n\n        dom.all(root, '[' + targetAttribute + ']').forEach(function(trigger) {\n            var wanted = trigger.getAttribute(targetAttribute);\n\n            // The warning marking is editing furniture, whether or not\n            // the trigger can be wired up\n            dom.removeClass(trigger, orphanClass);\n            dom.dropEmptyClass(trigger);\n\n            if (!exists(wanted, root)) { return; }\n\n            trigger.setAttribute('data-bs-toggle', toggle);\n            trigger.setAttribute('data-bs-target', '#' + wanted);\n        });\n    }\n\n    return {\n        write: write,\n\n        // Triggers are markup the host owns, anywhere in the canvas, so they\n        // are looked at whenever the canvas is initialized rather than only\n        // when a container is touched\n        onInit: function() {\n            wire();\n\n            if (listening) { listening.abort(); }\n            listening = new AbortController();\n\n            // A trigger is often a link, and a link still navigates even\n            // with its Bootstrap attributes suspended\n            dom.delegate(ge.canvas, 'click', '.' + triggerClass + ', [' + targetAttribute + ']', function(e) {\n                if (dom.hasClass(ge.canvas, 'ge-editing')) { e.preventDefault(); }\n            }, { signal: listening.signal });\n        },\n\n        onDeinit: function() {\n            if (listening) { listening.abort(); }\n            listening = null;\n\n            write();\n        },\n    };\n}\n", "/**\n * Popups for grid-editor.\n *\n * A container plugin: load this file after the editor and the toolbar offers\n * a popup: a bootstrap modal and its trigger. What it can ask the editor for is the handle its factory is\n * called with, described in docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.popup.min.js\"></script>\n */\nimport { GridEditor } from '../grideditor.js';\nimport * as dom from '../dom.js';\nimport { triggersFor } from '../triggers/triggers.js';\n\nObject.assign(GridEditor.locales.en, {\n    'container.add_popup': 'Popup',\n    'container.popup_title': 'Title',\n    'container.popup_trigger': 'Open',\n    'tool.toggle_popup': 'Fold this popup away while editing',\n});\n\nGridEditor.containers.popup = function(ge) {\n\n    var triggers = triggersFor(ge, 'popup', 'data-ge-popup-id', 'data-ge-popup-target', 'modal');\n\n    return {\n        labelKey: 'container.add_popup',\n        paneKind: 'popup',\n\n        // The ids a copy of a popup has to rename together\n        references: ['data-ge-popup-id', 'data-ge-popup-target'],\n\n        onInit: triggers.onInit,\n        onDeinit: triggers.onDeinit,\n\n        // What onDeinit and unmark do, on a copy of the canvas\n        cleanMarkup: function(root) {\n            var definition = this;\n            triggers.write(root);\n            dom.all(root, '[data-ge-container=\"popup\"]').forEach(function(container) { definition.unmark(container); });\n        },\n\n        create: function(options) {\n            var id = ge.containerId('popup');\n            var container = dom.element('div', { 'data-ge-container': 'popup', 'data-ge-popup-id': id });\n\n            if (options.trigger !== false) {\n                container.appendChild(dom.element('button', {\n                    type: 'button',\n                    'class': 'btn btn-primary ge-popup-trigger',\n                    'data-ge-popup-target': id,\n                }, options.trigger_label || ge.t('container.popup_trigger')));\n            }\n\n            var modal = container.appendChild(dom.element('div', {\n                'class': 'modal fade',\n                tabindex: '-1',\n                'aria-hidden': 'true',\n                id: id,\n            }));\n            var dialog = modal.appendChild(dom.element('div', { 'class': 'modal-dialog' }));\n            if (options.size) { dom.addClass(dialog, 'modal-' + options.size); }\n\n            var content = dialog.appendChild(dom.element('div', { 'class': 'modal-content' }));\n            var header = content.appendChild(dom.element('div', { 'class': 'modal-header' }));\n            header.appendChild(dom.element('h5', { 'class': 'modal-title' }))\n                .appendChild(dom.element('span', { 'class': 'ge-pane-label' },\n                    options.title || ge.t('container.popup_title')));\n            header.appendChild(dom.create('<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>'));\n            content.appendChild(dom.element('div', { 'class': 'modal-body' })).appendChild(ge.defaultRegion());\n\n            return container;\n        },\n\n        mark: function(container) {\n            // Nothing in a popup may reach Bootstrap while editing:\n            // the modal is rendered unfolded and static, and a real\n            // modal opening over it would be the editor fighting\n            // itself\n            dom.all(container, '[data-bs-dismiss]').forEach(function(dismiss) {\n                ge.suspendToggles(dismiss);\n            });\n            dom.all(container, '.modal-title').forEach(function(title) {\n                ge.makeLabelEditable(ge.labelIn(title));\n            });\n        },\n\n        unmark: function(container) {\n            ge.resumeToggles(container);\n            dom.removeClass(container, 'ge-popup-collapsed');\n            ge.unwrapLabels(container);\n        },\n\n        /** A page of unfolded modals stays workable if they can be folded away. */\n        tools: function(drawer, container) {\n            ge.createTool(drawer, ge.t('tool.toggle_popup'), 'ge-toggle-popup', 'bi bi-chevron-bar-contract',\n                function() {\n                    dom.toggleClass(container, 'ge-popup-collapsed');\n                });\n        },\n    };\n};\n"],
+  "mappings": "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",
+  "names": ["GridEditor", "all", "root", "selector", "closest", "node", "selector", "stopAt", "found", "parse", "html", "template", "create", "nodes", "i", "element", "tag", "attributes", "text", "node", "name", "value", "addClass", "node", "names", "split", "name", "removeClass", "toggleClass", "state", "hasClass", "dropEmptyClass", "delegate", "root", "types", "selector", "handler", "options", "listener", "event", "match", "closest", "split", "type", "triggersFor", "ge", "kind", "idAttribute", "targetAttribute", "toggle", "triggerClass", "orphanClass", "listening", "idOf", "container", "exists", "id", "root", "all", "wire", "trigger", "addClass", "wanted", "removeClass", "column", "nearby", "write", "dropEmptyClass", "delegate", "e", "hasClass", "GridEditor", "ge", "triggers", "triggersFor", "root", "definition", "all", "container", "options", "id", "element", "modal", "dialog", "addClass", "content", "header", "create", "dismiss", "title", "removeClass", "drawer", "toggleClass"]
 }

package/docs/events.md

@@ -63,7 +63,7 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `grideditor:after-add-row` | `grideditor:after-add` | no | after insertion, once the canvas is up to date |
 | `grideditor:before-add-column` | `grideditor:before-add` | yes | before a column is inserted |
 | `grideditor:after-add-column` | `grideditor:after-add` | no | |
-| `grideditor:before-add-container` | `grideditor:before-add` | yes | before a container is inserted; `payload.kind` is `tabs`, `accordion`, `popup`, `carousel` or `card` |
+| `grideditor:before-add-container` | `grideditor:before-add` | yes | before a container is inserted; `payload.kind` is `tabs`, `accordion`, `popup`, `offcanvas`, `carousel` or `card` |
 | `grideditor:after-add-container` | `grideditor:after-add` | no | |
 | `grideditor:before-add-tab` | `grideditor:before-add` | yes | before a tab is added to a tabs container |
 | `grideditor:after-add-tab` | `grideditor:after-add` | no | |
@@ -88,6 +88,7 @@ about every insertion can bind `grideditor:before-add` and switch on
 | `grideditor:before-indent` | — | yes | before a column's offset changes |
 | `grideditor:after-indent` | — | no | after the offset class is written |
 | `grideditor:popup-orphan` | — | no | on `init`, once per trigger whose popup is missing and cannot be re-pointed |
+| `grideditor:offcanvas-orphan` | — | no | the same for an offcanvas's trigger |
 | `grideditor:before-utility` | — | yes | before a utility class is written, from the panel, a plugin's tool or `setUtility` |
 | `grideditor:after-utility` | — | no | after the class is written and the preview redrawn, only if something changed |
 | `grideditor:view-change` | — | no | after the view changes, only if it actually changed |
@@ -113,7 +114,7 @@ The payload
 ```javascript
 {
     kind: 'row',          // row | column | text | plain | element
-                          // tabs | accordion | popup | carousel | card | tab | accordion-item | carousel-item
+                          // tabs | accordion | popup | offcanvas | carousel | card | tab | accordion-item | carousel-item
                           // section, with the sections plugin
     node: Element,        // the node added, deleted, moved or resized
     parent: Element,      // where it is going, or where it came from on a delete;
@@ -146,7 +147,7 @@ The payload
     from: '<div class="row">…</div>',   // the block's html as it was
     to: '<div class="row">…</div>',     // what was written
 
-    // popup-orphan only
+    // popup-orphan and offcanvas-orphan only
     missing: 'ge-popup-3-a91',   // the id the trigger pointed at
 
     // utility only

package/docs/locale-keys.md

@@ -43,6 +43,7 @@ The tools in a drawer, and the buttons in the toolbar above the canvas.
 | `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.toggle_offcanvas` | Fold this offcanvas away while editing | Offcanvas drawer. Editing shows an offcanvas 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 |
 | `tool.column_narrower` | Make column narrower\n(hold shift for min) | Column drawer, the `-` tool. Two lines |
 | `tool.column_wider` | Make column wider\n(hold shift for max) | Column drawer, the `+` tool. Two lines |
@@ -104,7 +105,7 @@ title. `{kind}` is one of the `panel.kind_*` keys, or a container's own label.
 container.*
 -----------
 
-The containers: tabs, accordions, popups, carousels and cards, and the panes inside them.
+The containers: tabs, accordions, popups, offcanvases, carousels and cards, and the panes inside them.
 
 | Key | English | Where |
 | --- | --- | --- |
@@ -155,6 +156,25 @@ The containers: tabs, accordions, popups, carousels and cards, and the panes ins
 | `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 |
+| `container.add_offcanvas` | Offcanvas | Toolbar button that adds an offcanvas |
+| `container.offcanvas_title` | Title | Title of a new offcanvas, in its header |
+| `container.offcanvas_trigger` | Open | Label of the button an offcanvas makes to open itself |
+| `container.offcanvas_section` | Offcanvas | Heading of an offcanvas's section of its settings panel |
+| `container.offcanvas_placement` | Placement | Its select for the edge it comes from |
+| `container.offcanvas_start` | Start | Placement: the left in a left to right page |
+| `container.offcanvas_end` | End | Placement: the right in a left to right page |
+| `container.offcanvas_top` | Top | Placement: the top edge |
+| `container.offcanvas_bottom` | Bottom | Placement: the bottom edge |
+| `container.offcanvas_backdrop` | Backdrop | Its select for `data-bs-backdrop` |
+| `container.offcanvas_backdrop_yes` | Yes | Backdrop: shown, and closes it on a click |
+| `container.offcanvas_backdrop_no` | No | Backdrop: none |
+| `container.offcanvas_backdrop_static` | Static | Backdrop: shown, and does not close it on a click |
+| `container.offcanvas_scroll` | Allow body scroll | Its checkbox for `data-bs-scroll` |
+| `container.offcanvas_keyboard` | Close with Esc | Its checkbox for `data-bs-keyboard` |
+| `container.offcanvas_responsive` | Responsive | Its select for the breakpoint from which it is content |
+| `container.offcanvas_responsive_never` | Always offcanvas | Responsive: a panel at every size |
+| `container.offcanvas_responsive_from` | Inline from {breakpoint} | Responsive: content from that breakpoint up. `{breakpoint}` is `sm`, `md`… |
+| `container.offcanvas_dark` | Dark theme | Its checkbox for `data-bs-theme="dark"` |
 | `container.add_card` | Card | Toolbar button that adds a card |
 | `container.card_title` | Card title | Title of a new card, in its header |
 | `container.card_footer` | Card footer | Text of a new card's footer, when it has one |

package/docs/plugins.md

@@ -1,7 +1,7 @@
 Writing a plugin
 ================
 
-Tabs, accordions, popups, carousels, cards and the element level controls are not built
+Tabs, accordions, popups, offcanvases, 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.
@@ -10,6 +10,7 @@ the one to read first if you are about to write your own.
 <script src="dist/grideditor.min.js"></script>
 <script src="dist/plugins/grideditor.tabs.min.js"></script>
 <script src="dist/plugins/grideditor.popup.min.js"></script>
+<script src="dist/plugins/grideditor.offcanvas.min.js"></script>
 <script src="dist/plugins/grideditor.card.min.js"></script>
 <script src="dist/plugins/grideditor.elements.min.js"></script>
 ```
@@ -74,6 +75,7 @@ GridEditor.containers.gallery = function(ge) {
         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"
+        references: ['data-ge-picture-id'],            // optional: attributes of its own that point at an id
         afterPaneMove: function(container, pane) { … },  // optional
         tools: function(drawer, container) { … },        // optional, extra tools
         onInit: function() { … },                        // optional, per canvas init
@@ -118,8 +120,13 @@ written for 6.x.
   runs before reading the markup. Whatever `mark` added comes off here. What
   is left is what the host ships.
 - **`onInit`/`onDeinit`** are for work that is about the whole canvas rather
-  than one container — the popup plugin wires up the host's
-  `data-ge-popup-target` triggers there.
+  than one container — the popup and offcanvas plugins wire up the host's
+  `data-ge-popup-target` and `data-ge-offcanvas-target` triggers there.
+- **`references`** lists the attributes of the container's own that hold an id,
+  as the id itself or as a `#selector`, which `ge.freshNode` renames along with
+  the id they point at when a copy is made: a popup's `data-ge-popup-id` and
+  `data-ge-popup-target`. Bootstrap's own - `data-bs-target`, `aria-controls`
+  and the rest - are always followed.
 
 
 The handle
@@ -137,7 +144,7 @@ element, and where there may be several, an array.
 | `ge.t(key, params)` | A string from the locale |
 | `ge.warn(message)` | A console warning, prefixed like the editor's own |
 | `ge.containerId(type)` | A generated id, stable across a reset, for Bootstrap's toggles |
-| `ge.freshNode(html)` | The markup as a detached node, with new ids for those the page already has and the attributes that point at them - `data-bs-target`, `data-bs-parent`, `href="#…"`, `aria-controls`, `aria-labelledby`, `aria-describedby`, `for`, `data-ge-popup-id`, `data-ge-popup-target` - following. An id grid-editor generated gets a new one from `containerId`, any other a `-2`, `-3`… suffix. What the clipboard pastes, and what a host inserting saved markup should hand `ge.place`. Place each copy before making the next: it checks the page as it is |
+| `ge.freshNode(html)` | The markup as a detached node, with new ids for those the page already has and the attributes that point at them - `data-bs-target`, `data-bs-parent`, `href="#…"`, `aria-controls`, `aria-labelledby`, `aria-describedby`, `for`, and the `references` of every container plugin in use - following. An id grid-editor generated gets a new one from `containerId`, any other a `-2`, `-3`… suffix. What the clipboard pastes, and what a host inserting saved markup should hand `ge.place`. Place each copy before making the next: it checks the page as it is |
 | `ge.defaultRegion()` | A row with one full width column: what an empty pane starts as |
 | `ge.createTool(drawer, title, className, iconClass, handlers)` | A tool in a drawer, which it returns. `handlers` is a click handler or `{ eventName: handler }`; each gets the DOM event, with `this` the tool |
 | `ge.createMoveTool(drawer)` | The drag handle, unless `drag_handle` says the whole drawer is one; the tool, or null |

package/example/containers.html

@@ -22,6 +22,7 @@
     <script src="../dist/plugins/grideditor.tabs.min.js"></script>
     <script src="../dist/plugins/grideditor.accordion.min.js"></script>
     <script src="../dist/plugins/grideditor.popup.min.js"></script>
+    <script src="../dist/plugins/grideditor.offcanvas.min.js"></script>
     <script src="../dist/plugins/grideditor.card.min.js"></script>
     <script src="../dist/plugins/grideditor.carousel.min.js"></script>
 
@@ -89,9 +90,9 @@
                     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 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.
+                    the toolbar add a tabs container, an accordion, a popup, an
+                    offcanvas, a carousel and a card &mdash; tabs, accordion and carousel
+                    hold a pane each, the others hold one region.
                 </p>
                 <p class="form-text">
                     While editing, a popup is unfolded in place and an
@@ -101,7 +102,9 @@
                     asked to do any of it, so there is no backdrop and no focus
                     trap to fight with. Double click a tab or item label to
                     rename it, and a card&rsquo;s header and footer the same
-                    way. The row after the popup shows two levels: tabs inside
+                    way. The offcanvas under the popup is the same panel
+                    unfolded, and its gear says where it comes from and from
+                    which breakpoint it is plain content. The row after it shows two levels: tabs inside
                     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
@@ -171,6 +174,21 @@
                         Grid editor leaves the markup alone and writes
                         Bootstrap's attributes onto it in the output.
                     </p>
+
+                    <div data-ge-container="offcanvas" data-ge-offcanvas-id="example-offcanvas">
+                        <button type="button" class="btn btn-primary ge-offcanvas-trigger" data-ge-offcanvas-target="example-offcanvas">Open the filters</button>
+                        <div class="offcanvas offcanvas-end" tabindex="-1" id="example-offcanvas" aria-labelledby="example-offcanvas-label">
+                            <div class="offcanvas-header">
+                                <h5 class="offcanvas-title" id="example-offcanvas-label">Filters</h5>
+                                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                            </div>
+                            <div class="offcanvas-body">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content" data-ge-content-type="tinymce"><p>An offcanvas slides in from the right, over the page.</p></div>
+                                </div></div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
 

package/example/index.html

@@ -103,7 +103,7 @@
                     <strong>Containers</strong>
                     <code class="text-body-secondary">containers.html</code>
                 </div>
-                <span class="text-body-secondary">Tabs, accordions, popups and cards, two levels deep, and the export opened as a real page</span>
+                <span class="text-body-secondary">Tabs, accordions, popups, offcanvases and cards, two levels deep, and the export opened as a real page</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="elements.html">

package/package.json

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

package/src/js/grideditor.js

@@ -52,9 +52,10 @@ var PLACEMENTS = ['appendTo', 'prependTo', 'insertAfter', 'insertBefore'];
  * The attributes that point at an id, as the id itself or as a #selector.
  * A copy that has to take new ids (see freshNode) takes them here too, so
  * its tabs, its accordion and its popups still point at their own panes.
+ * A container plugin adds its own, as `references` on its definition.
  */
 var REFERENCES = ['data-bs-target', 'data-bs-parent', 'href', 'aria-controls', 'aria-labelledby',
-    'aria-describedby', 'for', 'data-ge-popup-id', 'data-ge-popup-target'];
+    'aria-describedby', 'for'];
 
 /** An id grid-editor generated: ge-{type}-{counter}-{random}. */
 var GENERATED_ID = /^ge-([a-z][a-z-]*?)-\d+-[a-z0-9]+$/;
@@ -1096,12 +1097,6 @@ function build(instance, baseElem, optionsOrMethod) {
             /* A click on the host's plain content offers to make it a text */
             dom.delegate(canvas, 'click', '.ge-content', onContentClick, signal);
 
-            /* A trigger is often a link, and a link still navigates even
-               with its Bootstrap attributes suspended */
-            dom.delegate(canvas, 'click', '.ge-popup-trigger, [data-ge-popup-target]', function(e) {
-                if (dom.hasClass(canvas, 'ge-editing')) { e.preventDefault(); }
-            }, signal);
-
             var sidebarMode = panelMode() === 'sidebar';
 
             if (settings.active_target || sidebarMode) {
@@ -3381,8 +3376,12 @@ function build(instance, baseElem, optionsOrMethod) {
 
             if (!Object.keys(renamed).length) { return node; }
 
+            var references = Object.keys(CONTAINERS).reduce(function(names, type) {
+                return names.concat(CONTAINERS[type].references || []);
+            }, REFERENCES);
+
             dom.selfAndAll(node, '*').forEach(function(element) {
-                REFERENCES.forEach(function(name) {
+                references.forEach(function(name) {
                     var value = element.getAttribute(name);
                     if (value === null) { return; }
                     if (name === 'href' && value.charAt(0) !== '#') { return; }

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

@@ -44,6 +44,7 @@ GridEditor.locales.es = {
     'tool.delete_pane': 'Borrar panel',
     'tool.rename': 'Haz doble clic para renombrar',
     'tool.toggle_popup': 'Plegar esta ventana mientras editas',
+    'tool.toggle_offcanvas': 'Plegar este panel mientras editas',
     'tool.element_info': 'Elemento: {name}',
     'tool.column_narrower': 'Estrechar columna\n(Mayús para el mínimo)',
     'tool.column_wider': 'Ensanchar columna\n(Mayús para el máximo)',
@@ -134,6 +135,25 @@ GridEditor.locales.es = {
     'container.add_popup': 'Ventana emergente',
     'container.popup_title': 'Título',
     'container.popup_trigger': 'Abrir',
+    'container.add_offcanvas': 'Panel deslizante',
+    'container.offcanvas_title': 'Título',
+    'container.offcanvas_trigger': 'Abrir',
+    'container.offcanvas_section': 'Panel deslizante',
+    'container.offcanvas_placement': 'Posición',
+    'container.offcanvas_start': 'Izquierda',
+    'container.offcanvas_end': 'Derecha',
+    'container.offcanvas_top': 'Arriba',
+    'container.offcanvas_bottom': 'Abajo',
+    'container.offcanvas_backdrop': 'Fondo',
+    'container.offcanvas_backdrop_yes': 'Sí',
+    'container.offcanvas_backdrop_no': 'No',
+    'container.offcanvas_backdrop_static': 'Estático',
+    'container.offcanvas_scroll': 'Permitir scroll de la página',
+    'container.offcanvas_keyboard': 'Cerrar con Esc',
+    'container.offcanvas_responsive': 'Responsive',
+    'container.offcanvas_responsive_never': 'Siempre panel',
+    'container.offcanvas_responsive_from': 'Contenido normal desde {breakpoint}',
+    'container.offcanvas_dark': 'Tema oscuro',
     'container.add_card': 'Tarjeta',
     'container.card_title': 'Título de la tarjeta',
     'container.card_footer': 'Pie de la tarjeta',