@themarioga/grid-editor 6.0.0 → 7.0.0

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, 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);
+};

package/src/js/plugins/grideditor.clipboard.js

@@ -8,7 +8,7 @@
  * 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.clipboard.min.js"></script>
  *
  * What is copied is kept in localStorage, so it survives a reload and can be
@@ -18,9 +18,10 @@
  * A paste is an add like any other - before-add-* and after-add-*, with
  * `source: 'paste'` - so a host can turn one away.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'tool.copy': 'Copy',
     'tool.paste': 'Paste',
     'clipboard.paste_row': 'Paste row',
@@ -33,7 +34,6 @@ var VERSION = 1;
 
 /** Where nothing can be stored, what was copied lives here, for this page. */
 var memory = null;
-var editors = 0;
 
 /**
  * What each drawer takes when something is pasted into it, by the kind of the
@@ -83,18 +83,23 @@ function write(clip) {
         memory = clip;
     }
 
-    $(document).trigger(CHANGE);
+    announce();
+}
+
+/** Every editor on the page looks at the clipboard again. */
+function announce() {
+    document.dispatchEvent(new CustomEvent(CHANGE));
 }
 
 // Another tab copied something: every editor here looks again
-$(window).on('storage', function(e) {
-    if (e.originalEvent && e.originalEvent.key === STORAGE_ITEM) { $(document).trigger(CHANGE); }
+window.addEventListener('storage', function(e) {
+    if (e.key === STORAGE_ITEM) { announce(); }
 });
 
-$.fn.gridEditor.features.clipboard = function(ge) {
+GridEditor.features.clipboard = function(ge) {
 
-    var namespace = '.ge-clipboard-' + (++editors);
     var shown = null; // What the toolbar's paste buttons stand for
+    var listening = false; // Whether refresh is on the document's change event
 
     function used(name) {
         return !ge.settings.plugins || ge.settings.plugins.indexOf(name) !== -1;
@@ -103,10 +108,10 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     /** A category this editor can take: the plugin that makes it is here. */
     function available(clip) {
         if (clip.category === 'container') {
-            return !!$.fn.gridEditor.containers[clip.kind] && used(clip.kind);
+            return !!GridEditor.containers[clip.kind] && used(clip.kind);
         }
-        if (clip.category === 'section') { return !!$.fn.gridEditor.features.sections && used('sections'); }
-        if (clip.category === 'element') { return !!$.fn.gridEditor.features.elements && used('elements'); }
+        if (clip.category === 'section') { return !!GridEditor.features.sections && used('sections'); }
+        if (clip.category === 'element') { return !!GridEditor.features.elements && used('elements'); }
 
         return true;
     }
@@ -116,7 +121,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     }
 
     function categoryOf(kind) {
-        if ($.fn.gridEditor.containers[kind]) { return 'container'; }
+        if (GridEditor.containers[kind]) { return 'container'; }
 
         return ['row', 'column', 'section', 'text', 'element'].indexOf(kind) !== -1 ? kind : null;
     }
@@ -129,10 +134,15 @@ $.fn.gridEditor.features.clipboard = function(ge) {
 
         // The canvas came back with new drawers: the one to flash is the
         // node's new copy tool
-        var tool = ge.drawerOf(node).find('> .ge-copy');
-        tool.addClass('ge-copied').find('i').attr('class', 'bi bi-check2');
+        var tool = dom.child(ge.drawerOf(node), '.ge-copy');
+        if (!tool) { return; }
+
+        var icon = dom.one(tool, 'i');
+        dom.addClass(tool, 'ge-copied');
+        if (icon) { icon.setAttribute('class', 'bi bi-check2'); }
         setTimeout(function() {
-            tool.removeClass('ge-copied').find('i').attr('class', 'bi bi-copy');
+            dom.removeClass(tool, 'ge-copied');
+            if (icon) { icon.setAttribute('class', 'bi bi-copy'); }
         }, 1200);
     }
 
@@ -148,9 +158,12 @@ $.fn.gridEditor.features.clipboard = function(ge) {
      * them: two copies of a tab strip pointing at one set of panes is a tab
      * strip that opens the other copy's tabs. An id the page does not have
      * is kept, so pasting into another page changes nothing.
+     *
+     * Parsed the way innerHTML parses, so a <script> in what was copied is
+     * markup, pasted like the rest, and does not run in the editor.
      */
     function fresh(html) {
-        var node = $($.parseHTML(html.trim(), document, true)).first();
+        var node = dom.create(html);
         var renamed = {};
         var taken = function(id) {
             return !!document.getElementById(id) || Object.keys(renamed).some(function(old) {
@@ -158,8 +171,8 @@ $.fn.gridEditor.features.clipboard = function(ge) {
             });
         };
 
-        node.find('[id]').addBack('[id]').each(function() {
-            var id = this.id;
+        dom.selfAndAll(node, '[id]').forEach(function(element) {
+            var id = element.id;
             if (!document.getElementById(id)) { return; }
 
             var generated = GENERATED_ID.exec(id);
@@ -174,14 +187,12 @@ $.fn.gridEditor.features.clipboard = function(ge) {
             }
 
             renamed[id] = next;
-            this.id = next;
+            element.id = next;
         });
 
         if (!Object.keys(renamed).length) { return node; }
 
-        node.find('*').addBack().each(function() {
-            var element = this;
-
+        dom.selfAndAll(node, '*').forEach(function(element) {
             REFERENCES.forEach(function(name) {
                 var value = element.getAttribute(name);
                 if (value === null) { return; }
@@ -205,13 +216,13 @@ $.fn.gridEditor.features.clipboard = function(ge) {
     function refresh() {
         var clip = read();
 
-        ge.canvas.find('.ge-paste').each(function() {
-            $(this).toggle(fits(clip, $(this).attr('data-ge-paste').split(' ')));
+        dom.all(ge.canvas, '.ge-paste').forEach(function(tool) {
+            dom.toggle(tool, fits(clip, tool.getAttribute('data-ge-paste').split(' ')));
         });
 
-        ge.toolbarItems('clipboard').each(function() {
-            var item = TOOLBAR[parseInt($(this).attr('data-ge-item'), 10)];
-            $(this).toggle(fits(clip, [item.kind]));
+        ge.toolbarItems('clipboard').forEach(function(button) {
+            var item = TOOLBAR[parseInt(button.getAttribute('data-ge-item'), 10)];
+            dom.toggle(button, fits(clip, [item.kind]));
         });
 
         shown = clip;
@@ -221,7 +232,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
         { kind: 'row', labelKey: 'clipboard.paste_row' },
         { kind: 'section', labelKey: 'clipboard.paste_section' },
     ].map(function(item) {
-        return $.extend(item, {
+        return Object.assign(item, {
             iconClass: 'bi bi-clipboard-plus',
             // On the right, as an icon: pasting is not one of the things
             // the add buttons make
@@ -244,25 +255,26 @@ $.fn.gridEditor.features.clipboard = function(ge) {
             var categories = TARGETS[kind];
             if (!categories) { return; }
 
-            ge.createTool(drawer, ge.t('tool.paste'), 'ge-paste', 'bi bi-clipboard-plus', function() {
+            var tool = ge.createTool(drawer, ge.t('tool.paste'), 'ge-paste', 'bi bi-clipboard-plus', function() {
                 paste(node, categories);
             });
-            drawer.children('.ge-paste').last()
-                .attr('data-ge-paste', categories.join(' '))
-                .toggle(fits(read(), categories));
+            tool.setAttribute('data-ge-paste', categories.join(' '));
+            dom.toggle(tool, fits(read(), categories));
         },
 
         toolbar: TOOLBAR,
 
         onInit: function() {
             refresh();
-            $(document).off(CHANGE + namespace).on(CHANGE + namespace, refresh);
+            if (!listening) {
+                document.addEventListener(CHANGE, refresh);
+                listening = true;
+            }
         },
 
         onDeinit: function() {
-            $(document).off(CHANGE + namespace);
+            document.removeEventListener(CHANGE, refresh);
+            listening = false;
         },
     };
 };
-
-})(jQuery);