@themarioga/grid-editor 6.0.0 → 7.0.0

package/src/js/plugins/grideditor.codemirror-inline.js

@@ -16,15 +16,16 @@
  *   <script src="codemirror/mode/javascript/javascript.js"></script>
  *   <script src="codemirror/mode/css/css.js"></script>
  *   <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.codemirror-inline.min.js"></script>
  *
  * Without CodeMirror on the page the html is edited in a plain textarea.
  * CodeMirror's options are the codemirror plugin's, codemirror.config.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'tool.edit_html': 'Edit html',
     'codemirror.apply': 'Apply',
     'codemirror.cancel': 'Cancel',
@@ -33,14 +34,14 @@ $.extend($.fn.gridEditor.locales.en, {
 /** What has html of its own to edit: a pane's is split between its button and its body. */
 var KINDS = ['row', 'column', 'text', 'plain', 'element', 'section'];
 
-$.fn.gridEditor.features['codemirror-inline'] = function(ge) {
+GridEditor.features['codemirror-inline'] = function(ge) {
 
     var open = []; // The blocks being edited: { node, kind, from, wrapper, textarea, editor }
 
     function options() {
         var own = (ge.settings.codemirror && ge.settings.codemirror.config) || {};
 
-        return $.extend({
+        return Object.assign({
             mode: 'htmlmixed',
             lineNumbers: true,
             lineWrapping: true,
@@ -53,29 +54,29 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
 
     /** What stands for the node in its column: a text's text block, or the node. */
     function anchorOf(node) {
-        var textBlock = node.parent('.ge-text-block');
-        return textBlock.length ? textBlock : node;
+        var textBlock = node.parentElement;
+        return dom.hasClass(textBlock, 'ge-text-block') ? textBlock : node;
     }
 
     function entryOf(node) {
-        return open.filter(function(entry) { return entry.node[0] === node[0]; })[0] || null;
+        return open.filter(function(entry) { return entry.node === node; })[0] || null;
     }
 
     function editable(node, kind) {
-        return KINDS.indexOf(kind) !== -1 || node.is('[data-ge-container]');
+        return KINDS.indexOf(kind) !== -1 || dom.is(node, '[data-ge-container]');
     }
 
     /** The editor where the block was, the block hidden behind it. */
     function show(entry) {
-        var anchor = anchorOf(entry.node).addClass('ge-code-hidden');
-        entry.wrapper.insertAfter(anchor);
+        var anchor = dom.addClass(anchorOf(entry.node), 'ge-code-hidden');
+        dom.insertAfter(entry.wrapper, anchor);
         if (entry.editor) { entry.editor.refresh(); }
     }
 
     function hide(entry) {
-        entry.wrapper.detach();
-        anchorOf(entry.node).removeClass('ge-code-hidden');
-        entry.node.removeClass('ge-code-hidden');
+        entry.wrapper.remove();
+        dom.removeClass(anchorOf(entry.node), 'ge-code-hidden');
+        dom.removeClass(entry.node, 'ge-code-hidden');
     }
 
     function close(entry) {
@@ -94,30 +95,33 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
             // As getHtml gives it: no drawers, no editor open in it
             from: ge.nodeHtml(node),
             // A drawer, to the editor: never content, never a block to move
-            wrapper: $('<div class="ge-tools-drawer ge-code-inline" />'),
+            wrapper: dom.element('div', { 'class': 'ge-tools-drawer ge-code-inline' }),
             editor: null,
         };
-        entry.textarea = $('<textarea class="ge-code-inline-source" />').val(entry.from).appendTo(entry.wrapper);
-
-        var bar = $('<div class="ge-code-inline-bar" />').appendTo(entry.wrapper);
-        $('<button type="button" class="btn btn-sm btn-primary ge-code-apply" />')
-            .text(ge.t('codemirror.apply'))
-            .on('click', function() { apply(entry); })
-            .appendTo(bar);
-        $('<button type="button" class="btn btn-sm btn-outline-secondary ge-code-cancel" />')
-            .text(ge.t('codemirror.cancel'))
-            .on('click', function() { close(entry); })
-            .appendTo(bar);
+        entry.textarea = entry.wrapper.appendChild(dom.element('textarea', { 'class': 'ge-code-inline-source' }));
+        entry.textarea.value = entry.from;
+
+        var bar = entry.wrapper.appendChild(dom.element('div', { 'class': 'ge-code-inline-bar' }));
+        var applyButton = bar.appendChild(dom.element('button', {
+            type: 'button',
+            'class': 'btn btn-sm btn-primary ge-code-apply',
+        }, ge.t('codemirror.apply')));
+        applyButton.addEventListener('click', function() { apply(entry); });
+        var cancelButton = bar.appendChild(dom.element('button', {
+            type: 'button',
+            'class': 'btn btn-sm btn-outline-secondary ge-code-cancel',
+        }, ge.t('codemirror.cancel')));
+        cancelButton.addEventListener('click', function() { close(entry); });
 
         open.push(entry);
         show(entry);
 
         if (window.CodeMirror) {
-            entry.editor = window.CodeMirror.fromTextArea(entry.textarea[0], options());
-            $(entry.editor.getWrapperElement()).addClass('ge-code-editor');
+            entry.editor = window.CodeMirror.fromTextArea(entry.textarea, options());
+            dom.addClass(entry.editor.getWrapperElement(), 'ge-code-editor');
             entry.editor.focus();
         } else {
-            entry.textarea.trigger('focus');
+            entry.textarea.focus();
         }
     }
 
@@ -127,7 +131,7 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
      * getHtml, so what was written is read as the editor reads any markup.
      */
     function apply(entry) {
-        var to = entry.editor ? entry.editor.getValue() : entry.textarea.val();
+        var to = entry.editor ? entry.editor.getValue() : entry.textarea.value;
         var payload = ge.payloadFor(entry.kind, entry.node, { source: 'tool', from: entry.from, to: to });
 
         // Canceled, the editor stays open with what was written in it
@@ -135,15 +139,26 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
 
         close(entry);
 
-        var instance = ge.canvas.data('grideditor');
+        var instance = GridEditor.get(ge.canvas);
         instance.deinit();
 
-        var made = $('<div />').html(to).contents();
-        entry.node.replaceWith(made);
+        // Parsed as innerHTML parses: a <script> written here is markup,
+        // and does not run in the editor
+        var made = dom.parse(to);
+        var parent = entry.node.parentElement;
+        entry.node.replaceWith.apply(entry.node, made);
 
         instance.init();
 
-        ge.emit('after-edit-html', ge.payloadFor(entry.kind, made.filter('*'), {
+        // The node is the first element written, or none when only text was;
+        // `nodes` is every element written, which may be several
+        var written = made.filter(function(node) { return node.nodeType === 1; });
+        var first = written[0] || null;
+
+        ge.emit('after-edit-html', ge.payloadFor(entry.kind, first || entry.node, {
+            node: first,
+            nodes: written,
+            parent: first ? first.parentElement : parent,
             source: 'tool',
             from: entry.from,
             to: to,
@@ -174,7 +189,7 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
 
         onInit: function() {
             open.slice().forEach(function(entry) {
-                if (!$.contains(document.documentElement, entry.node[0])) {
+                if (!dom.attached(entry.node)) {
                     if (entry.editor) { entry.editor.toTextArea(); }
                     entry.wrapper.remove();
                     open.splice(open.indexOf(entry), 1);
@@ -186,5 +201,3 @@ $.fn.gridEditor.features['codemirror-inline'] = function(ge) {
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.codemirror.js

@@ -13,7 +13,7 @@
  *   <script src="codemirror/mode/javascript/javascript.js"></script>
  *   <script src="codemirror/mode/css/css.js"></script>
  *   <script src="codemirror/mode/htmlmixed/htmlmixed.js"></script>
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.codemirror.min.js"></script>
  *
  * CodeMirror 5 rather than 6: 6 comes as ES modules only, for a bundler,
@@ -21,13 +21,14 @@
  * CodeMirror on the page the source view is the textarea, as before, and
  * the console says why.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'error.codemirror_missing': 'CodeMirror not available! Make sure you loaded the CodeMirror js file; the source is edited in a plain textarea without it.',
 });
 
-$.fn.gridEditor.features.codemirror = function(ge) {
+GridEditor.features.codemirror = function(ge) {
 
     var editor = null;
     var warned = false;
@@ -35,7 +36,7 @@ $.fn.gridEditor.features.codemirror = function(ge) {
     function options() {
         var own = (ge.settings.codemirror && ge.settings.codemirror.config) || {};
 
-        return $.extend({
+        return Object.assign({
             mode: 'htmlmixed',
             lineNumbers: true,
             lineWrapping: true,
@@ -56,10 +57,10 @@ $.fn.gridEditor.features.codemirror = function(ge) {
                 return;
             }
 
-            var height = textarea.height();
+            var height = dom.outerHeight(textarea);
 
-            editor = window.CodeMirror.fromTextArea(textarea[0], options());
-            $(editor.getWrapperElement()).addClass('ge-code-editor');
+            editor = window.CodeMirror.fromTextArea(textarea, options());
+            dom.addClass(editor.getWrapperElement(), 'ge-code-editor');
             editor.setSize(null, height);
             editor.focus();
         },
@@ -75,5 +76,3 @@ $.fn.gridEditor.features.codemirror = function(ge) {
         },
     };
 };
-
-})(jQuery);

package/src/js/plugins/grideditor.elements.js

@@ -6,16 +6,17 @@
  * beside the texts, instead of rich text. 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.elements.min.js"></script>
  *
  * Up to 5.x an element lived inside a content area, among the text. Markup
  * saved that way still loads: the editor takes each element out of the text
  * it sits in, which is what `cuts` is for.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'tool.delete_element': 'Remove element',
     'tool.element_info': 'Element: {name}',
     'confirm.delete_element': 'Delete element?',
@@ -24,47 +25,49 @@ $.extend($.fn.gridEditor.locales.en, {
 /** A column's children that are something else than an element, whatever elements.auto says. */
 var NOT_ELEMENTS = '.row, .ge-content, .ge-text-block, [data-ge-container], .ge-tools-drawer, .ge-resize-handle';
 
-$.fn.gridEditor.features.elements = function(ge) {
+GridEditor.features.elements = function(ge) {
 
     var warnedIntoText = false;
 
     function elementsEnabled() {
         if (ge.settings.elements.enabled !== 'auto') { return !!ge.settings.elements.enabled; }
 
-        return ge.settings.elements.auto || ge.canvas.find(ge.settings.elements.selector).length > 0;
+        return ge.settings.elements.auto || !!ge.canvas.querySelector(ge.settings.elements.selector);
     }
 
     /** Whether a child of a column is an element. */
     function isElement(node) {
         return ge.settings.elements.auto
-            ? !node.is(NOT_ELEMENTS)
-            : node.is(ge.settings.elements.selector);
+            ? !node.matches(NOT_ELEMENTS)
+            : node.matches(ge.settings.elements.selector);
     }
 
     function markElements() {
         if (!elementsEnabled()) { return; }
 
-        ge.canvas.find('.column').children().each(function() {
-            var element = $(this);
-            if (!element.hasClass('ge-element') && !isElement(element)) { return; }
+        dom.all(ge.canvas, '.column').forEach(function(column) {
+            dom.children(column).forEach(function(element) {
+                if (!dom.hasClass(element, 'ge-element') && !isElement(element)) { return; }
 
-            element.addClass('ge-element');
-            if (!element.find('> .ge-tools-drawer').length) { createElementControls(element); }
+                dom.addClass(element, 'ge-element');
+                if (!dom.child(element, '.ge-tools-drawer')) { createElementControls(element); }
+            });
         });
     }
 
     function unmarkElements() {
-        ge.canvas.find('.ge-element').each(function() {
-            var element = $(this).removeClass('ge-element');
+        dom.all(ge.canvas, '.ge-element').forEach(function(element) {
+            dom.removeClass(element, 'ge-element');
 
             // A host element that had no class of its own should not come
             // back from getHtml carrying an empty one
-            if (!element.attr('class')) { element.removeAttr('class'); }
+            dom.dropEmptyClass(element);
         });
     }
 
     function createElementControls(element) {
-        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />').prependTo(element);
+        var drawer = dom.element('div', { 'class': 'ge-tools-drawer ge-element-drawer' });
+        element.insertBefore(drawer, element.firstChild);
 
         ge.createMoveTool(drawer);
         ge.createTool(drawer, ge.t('tool.element_info', { name: elementName(element) }),
@@ -78,18 +81,18 @@ $.fn.gridEditor.features.elements = function(ge) {
 
         ge.createTool(drawer, ge.t('tool.delete_element'), 'ge-delete-element', 'bi bi-trash', function() {
             ge.deleteNode('element', element, ge.t('confirm.delete_element'), function(removed) {
-                element.animate({ opacity: 'hide', height: 'hide' }, 300, removed);
+                dom.shrinkAway(element, 300, removed);
             });
         });
     }
 
     function elementName(element) {
-        var type = element.attr('data-ge-element');
-        var label = element.attr('data-ge-label');
+        var type = element.getAttribute('data-ge-element');
+        var label = element.getAttribute('data-ge-label');
 
         if (label && type) { return label + ' (' + type + ')'; }
 
-        return label || type || element[0].tagName.toLowerCase();
+        return label || type || element.tagName.toLowerCase();
     }
 
     /**
@@ -99,11 +102,11 @@ $.fn.gridEditor.features.elements = function(ge) {
      * prependTo - with a word to the host.
      */
     function placementBesideText(options) {
-        var placed = $.extend({}, options);
+        var placed = Object.assign({}, options);
 
         [['appendTo', 'insertAfter'], ['prependTo', 'insertBefore']].forEach(function(pair) {
-            var target = options[pair[0]] !== undefined ? $(options[pair[0]]) : null;
-            if (!target || !target.is('.ge-content')) { return; }
+            var target = options[pair[0]] !== undefined ? nodeFrom(options[pair[0]]) : null;
+            if (!target || !target.matches('.ge-content')) { return; }
 
             if (!warnedIntoText) {
                 warnedIntoText = true;
@@ -112,21 +115,44 @@ $.fn.gridEditor.features.elements = function(ge) {
             }
 
             delete placed[pair[0]];
-            placed[pair[1]] = target.parent('.ge-text-block').length ? target.parent() : target;
+            placed[pair[1]] = dom.hasClass(target.parentElement, 'ge-text-block') ? target.parentElement : target;
         });
 
         return placed;
     }
 
+    /** A place a caller named: an element, or the first one a selector matches. */
+    function nodeFrom(node) {
+        if (typeof node === 'string') { return document.querySelector(node); }
+        return node && node.nodeType === 1 ? node : null;
+    }
+
+    /**
+     * What the element holds: html, which is parsed as innerHTML parses so
+     * no <script> in it runs, or a node, or a list of nodes.
+     */
+    function fill(element, content) {
+        if (content === undefined || content === null) { return; }
+
+        if (typeof content === 'string') {
+            dom.parse(content).forEach(function(node) { element.appendChild(node); });
+        } else if (content.nodeType) {
+            element.appendChild(content);
+        } else if (typeof content.length === 'number') {
+            Array.prototype.slice.call(content).forEach(function(node) { element.appendChild(node); });
+        }
+    }
+
     function apiCreateElement(content, options) {
         options = options || {};
 
-        var element = $('<div class="ge-element" />')
-            .attr('data-ge-element', options.type || 'element')
-            .append(content)
-        ;
+        var element = dom.element('div', {
+            'class': 'ge-element',
+            'data-ge-element': options.type || 'element',
+        });
+        fill(element, content);
         if (options.label !== undefined) {
-            element.attr('data-ge-label', options.label);
+            element.setAttribute('data-ge-label', options.label);
         }
 
         return ge.place(element, 'element', placementBesideText(options));
@@ -139,7 +165,7 @@ $.fn.gridEditor.features.elements = function(ge) {
 
         /** A node this plugin marked is an element, whatever else it is. */
         kindOf: function(node) {
-            return node.hasClass('ge-element') ? 'element' : null;
+            return dom.hasClass(node, 'ge-element') ? 'element' : null;
         },
 
         /**
@@ -156,7 +182,7 @@ $.fn.gridEditor.features.elements = function(ge) {
         // containers - and only the columns
         blocks: '.ge-element',
         accepts: function(region, node) {
-            if (node.hasClass('ge-element')) { return region.is('.column'); }
+            if (dom.hasClass(node, 'ge-element')) { return dom.is(region, '.column'); }
 
             return true;
         },
@@ -165,5 +191,3 @@ $.fn.gridEditor.features.elements = function(ge) {
         onDeinit: unmarkElements,
     };
 };
-
-})(jQuery);

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