@themarioga/grid-editor 6.0.0 → 7.1.0

package/src/js/plugins/grideditor.spacing.js

@@ -7,7 +7,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.spacing.min.js"></script>
  *
  * Fourteen families would be fourteen fields, so the panel has two, padding
@@ -17,9 +17,10 @@
  * utilities.spacing.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.padding': 'Padding',
     'utility.margin': 'Margin',
     'utility.side_all': 'All sides',
@@ -63,18 +64,18 @@ function pattern(key) {
     return new RegExp('^' + key + '[xytbse]?-(?:(?:sm|md|lg|xl|xxl)-)?(?:[0-5]|auto)$');
 }
 
-$.fn.gridEditor.utilities.spacing = function(ge) {
+GridEditor.utilities.spacing = function(ge) {
 
-    var options = $.extend({ values: VALUES, scale: SCALE }, ge.settings.utilities.spacing);
+    var options = Object.assign({ values: VALUES, scale: SCALE }, ge.settings.utilities.spacing);
     var patterns = { p: pattern('p'), m: pattern('m') };
 
     function applies(node, kind) {
         return kind === 'row' || kind === 'column' || kind === 'element' ||
-            node.is('[data-ge-container]');
+            dom.is(node, '[data-ge-container]');
     }
 
     function classes(node) {
-        return (node.attr('class') || '').split(/\s+/);
+        return (node.getAttribute('class') || '').split(/\s+/);
     }
 
     function carries(node, key) {
@@ -106,16 +107,16 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
      * since that is the only way to ask the browser.
      */
     function without(node, key) {
-        var original = node.attr('class');
+        var original = node.getAttribute('class');
         var style;
         var bare = {};
 
-        node.attr('class', classes(node).filter(function(name) { return !patterns[key].test(name); }).join(' '));
-        style = getComputedStyle(node[0]);
+        node.setAttribute('class', classes(node).filter(function(name) { return !patterns[key].test(name); }).join(' '));
+        style = getComputedStyle(node);
         ['top', 'right', 'bottom', 'left'].forEach(function(side) {
             bare[side] = style.getPropertyValue(PROPERTIES[key] + '-' + side);
         });
-        node.attr('class', original);
+        if (original === null) { node.removeAttribute('class'); } else { node.setAttribute('class', original); }
 
         return bare;
     }
@@ -182,26 +183,25 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
 
     /** A padding or margin group: its name, the side, and the field of that side's family. */
     function group(node, key, labelText) {
-        var box = $('<div class="ge-spacing-group" />').attr('data-ge-spacing', key);
-        var side = $('<select class="ge-spacing-side form-select form-select-sm" />');
+        var box = dom.element('div', { 'class': 'ge-spacing-group', 'data-ge-spacing': key });
+        var side = dom.element('select', { 'class': 'ge-spacing-side form-select form-select-sm' });
 
-        $('<span class="ge-utility-label" />').text(labelText).appendTo(box);
+        box.appendChild(dom.element('span', { 'class': 'ge-utility-label' }, labelText));
 
         SIDES.forEach(function(value) {
-            $('<option />').attr('value', value).text(sideLabel(value)).appendTo(side);
+            side.appendChild(dom.element('option', { value: value }, sideLabel(value)));
         });
 
         var field = ge.utilityField(node, key + startingSide(node, key));
 
-        side.val(field.attr('data-ge-family').slice(1))
-            .on('change', function() {
-                var next = ge.utilityField(node, key + this.value);
-                field.replaceWith(next);
-                field = next;
-            })
-            .appendTo(box)
-        ;
-        field.appendTo(box);
+        side.value = field.getAttribute('data-ge-family').slice(1);
+        side.addEventListener('change', function() {
+            var next = ge.utilityField(node, key + this.value);
+            field.replaceWith(next);
+            field = next;
+        });
+        box.appendChild(side);
+        box.appendChild(field);
 
         return box;
     }
@@ -216,29 +216,29 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
      * about what that does to its gutter.
      */
     function mark(scope) {
-        scope.find(NODES).addBack(NODES).each(function() {
-            var node = $(this);
-            var drawer = node.children('.ge-tools-drawer');
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
+            var drawer = dom.child(node, '.ge-tools-drawer');
 
-            if (!drawer.length || !applies(node, ge.kindOf(node))) { return; }
+            if (!drawer || !applies(node, ge.kindOf(node))) { return; }
 
             if (carries(node, 'p')) {
-                var style = getComputedStyle(node[0]);
+                var style = getComputedStyle(node);
 
-                drawer.css({
-                    marginTop: '-' + style.paddingTop,
-                    marginLeft: '-' + style.paddingLeft,
-                    marginRight: '-' + style.paddingRight,
+                dom.css(drawer, {
+                    'margin-top': '-' + style.paddingTop,
+                    'margin-left': '-' + style.paddingLeft,
+                    'margin-right': '-' + style.paddingRight,
                     width: 'calc(100% + ' + style.paddingLeft + ' + ' + style.paddingRight + ')',
                 });
             } else {
-                drawer.css({ marginTop: '', marginLeft: '', marginRight: '', width: '' });
+                dom.css(drawer, { 'margin-top': '', 'margin-left': '', 'margin-right': '', width: '' });
             }
 
-            if (node.hasClass('column')) {
-                drawer.find('.ge-spacing-gutter').toggle(classes(node).some(function(name) {
+            if (dom.hasClass(node, 'column')) {
+                var padded = classes(node).some(function(name) {
                     return /^p[xse]?-/.test(name) && patterns.p.test(name);
-                }));
+                });
+                dom.all(drawer, '.ge-spacing-gutter').forEach(function(note) { dom.toggle(note, padded); });
             }
         });
     }
@@ -268,13 +268,12 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
         panel: function(node, kind) {
             if (!applies(node, kind)) { return null; }
 
-            var box = $('<div class="ge-spacing" />')
-                .append(group(node, 'p', ge.t('utility.padding')))
-                .append(group(node, 'm', ge.t('utility.margin')))
-            ;
+            var box = dom.element('div', { 'class': 'ge-spacing' });
+            box.appendChild(group(node, 'p', ge.t('utility.padding')));
+            box.appendChild(group(node, 'm', ge.t('utility.margin')));
 
             if (kind === 'column') {
-                $('<small class="ge-spacing-gutter" />').text(ge.t('utility.spacing_gutter')).appendTo(box);
+                box.appendChild(dom.element('small', { 'class': 'ge-spacing-gutter' }, ge.t('utility.spacing_gutter')));
             }
 
             return box;
@@ -286,7 +285,7 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
             var styles = {};
 
             ['p', 'm'].forEach(function(key) {
-                if (carries(node, key)) { $.extend(styles, sides(node, key, breakpoint)); }
+                if (carries(node, key)) { Object.assign(styles, sides(node, key, breakpoint)); }
             });
 
             return styles;
@@ -295,5 +294,3 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
         onRefresh: mark,
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.summernote.js

@@ -6,98 +6,134 @@
  * summernote in air mode. What it can ask the editor for is the
  * handle its factory is called with, described in docs/plugins.md.
  *
+ *   <script src="jquery/jquery.min.js"></script>
  *   <script src="summernote/summernote-bs5.min.js"></script>
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.summernote.min.js"></script>
  *
+ * Summernote is a jQuery plugin, so this is the one plugin that needs jQuery
+ * on the page: it calls summernote on a content area through it, and
+ * nothing else. Towards the editor it is plain DOM, like every plugin, and
+ * it needs no jQuery adapter.
+ *
  * Up to 5.x the main bundle carried a copy of this file; since 6.0 it is
- * loaded on its own, like every plugin. The built file starts with what
- * every text editor shares - text blocks, the Text button, createText,
- * making the host's plain content a text - from
- * src/js/text/grideditor.text.js, installed once however many editors a
- * page loads.
+ * loaded on its own, like every plugin. It imports what every text editor
+ * shares - text blocks, the Text button, createText, making the host's plain
+ * content a text - from src/js/text/grideditor.text.js, which the build puts
+ * in its classic script, installed once however many editors a page loads.
+ */
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
+import '../text/grideditor.text.js';
+
+Object.assign(GridEditor.locales.en, {
+    'text.summernote': 'Summernote',
+});
+
+var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+
+function isPlainObject(value) {
+    return !!value && Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/**
+ * `sources` merged into `target`, objects and arrays copied all the way
+ * down rather than shared: what jQuery's deep extend did for summernote's
+ * options, whose callbacks the host's config and this file both fill in.
  */
-(function($) {
+function deepMerge(target) {
+    Array.prototype.slice.call(arguments, 1).forEach(function(source) {
+        Object.keys(source || {}).forEach(function(key) {
+            var value = source[key];
+
+            if (value === undefined || value === target) { return; }
 
-    $.extend($.fn.gridEditor.locales.en, {
-        'text.summernote': 'Summernote',
+            if (Array.isArray(value)) {
+                target[key] = deepMerge(Array.isArray(target[key]) ? target[key] : [], value);
+            } else if (isPlainObject(value)) {
+                target[key] = deepMerge(isPlainObject(target[key]) ? target[key] : {}, value);
+            } else {
+                target[key] = value;
+            }
+        });
     });
 
-    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+    return target;
+}
 
-    $.fn.gridEditor.texts.summernote = function(ge) {
-        return {
-            labelKey: 'text.summernote',
-            initialContent: INITIAL_CONTENT,
-            missingKey: 'error.summernote_missing',
+GridEditor.texts.summernote = function(ge) {
+    return {
+        labelKey: 'text.summernote',
+        initialContent: INITIAL_CONTENT,
+        missingKey: 'error.summernote_missing',
 
-            available: function() { return !!$.fn.summernote; },
+        available: function() { return !!(window.jQuery && window.jQuery.fn && window.jQuery.fn.summernote); },
 
-            start: function(contentAreas) {
-                var settings = ge.settings;
+        start: function(contentAreas) {
+            var settings = ge.settings;
+            var $ = window.jQuery;
 
-                // Summernote 0.9.1 calls $.now(), which jQuery 4 removed, and
-                // cannot open without it. Given back only where it is missing,
-                // and only once summernote is actually used.
-                if (!$.now) { $.now = Date.now; }
+            // Summernote 0.9.1 calls $.now(), which jQuery 4 removed, and
+            // cannot open without it. Given back only where it is missing,
+            // and only once summernote is actually used.
+            if (!$.now) { $.now = Date.now; }
 
-                contentAreas.each(function() {
-                    var contentArea = $(this);
-                    if (contentArea.hasClass('active')) { return; }
+            contentAreas.forEach(function(contentArea) {
+                if (dom.hasClass(contentArea, 'active')) { return; }
 
-                    if (contentArea.html() == INITIAL_CONTENT) {
-                        contentArea.html('');
-                    }
-                    contentArea.addClass('active');
-
-                    var configuration = $.extend(
-                        true, // deep copy
-                        {},
-                        (settings.summernote && settings.summernote.config ? settings.summernote.config : {}),
-                        {
-                            tabsize: 2,
-                            airMode: true,
-                            // Focus editor on creation
-                            callbacks: {
-                                onInit: function() {
-
-                                    // Call original oninit function, if one was passed in the config
-                                    var callback;
-                                    try {
-                                        callback = settings.summernote.config.callbacks.onInit;
-                                    } catch (err) {
-                                        // No callback passed
-                                    }
-                                    if (callback) {
-                                        callback.call(this);
-                                    }
-
-                                    // The editor owns what is inside the
-                                    // content area now, so the grid editor is
-                                    // told to put its own furniture back
-                                    ge.textReady(contentArea);
-
-                                    contentArea.summernote('focus');
+                if (contentArea.innerHTML == INITIAL_CONTENT) {
+                    contentArea.innerHTML = '';
+                }
+                dom.addClass(contentArea, 'active');
+
+                var configuration = deepMerge(
+                    {},
+                    (settings.summernote && settings.summernote.config ? settings.summernote.config : {}),
+                    {
+                        tabsize: 2,
+                        airMode: true,
+                        // Focus editor on creation
+                        callbacks: {
+                            onInit: function() {
+
+                                // Call original oninit function, if one was passed in the config
+                                var callback;
+                                try {
+                                    callback = settings.summernote.config.callbacks.onInit;
+                                } catch (err) {
+                                    // No callback passed
+                                }
+                                if (callback) {
+                                    callback.call(this);
                                 }
+
+                                // The editor owns what is inside the
+                                // content area now, so the grid editor is
+                                // told to put its own furniture back
+                                ge.textReady(contentArea);
+
+                                $(contentArea).summernote('focus');
                             }
                         }
-                    );
-                    contentArea.summernote(configuration);
-                });
-            },
-
-            stop: function(contentAreas) {
-                contentAreas.filter('.active').each(function() {
-                    var contentArea = $(this);
-                    contentArea.summernote('destroy');
-                    contentArea
-                        .removeClass('active')
-                        .removeAttr('id')
-                        .removeAttr('style')
-                        .removeAttr('spellcheck')
-                    ;
+                    }
+                );
+                $(contentArea).summernote(configuration);
+            });
+        },
+
+        stop: function(contentAreas) {
+            var $ = window.jQuery;
+
+            contentAreas.filter(function(contentArea) {
+                return dom.hasClass(contentArea, 'active');
+            }).forEach(function(contentArea) {
+                if ($ && $.fn.summernote) { $(contentArea).summernote('destroy'); }
+
+                dom.removeClass(contentArea, 'active');
+                ['id', 'style', 'spellcheck'].forEach(function(name) {
+                    contentArea.removeAttribute(name);
                 });
-            },
-        };
+            });
+        },
     };
-})(jQuery);
+};

package/src/js/plugins/grideditor.tabs.js

@@ -5,43 +5,48 @@
  * a tabs container. 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.tabs.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_tabs': 'Tabs',
     'container.add_tab': 'Add tab',
     'container.tab_label': 'Tab {number}',
     'confirm.delete_tab': 'Delete this tab and everything in it?',
 });
 
-$.fn.gridEditor.containers.tabs = function(ge) {
+GridEditor.containers.tabs = function(ge) {
 
     function addTabTo(container, options) {
         options = options || {};
 
-        var strip = container.find('> .nav-tabs');
-        var content = container.find('> .tab-content');
+        var strip = dom.one(container, ':scope > .nav-tabs');
+        var content = dom.one(container, ':scope > .tab-content');
         var id = ge.containerId('tab');
-        var number = strip.children('.nav-item').length + 1;
-
-        $('<li class="nav-item ge-tab" role="presentation" />')
-            .append($('<button class="nav-link" type="button" role="tab" data-bs-toggle="tab" />')
-                .attr('data-bs-target', '#' + id)
-                .attr('aria-controls', id)
-                .append($('<span class="ge-pane-label" />')
-                    .text(options.label || ge.t('container.tab_label', { number: number })))
-            )
-            .appendTo(strip)
-        ;
-
-        var pane = $('<div class="tab-pane fade" role="tabpanel" tabindex="0" />')
-            .attr('id', id)
-            .append(ge.defaultRegion())
-            .appendTo(content)
-        ;
+        var number = dom.children(strip, '.nav-item').length + 1;
+
+        var tab = strip.appendChild(dom.element('li', { 'class': 'nav-item ge-tab', role: 'presentation' }));
+        var button = tab.appendChild(dom.element('button', {
+            'class': 'nav-link',
+            type: 'button',
+            role: 'tab',
+            'data-bs-toggle': 'tab',
+            'data-bs-target': '#' + id,
+            'aria-controls': id,
+        }));
+        button.appendChild(dom.element('span', { 'class': 'ge-pane-label' },
+            options.label || ge.t('container.tab_label', { number: number })));
+
+        var pane = content.appendChild(dom.element('div', {
+            'class': 'tab-pane fade',
+            role: 'tabpanel',
+            tabindex: '0',
+            id: id,
+        }));
+        pane.appendChild(ge.defaultRegion());
 
         if (options.activate || number === 1) { activatePane(container, pane); }
 
@@ -49,26 +54,26 @@ $.fn.gridEditor.containers.tabs = function(ge) {
     }
 
     function activatePane(container, pane) {
-        var id = pane.attr('id');
+        var id = pane.getAttribute('id');
 
-        container.find('> .tab-content > .tab-pane').removeClass('show active');
-        pane.addClass('show active');
+        dom.all(container, ':scope > .tab-content > .tab-pane').forEach(function(each) {
+            dom.removeClass(each, 'show active');
+        });
+        dom.addClass(pane, 'show active');
 
-        container.find('> .nav-tabs .nav-link').each(function() {
-            var button = $(this);
-            var active = button.attr('data-bs-target') === '#' + id;
+        dom.all(container, ':scope > .nav-tabs .nav-link').forEach(function(button) {
+            var active = button.getAttribute('data-bs-target') === '#' + id;
 
-            button.toggleClass('active', active).attr('aria-selected', active ? 'true' : 'false');
+            dom.toggleClass(button, 'active', active);
+            button.setAttribute('aria-selected', active ? 'true' : 'false');
         });
     }
 
-    function tabOf(container, pane) {
-        return container.find('> .nav-tabs .nav-link[data-bs-target="#' + pane.attr('id') + '"]')
-            .closest('.nav-item');
-    }
-
     function paneOf(container, tab) {
-        return container.find(tab.find('.nav-link').attr('data-bs-target'));
+        var link = dom.one(tab, '.nav-link');
+        var target = link ? link.getAttribute('data-bs-target') : null;
+
+        return target ? dom.one(container, target) : null;
     }
 
     return {
@@ -77,7 +82,7 @@ $.fn.gridEditor.containers.tabs = function(ge) {
         // A tab strip sorts its own tabs, and the panes follow them. No
         // group: a tab belongs to the strip it was made in.
         onSortable: function(sortable) {
-            sortable(ge.canvas.find('.ge-container-tabs > .nav-tabs'), {
+            sortable(dom.all(ge.canvas, '.ge-container-tabs > .nav-tabs'), {
                 draggable: '.ge-tab',
             });
         },
@@ -85,12 +90,12 @@ $.fn.gridEditor.containers.tabs = function(ge) {
         paneKind: 'tab',
 
         create: function(options) {
-            var container = $('<div />').attr('data-ge-container', 'tabs');
+            var container = dom.element('div', { 'data-ge-container': 'tabs' });
             var labels = options.labels || [];
             var count = options.tabs || labels.length || 2;
 
-            $('<ul class="nav nav-tabs" role="tablist" />').appendTo(container);
-            $('<div class="tab-content" />').appendTo(container);
+            container.appendChild(dom.element('ul', { 'class': 'nav nav-tabs', role: 'tablist' }));
+            container.appendChild(dom.element('div', { 'class': 'tab-content' }));
 
             for (var i = 0; i < count; i++) {
                 addTabTo(container, { label: labels[i] });
@@ -102,27 +107,29 @@ $.fn.gridEditor.containers.tabs = function(ge) {
         addPane: addTabTo,
 
         mark: function(container) {
-            container.find('> .tab-content > .tab-pane').addClass('ge-tab-pane');
-
-            container.find('> .nav-tabs > .nav-item').each(function() {
-                var tab = $(this).addClass('ge-tab');
+            dom.all(container, ':scope > .tab-content > .tab-pane').forEach(function(pane) {
+                dom.addClass(pane, 'ge-tab-pane');
+            });
 
+            dom.all(container, ':scope > .nav-tabs > .nav-item').forEach(function(tab) {
+                dom.addClass(tab, 'ge-tab');
 
-                ge.makeLabelEditable(ge.labelIn(tab.find('.nav-link')));
+                var link = dom.one(tab, '.nav-link');
+                if (link) { ge.makeLabelEditable(ge.labelIn(link)); }
 
-                if (tab.find('> .ge-tools-drawer').length) { return; }
+                if (dom.child(tab, '.ge-tools-drawer')) { return; }
 
                 ge.createPaneControls(tab, 'tab', ge.settings.tab_tools, ge.t('confirm.delete_tab'),
                     function(removed) {
                         var pane = paneOf(container, tab);
-                        var wasActive = pane.hasClass('active');
+                        var wasActive = dom.hasClass(pane, 'active');
 
-                        tab.fadeOut(200, function() {
-                            pane.remove();
+                        dom.fadeOut(tab, 200, function() {
+                            if (pane) { pane.remove(); }
                             removed();
 
-                            var first = container.find('> .tab-content > .tab-pane').first();
-                            if (wasActive && first.length) { activatePane(container, first); }
+                            var first = dom.one(container, ':scope > .tab-content > .tab-pane');
+                            if (wasActive && first) { activatePane(container, first); }
                         });
                     });
             });
@@ -130,19 +137,20 @@ $.fn.gridEditor.containers.tabs = function(ge) {
 
         unmark: function(container) {
             ge.resumeToggles(container);
-            container.find('.ge-tab-pane').removeClass('ge-tab-pane');
+            dom.all(container, '.ge-tab-pane').forEach(function(pane) {
+                dom.removeClass(pane, 'ge-tab-pane');
+            });
             ge.unwrapLabels(container);
         },
 
         /** Panes read in tab order, whatever order they were dropped in. */
         afterPaneMove: function(container) {
-            var content = container.find('> .tab-content');
+            var content = dom.one(container, ':scope > .tab-content');
 
-            container.find('> .nav-tabs > .nav-item').each(function() {
-                content.append(paneOf(container, $(this)));
+            dom.all(container, ':scope > .nav-tabs > .nav-item').forEach(function(tab) {
+                var pane = paneOf(container, tab);
+                if (pane) { content.appendChild(pane); }
             });
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.textalign.js

@@ -7,15 +7,15 @@
  * 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.textalign.min.js"></script>
  *
  * The class aligns everything inside the node that does not align itself: a
  * paragraph the rich text editor gave its own text-align keeps it.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'utility.text_align': 'Text alignment',
     'utility.text_start': 'Start',
     'utility.text_center': 'Center',
@@ -25,7 +25,7 @@ $.extend($.fn.gridEditor.locales.en, {
 /** Start and end are left and right: Bootstrap's css is left to right. */
 var CSS = { start: 'left', center: 'center', end: 'right' };
 
-$.fn.gridEditor.utilities.textalign = function(ge) {
+GridEditor.utilities.textalign = function(ge) {
 
     function label(value) {
         if (value === 'start') { return ge.t('utility.text_start'); }
@@ -56,5 +56,3 @@ $.fn.gridEditor.utilities.textalign = function(ge) {
         }],
     };
 };
-
-})(jQuery);