@themarioga/grid-editor 6.0.0-beta.5 → 7.0.0

package/dist/plugins/grideditor.order.min.js

@@ -1,2 +1 @@
-(u=>{u.extend(u.fn.gridEditor.locales.en,{"utility.order":"Order","utility.order_first":"First","utility.order_last":"Last","tool.order_earlier":"Earlier in this view","tool.order_later":"Later in this view","badge.order":"Order: {value}"});var c=["first","0","1","2","3","4","5","last"],r={first:-1,last:6},f=/(?:^|\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\s|$)/;u.fn.gridEditor.utilities.order=function(l){var n=u.extend({drawer:!0},l.settings.utilities.order),t=!1;function i(e){return null===e?0:void 0!==r[e]?r[e]:parseInt(e,10)}function o(e){return"first"===e?l.t("utility.order_first"):"last"===e?l.t("utility.order_last"):e}function a(e,t){return e.get().map(function(e,r){return{element:e,index:r,rank:i(t(u(e)))}}).sort(function(e,r){return e.rank-r.rank||e.index-r.index}).map(function(e){return e.element})}function d(e,t){return e.every(function(e,r){return e===t[r]})}function s(e,r){var t,n=l.view(),i=e.parent().children(".column"),o=a(i,function(e){return l.getUtility(e,"order",n)}),e=o.indexOf(e[0]),r=e+r;r<0||r>=o.length||(o.splice(r,0,o.splice(e,1)[0]),t=null,d(o,i.get())&&((e,r)=>{var t;return(r=l.breakpoints.indexOf(r))<=0||(t=l.breakpoints[r-1],d(a(e,function(e){return l.getUtility(e,"order",t)}),e.get()))})(i,n)||(r=o.length,t=r<=6?c.slice(1,1+r):7===r?c.slice(1):8===r?c.slice():null)?l.operate(function(){o.forEach(function(e,r){l.setUtility(u(e),"order",t?t[r]:null,{source:"tool"})})}):l.warn("a row of "+o.length+" columns cannot be reordered with Bootstrap's order classes, which have eight places"))}function e(e,r){!t&&"column"===r.kind&&r.to&&r.to.parent.children(".column").get().some(function(e){return null!==l.getUtility(u(e),"order",l.view())})&&(t=!0,l.warn("a column was dropped in a row whose columns carry order classes in this view: where it shows is set by those classes, not by where it sits in the markup"))}return{families:[{name:"order",prefix:"order",values:c,appliesTo:["column"],labelKey:"utility.order",label:o,preview:function(e){return{order:i(e)}}}],drawerTools:function(e,r,t){n.drawer&&"column"===t&&(l.createTool(e,l.t("tool.order_earlier"),"ge-order-earlier","bi bi-chevron-left",function(){s(r,-1)}),l.createTool(e,l.t("tool.order_later"),"ge-order-later","bi bi-chevron-right",function(){s(r,1)}))},onInit:function(){l.canvas.off("grideditor:after-move.ge-order").on("grideditor:after-move.ge-order",e)},onRefresh:function(e){e.find(".column").addBack(".column").each(function(){var e=u(this),r=f.test(e.attr("class")||"")?l.getUtility(e,"order",l.view()):null;null===r?e.removeAttr("data-ge-order"):e.attr("data-ge-order",l.t("badge.order",{value:o(r)}))})},onDeinit:function(){l.canvas.off("grideditor:after-move.ge-order"),l.canvas.find("[data-ge-order]").removeAttr("data-ge-order")}}}})(jQuery);
-//# sourceMappingURL=grideditor.order.min.js.map
+(()=>{var f=window.GridEditor;if(!f||typeof f.get!="function")throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");function m(t,u){return t?Array.prototype.slice.call(t.querySelectorAll(u)):[]}function E(t,u){if(!t)return[];var a=m(t,u);return t.nodeType===1&&t.matches(u)&&a.unshift(t),a}function v(t,u){return t?Array.prototype.filter.call(t.children,function(a){return!u||a.matches(u)}):[]}Object.assign(f.locales.en,{"utility.order":"Order","utility.order_first":"First","utility.order_last":"Last","tool.order_earlier":"Earlier in this view","tool.order_later":"Later in this view","badge.order":"Order: {value}"});var c=["first","0","1","2","3","4","5","last"],A={first:-1,last:6},U=/(?:^|\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\s|$)/;f.utilities.order=function(t){var u=Object.assign({drawer:!0},t.settings.utilities.order),a=!1,l=null;function h(e){return e===null?0:A[e]!==void 0?A[e]:parseInt(e,10)}function g(e){return e==="first"?t.t("utility.order_first"):e==="last"?t.t("utility.order_last"):e}function x(e,r){return e.map(function(n,i){return{element:n,index:i,rank:h(r(n))}}).sort(function(n,i){return n.rank-i.rank||n.index-i.index}).map(function(n){return n.element})}function y(e,r){return e.every(function(n,i){return n===r[i]})}function T(e){return e<=6?c.slice(1,1+e):e===7?c.slice(1):e===8?c.slice():null}function w(e,r){var n=t.view(),i=v(e.parentElement,".column"),o=x(i,function(p){return t.getUtility(p,"order",n)}),b=o.indexOf(e),d=b+r;if(!(d<0||d>=o.length)){o.splice(d,0,o.splice(b,1)[0]);var s=null;if((!y(o,i)||!C(i,n))&&(s=T(o.length),!s)){t.warn("a row of "+o.length+" columns cannot be reordered with Bootstrap's order classes, which have eight places");return}t.operate(function(){o.forEach(function(p,k){t.setUtility(p,"order",s?s[k]:null,{source:"tool"})})})}}function C(e,r){var n=t.breakpoints.indexOf(r);if(n<=0)return!0;var i=t.breakpoints[n-1];return y(x(e,function(o){return t.getUtility(o,"order",i)}),e)}function L(e){return v(e,".column").some(function(r){return t.getUtility(r,"order",t.view())!==null})}function S(e){E(e,".column").forEach(function(r){var n=U.test(r.getAttribute("class")||"")?t.getUtility(r,"order",t.view()):null;n===null?r.removeAttribute("data-ge-order"):r.setAttribute("data-ge-order",t.t("badge.order",{value:g(n)}))})}function O(e){var r=e.detail;a||r.kind!=="column"||!r.to||L(r.to.parent)&&(a=!0,t.warn("a column was dropped in a row whose columns carry order classes in this view: where it shows is set by those classes, not by where it sits in the markup"))}return{families:[{name:"order",prefix:"order",values:c,appliesTo:["column"],labelKey:"utility.order",label:g,preview:function(e){return{order:h(e)}}}],drawerTools:function(e,r,n){!u.drawer||n!=="column"||(t.createTool(e,t.t("tool.order_earlier"),"ge-order-earlier","bi bi-chevron-left",function(){w(r,-1)}),t.createTool(e,t.t("tool.order_later"),"ge-order-later","bi bi-chevron-right",function(){w(r,1)}))},onInit:function(){l&&t.canvas.removeEventListener("grideditor:after-move",l),l=O,t.canvas.addEventListener("grideditor:after-move",l)},onRefresh:S,onDeinit:function(){l&&t.canvas.removeEventListener("grideditor:after-move",l),l=null,m(t.canvas,"[data-ge-order]").forEach(function(e){e.removeAttribute("data-ge-order")})}}};})();

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

@@ -1 +1,7 @@
-{"version":3,"file":"grideditor.order.min.js","sources":["../../src/js/plugins/grideditor.order.js"],"names":["$","extend","fn","gridEditor","locales","en","utility.order","utility.order_first","utility.order_last","tool.order_earlier","tool.order_later","badge.order","VALUES","RANK","first","last","CLASS_PATTERN","utilities","order","ge","options","drawer","settings","warnedAboutDrag","rank","value","undefined","parseInt","label","t","visualOrder","columns","read","get","map","element","index","sort","a","b","entry","sameOrder","every","move","col","direction","values","view","parent","children","shown","column","getUtility","from","indexOf","to","length","splice","below","breakpoints","count","slice","operate","forEach","setUtility","source","warn","afterMove","e","payload","kind","some","families","name","prefix","appliesTo","labelKey","preview","drawerTools","node","createTool","onInit","canvas","off","on","onRefresh","scope","find","addBack","each","this","test","attr","removeAttr","onDeinit","jQuery"],"mappings":"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"}
+{
+  "version": 3,
+  "sources": ["../../src/js/register.js", "../../src/js/dom.js", "../../src/js/plugins/grideditor.order.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 the ones 6.x had through jQuery: 400 ms unless the\n * 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 * Column order for grid-editor.\n *\n * A utility plugin: load this file after the editor and a column's place in\n * its row can differ per breakpoint, with Bootstrap's order-{breakpoint}-*\n * classes. What it can ask the editor for is the handle its factory is called\n * with, described in docs/plugins.md.\n *\n *   <script src=\"dist/grideditor.min.js\"></script>\n *   <script src=\"dist/plugins/grideditor.order.min.js\"></script>\n *\n * Two arrows in each column's drawer move it one place earlier or later in\n * the view being edited, by numbering the row's columns; the markup does not\n * move. Dragging still moves the markup, as it always has.\n *\n * utilities.order.drawer: false leaves the arrows out, and the panel field is\n * the only control.\n */\nimport { GridEditor } from '../grideditor.js';\nimport * as dom from '../dom.js';\n\nObject.assign(GridEditor.locales.en, {\n    'utility.order': 'Order',\n    'utility.order_first': 'First',\n    'utility.order_last': 'Last',\n    'tool.order_earlier': 'Earlier in this view',\n    'tool.order_later': 'Later in this view',\n    'badge.order': 'Order: {value}',\n});\n\nvar VALUES = ['first', '0', '1', '2', '3', '4', '5', 'last'];\n\n/** Where each value puts a column, as Bootstrap's css has it. */\nvar RANK = { first: -1, last: 6 };\n\n/** A column that carries any class of the family, at any breakpoint. */\nvar CLASS_PATTERN = /(?:^|\\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\\s|$)/;\n\nGridEditor.utilities.order = function(ge) {\n\n    var options = Object.assign({ drawer: true }, ge.settings.utilities.order);\n    var warnedAboutDrag = false;\n    var listening = null; // The after-move listener, while editing\n\n    function rank(value) {\n        if (value === null) { return 0; }\n\n        return RANK[value] !== undefined ? RANK[value] : parseInt(value, 10);\n    }\n\n    function label(value) {\n        if (value === 'first') { return ge.t('utility.order_first'); }\n        if (value === 'last') { return ge.t('utility.order_last'); }\n\n        return value;\n    }\n\n    /** The columns of a row in the order a view shows them, given what each one's order is. */\n    function visualOrder(columns, read) {\n        return columns\n            .map(function(element, index) {\n                return { element: element, index: index, rank: rank(read(element)) };\n            })\n            .sort(function(a, b) { return a.rank - b.rank || a.index - b.index; })\n            .map(function(entry) { return entry.element; });\n    }\n\n    function sameOrder(a, b) {\n        return a.every(function(element, index) { return element === b[index]; });\n    }\n\n    /**\n     * The values that put n columns in n places, or null past eight: that\n     * is how many places Bootstrap's order classes have.\n     */\n    function slots(count) {\n        if (count <= 6) { return VALUES.slice(1, 1 + count); }\n        if (count === 7) { return VALUES.slice(1); }\n        if (count === 8) { return VALUES.slice(); }\n\n        return null;\n    }\n\n    /**\n     * Move a column one place earlier or later in the view being edited.\n     *\n     * The row's columns are numbered in their new order. When that order is\n     * the markup's own, the numbers are taken off instead - unless what is\n     * left underneath, the breakpoint below, would then order them some other\n     * way, and the numbers are what keep them in the markup's order.\n     */\n    function move(col, direction) {\n        var view = ge.view();\n        var columns = dom.children(col.parentElement, '.column');\n        var shown = visualOrder(columns, function(column) { return ge.getUtility(column, 'order', view); });\n        var from = shown.indexOf(col);\n        var to = from + direction;\n\n        if (to < 0 || to >= shown.length) { return; }\n\n        shown.splice(to, 0, shown.splice(from, 1)[0]);\n\n        var values = null;\n        if (!sameOrder(shown, columns) || !inheritsMarkupOrder(columns, view)) {\n            values = slots(shown.length);\n\n            if (!values) {\n                ge.warn('a row of ' + shown.length + ' columns cannot be reordered with Bootstrap\\'s ' +\n                    'order classes, which have eight places');\n                return;\n            }\n        }\n\n        ge.operate(function() {\n            shown.forEach(function(element, index) {\n                ge.setUtility(element, 'order', values ? values[index] : null, { source: 'tool' });\n            });\n        });\n    }\n\n    /** Whether taking this view's classes off leaves the columns in the markup's order. */\n    function inheritsMarkupOrder(columns, view) {\n        var index = ge.breakpoints.indexOf(view);\n        if (index <= 0) { return true; }\n\n        var below = ge.breakpoints[index - 1];\n\n        return sameOrder(visualOrder(columns, function(column) {\n            return ge.getUtility(column, 'order', below);\n        }), columns);\n    }\n\n    /** Whether a row's columns are ordered by class, rather than by the markup, in this view. */\n    function ordered(row) {\n        return dom.children(row, '.column').some(function(element) {\n            return ge.getUtility(element, 'order', ge.view()) !== null;\n        });\n    }\n\n    /** The badge: a column ordered by class in this view says where. */\n    function mark(scope) {\n        dom.selfAndAll(scope, '.column').forEach(function(col) {\n            var value = CLASS_PATTERN.test(col.getAttribute('class') || '')\n                ? ge.getUtility(col, 'order', ge.view())\n                : null;\n\n            if (value === null) {\n                col.removeAttribute('data-ge-order');\n            } else {\n                col.setAttribute('data-ge-order', ge.t('badge.order', { value: label(value) }));\n            }\n        });\n    }\n\n    /**\n     * A column dropped in a row ordered by class lands where the markup puts\n     * it, and shows up where its order does, which is worth saying once.\n     */\n    function afterMove(e) {\n        var payload = e.detail;\n        if (warnedAboutDrag || payload.kind !== 'column' || !payload.to) { return; }\n        if (!ordered(payload.to.parent)) { return; }\n\n        warnedAboutDrag = true;\n        ge.warn('a column was dropped in a row whose columns carry order classes in this view: ' +\n            'where it shows is set by those classes, not by where it sits in the markup');\n    }\n\n    return {\n        families: [{\n            name: 'order',\n            prefix: 'order',\n            values: VALUES,\n            appliesTo: ['column'],\n            labelKey: 'utility.order',\n            label: label,\n            preview: function(value) {\n                return { order: rank(value) };\n            },\n        }],\n\n        drawerTools: function(drawer, node, kind) {\n            if (!options.drawer || kind !== 'column') { return; }\n\n            ge.createTool(drawer, ge.t('tool.order_earlier'), 'ge-order-earlier', 'bi bi-chevron-left', function() {\n                move(node, -1);\n            });\n            ge.createTool(drawer, ge.t('tool.order_later'), 'ge-order-later', 'bi bi-chevron-right', function() {\n                move(node, 1);\n            });\n        },\n\n        // init runs again whenever a node is added, without a deinit\n        // between, so the listener is replaced rather than stacked\n        onInit: function() {\n            if (listening) { ge.canvas.removeEventListener('grideditor:after-move', listening); }\n            listening = afterMove;\n            ge.canvas.addEventListener('grideditor:after-move', listening);\n        },\n\n        onRefresh: mark,\n\n        onDeinit: function() {\n            if (listening) { ge.canvas.removeEventListener('grideditor:after-move', listening); }\n            listening = null;\n            dom.all(ge.canvas, '[data-ge-order]').forEach(function(col) { col.removeAttribute('data-ge-order'); });\n        },\n    };\n};\n"],
+  "mappings": "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",
+  "names": ["GridEditor", "all", "root", "selector", "selfAndAll", "root", "selector", "found", "all", "children", "node", "each", "GridEditor", "VALUES", "RANK", "CLASS_PATTERN", "ge", "options", "warnedAboutDrag", "listening", "rank", "value", "label", "visualOrder", "columns", "read", "element", "index", "a", "b", "entry", "sameOrder", "slots", "count", "move", "col", "direction", "view", "children", "shown", "column", "from", "to", "values", "inheritsMarkupOrder", "below", "ordered", "row", "mark", "scope", "selfAndAll", "afterMove", "payload", "drawer", "node", "kind", "all"]
+}

package/dist/plugins/grideditor.popup.esm.js

@@ -0,0 +1,187 @@
+// src/js/plugins/grideditor.popup.js
+import { GridEditor } from "../grideditor.esm.js";
+
+// src/js/dom.js
+function all(root, selector) {
+  return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
+}
+function parse(html) {
+  var template = document.createElement("template");
+  template.innerHTML = html;
+  return Array.prototype.slice.call(template.content.childNodes);
+}
+function create(html) {
+  var nodes = parse(html.trim());
+  for (var i = 0; i < nodes.length; i++) {
+    if (nodes[i].nodeType === 1) {
+      return nodes[i];
+    }
+  }
+  return null;
+}
+function element(tag, attributes, text) {
+  var node = document.createElement(tag);
+  Object.keys(attributes || {}).forEach(function(name) {
+    var value = attributes[name];
+    if (value !== null && value !== void 0 && value !== false) {
+      node.setAttribute(name, value);
+    }
+  });
+  if (text !== void 0 && text !== null) {
+    node.textContent = text;
+  }
+  return node;
+}
+function addClass(node, names) {
+  split(names).forEach(function(name) {
+    node.classList.add(name);
+  });
+  return node;
+}
+function removeClass(node, names) {
+  split(names).forEach(function(name) {
+    node.classList.remove(name);
+  });
+  return node;
+}
+function toggleClass(node, names, state) {
+  split(names).forEach(function(name) {
+    if (state === void 0) {
+      node.classList.toggle(name);
+    } else {
+      node.classList.toggle(name, !!state);
+    }
+  });
+  return node;
+}
+function split(names) {
+  return String(names || "").split(/\s+/).filter(Boolean);
+}
+function dropEmptyClass(node) {
+  if (!node.getAttribute("class")) {
+    node.removeAttribute("class");
+  }
+  return node;
+}
+
+// src/js/plugins/grideditor.popup.js
+Object.assign(GridEditor.locales.en, {
+  "container.add_popup": "Popup",
+  "container.popup_title": "Title",
+  "container.popup_trigger": "Open",
+  "tool.toggle_popup": "Fold this popup away while editing"
+});
+GridEditor.containers.popup = function(ge) {
+  function popupIdOf(container) {
+    return container.getAttribute("data-ge-popup-id");
+  }
+  function popupExists(id) {
+    return all(ge.canvas, "[data-ge-popup-id]").some(function(popup) {
+      return popupIdOf(popup) === id;
+    });
+  }
+  function wirePopupTriggers() {
+    all(ge.canvas, "[data-ge-popup-target]").forEach(function(trigger) {
+      addClass(trigger, "ge-popup-trigger");
+      var wanted = trigger.getAttribute("data-ge-popup-target");
+      trigger.removeAttribute("data-bs-toggle");
+      trigger.removeAttribute("data-bs-target");
+      if (popupExists(wanted)) {
+        removeClass(trigger, "ge-popup-orphan");
+        return;
+      }
+      var column = trigger.closest(".column");
+      var nearby = column ? all(column, "[data-ge-popup-id]") : [];
+      if (nearby.length === 1) {
+        trigger.setAttribute("data-ge-popup-target", popupIdOf(nearby[0]));
+        removeClass(trigger, "ge-popup-orphan");
+        return;
+      }
+      addClass(trigger, "ge-popup-orphan");
+      ge.operate(function() {
+        ge.emit("popup-orphan", ge.payloadFor("popup", trigger, {
+          parent: trigger.parentElement,
+          source: "api",
+          missing: wanted
+        }));
+      });
+    });
+  }
+  function writePopupTriggerAttributes() {
+    all(ge.canvas, "[data-ge-popup-target]").forEach(function(trigger) {
+      var wanted = trigger.getAttribute("data-ge-popup-target");
+      removeClass(trigger, "ge-popup-orphan");
+      dropEmptyClass(trigger);
+      if (!popupExists(wanted)) {
+        return;
+      }
+      trigger.setAttribute("data-bs-toggle", "modal");
+      trigger.setAttribute("data-bs-target", "#" + wanted);
+    });
+  }
+  return {
+    labelKey: "container.add_popup",
+    paneKind: "popup",
+    // Triggers are markup the host owns, anywhere in the canvas, so they
+    // are looked at whenever the canvas is initialized rather than only
+    // when a popup is touched
+    onInit: wirePopupTriggers,
+    onDeinit: writePopupTriggerAttributes,
+    create: function(options) {
+      var id = ge.containerId("popup");
+      var container = element("div", { "data-ge-container": "popup", "data-ge-popup-id": id });
+      if (options.trigger !== false) {
+        container.appendChild(element("button", {
+          type: "button",
+          "class": "btn btn-primary ge-popup-trigger",
+          "data-ge-popup-target": id
+        }, options.trigger_label || ge.t("container.popup_trigger")));
+      }
+      var modal = container.appendChild(element("div", {
+        "class": "modal fade",
+        tabindex: "-1",
+        "aria-hidden": "true",
+        id
+      }));
+      var dialog = modal.appendChild(element("div", { "class": "modal-dialog" }));
+      if (options.size) {
+        addClass(dialog, "modal-" + options.size);
+      }
+      var content = dialog.appendChild(element("div", { "class": "modal-content" }));
+      var header = content.appendChild(element("div", { "class": "modal-header" }));
+      header.appendChild(element("h5", { "class": "modal-title" })).appendChild(element(
+        "span",
+        { "class": "ge-pane-label" },
+        options.title || ge.t("container.popup_title")
+      ));
+      header.appendChild(create('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'));
+      content.appendChild(element("div", { "class": "modal-body" })).appendChild(ge.defaultRegion());
+      return container;
+    },
+    mark: function(container) {
+      all(container, "[data-bs-dismiss]").forEach(function(dismiss) {
+        ge.suspendToggles(dismiss);
+      });
+      all(container, ".modal-title").forEach(function(title) {
+        ge.makeLabelEditable(ge.labelIn(title));
+      });
+    },
+    unmark: function(container) {
+      ge.resumeToggles(container);
+      removeClass(container, "ge-popup-collapsed");
+      ge.unwrapLabels(container);
+    },
+    /** A page of unfolded modals stays workable if they can be folded away. */
+    tools: function(drawer, container) {
+      ge.createTool(
+        drawer,
+        ge.t("tool.toggle_popup"),
+        "ge-toggle-popup",
+        "bi bi-chevron-bar-contract",
+        function() {
+          toggleClass(container, "ge-popup-collapsed");
+        }
+      );
+    }
+  };
+};

package/dist/plugins/grideditor.popup.js

@@ -1,143 +1,192 @@
-/**
- * Popups for grid-editor.
- *
- * A container plugin: load this file after the editor and the toolbar offers
- * a popup: a bootstrap modal and its trigger. What it can ask the editor for is the handle its factory is
- * called with, described in docs/plugins.md.
- *
- *   <script src="dist/jquery.grideditor.min.js"></script>
- *   <script src="dist/plugins/grideditor.popup.min.js"></script>
- */
-(function($) {
-
-$.extend($.fn.gridEditor.locales.en, {
-    'container.add_popup': 'Popup',
-    'container.popup_title': 'Title',
-    'container.popup_trigger': 'Open',
-    'tool.toggle_popup': 'Fold this popup away while editing',
-});
-
-$.fn.gridEditor.containers.popup = function(ge) {
-
+(() => {
+  // src/js/register.js
+  var GridEditor = window.GridEditor;
+  if (!GridEditor || typeof GridEditor.get !== "function") {
+    throw new Error("grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, its locales and grideditor.jquery.js");
+  }
+
+  // src/js/dom.js
+  function all(root, selector) {
+    return root ? Array.prototype.slice.call(root.querySelectorAll(selector)) : [];
+  }
+  function parse(html) {
+    var template = document.createElement("template");
+    template.innerHTML = html;
+    return Array.prototype.slice.call(template.content.childNodes);
+  }
+  function create(html) {
+    var nodes = parse(html.trim());
+    for (var i = 0; i < nodes.length; i++) {
+      if (nodes[i].nodeType === 1) {
+        return nodes[i];
+      }
+    }
+    return null;
+  }
+  function element(tag, attributes, text) {
+    var node = document.createElement(tag);
+    Object.keys(attributes || {}).forEach(function(name) {
+      var value = attributes[name];
+      if (value !== null && value !== void 0 && value !== false) {
+        node.setAttribute(name, value);
+      }
+    });
+    if (text !== void 0 && text !== null) {
+      node.textContent = text;
+    }
+    return node;
+  }
+  function addClass(node, names) {
+    split(names).forEach(function(name) {
+      node.classList.add(name);
+    });
+    return node;
+  }
+  function removeClass(node, names) {
+    split(names).forEach(function(name) {
+      node.classList.remove(name);
+    });
+    return node;
+  }
+  function toggleClass(node, names, state) {
+    split(names).forEach(function(name) {
+      if (state === void 0) {
+        node.classList.toggle(name);
+      } else {
+        node.classList.toggle(name, !!state);
+      }
+    });
+    return node;
+  }
+  function split(names) {
+    return String(names || "").split(/\s+/).filter(Boolean);
+  }
+  function dropEmptyClass(node) {
+    if (!node.getAttribute("class")) {
+      node.removeAttribute("class");
+    }
+    return node;
+  }
+
+  // src/js/plugins/grideditor.popup.js
+  Object.assign(GridEditor.locales.en, {
+    "container.add_popup": "Popup",
+    "container.popup_title": "Title",
+    "container.popup_trigger": "Open",
+    "tool.toggle_popup": "Fold this popup away while editing"
+  });
+  GridEditor.containers.popup = function(ge) {
     function popupIdOf(container) {
-        return container.attr('data-ge-popup-id');
+      return container.getAttribute("data-ge-popup-id");
+    }
+    function popupExists(id) {
+      return all(ge.canvas, "[data-ge-popup-id]").some(function(popup) {
+        return popupIdOf(popup) === id;
+      });
     }
-
     function wirePopupTriggers() {
-        ge.canvas.find('[data-ge-popup-target]').each(function() {
-            var trigger = $(this).addClass('ge-popup-trigger');
-            var wanted = trigger.attr('data-ge-popup-target');
-
-            // Bootstrap's own attributes are written at getHtml time, not
-            // while editing, so a click here cannot open a real modal
-            trigger.removeAttr('data-bs-toggle').removeAttr('data-bs-target');
-
-            if (ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) {
-                trigger.removeClass('ge-popup-orphan');
-                return;
-            }
-
-            var nearby = trigger.closest('.column').find('[data-ge-popup-id]');
-
-            if (nearby.length === 1) {
-                trigger.attr('data-ge-popup-target', popupIdOf(nearby)).removeClass('ge-popup-orphan');
-                return;
-            }
-
-            trigger.addClass('ge-popup-orphan');
-
-            ge.operate(function() {
-                ge.emit('popup-orphan', ge.payloadFor('popup', trigger, {
-                    parent: trigger.parent(),
-                    source: 'api',
-                    missing: wanted,
-                }));
-            });
+      all(ge.canvas, "[data-ge-popup-target]").forEach(function(trigger) {
+        addClass(trigger, "ge-popup-trigger");
+        var wanted = trigger.getAttribute("data-ge-popup-target");
+        trigger.removeAttribute("data-bs-toggle");
+        trigger.removeAttribute("data-bs-target");
+        if (popupExists(wanted)) {
+          removeClass(trigger, "ge-popup-orphan");
+          return;
+        }
+        var column = trigger.closest(".column");
+        var nearby = column ? all(column, "[data-ge-popup-id]") : [];
+        if (nearby.length === 1) {
+          trigger.setAttribute("data-ge-popup-target", popupIdOf(nearby[0]));
+          removeClass(trigger, "ge-popup-orphan");
+          return;
+        }
+        addClass(trigger, "ge-popup-orphan");
+        ge.operate(function() {
+          ge.emit("popup-orphan", ge.payloadFor("popup", trigger, {
+            parent: trigger.parentElement,
+            source: "api",
+            missing: wanted
+          }));
         });
+      });
     }
-
     function writePopupTriggerAttributes() {
-        ge.canvas.find('[data-ge-popup-target]').each(function() {
-            var trigger = $(this);
-            var wanted = trigger.attr('data-ge-popup-target');
-
-            // The warning marking is editing furniture, whether or not
-            // the trigger can be wired up
-            trigger.removeClass('ge-popup-orphan');
-            if (!trigger.attr('class')) { trigger.removeAttr('class'); }
-
-            if (!ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) { return; }
-
-            trigger.attr('data-bs-toggle', 'modal').attr('data-bs-target', '#' + wanted);
-        });
+      all(ge.canvas, "[data-ge-popup-target]").forEach(function(trigger) {
+        var wanted = trigger.getAttribute("data-ge-popup-target");
+        removeClass(trigger, "ge-popup-orphan");
+        dropEmptyClass(trigger);
+        if (!popupExists(wanted)) {
+          return;
+        }
+        trigger.setAttribute("data-bs-toggle", "modal");
+        trigger.setAttribute("data-bs-target", "#" + wanted);
+      });
     }
-
     return {
-        labelKey: 'container.add_popup',
-        paneKind: 'popup',
-
-        // Triggers are markup the host owns, anywhere in the canvas, so they
-        // are looked at whenever the canvas is initialized rather than only
-        // when a popup is touched
-        onInit: wirePopupTriggers,
-        onDeinit: writePopupTriggerAttributes,
-
-        create: function(options) {
-            var id = ge.containerId('popup');
-            var container = $('<div />')
-                .attr('data-ge-container', 'popup')
-                .attr('data-ge-popup-id', id)
-            ;
-
-            if (options.trigger !== false) {
-                $('<button type="button" class="btn btn-primary ge-popup-trigger" />')
-                    .attr('data-ge-popup-target', id)
-                    .text(options.trigger_label || ge.t('container.popup_trigger'))
-                    .appendTo(container)
-                ;
-            }
-
-            var dialog = $('<div class="modal-dialog" />');
-            if (options.size) { dialog.addClass('modal-' + options.size); }
-
-            $('<div class="modal fade" tabindex="-1" aria-hidden="true" />')
-                .attr('id', id)
-                .append(dialog.append($('<div class="modal-content" />')
-                    .append($('<div class="modal-header" />')
-                        .append($('<h5 class="modal-title" />')
-                            .append($('<span class="ge-pane-label" />')
-                                .text(options.title || ge.t('container.popup_title'))))
-                        .append('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'))
-                    .append($('<div class="modal-body" />').append(ge.defaultRegion()))))
-                .appendTo(container)
-            ;
-
-            return container;
-        },
-
-        mark: function(container) {
-            // Nothing in a popup may reach Bootstrap while editing:
-            // the modal is rendered unfolded and static, and a real
-            // modal opening over it would be the editor fighting
-            // itself
-            ge.suspendToggles(container.find('[data-bs-dismiss]'));
-            ge.makeLabelEditable(ge.labelIn(container.find('.modal-title')));
-        },
-
-        unmark: function(container) {
-            ge.resumeToggles(container);
-            container.removeClass('ge-popup-collapsed');
-            ge.unwrapLabels(container);
-        },
-
-        /** A page of unfolded modals stays workable if they can be folded away. */
-        tools: function(drawer, container) {
-            ge.createTool(drawer, ge.t('tool.toggle_popup'), 'ge-toggle-popup', 'bi bi-chevron-bar-contract',
-                function() {
-                    container.toggleClass('ge-popup-collapsed');
-                });
-        },
+      labelKey: "container.add_popup",
+      paneKind: "popup",
+      // Triggers are markup the host owns, anywhere in the canvas, so they
+      // are looked at whenever the canvas is initialized rather than only
+      // when a popup is touched
+      onInit: wirePopupTriggers,
+      onDeinit: writePopupTriggerAttributes,
+      create: function(options) {
+        var id = ge.containerId("popup");
+        var container = element("div", { "data-ge-container": "popup", "data-ge-popup-id": id });
+        if (options.trigger !== false) {
+          container.appendChild(element("button", {
+            type: "button",
+            "class": "btn btn-primary ge-popup-trigger",
+            "data-ge-popup-target": id
+          }, options.trigger_label || ge.t("container.popup_trigger")));
+        }
+        var modal = container.appendChild(element("div", {
+          "class": "modal fade",
+          tabindex: "-1",
+          "aria-hidden": "true",
+          id
+        }));
+        var dialog = modal.appendChild(element("div", { "class": "modal-dialog" }));
+        if (options.size) {
+          addClass(dialog, "modal-" + options.size);
+        }
+        var content = dialog.appendChild(element("div", { "class": "modal-content" }));
+        var header = content.appendChild(element("div", { "class": "modal-header" }));
+        header.appendChild(element("h5", { "class": "modal-title" })).appendChild(element(
+          "span",
+          { "class": "ge-pane-label" },
+          options.title || ge.t("container.popup_title")
+        ));
+        header.appendChild(create('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'));
+        content.appendChild(element("div", { "class": "modal-body" })).appendChild(ge.defaultRegion());
+        return container;
+      },
+      mark: function(container) {
+        all(container, "[data-bs-dismiss]").forEach(function(dismiss) {
+          ge.suspendToggles(dismiss);
+        });
+        all(container, ".modal-title").forEach(function(title) {
+          ge.makeLabelEditable(ge.labelIn(title));
+        });
+      },
+      unmark: function(container) {
+        ge.resumeToggles(container);
+        removeClass(container, "ge-popup-collapsed");
+        ge.unwrapLabels(container);
+      },
+      /** A page of unfolded modals stays workable if they can be folded away. */
+      tools: function(drawer, container) {
+        ge.createTool(
+          drawer,
+          ge.t("tool.toggle_popup"),
+          "ge-toggle-popup",
+          "bi bi-chevron-bar-contract",
+          function() {
+            toggleClass(container, "ge-popup-collapsed");
+          }
+        );
+      }
     };
-};
-
-})(jQuery);
+  };
+})();