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

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);

package/src/js/plugins/grideditor.alignment.js

@@ -7,15 +7,15 @@
  * align-self-{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.alignment.min.js"></script>
  *
  * Fields only, in the settings panels: alignment is set now and then, not
  * clicked through, and a drawer is short of room.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'utility.justify_content': 'Justify columns',
     'utility.align_items': 'Align columns',
     'utility.align_self': 'Align self',
@@ -40,7 +40,7 @@ var FLEX = {
  * wider breakpoint's class that is live in a wide window.
  */
 function family(definition) {
-    return $.extend({
+    return Object.assign({
         prefix: definition.name,
         preview: function(value) {
             var styles = {};
@@ -50,7 +50,7 @@ function family(definition) {
     }, definition);
 }
 
-$.fn.gridEditor.utilities.alignment = function() {
+GridEditor.utilities.alignment = function() {
     return {
         families: [
             family({
@@ -77,5 +77,3 @@ $.fn.gridEditor.utilities.alignment = function() {
         ],
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.card.js

@@ -6,18 +6,24 @@
  * 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.card.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_card': 'Card',
     'container.card_title': 'Card title',
     'container.card_footer': 'Card footer',
 });
 
-$.fn.gridEditor.containers.card = function(ge) {
+GridEditor.containers.card = function(ge) {
+
+    /** A header's or a footer's text, editable in place, when the card has one. */
+    function editable(part) {
+        if (part) { ge.makeLabelEditable(ge.labelIn(part)); }
+    }
 
     return {
         labelKey: 'container.add_card',
@@ -29,34 +35,30 @@ $.fn.gridEditor.containers.card = function(ge) {
          * exactly one region and nests like any other container.
          */
         create: function(options) {
-            var card = $('<div class="card" />');
+            var card = dom.element('div', { 'class': 'card' });
 
             if (options.header !== false) {
-                $('<div class="card-header" />')
-                    .append($('<span class="ge-pane-label" />')
-                        .text(options.title || ge.t('container.card_title')))
-                    .appendTo(card)
-                ;
+                var header = card.appendChild(dom.element('div', { 'class': 'card-header' }));
+                header.appendChild(dom.element('span', { 'class': 'ge-pane-label' },
+                    options.title || ge.t('container.card_title')));
             }
 
-            $('<div class="card-body" />').append(ge.defaultRegion()).appendTo(card);
+            card.appendChild(dom.element('div', { 'class': 'card-body' })).appendChild(ge.defaultRegion());
 
             if (options.footer) {
-                $('<div class="card-footer text-body-secondary" />')
-                    .append($('<span class="ge-pane-label" />')
-                        .text(typeof options.footer === 'string'
-                            ? options.footer
-                            : ge.t('container.card_footer')))
-                    .appendTo(card)
-                ;
+                var footer = card.appendChild(dom.element('div', { 'class': 'card-footer text-body-secondary' }));
+                footer.appendChild(dom.element('span', { 'class': 'ge-pane-label' },
+                    typeof options.footer === 'string' ? options.footer : ge.t('container.card_footer')));
             }
 
-            return $('<div />').attr('data-ge-container', 'card').append(card);
+            var container = dom.element('div', { 'data-ge-container': 'card' });
+            container.appendChild(card);
+            return container;
         },
 
         mark: function(container) {
-            ge.makeLabelEditable(ge.labelIn(container.find('> .card > .card-header')));
-            ge.makeLabelEditable(ge.labelIn(container.find('> .card > .card-footer')));
+            editable(dom.one(container, ':scope > .card > .card-header'));
+            editable(dom.one(container, ':scope > .card > .card-footer'));
         },
 
         unmark: function(container) {
@@ -64,5 +66,3 @@ $.fn.gridEditor.containers.card = function(ge) {
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.ckeditor.js

@@ -7,119 +7,120 @@
  * factory is called with, described in docs/plugins.md.
  *
  *   <script src="ckeditor/ckeditor.js"></script>
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
  * 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 and the Add text
- * tool, 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.
  */
-(function($) {
-
-    $.extend($.fn.gridEditor.locales.en, {
-        'text.ckeditor': 'CKEditor',
-    });
-
-    var INITIAL_CONTENT = '<p>Lorem initius... </p>';
-
-    $.fn.gridEditor.texts.ckeditor = function(ge) {
-
-        /**
-         * The instance editing this content area. Kept in jQuery data when it
-         * is made, and looked for among CKEditor's own as a fallback, since
-         * an instance made by another version of this file has no data.
-         */
-        function instanceOf(contentArea) {
-            var kept = contentArea.data('ge-ckeditor');
-            if (kept) { return kept; }
-
-            var found = null;
-            $.each(window.CKEDITOR.instances, function(name, instance) {
-                if (instance.element && instance.element.$ === contentArea[0]) { found = instance; }
-            });
-
-            return found;
-        }
-
-        return {
-            labelKey: 'text.ckeditor',
-            initialContent: INITIAL_CONTENT,
-            missingKey: 'error.ckeditor_missing',
-
-            available: function() { return !!window.CKEDITOR; },
-
-            start: function(contentAreas) {
-                var settings = ge.settings;
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
+import '../text/grideditor.text.js';
+
+Object.assign(GridEditor.locales.en, {
+    'text.ckeditor': 'CKEditor',
+});
+
+var INITIAL_CONTENT = '<p>Lorem initius... </p>';
+
+// The instance each content area is edited with, as this file made it
+var instances = new WeakMap();
+
+GridEditor.texts.ckeditor = function(ge) {
+
+    /**
+     * The instance editing this content area. Kept when it is made, and
+     * looked for among CKEditor's own as a fallback, since an instance made
+     * by another copy of this file is not in this one's record.
+     */
+    function instanceOf(contentArea) {
+        var kept = instances.get(contentArea);
+        if (kept) { return kept; }
+
+        var found = null;
+        Object.keys(window.CKEDITOR.instances).forEach(function(name) {
+            var instance = window.CKEDITOR.instances[name];
+            if (instance.element && instance.element.$ === contentArea) { found = instance; }
+        });
+
+        return found;
+    }
+
+    return {
+        labelKey: 'text.ckeditor',
+        initialContent: INITIAL_CONTENT,
+        missingKey: 'error.ckeditor_missing',
+
+        available: function() { return !!window.CKEDITOR; },
+
+        start: function(contentAreas) {
+            var settings = ge.settings;
+
+            contentAreas.forEach(function(contentArea) {
+                if (dom.hasClass(contentArea, 'active')) { return; }
+
+                if (contentArea.innerHTML == INITIAL_CONTENT) {
+                    // CKEditor kills this '&nbsp' creating a non usable box :/
+                    contentArea.innerHTML = '&nbsp;';
+                }
+
+                // contenteditable="true", or CKEditor loads readonly
+                dom.addClass(contentArea, 'active');
+                contentArea.setAttribute('contenteditable', 'true');
+
+                var configuration = Object.assign(
+                    {},
+                    (settings.ckeditor && settings.ckeditor.config ? settings.ckeditor.config : {}),
+                    {
+                        // Focus editor on creation
+                        on: {
+                            instanceReady: function( evt ) {
+                                // Call original instanceReady function, if one was passed in the config
+                                var callback;
+                                try {
+                                    callback = settings.ckeditor.config.on.instanceReady;
+                                } catch (err) {
+                                    // No callback passed
+                                }
+                                if (callback) {
+                                    callback.call(this, evt);
+                                }
 
-                contentAreas.each(function() {
-                    var contentArea = $(this);
-                    if (contentArea.hasClass('active')) { return; }
+                                // 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);
 
-                    if (contentArea.html() == INITIAL_CONTENT) {
-                        // CKEditor kills this '&nbsp' creating a non usable box :/
-                        contentArea.html('&nbsp;');
-                    }
-
-                    // Add the .attr('contenteditable',''true') or CKEditor loads readonly
-                    contentArea.addClass('active').attr('contenteditable', 'true');
-
-                    var configuration = $.extend(
-                        {},
-                        (settings.ckeditor && settings.ckeditor.config ? settings.ckeditor.config : {}),
-                        {
-                            // Focus editor on creation
-                            on: {
-                                instanceReady: function( evt ) {
-                                    // Call original instanceReady function, if one was passed in the config
-                                    var callback;
-                                    try {
-                                        callback = settings.ckeditor.config.on.instanceReady;
-                                    } catch (err) {
-                                        // No callback passed
-                                    }
-                                    if (callback) {
-                                        callback.call(this, evt);
-                                    }
-
-                                    // 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);
-
-                                    instance.focus();
-                                }
+                                instance.focus();
                             }
                         }
-                    );
-                    var instance = window.CKEDITOR.inline(contentArea.get(0), configuration);
-                    contentArea.data('ge-ckeditor', instance);
-                });
-            },
-
-            stop: function(contentAreas) {
-                contentAreas.filter('.active').each(function() {
-                    var contentArea = $(this);
-
-                    // This content area's instance, and no other: up to 5.x
-                    // closing one content area destroyed every CKEditor on
-                    // the page, other editors' and the host's own included
-                    var instance = window.CKEDITOR ? instanceOf(contentArea) : null;
-                    if (instance) { instance.destroy(); }
-                    contentArea.removeData('ge-ckeditor');
-
-                    // Cleanup
-                    contentArea
-                        .removeClass('active cke_focus')
-                        .removeAttr('id')
-                        .removeAttr('style')
-                        .removeAttr('spellcheck')
-                        .removeAttr('contenteditable')
-                    ;
+                    }
+                );
+                var instance = window.CKEDITOR.inline(contentArea, configuration);
+                instances.set(contentArea, instance);
+            });
+        },
+
+        stop: function(contentAreas) {
+            contentAreas.filter(function(contentArea) {
+                return dom.hasClass(contentArea, 'active');
+            }).forEach(function(contentArea) {
+                // This content area's instance, and no other: up to 5.x
+                // closing one content area destroyed every CKEditor on
+                // the page, other editors' and the host's own included
+                var instance = window.CKEDITOR ? instanceOf(contentArea) : null;
+                if (instance) { instance.destroy(); }
+                instances.delete(contentArea);
+
+                // Cleanup
+                dom.removeClass(contentArea, 'active cke_focus');
+                ['id', 'style', 'spellcheck', 'contenteditable'].forEach(function(name) {
+                    contentArea.removeAttribute(name);
                 });
-            },
-        };
+            });
+        },
     };
-})(jQuery);
+};