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

package/src/js/plugins/grideditor.float.js

@@ -8,16 +8,16 @@
  * 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.elements.min.js"></script>
  *   <script src="dist/plugins/grideditor.float.min.js"></script>
  *
  * Elements only. A floated row or column stops being part of the grid, and a
  * container sits beside the content areas rather than in their text.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'utility.float': 'Float',
     'utility.float_start': 'Start',
     'utility.float_end': 'End',
@@ -27,7 +27,7 @@ $.extend($.fn.gridEditor.locales.en, {
 /** Start and end are left and right: Bootstrap's css is left to right. */
 var CSS = { start: 'left', end: 'right', none: 'none' };
 
-$.fn.gridEditor.utilities.float = function(ge) {
+GridEditor.utilities.float = function(ge) {
 
     function label(value) {
         if (value === 'start') { return ge.t('utility.float_start'); }
@@ -52,5 +52,3 @@ $.fn.gridEditor.utilities.float = function(ge) {
         }],
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.gutters.js

@@ -6,7 +6,7 @@
  * and gy-{breakpoint}-* classes. 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.gutters.min.js"></script>
  *
  * The editor draws its own frame round every column, narrower than any
@@ -15,9 +15,10 @@
  * utilities.gutters.scale is what 0 to 5 come to, for a page that changed
  * Bootstrap's $spacers.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'utility.gutters': 'Gutters',
     'utility.gutters_x': 'Horizontal gutters',
     'utility.gutters_y': 'Vertical gutters',
@@ -33,16 +34,17 @@ var DEFAULT_Y = '0';
 var INFIXES = ['', 'sm', 'md', 'lg', 'xl', 'xxl'];
 var CLASS_PATTERN = /(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;
 
-$.fn.gridEditor.utilities.gutters = function(ge) {
+GridEditor.utilities.gutters = function(ge) {
 
-    var options = $.extend({ scale: SCALE }, ge.settings.utilities.gutters);
+    var options = Object.assign({ scale: SCALE }, ge.settings.utilities.gutters);
+    var listening = null; // The after-utility listener, while editing
 
     /**
      * The class of a family that decides a row's gutters at a breakpoint:
      * the widest breakpoint up to it that has one, as { tier, value }.
      */
     function source(row, prefix, tier) {
-        var classes = (row.attr('class') || '').split(/\s+/);
+        var classes = (row.getAttribute('class') || '').split(/\s+/);
 
         for (var i = tier; i >= 0; i--) {
             for (var value = VALUES.length - 1; value >= 0; value--) {
@@ -86,7 +88,8 @@ $.fn.gridEditor.utilities.gutters = function(ge) {
      * taken off: left on, the bigger of the two would win, and the field the
      * user just chose would not be what the row shows.
      */
-    function afterUtility(e, payload) {
+    function afterUtility(e) {
+        var payload = e.detail;
         if (payload.family !== 'g') { return; }
 
         ['gx', 'gy'].forEach(function(family) {
@@ -95,9 +98,8 @@ $.fn.gridEditor.utilities.gutters = function(ge) {
     }
 
     function mark(scope) {
-        scope.find('.row').addBack('.row').each(function() {
-            var row = $(this);
-            row.toggleClass('ge-gutters', CLASS_PATTERN.test(row.attr('class') || ''));
+        dom.selfAndAll(scope, '.row').forEach(function(row) {
+            dom.toggleClass(row, 'ge-gutters', CLASS_PATTERN.test(row.getAttribute('class') || ''));
         });
     }
 
@@ -130,16 +132,19 @@ $.fn.gridEditor.utilities.gutters = function(ge) {
         ],
 
         onInit: function() {
-            ge.canvas.off('grideditor:after-utility.ge-gutters').on('grideditor:after-utility.ge-gutters', afterUtility);
+            // init runs again whenever a node is added, without a deinit
+            // between, so the listener is replaced rather than stacked
+            if (listening) { ge.canvas.removeEventListener('grideditor:after-utility', listening); }
+            listening = afterUtility;
+            ge.canvas.addEventListener('grideditor:after-utility', listening);
         },
 
         onRefresh: mark,
 
         onDeinit: function() {
-            ge.canvas.off('grideditor:after-utility.ge-gutters');
-            ge.canvas.find('.ge-gutters').removeClass('ge-gutters');
+            if (listening) { ge.canvas.removeEventListener('grideditor:after-utility', listening); }
+            listening = null;
+            dom.all(ge.canvas, '.ge-gutters').forEach(function(row) { dom.removeClass(row, 'ge-gutters'); });
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.order.js

@@ -6,7 +6,7 @@
  * classes. 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.order.min.js"></script>
  *
  * Two arrows in each column's drawer move it one place earlier or later in
@@ -16,9 +16,10 @@
  * utilities.order.drawer: false leaves the arrows out, and the panel field is
  * the only control.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'utility.order': 'Order',
     'utility.order_first': 'First',
     'utility.order_last': 'Last',
@@ -35,10 +36,11 @@ var RANK = { first: -1, last: 6 };
 /** A column that carries any class of the family, at any breakpoint. */
 var CLASS_PATTERN = /(?:^|\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\s|$)/;
 
-$.fn.gridEditor.utilities.order = function(ge) {
+GridEditor.utilities.order = function(ge) {
 
-    var options = $.extend({ drawer: true }, ge.settings.utilities.order);
+    var options = Object.assign({ drawer: true }, ge.settings.utilities.order);
     var warnedAboutDrag = false;
+    var listening = null; // The after-move listener, while editing
 
     function rank(value) {
         if (value === null) { return 0; }
@@ -55,9 +57,9 @@ $.fn.gridEditor.utilities.order = function(ge) {
 
     /** The columns of a row in the order a view shows them, given what each one's order is. */
     function visualOrder(columns, read) {
-        return columns.get()
+        return columns
             .map(function(element, index) {
-                return { element: element, index: index, rank: rank(read($(element))) };
+                return { element: element, index: index, rank: rank(read(element)) };
             })
             .sort(function(a, b) { return a.rank - b.rank || a.index - b.index; })
             .map(function(entry) { return entry.element; });
@@ -89,9 +91,9 @@ $.fn.gridEditor.utilities.order = function(ge) {
      */
     function move(col, direction) {
         var view = ge.view();
-        var columns = col.parent().children('.column');
+        var columns = dom.children(col.parentElement, '.column');
         var shown = visualOrder(columns, function(column) { return ge.getUtility(column, 'order', view); });
-        var from = shown.indexOf(col[0]);
+        var from = shown.indexOf(col);
         var to = from + direction;
 
         if (to < 0 || to >= shown.length) { return; }
@@ -99,7 +101,7 @@ $.fn.gridEditor.utilities.order = function(ge) {
         shown.splice(to, 0, shown.splice(from, 1)[0]);
 
         var values = null;
-        if (!sameOrder(shown, columns.get()) || !inheritsMarkupOrder(columns, view)) {
+        if (!sameOrder(shown, columns) || !inheritsMarkupOrder(columns, view)) {
             values = slots(shown.length);
 
             if (!values) {
@@ -111,7 +113,7 @@ $.fn.gridEditor.utilities.order = function(ge) {
 
         ge.operate(function() {
             shown.forEach(function(element, index) {
-                ge.setUtility($(element), 'order', values ? values[index] : null, { source: 'tool' });
+                ge.setUtility(element, 'order', values ? values[index] : null, { source: 'tool' });
             });
         });
     }
@@ -125,28 +127,27 @@ $.fn.gridEditor.utilities.order = function(ge) {
 
         return sameOrder(visualOrder(columns, function(column) {
             return ge.getUtility(column, 'order', below);
-        }), columns.get());
+        }), columns);
     }
 
     /** Whether a row's columns are ordered by class, rather than by the markup, in this view. */
     function ordered(row) {
-        return row.children('.column').get().some(function(element) {
-            return ge.getUtility($(element), 'order', ge.view()) !== null;
+        return dom.children(row, '.column').some(function(element) {
+            return ge.getUtility(element, 'order', ge.view()) !== null;
         });
     }
 
     /** The badge: a column ordered by class in this view says where. */
     function mark(scope) {
-        scope.find('.column').addBack('.column').each(function() {
-            var col = $(this);
-            var value = CLASS_PATTERN.test(col.attr('class') || '')
+        dom.selfAndAll(scope, '.column').forEach(function(col) {
+            var value = CLASS_PATTERN.test(col.getAttribute('class') || '')
                 ? ge.getUtility(col, 'order', ge.view())
                 : null;
 
             if (value === null) {
-                col.removeAttr('data-ge-order');
+                col.removeAttribute('data-ge-order');
             } else {
-                col.attr('data-ge-order', ge.t('badge.order', { value: label(value) }));
+                col.setAttribute('data-ge-order', ge.t('badge.order', { value: label(value) }));
             }
         });
     }
@@ -155,7 +156,8 @@ $.fn.gridEditor.utilities.order = function(ge) {
      * A column dropped in a row ordered by class lands where the markup puts
      * it, and shows up where its order does, which is worth saying once.
      */
-    function afterMove(e, payload) {
+    function afterMove(e) {
+        var payload = e.detail;
         if (warnedAboutDrag || payload.kind !== 'column' || !payload.to) { return; }
         if (!ordered(payload.to.parent)) { return; }
 
@@ -191,16 +193,17 @@ $.fn.gridEditor.utilities.order = function(ge) {
         // init runs again whenever a node is added, without a deinit
         // between, so the listener is replaced rather than stacked
         onInit: function() {
-            ge.canvas.off('grideditor:after-move.ge-order').on('grideditor:after-move.ge-order', afterMove);
+            if (listening) { ge.canvas.removeEventListener('grideditor:after-move', listening); }
+            listening = afterMove;
+            ge.canvas.addEventListener('grideditor:after-move', listening);
         },
 
         onRefresh: mark,
 
         onDeinit: function() {
-            ge.canvas.off('grideditor:after-move.ge-order');
-            ge.canvas.find('[data-ge-order]').removeAttr('data-ge-order');
+            if (listening) { ge.canvas.removeEventListener('grideditor:after-move', listening); }
+            listening = null;
+            dom.all(ge.canvas, '[data-ge-order]').forEach(function(col) { col.removeAttribute('data-ge-order'); });
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.popup.js

@@ -5,50 +5,61 @@
  * 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/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.popup.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_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) {
+GridEditor.containers.popup = function(ge) {
 
     function popupIdOf(container) {
-        return container.attr('data-ge-popup-id');
+        return container.getAttribute('data-ge-popup-id');
+    }
+
+    /** Whether a popup with this id is on the canvas. */
+    function popupExists(id) {
+        return dom.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');
+        dom.all(ge.canvas, '[data-ge-popup-target]').forEach(function(trigger) {
+            dom.addClass(trigger, 'ge-popup-trigger');
+            var wanted = trigger.getAttribute('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');
+            trigger.removeAttribute('data-bs-toggle');
+            trigger.removeAttribute('data-bs-target');
 
-            if (ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) {
-                trigger.removeClass('ge-popup-orphan');
+            if (popupExists(wanted)) {
+                dom.removeClass(trigger, 'ge-popup-orphan');
                 return;
             }
 
-            var nearby = trigger.closest('.column').find('[data-ge-popup-id]');
+            var column = trigger.closest('.column');
+            var nearby = column ? dom.all(column, '[data-ge-popup-id]') : [];
 
             if (nearby.length === 1) {
-                trigger.attr('data-ge-popup-target', popupIdOf(nearby)).removeClass('ge-popup-orphan');
+                trigger.setAttribute('data-ge-popup-target', popupIdOf(nearby[0]));
+                dom.removeClass(trigger, 'ge-popup-orphan');
                 return;
             }
 
-            trigger.addClass('ge-popup-orphan');
+            dom.addClass(trigger, 'ge-popup-orphan');
 
             ge.operate(function() {
                 ge.emit('popup-orphan', ge.payloadFor('popup', trigger, {
-                    parent: trigger.parent(),
+                    parent: trigger.parentElement,
                     source: 'api',
                     missing: wanted,
                 }));
@@ -57,18 +68,18 @@ $.fn.gridEditor.containers.popup = function(ge) {
     }
 
     function writePopupTriggerAttributes() {
-        ge.canvas.find('[data-ge-popup-target]').each(function() {
-            var trigger = $(this);
-            var wanted = trigger.attr('data-ge-popup-target');
+        dom.all(ge.canvas, '[data-ge-popup-target]').forEach(function(trigger) {
+            var wanted = trigger.getAttribute('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'); }
+            dom.removeClass(trigger, 'ge-popup-orphan');
+            dom.dropEmptyClass(trigger);
 
-            if (!ge.canvas.find('[data-ge-popup-id="' + wanted + '"]').length) { return; }
+            if (!popupExists(wanted)) { return; }
 
-            trigger.attr('data-bs-toggle', 'modal').attr('data-bs-target', '#' + wanted);
+            trigger.setAttribute('data-bs-toggle', 'modal');
+            trigger.setAttribute('data-bs-target', '#' + wanted);
         });
     }
 
@@ -84,33 +95,32 @@ $.fn.gridEditor.containers.popup = function(ge) {
 
         create: function(options) {
             var id = ge.containerId('popup');
-            var container = $('<div />')
-                .attr('data-ge-container', 'popup')
-                .attr('data-ge-popup-id', id)
-            ;
+            var container = dom.element('div', { 'data-ge-container': 'popup', '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)
-                ;
+                container.appendChild(dom.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 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)
-            ;
+            var modal = container.appendChild(dom.element('div', {
+                'class': 'modal fade',
+                tabindex: '-1',
+                'aria-hidden': 'true',
+                id: id,
+            }));
+            var dialog = modal.appendChild(dom.element('div', { 'class': 'modal-dialog' }));
+            if (options.size) { dom.addClass(dialog, 'modal-' + options.size); }
+
+            var content = dialog.appendChild(dom.element('div', { 'class': 'modal-content' }));
+            var header = content.appendChild(dom.element('div', { 'class': 'modal-header' }));
+            header.appendChild(dom.element('h5', { 'class': 'modal-title' }))
+                .appendChild(dom.element('span', { 'class': 'ge-pane-label' },
+                    options.title || ge.t('container.popup_title')));
+            header.appendChild(dom.create('<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>'));
+            content.appendChild(dom.element('div', { 'class': 'modal-body' })).appendChild(ge.defaultRegion());
 
             return container;
         },
@@ -120,13 +130,17 @@ $.fn.gridEditor.containers.popup = function(ge) {
             // 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')));
+            dom.all(container, '[data-bs-dismiss]').forEach(function(dismiss) {
+                ge.suspendToggles(dismiss);
+            });
+            dom.all(container, '.modal-title').forEach(function(title) {
+                ge.makeLabelEditable(ge.labelIn(title));
+            });
         },
 
         unmark: function(container) {
             ge.resumeToggles(container);
-            container.removeClass('ge-popup-collapsed');
+            dom.removeClass(container, 'ge-popup-collapsed');
             ge.unwrapLabels(container);
         },
 
@@ -134,10 +148,8 @@ $.fn.gridEditor.containers.popup = function(ge) {
         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');
+                    dom.toggleClass(container, 'ge-popup-collapsed');
                 });
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.sections.js

@@ -6,7 +6,7 @@
  * each grouping rows at a width of its own. 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.sections.min.js"></script>
  *
  * Called sections, not containers, because a container is what the tabs,
@@ -16,9 +16,10 @@
  *
  * sections.widths narrows the widths the field offers.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'section.add': 'Section',
     'section.width': 'Width',
     'section.fixed': 'Fixed',
@@ -42,26 +43,26 @@ var WIDTHS = {
 
 var ORDER = ['fixed', 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'];
 
-$.fn.gridEditor.features.sections = function(ge) {
+GridEditor.features.sections = function(ge) {
 
-    var options = $.extend({ widths: ORDER }, ge.settings.sections);
+    var options = Object.assign({ widths: ORDER }, ge.settings.sections);
 
     function widthOf(section) {
         var found = null;
 
-        $.each(WIDTHS, function(width, className) {
-            if (!found && section.hasClass(className)) { found = width; }
+        Object.keys(WIDTHS).forEach(function(width) {
+            if (!found && dom.hasClass(section, WIDTHS[width])) { found = width; }
         });
 
         return found;
     }
 
     function isSection(node) {
-        return node.parent()[0] === ge.canvas[0] && widthOf(node) !== null;
+        return node.parentElement === ge.canvas && widthOf(node) !== null;
     }
 
     function sections() {
-        return ge.canvas.children().filter(function() { return isSection($(this)); });
+        return dom.children(ge.canvas).filter(isSection);
     }
 
     function label(width) {
@@ -90,11 +91,13 @@ $.fn.gridEditor.features.sections = function(ge) {
             });
 
             if (!ge.emit('before-utility', payload)) {
-                ge.detailsOf(section).find('.ge-section-width select').val(from);
+                var select = dom.one(ge.detailsOf(section), '.ge-section-width select');
+                if (select) { select.value = from; }
                 return false;
             }
 
-            section.removeClass(WIDTHS[from]).addClass(WIDTHS[width]);
+            dom.removeClass(section, WIDTHS[from]);
+            dom.addClass(section, WIDTHS[width]);
             ge.emit('after-utility', payload);
 
             return true;
@@ -102,31 +105,35 @@ $.fn.gridEditor.features.sections = function(ge) {
     }
 
     function widthField(section) {
-        var select = $('<select class="form-select form-select-sm" />');
+        var select = dom.element('select', { 'class': 'form-select form-select-sm' });
         var current = widthOf(section);
         var offered = options.widths.indexOf(current) === -1 ? options.widths.concat([current]) : options.widths;
 
         ORDER.forEach(function(width) {
             if (offered.indexOf(width) === -1) { return; }
-            $('<option />').attr('value', width).text(label(width)).appendTo(select);
+            select.appendChild(dom.element('option', { value: width }, label(width)));
         });
 
-        select.val(current).on('change', function() { setWidth(section, this.value, 'panel'); });
+        select.value = current;
+        select.addEventListener('change', function() { setWidth(section, this.value, 'panel'); });
 
-        return $('<label class="ge-utility ge-section-width" />')
-            .append($('<span class="ge-utility-label" />').text(ge.t('section.width')))
-            .append(select);
+        var field = dom.element('label', { 'class': 'ge-utility ge-section-width' });
+        field.appendChild(dom.element('span', { 'class': 'ge-utility-label' }, ge.t('section.width')));
+        field.appendChild(select);
+
+        return field;
     }
 
     function createControls(section) {
-        var drawer = $('<div class="ge-tools-drawer ge-section-drawer" />').prependTo(section);
+        var drawer = dom.element('div', { 'class': 'ge-tools-drawer ge-section-drawer' });
+        section.insertBefore(drawer, section.firstChild);
 
         ge.createMoveTool(drawer);
-        ge.addSettingsTool(drawer, section, ge.settings.section_classes || []).append(widthField(section));
+        ge.addSettingsTool(drawer, section, ge.settings.section_classes || []).appendChild(widthField(section));
 
         ge.createTool(drawer, ge.t('tool.delete_section'), 'ge-delete-section', 'bi bi-trash', function() {
             ge.deleteNode('section', section, ge.t('confirm.delete_section'), function(removed) {
-                section.slideUp(removed);
+                dom.slideUp(section, removed);
             });
         });
 
@@ -136,24 +143,26 @@ $.fn.gridEditor.features.sections = function(ge) {
     }
 
     function mark() {
-        sections().each(function() {
-            var section = $(this).addClass('ge-section');
-            if (!section.children('.ge-tools-drawer').length) { createControls(section); }
+        sections().forEach(function(section) {
+            dom.addClass(section, 'ge-section');
+            if (!dom.child(section, '.ge-tools-drawer')) { createControls(section); }
         });
     }
 
     function unmark() {
-        ge.canvas.children('.ge-section').removeClass('ge-section');
+        dom.children(ge.canvas, '.ge-section').forEach(function(section) {
+            dom.removeClass(section, 'ge-section');
+        });
     }
 
     /** createSection(options): a section, detached unless a placement is given. */
     function createSection(settings) {
         settings = settings || {};
 
-        var section = $('<div />').addClass(WIDTHS[settings.width] || WIDTHS.fixed);
+        var section = dom.element('div', { 'class': WIDTHS[settings.width] || WIDTHS.fixed });
 
         (settings.rows || [[12]]).forEach(function(layout) {
-            ge.rowFromLayout(layout).appendTo(section);
+            section.appendChild(ge.rowFromLayout(layout));
         });
 
         return ge.place(section, 'section', settings);
@@ -165,7 +174,7 @@ $.fn.gridEditor.features.sections = function(ge) {
         },
 
         kindOf: function(node) {
-            return node.hasClass('ge-section') ? 'section' : null;
+            return dom.hasClass(node, 'ge-section') ? 'section' : null;
         },
 
         // A section is a block the canvas moves, and a region rows move in
@@ -174,8 +183,8 @@ $.fn.gridEditor.features.sections = function(ge) {
 
         /** A section goes on the canvas and nowhere else, and holds rows and nothing else. */
         accepts: function(region, node) {
-            if (node.hasClass('ge-section') || isSectionMade(node)) { return region[0] === ge.canvas[0]; }
-            if (region.hasClass('ge-section')) { return node.hasClass('row'); }
+            if (dom.hasClass(node, 'ge-section') || isSectionMade(node)) { return region === ge.canvas; }
+            if (dom.hasClass(region, 'ge-section')) { return dom.hasClass(node, 'row'); }
 
             return true;
         },
@@ -192,8 +201,6 @@ $.fn.gridEditor.features.sections = function(ge) {
 
     /** A section the toolbar just made, before init has marked it. */
     function isSectionMade(node) {
-        return !node.parent().length && widthOf(node) !== null;
+        return !node.parentElement && widthOf(node) !== null;
     }
 };
-
-})(jQuery);