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

package/src/js/plugins/grideditor.tinymce.js

@@ -7,161 +7,169 @@
  * factory is called with, described in docs/plugins.md.
  *
  *   <script src="tinymce/tinymce.min.js"></script>
- *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.tinymce.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.tinymce': 'tinyMCE',
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
+import '../text/grideditor.text.js';
+
+Object.assign(GridEditor.locales.en, {
+    'text.tinymce': 'tinyMCE',
+    'warning.oninit_removed': 'tinyMCE\'s oninit option was removed in 7.0 and is ignored: use init_instance_callback.',
+});
+
+// tinyMCE snapshots the target element's attributes when an inline editor is
+// created and restores them on remove(), so this has to run *after* remove()
+// to keep the grid editor's own class and tinyMCE's leftovers off the element.
+function cleanUp(contentArea) {
+    dom.removeClass(contentArea, 'active ge-rte-active');
+    ['id', 'style', 'spellcheck', 'contenteditable', 'data-mce-style'].forEach(function(name) {
+        contentArea.removeAttribute(name);
     });
+}
+
+var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
+
+// What this file remembers about a content area: its editor, and whether a
+// deinit came before that editor was ready
+var editors = new WeakMap();
+var pendingRemove = new WeakSet();
+
+// Said once per page, however many editors are on it
+var warnedOninit = false;
+
+GridEditor.texts.tinymce = function(ge) {
+    return {
+        labelKey: 'text.tinymce',
+        initialContent: INITIAL_CONTENT,
+        missingKey: 'error.tinymce_missing',
+
+        available: function() { return !!window.tinymce; },
+
+        start: function(contentAreas) {
+            var settings = ge.settings;
+            var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
+
+            // 'oninit' was the pre-6 name for init_instance_callback, honoured
+            // through 6.x and gone in 7.0
+            if (userConfig.oninit && !warnedOninit) {
+                warnedOninit = true;
+                ge.warn(ge.t('warning.oninit_removed'));
+            }
+
+            contentAreas.forEach(function(contentArea) {
+                if (dom.hasClass(contentArea, 'active')) { return; }
+
+                if (contentArea.innerHTML == INITIAL_CONTENT) {
+                    contentArea.innerHTML = '';
+                }
+                dom.addClass(contentArea, 'active');
+
+                var configuration = Object.assign({
+                    // tinyMCE's own "Upgrade" badge in the menubar. Off by
+                    // default because an inline editor here is a column of
+                    // someone's page, not tinyMCE's own interface; a host that
+                    // wants it back passes promotion: true.
+                    promotion: false,
+                }, userConfig, {
+                    target: contentArea,
+                    inline: true,
+                    init_instance_callback: function(editor) {
+                        // deinit ran before this init finished, so tear it down again
+                        if (pendingRemove.has(contentArea)) {
+                            pendingRemove.delete(contentArea);
+                            editor.remove();
+                            // deinit already ran and cannot clean up after this
+                            // late remove(), so do it here instead
+                            cleanUp(contentArea);
+                            return;
+                        }
 
-    // tinyMCE snapshots the target element's attributes when an inline editor is
-    // created and restores them on remove(), so this has to run *after* remove()
-    // to keep the grid editor's own class and tinyMCE's leftovers off the element.
-    function cleanUp(contentArea) {
-        contentArea
-            .removeClass('active')
-            .removeClass('ge-rte-active')
-            .removeAttr('id')
-            .removeAttr('style')
-            .removeAttr('spellcheck')
-            .removeAttr('contenteditable')
-            .removeAttr('data-mce-style')
-        ;
-    }
-
-    var INITIAL_CONTENT = '<p>Lorem ipsum dolores</p>';
-
-    $.fn.gridEditor.texts.tinymce = function(ge) {
-        return {
-            labelKey: 'text.tinymce',
-            initialContent: INITIAL_CONTENT,
-            missingKey: 'error.tinymce_missing',
-
-            available: function() { return !!window.tinymce; },
-
-            start: function(contentAreas) {
-                var settings = ge.settings;
-                var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
-
-                contentAreas.each(function() {
-                    var contentArea = $(this);
-                    if (contentArea.hasClass('active')) { return; }
-
-                    if (contentArea.html() == INITIAL_CONTENT) {
-                        contentArea.html('');
-                    }
-                    contentArea.addClass('active');
-
-                    var configuration = $.extend({
-                        // tinyMCE's own "Upgrade" badge in the menubar. Off by
-                        // default because an inline editor here is a column of
-                        // someone's page, not tinyMCE's own interface; a host that
-                        // wants it back passes promotion: true.
-                        promotion: false,
-                    }, userConfig, {
-                        target: this,
-                        inline: true,
-                        init_instance_callback: function(editor) {
-                            // deinit ran before this init finished, so tear it down again
-                            if (contentArea.data('ge-tinymce-pending-remove')) {
-                                contentArea.removeData('ge-tinymce-pending-remove');
-                                editor.remove();
-                                // deinit already ran and cannot clean up after this
-                                // late remove(), so do it here instead
-                                cleanUp(contentArea);
-                                return;
-                            }
-
-                            contentArea.data('ge-tinymce', editor);
-
-                            // The editor rewrote what is inside this content area
-                            // while it took it over, so whatever the grid editor
-                            // had in there is gone. Saying so lets it put its own
-                            // furniture back.
-                            ge.textReady(contentArea);
+                        editors.set(contentArea, editor);
 
-                            // Undo and redo rewrite it too, from snapshots that
-                            // leave out whatever is marked data-mce-bogus - an
-                            // element's drawer among them - so it goes back in
-                            // after each of those as well
-                            editor.on('Undo Redo', function() {
-                                ge.textReady(contentArea);
-                            });
+                        // The editor rewrote what is inside this content area
+                        // while it took it over, so whatever the grid editor
+                        // had in there is gone. Saying so lets it put its own
+                        // furniture back.
+                        ge.textReady(contentArea);
 
-                            // The inline toolbar is laid out against the element's
-                            // geometry at the moment tinyMCE draws it, and an
-                            // element that has just appeared - a tab pane, an
-                            // accordion body, a column whose width is still
-                            // settling - may not have its own width yet. Asking
-                            // for the ui again once the browser has laid the frame
-                            // out measures it as it now is, instead of leaving a
-                            // toolbar wrapped into a narrow column.
+                        // Undo and redo rewrite it too, from snapshots that
+                        // leave out whatever is marked data-mce-bogus - an
+                        // element's drawer among them - so it goes back in
+                        // after each of those as well
+                        editor.on('Undo Redo', function() {
+                            ge.textReady(contentArea);
+                        });
+
+                        // The inline toolbar is laid out against the element's
+                        // geometry at the moment tinyMCE draws it, and an
+                        // element that has just appeared - a tab pane, an
+                        // accordion body, a column whose width is still
+                        // settling - may not have its own width yet. Asking
+                        // for the ui again once the browser has laid the frame
+                        // out measures it as it now is, instead of leaving a
+                        // toolbar wrapped into a narrow column.
+                        window.requestAnimationFrame(function() {
+                            if (editor.removed || !editor.ui || !editor.ui.show) { return; }
+
+                            editor.ui.show();
+                        });
+
+                        // And again whenever the user comes back to this
+                        // editor: by then the element may have been resized,
+                        // hidden and shown again - a tab switched away from
+                        // and back, a column made narrower - and the toolbar
+                        // is only ever as right as its last measurement.
+                        editor.on('focus', function() {
                             window.requestAnimationFrame(function() {
                                 if (editor.removed || !editor.ui || !editor.ui.show) { return; }
 
                                 editor.ui.show();
                             });
+                        });
 
-                            // And again whenever the user comes back to this
-                            // editor: by then the element may have been resized,
-                            // hidden and shown again - a tab switched away from
-                            // and back, a column made narrower - and the toolbar
-                            // is only ever as right as its last measurement.
-                            editor.on('focus', function() {
-                                window.requestAnimationFrame(function() {
-                                    if (editor.removed || !editor.ui || !editor.ui.show) { return; }
-
-                                    editor.ui.show();
-                                });
-                            });
+                        // Bring focus to text field
+                        editor.focus();
 
-                            // Bring focus to text field
-                            editor.focus();
-
-                            // Call the original callbacks, if any were passed in the config
-                            if (userConfig.init_instance_callback) {
-                                userConfig.init_instance_callback.call(this, editor);
-                            }
-                            // 'oninit' is the pre-6 name, honoured so existing configs keep working
-                            if (userConfig.oninit) {
-                                userConfig.oninit.call(this, editor);
-                            }
+                        // Call the original callback, if one was passed in the config
+                        if (userConfig.init_instance_callback) {
+                            userConfig.init_instance_callback.call(this, editor);
                         }
-                    });
-                    // We always edit the element we were handed, so a selector in the
-                    // user config would only fight with target
-                    delete configuration.selector;
-
-                    window.tinymce.init(configuration);
-                });
-            },
-
-            stop: function(contentAreas) {
-                contentAreas.filter('.active').each(function() {
-                    var contentArea = $(this);
-                    var editor = contentArea.data('ge-tinymce');
-
-                    if (editor) {
-                        contentArea.removeData('ge-tinymce');
-                        editor.remove();
-                    } else {
-                        // tinymce.init() is asynchronous, so the editor may not exist
-                        // yet. Leave a note for init_instance_callback to remove it.
-                        contentArea.data('ge-tinymce-pending-remove', true);
                     }
-
-                    cleanUp(contentArea);
                 });
-            },
-        };
+                // We always edit the element we were handed, so a selector in the
+                // user config would only fight with target
+                delete configuration.selector;
+                delete configuration.oninit;
+
+                window.tinymce.init(configuration);
+            });
+        },
+
+        stop: function(contentAreas) {
+            contentAreas.filter(function(contentArea) {
+                return dom.hasClass(contentArea, 'active');
+            }).forEach(function(contentArea) {
+                var editor = editors.get(contentArea);
+
+                if (editor) {
+                    editors.delete(contentArea);
+                    editor.remove();
+                } else {
+                    // tinymce.init() is asynchronous, so the editor may not exist
+                    // yet. Leave a note for init_instance_callback to remove it.
+                    pendingRemove.add(contentArea);
+                }
+
+                cleanUp(contentArea);
+            });
+        },
     };
-})(jQuery);
+};

package/src/js/plugins/grideditor.visibility.js

@@ -8,7 +8,7 @@
  * block). 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.visibility.min.js"></script>
  *
  * A hidden node is never hidden from the editor, which would leave nothing to
@@ -18,9 +18,10 @@
  * utilities.visibility.drawer: false leaves the eye out of the drawers, and
  * the panel field is the only control.
  */
-(function($) {
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
 
-$.extend($.fn.gridEditor.locales.en, {
+Object.assign(GridEditor.locales.en, {
     'utility.visibility': 'Visibility',
     'utility.visibility_hidden': 'Hidden',
     'utility.visibility_shown': 'Shown',
@@ -34,9 +35,9 @@ var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s
 
 var NODES = '.row, .column, .ge-content, .ge-element, [data-ge-container]';
 
-$.fn.gridEditor.utilities.visibility = function(ge) {
+GridEditor.utilities.visibility = function(ge) {
 
-    var options = $.extend({ drawer: true }, ge.settings.utilities.visibility);
+    var options = Object.assign({ drawer: true }, ge.settings.utilities.visibility);
 
     /** What "shown" is written as on this kind of node. */
     function shown(kind) {
@@ -45,7 +46,7 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
 
     function applies(node, kind) {
         return kind === 'row' || kind === 'column' || kind === 'element' || kind === 'text' || kind === 'plain' ||
-            node.is('[data-ge-container]');
+            dom.is(node, '[data-ge-container]');
     }
 
     function hiddenAt(node, view) {
@@ -103,38 +104,38 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
      * and data-ge-hidden-in carries the badge text for the all view.
      */
     function mark(scope) {
-        scope.find(NODES).addBack(NODES).each(function() {
-            var node = $(this);
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
             var kind = ge.kindOf(node);
-            var carries = applies(node, kind) && CLASS_PATTERN.test(node.attr('class') || '');
+            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');
             var tiers = carries ? hiddenTiers(node) : [];
             var here = carries && hiddenHere(node);
             var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
 
-            node.toggleClass('ge-visibility', carries).toggleClass('ge-hidden-in-view', here);
+            dom.toggleClass(node, 'ge-visibility', carries);
+            dom.toggleClass(node, 'ge-hidden-in-view', here);
 
             if (partly) {
-                node.attr('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
+                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
             } else {
-                node.removeAttr('data-ge-hidden-in');
+                node.removeAttribute('data-ge-hidden-in');
             }
 
-            node.children('.ge-tools-drawer').children('.ge-visibility-tool').each(function() {
-                $(this)
-                    .attr('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'))
-                    .find('i').attr('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {
+                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {
+                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));
+                    dom.all(tool, 'i').forEach(function(icon) {
+                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+                    });
+                });
             });
         });
     }
 
     function unmark() {
-        ge.canvas.find('.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').each(function() {
-            var node = $(this)
-                .removeClass('ge-visibility ge-hidden-in-view')
-                .removeAttr('data-ge-hidden-in')
-            ;
-
-            if (!node.attr('class')) { node.removeAttr('class'); }
+        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {
+            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');
+            node.removeAttribute('data-ge-hidden-in');
+            dom.dropEmptyClass(node);
         });
     }
 
@@ -168,5 +169,3 @@ $.fn.gridEditor.utilities.visibility = function(ge) {
         onDeinit: unmark,
     };
 };
-
-})(jQuery);

package/src/js/register.js

@@ -0,0 +1,18 @@
+/**
+ * What a plugin's or a locale's classic script imports in place of the
+ * editor: the GridEditor the page already loaded.
+ *
+ * The build points `import { GridEditor } from '../grideditor.js'` here for
+ * the classic scripts, so each registers on the editor the page has rather
+ * than bringing its own. Loaded before the editor there is nothing to
+ * register on, and saying so is better than a TypeError three calls later.
+ */
+var GridEditor = window.GridEditor;
+
+if (!GridEditor || typeof GridEditor.get !== 'function') {
+    throw new Error('grid-editor: load grideditor.js (or grideditor.bundle.min.js) before its plugins, ' +
+        'its locales and grideditor.jquery.js');
+}
+
+export { GridEditor };
+export default GridEditor;