@themarioga/grid-editor 6.0.0 → 7.1.0

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

@@ -1,169 +1,176 @@
 /**
  * Spanish strings for grid-editor.
  *
- * Load after the plugin and select with `locale: 'es'`:
+ * Load after the editor and select with `locale: 'es'`:
  *
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/locales/grideditor.es.js"></script>
- *   <script>$('#myGrid').gridEditor({ locale: 'es' });</script>
+ *   <script>new GridEditor('#myGrid', { locale: 'es' });</script>
+ *
+ * or, as a module, `import '@themarioga/grid-editor/locales/es'`.
  *
  * This is one of the two locales grid-editor ships, so it is held to complete
- * coverage of `$.fn.gridEditor.locales.en`: test/locales.js fails when a key
+ * coverage of `GridEditor.locales.en`: test/locales.js fails when a key
  * is missing. Add the Spanish string in the same change that adds the English
  * one, and keep the wording short enough to fit the tooltip or the dropdown
  * item it appears in.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
 
-    $.fn.gridEditor.locales.es = {
-        'tool.move': 'Mover',
-        'tool.settings': 'Configuración',
-        'tool.add_row': 'Añadir fila',
-        'tool.delete_text': 'Quitar texto',
-        'tool.delete_plain': 'Quitar contenido',
-        'tool.edit_html': 'Editar html',
-        'codemirror.apply': 'Aplicar',
-        'codemirror.cancel': 'Cancelar',
-        'tool.convert_type': 'Editar como texto de {editor}',
-        'text.add': 'Texto',
-        'text.add_type': 'Texto ({editor})',
-        'text.no_editor': 'No hay cargado ningún editor de texto "{type}": este texto se puede mover y borrar, pero no editar',
-        'text.tinymce': 'tinyMCE',
-        'text.ckeditor': 'CKEditor',
-        'text.summernote': 'Summernote',
-        'tool.add_column': 'Añadir columna\n(mantén pulsado para elegir el ancho)',
-        'tool.column_size': '{size} de 12',
-        'tool.column_equal': 'Igual: reparte lo que queda de la fila',
-        'tool.column_auto': 'Auto: tan ancha como su contenido',
-        'tool.delete_row': 'Borrar fila',
-        'tool.delete_column': 'Borrar columna',
-        'tool.delete_element': 'Borrar elemento',
-        'tool.delete_container': 'Borrar contenedor',
-        'tool.delete_pane': 'Borrar panel',
-        'tool.rename': 'Haz doble clic para renombrar',
-        'tool.toggle_popup': 'Plegar esta ventana 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)',
-        'tool.indent_decrease': 'Reducir sangría\n(Mayús para quitarla)',
-        'tool.indent_increase': 'Aumentar sangría\n(Mayús para el máximo)',
-        'tool.edit_source': 'Editar el código fuente',
-        'tool.preview': 'Vista previa',
-        'panel.title': 'Ajustes: {kind}',
-        'panel.close': 'Cerrar',
-        'panel.done': 'Hecho',
-        'panel.id': 'Id',
-        'panel.classes': 'Clases',
-        'panel.editor': 'Editor',
-        'panel.kind_row': 'Fila',
-        'panel.kind_column': 'Columna',
-        'panel.kind_text': 'Texto',
-        'panel.kind_element': 'Elemento',
-        'panel.kind_section': 'Sección',
-        'panel.kind_tab': 'Pestaña',
-        'panel.kind_accordion_item': 'Elemento de acordeón',
-        'tool.id_placeholder': 'id',
-        'tool.id_title': 'Asignar un identificador único',
-        'tool.classes_placeholder': 'clases',
-        'tool.classes_title': 'Clases css, separadas por espacios',
-        'tool.toggle_class': 'Aplicar o quitar el estilo "{label}"',
-        'row.add': 'Añadir fila {layout}',
-        'row.add_row_cols': 'Añadir una fila de {columns} columnas, {counts} por fila',
-        'container.add_tabs': 'Pestañas',
-        'container.add_tab': 'Añadir pestaña',
-        'container.tab_label': 'Pestaña {number}',
-        'container.add_accordion': 'Acordeón',
-        'container.add_accordion_item': 'Añadir apartado',
-        'container.accordion_label': 'Apartado {number}',
-        'container.add_popup': 'Ventana emergente',
-        'container.popup_title': 'Título',
-        'container.popup_trigger': 'Abrir',
-        'container.add_card': 'Tarjeta',
-        'container.card_title': 'Título de la tarjeta',
-        'container.card_footer': 'Pie de la tarjeta',
-        'confirm.title': 'Confirmar',
-        'confirm.ok': 'Borrar',
-        'confirm.cancel': 'Cancelar',
-        'confirm.delete_row': '¿Seguro que quieres borrar esta fila?',
-        'confirm.delete_column': '¿Seguro que quieres borrar esta columna?',
-        'confirm.delete_text': '¿Seguro que quieres borrar este texto?',
-        'confirm.delete_plain': '¿Seguro que quieres borrar este contenido?',
-        'confirm.delete_element': '¿Seguro que quieres borrar este elemento?',
-        'confirm.delete_container': '¿Seguro que quieres borrar este contenedor y todo su contenido?',
-        'confirm.delete_tab': '¿Seguro que quieres borrar esta pestaña y todo su contenido?',
-        'confirm.delete_accordion_item': '¿Seguro que quieres borrar este apartado y todo su contenido?',
-        'view.all': 'Todos los tamaños',
-        'view.xs': 'Móvil',
-        'view.sm': 'Tablet',
-        'view.md': 'Escritorio pequeño',
-        'view.lg': 'Escritorio',
-        'view.xl': 'Escritorio grande',
-        'view.xxl': 'Pantalla panorámica',
-        'utility.section': 'Responsive: {view}',
-        'utility.col_width': 'Ancho',
-        'utility.col_equal': 'Igual',
-        'utility.col_auto': 'Auto',
-        'section.add': 'Sección',
-        'section.width': 'Ancho',
-        'section.fixed': 'Fijo',
-        'section.fluid': 'Ancho completo',
-        'section.from': 'Fijo desde {breakpoint}',
-        'tool.add_row_to_section': 'Añadir fila',
-        'tool.delete_section': 'Quitar sección',
-        'confirm.delete_section': '¿Seguro que quieres borrar esta sección y todo su contenido?',
-        'tool.copy': 'Copiar',
-        'tool.paste': 'Pegar',
-        'clipboard.paste_row': 'Pegar fila',
-        'clipboard.paste_section': 'Pegar sección',
-        'utility.col_from_row': 'De la fila: {count}',
-        'utility.row_cols': 'Columnas por fila',
-        'badge.row_cols': '{count} por fila',
-        'badge.row_cols_auto': 'Tan anchas como su contenido',
-        'utility.default': 'Por defecto',
-        'utility.inherit': 'Hereda: {value} (de {breakpoint})',
-        'utility.varies': 'Cambia en {breakpoints}; elegir aquí lo sustituye',
-        'utility.visibility': 'Visibilidad',
-        'utility.visibility_hidden': 'Oculto',
-        'utility.visibility_shown': 'Visible',
-        'tool.hide_in_view': 'Ocultar en esta vista',
-        'tool.show_in_view': 'Mostrar en esta vista',
-        'badge.hidden_in': 'Oculto en {breakpoints}',
-        'utility.order': 'Orden',
-        'utility.order_first': 'Primero',
-        'utility.order_last': 'Último',
-        'tool.order_earlier': 'Antes en esta vista',
-        'tool.order_later': 'Después en esta vista',
-        'badge.order': 'Orden: {value}',
-        'utility.justify_content': 'Justificar columnas',
-        'utility.align_items': 'Alinear columnas',
-        'utility.align_self': 'Alinearse',
-        'utility.gutters': 'Espaciado entre columnas',
-        'utility.gutters_x': 'Espaciado horizontal',
-        'utility.gutters_y': 'Espaciado vertical',
-        'utility.padding': 'Relleno',
-        'utility.margin': 'Margen',
-        'utility.side_all': 'Todos los lados',
-        'utility.side_x': 'Izquierda y derecha',
-        'utility.side_y': 'Arriba y abajo',
-        'utility.side_t': 'Arriba',
-        'utility.side_b': 'Abajo',
-        'utility.side_s': 'Inicio',
-        'utility.side_e': 'Fin',
-        'utility.text_align': 'Alineación del texto',
-        'utility.text_start': 'Inicio',
-        'utility.text_center': 'Centro',
-        'utility.text_end': 'Fin',
-        'utility.float': 'Flotar',
-        'utility.float_start': 'Inicio',
-        'utility.float_end': 'Fin',
-        'utility.float_none': 'Ninguno',
-        'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
-        'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
-        'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
-        'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
-        'error.ckeditor_missing': '¡CKEditor no está disponible! Asegúrate de haber cargado los archivos js de ckeditor y del adaptador de jQuery.',
-        'error.codemirror_missing': '¡CodeMirror no está disponible! Asegúrate de haber cargado el archivo js de CodeMirror; sin él el código se edita en un textarea normal.',
-        'error.summernote_missing': '¡Summernote no está disponible! Asegúrate de haber cargado el archivo js de Summernote.',
-    };
+GridEditor.locales.es = {
+    'tool.move': 'Mover',
+    'tool.settings': 'Configuración',
+    'tool.add_row': 'Añadir fila',
+    'tool.delete_text': 'Quitar texto',
+    'tool.delete_plain': 'Quitar contenido',
+    'tool.edit_html': 'Editar html',
+    'codemirror.apply': 'Aplicar',
+    'codemirror.cancel': 'Cancelar',
+    'tool.convert_type': 'Editar como texto de {editor}',
+    'text.add': 'Texto',
+    'text.add_type': 'Texto ({editor})',
+    'text.no_editor': 'No hay cargado ningún editor de texto "{type}": este texto se puede mover y borrar, pero no editar',
+    'text.tinymce': 'tinyMCE',
+    'text.ckeditor': 'CKEditor',
+    'text.summernote': 'Summernote',
+    'tool.add_column': 'Añadir columna\n(mantén pulsado para elegir el ancho)',
+    'tool.column_size': '{size} de 12',
+    'tool.column_equal': 'Igual: reparte lo que queda de la fila',
+    'tool.column_auto': 'Auto: tan ancha como su contenido',
+    'tool.delete_row': 'Borrar fila',
+    'tool.delete_column': 'Borrar columna',
+    'tool.delete_element': 'Borrar elemento',
+    'tool.delete_container': 'Borrar contenedor',
+    'tool.delete_pane': 'Borrar panel',
+    'tool.rename': 'Haz doble clic para renombrar',
+    'tool.toggle_popup': 'Plegar esta ventana 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)',
+    'tool.indent_decrease': 'Reducir sangría\n(Mayús para quitarla)',
+    'tool.indent_increase': 'Aumentar sangría\n(Mayús para el máximo)',
+    'tool.edit_source': 'Editar el código fuente',
+    'tool.preview': 'Vista previa',
+    'panel.title': 'Ajustes: {kind}',
+    'panel.close': 'Cerrar',
+    'panel.done': 'Hecho',
+    'panel.id': 'Id',
+    'panel.classes': 'Clases',
+    'panel.editor': 'Editor',
+    'panel.kind_row': 'Fila',
+    'panel.kind_column': 'Columna',
+    'panel.kind_text': 'Texto',
+    'panel.kind_element': 'Elemento',
+    'panel.kind_section': 'Sección',
+    'panel.kind_tab': 'Pestaña',
+    'panel.kind_accordion_item': 'Elemento de acordeón',
+    'tool.id_placeholder': 'id',
+    'tool.id_title': 'Asignar un identificador único',
+    'tool.classes_placeholder': 'clases',
+    'tool.classes_title': 'Clases css, separadas por espacios',
+    'tool.toggle_class': 'Aplicar o quitar el estilo "{label}"',
+    'row.add': 'Añadir fila {layout}',
+    'row.add_row_cols': 'Añadir una fila de {columns} columnas, {counts} por fila',
+    'container.add_tabs': 'Pestañas',
+    'container.add_tab': 'Añadir pestaña',
+    'container.tab_label': 'Pestaña {number}',
+    'container.add_accordion': 'Acordeón',
+    'container.add_accordion_item': 'Añadir apartado',
+    'container.accordion_label': 'Apartado {number}',
+    'container.add_popup': 'Ventana emergente',
+    'container.popup_title': 'Título',
+    'container.popup_trigger': 'Abrir',
+    'container.add_card': 'Tarjeta',
+    'container.card_title': 'Título de la tarjeta',
+    'container.card_footer': 'Pie de la tarjeta',
+    'confirm.title': 'Confirmar',
+    'confirm.ok': 'Borrar',
+    'confirm.cancel': 'Cancelar',
+    'confirm.delete_row': '¿Seguro que quieres borrar esta fila?',
+    'confirm.delete_column': '¿Seguro que quieres borrar esta columna?',
+    'confirm.delete_text': '¿Seguro que quieres borrar este texto?',
+    'confirm.delete_plain': '¿Seguro que quieres borrar este contenido?',
+    'confirm.delete_element': '¿Seguro que quieres borrar este elemento?',
+    'confirm.delete_container': '¿Seguro que quieres borrar este contenedor y todo su contenido?',
+    'confirm.delete_tab': '¿Seguro que quieres borrar esta pestaña y todo su contenido?',
+    'confirm.delete_accordion_item': '¿Seguro que quieres borrar este apartado y todo su contenido?',
+    'view.all': 'Todos los tamaños',
+    'view.xs': 'Móvil',
+    'view.sm': 'Tablet',
+    'view.md': 'Escritorio pequeño',
+    'view.lg': 'Escritorio',
+    'view.xl': 'Escritorio grande',
+    'view.xxl': 'Pantalla panorámica',
+    'utility.section': 'Responsive: {view}',
+    'utility.col_width': 'Ancho',
+    'utility.col_equal': 'Igual',
+    'utility.col_auto': 'Auto',
+    'section.add': 'Sección',
+    'section.width': 'Ancho',
+    'section.fixed': 'Fijo',
+    'section.fluid': 'Ancho completo',
+    'section.from': 'Fijo desde {breakpoint}',
+    'tool.add_row_to_section': 'Añadir fila',
+    'tool.delete_section': 'Quitar sección',
+    'confirm.delete_section': '¿Seguro que quieres borrar esta sección y todo su contenido?',
+    'tool.copy': 'Copiar',
+    'tool.paste': 'Pegar',
+    'clipboard.paste_row': 'Pegar fila',
+    'clipboard.paste_section': 'Pegar sección',
+    'utility.col_from_row': 'De la fila: {count}',
+    'utility.row_cols': 'Columnas por fila',
+    'badge.row_cols': '{count} por fila',
+    'badge.row_cols_auto': 'Tan anchas como su contenido',
+    'utility.default': 'Por defecto',
+    'utility.inherit': 'Hereda: {value} (de {breakpoint})',
+    'utility.varies': 'Cambia en {breakpoints}; elegir aquí lo sustituye',
+    'utility.visibility': 'Visibilidad',
+    'utility.visibility_hidden': 'Oculto',
+    'utility.visibility_shown': 'Visible',
+    'tool.hide_in_view': 'Ocultar en esta vista',
+    'tool.show_in_view': 'Mostrar en esta vista',
+    'badge.hidden_in': 'Oculto en {breakpoints}',
+    'utility.order': 'Orden',
+    'utility.order_first': 'Primero',
+    'utility.order_last': 'Último',
+    'tool.order_earlier': 'Antes en esta vista',
+    'tool.order_later': 'Después en esta vista',
+    'badge.order': 'Orden: {value}',
+    'utility.justify_content': 'Justificar columnas',
+    'utility.align_items': 'Alinear columnas',
+    'utility.align_self': 'Alinearse',
+    'utility.gutters': 'Espaciado entre columnas',
+    'utility.gutters_x': 'Espaciado horizontal',
+    'utility.gutters_y': 'Espaciado vertical',
+    'utility.padding': 'Relleno',
+    'utility.margin': 'Margen',
+    'utility.side_all': 'Todos los lados',
+    'utility.side_x': 'Izquierda y derecha',
+    'utility.side_y': 'Arriba y abajo',
+    'utility.side_t': 'Arriba',
+    'utility.side_b': 'Abajo',
+    'utility.side_s': 'Inicio',
+    'utility.side_e': 'Fin',
+    'utility.text_align': 'Alineación del texto',
+    'utility.text_start': 'Inicio',
+    'utility.text_center': 'Centro',
+    'utility.text_end': 'Fin',
+    'utility.float': 'Flotar',
+    'utility.float_start': 'Inicio',
+    'utility.float_end': 'Fin',
+    'utility.float_none': 'Ninguno',
+    'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
+    'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
+    'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
+    'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',
+    'warning.destroyed': 'Se ha llamado a {method}() en un editor destruido, y no hace nada.',
+    'warning.duplicate_build': 'grideditor.js se ha cargado dos veces: se mantiene el primer GridEditor.',
+    'warning.plugin_6x': 'El plugin "{name}" está escrito para grid-editor 6 y no se carga. Desde la 7.0 los plugins se registran en GridEditor: consulta UPGRADING.md.',
+    'warning.adapter_no_jquery': 'grideditor.jquery.js necesita jQuery 4 y la página no tiene jQuery: la API de jQuery no está disponible.',
+    'warning.oninit_removed': 'La opción oninit de tinyMCE se eliminó en la 7.0 y se ignora: usa init_instance_callback.',
+    'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
+    'error.ckeditor_missing': '¡CKEditor no está disponible! Asegúrate de haber cargado el archivo js de CKEditor.',
+    'error.codemirror_missing': '¡CodeMirror no está disponible! Asegúrate de haber cargado el archivo js de CodeMirror; sin él el código se edita en un textarea normal.',
+    'error.summernote_missing': '¡Summernote no está disponible! Asegúrate de haber cargado jQuery y el archivo js de Summernote.',
+};
 
-})(jQuery);

package/src/js/plugins/grideditor.accordion.js

@@ -5,68 +5,85 @@
  * an accordion. 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/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.accordion.min.js"></script>
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'container.add_accordion': 'Accordion',
     'container.add_accordion_item': 'Add item',
     'container.accordion_label': 'Item {number}',
     'confirm.delete_accordion_item': 'Delete this item and everything in it?',
 });
 
-$.fn.gridEditor.containers.accordion = function(ge) {
+GridEditor.containers.accordion = function(ge) {
+
+    // The buttons whose clicks the editor answers itself, bound once each
+    var answered = new WeakSet();
+
+    function collapseOf(item) {
+        return dom.child(item, '.accordion-collapse');
+    }
 
     function staysOpen(container, ignore) {
-        var items = container.find('> .accordion > .accordion-item > .accordion-collapse');
+        var items = dom.all(container, ':scope > .accordion > .accordion-item > .accordion-collapse');
 
-        if (ignore) { items = items.not(ignore.find('> .accordion-collapse')); }
+        if (ignore) {
+            var ignored = collapseOf(ignore);
+            items = items.filter(function(collapse) { return collapse !== ignored; });
+        }
 
-        return items.length > 0 && !items.filter('[data-bs-parent]').length;
+        return items.length > 0 && !items.filter(function(collapse) {
+            return collapse.hasAttribute('data-bs-parent');
+        }).length;
     }
 
     function addAccordionItemTo(container, options) {
         options = options || {};
 
-        var accordion = container.find('> .accordion');
+        var accordion = dom.child(container, '.accordion');
         var id = ge.containerId('acc-item');
-        var number = accordion.children('.accordion-item').length + 1;
+        var number = dom.children(accordion, '.accordion-item').length + 1;
         var open = options.open === undefined ? number === 1 : !!options.open;
         var stayOpen = options.stay_open === undefined ? staysOpen(container) : !!options.stay_open;
 
-        var item = $('<div class="accordion-item ge-accordion-item" />').appendTo(accordion);
-
-        $('<h2 class="accordion-header" />')
-            .append($('<button class="accordion-button" type="button" data-bs-toggle="collapse" />')
-                .attr('data-bs-target', '#' + id)
-                .attr('aria-expanded', open ? 'true' : 'false')
-                .toggleClass('collapsed', !open)
-                .append($('<span class="ge-pane-label" />')
-                    .text(options.label || ge.t('container.accordion_label', { number: number }))))
-            .appendTo(item)
-        ;
-
-        var collapse = $('<div class="accordion-collapse collapse" />')
-            .attr('id', id)
-            .attr('data-ge-open', open ? 'true' : 'false')
-            .toggleClass('show', open)
-            .appendTo(item)
-        ;
-
-        if (!stayOpen) { collapse.attr('data-bs-parent', '#' + accordion.attr('id')); }
-
-        return $('<div class="accordion-body" />').append(ge.defaultRegion()).appendTo(collapse);
+        var item = accordion.appendChild(dom.element('div', { 'class': 'accordion-item ge-accordion-item' }));
+
+        var header = item.appendChild(dom.element('h2', { 'class': 'accordion-header' }));
+        var button = header.appendChild(dom.element('button', {
+            'class': 'accordion-button',
+            type: 'button',
+            'data-bs-toggle': 'collapse',
+            'data-bs-target': '#' + id,
+            'aria-expanded': open ? 'true' : 'false',
+        }));
+        dom.toggleClass(button, 'collapsed', !open);
+        button.appendChild(dom.element('span', { 'class': 'ge-pane-label' },
+            options.label || ge.t('container.accordion_label', { number: number })));
+
+        var collapse = item.appendChild(dom.element('div', {
+            'class': 'accordion-collapse collapse',
+            id: id,
+            'data-ge-open': open ? 'true' : 'false',
+        }));
+        dom.toggleClass(collapse, 'show', open);
+
+        if (!stayOpen) { collapse.setAttribute('data-bs-parent', '#' + accordion.getAttribute('id')); }
+
+        var body = collapse.appendChild(dom.element('div', { 'class': 'accordion-body' }));
+        body.appendChild(ge.defaultRegion());
+        return body;
     }
 
     function toggleAccordionItem(container, item) {
-        var collapse = item.find('> .accordion-collapse');
-        var opening = collapse.attr('data-ge-open') !== 'true';
+        var collapse = collapseOf(item);
+        var opening = collapse.getAttribute('data-ge-open') !== 'true';
 
         if (opening && !staysOpen(container)) {
-            container.find('> .accordion > .accordion-item').not(item).each(function() {
-                setAccordionItemOpen($(this), false);
+            dom.all(container, ':scope > .accordion > .accordion-item').forEach(function(other) {
+                if (other !== item) { setAccordionItemOpen(other, false); }
             });
         }
 
@@ -74,26 +91,29 @@ $.fn.gridEditor.containers.accordion = function(ge) {
     }
 
     function setAccordionItemOpen(item, open) {
-        item.find('> .accordion-collapse')
-            .attr('data-ge-open', open ? 'true' : 'false')
-            .toggleClass('show', open)
-        ;
-        item.find('> .accordion-header .accordion-button')
-            .toggleClass('collapsed', !open)
-            .attr('aria-expanded', open ? 'true' : 'false')
-        ;
+        var collapse = collapseOf(item);
+        if (collapse) {
+            collapse.setAttribute('data-ge-open', open ? 'true' : 'false');
+            dom.toggleClass(collapse, 'show', open);
+        }
+
+        dom.all(item, ':scope > .accordion-header .accordion-button').forEach(function(button) {
+            dom.toggleClass(button, 'collapsed', !open);
+            button.setAttribute('aria-expanded', open ? 'true' : 'false');
+        });
     }
 
     function reparentAccordionItem(container, item) {
         var accordion = item.closest('.accordion');
-        var collapse = item.find('> .accordion-collapse');
+        var collapse = collapseOf(item);
+        if (!collapse) { return; }
 
         // The item that just arrived still carries the parent it had
         // where it came from, so it is not asked what this accordion does
         if (staysOpen(container, item)) {
-            collapse.removeAttr('data-bs-parent');
+            collapse.removeAttribute('data-bs-parent');
         } else {
-            collapse.attr('data-bs-parent', '#' + accordion.attr('id'));
+            collapse.setAttribute('data-bs-parent', '#' + accordion.getAttribute('id'));
         }
     }
 
@@ -102,7 +122,7 @@ $.fn.gridEditor.containers.accordion = function(ge) {
 
         // Items sort within their accordion and into any other one
         onSortable: function(sortable) {
-            sortable(ge.canvas.find('.ge-container-accordion > .accordion'), {
+            sortable(dom.all(ge.canvas, '.ge-container-accordion > .accordion'), {
                 draggable: '.ge-accordion-item',
                 group: 'accordion',
             });
@@ -111,14 +131,11 @@ $.fn.gridEditor.containers.accordion = function(ge) {
         paneKind: 'accordion-item',
 
         create: function(options) {
-            var container = $('<div />').attr('data-ge-container', 'accordion');
+            var container = dom.element('div', { 'data-ge-container': 'accordion' });
             var labels = options.labels || [];
             var count = options.items || labels.length || 2;
 
-            $('<div class="accordion" />')
-                .attr('id', ge.containerId('accordion'))
-                .appendTo(container)
-            ;
+            container.appendChild(dom.element('div', { 'class': 'accordion', id: ge.containerId('accordion') }));
 
             for (var i = 0; i < count; i++) {
                 addAccordionItemTo(container, {
@@ -134,39 +151,42 @@ $.fn.gridEditor.containers.accordion = function(ge) {
         addPane: addAccordionItemTo,
 
         mark: function(container) {
-            container.find('> .accordion > .accordion-item').each(function() {
-                var item = $(this).addClass('ge-accordion-item');
-                var collapse = item.find('> .accordion-collapse');
+            dom.all(container, ':scope > .accordion > .accordion-item').forEach(function(item) {
+                dom.addClass(item, 'ge-accordion-item');
+                var collapse = collapseOf(item);
 
                 // What the author wanted, before Bootstrap's own
                 // toggles get a chance to change it while editing.
                 // Every item is shown while editing (the stylesheet
                 // does that), so this is the only record of it.
-                if (collapse.attr('data-ge-open') === undefined) {
-                    collapse.attr('data-ge-open', collapse.hasClass('show') ? 'true' : 'false');
+                if (collapse && !collapse.hasAttribute('data-ge-open')) {
+                    collapse.setAttribute('data-ge-open', dom.hasClass(collapse, 'show') ? 'true' : 'false');
                 }
 
-                var button = item.find('> .accordion-header .accordion-button');
+                var button = dom.one(item, ':scope > .accordion-header .accordion-button');
 
-                // Bootstrap's collapse stays out of it, and the editor
-                // answers the click itself
-                ge.suspendToggles(button);
-                ge.makeLabelEditable(ge.labelIn(button));
+                if (button) {
+                    // Bootstrap's collapse stays out of it, and the editor
+                    // answers the click itself
+                    ge.suspendToggles(button);
+                    ge.makeLabelEditable(ge.labelIn(button));
 
-                if (!button.data('ge-toggles')) {
-                    button.data('ge-toggles', true).on('click', function(e) {
-                        if (ge.labelIn(button).attr('contenteditable') === 'true') { return; }
+                    if (!answered.has(button)) {
+                        answered.add(button);
+                        button.addEventListener('click', function(e) {
+                            if (ge.labelIn(button).getAttribute('contenteditable') === 'true') { return; }
 
-                        e.preventDefault();
-                        toggleAccordionItem(container, item);
-                    });
+                            e.preventDefault();
+                            toggleAccordionItem(container, item);
+                        });
+                    }
                 }
 
-                if (item.find('> .ge-tools-drawer').length) { return; }
+                if (dom.child(item, '.ge-tools-drawer')) { return; }
 
                 ge.createPaneControls(item, 'accordion-item', ge.settings.accordion_tools,
                     ge.t('confirm.delete_accordion_item'), function(removed) {
-                        item.slideUp(200, removed);
+                        dom.slideUp(item, 200, removed);
                     });
             });
         },
@@ -174,13 +194,15 @@ $.fn.gridEditor.containers.accordion = function(ge) {
         unmark: function(container) {
             ge.resumeToggles(container);
 
-            // What the ge.canvas was showing is what the page ships
-            container.find('> .accordion > .accordion-item').each(function() {
-                setAccordionItemOpen($(this),
-                    $(this).find('> .accordion-collapse').attr('data-ge-open') === 'true');
+            // What the canvas was showing is what the page ships
+            dom.all(container, ':scope > .accordion > .accordion-item').forEach(function(item) {
+                var collapse = collapseOf(item);
+                setAccordionItemOpen(item, !!collapse && collapse.getAttribute('data-ge-open') === 'true');
             });
 
-            container.find('.ge-accordion-item').removeClass('ge-accordion-item');
+            dom.all(container, '.ge-accordion-item').forEach(function(item) {
+                dom.removeClass(item, 'ge-accordion-item');
+            });
             ge.unwrapLabels(container);
         },
 
@@ -189,5 +211,3 @@ $.fn.gridEditor.containers.accordion = function(ge) {
         },
     };
 };
-
-})(jQuery);