@themarioga/grid-editor 5.3.1 → 6.0.0-beta.2

package/src/js/locales/grideditor.es.js

@@ -47,6 +47,18 @@
         'tool.indent_increase': 'Aumentar sangría\n(Mayús para el máximo)',
         'tool.edit_source': 'Editar el código fuente',
         'tool.preview': 'Vista previa',
+        'panel.title': 'Ajustes: {kind}',
+        'panel.close': 'Cerrar',
+        'panel.done': 'Hecho',
+        'panel.id': 'Id',
+        'panel.classes': 'Clases',
+        'panel.kind_row': 'Fila',
+        'panel.kind_column': 'Columna',
+        'panel.kind_text': 'Texto',
+        'panel.kind_element': 'Elemento',
+        'panel.kind_section': 'Sección',
+        'panel.kind_tab': 'Pestaña',
+        'panel.kind_accordion_item': 'Elemento de acordeón',
         'tool.id_placeholder': 'id',
         'tool.id_title': 'Asignar un identificador único',
         'tool.classes_placeholder': 'clases',

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

@@ -10,7 +10,8 @@
  *   <script src="dist/jquery.grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.ckeditor.min.js"></script>
  *
- * Up to 6.0 the main bundle carries a copy of this file too.
+ * 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.
  */
 (function($) {
 

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

@@ -140,17 +140,7 @@ $.fn.gridEditor.features.clipboard = function(ge) {
         var clip = read();
         if (!fits(clip, categories)) { return; }
 
-        var node = fresh(clip.html);
-        var into = target;
-
-        // An element goes into the column's last content area. With none,
-        // the column's next init wraps it in one of its own
-        if (clip.category === 'element') {
-            var area = target.find('> .ge-text-block > .ge-content, > .ge-content').last();
-            if (area.length) { into = area; }
-        }
-
-        ge.place(node, clip.kind, { appendTo: into, source: 'paste' });
+        ge.place(fresh(clip.html), clip.kind, { appendTo: target, source: 'paste' });
     }
 
     /**

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

@@ -2,12 +2,16 @@
  * Element level controls for grid-editor.
  *
  * A feature plugin: load this file after the editor and the nodes a host
- * marked inside a content area become elements - one movable, deletable thing
- * each, instead of rich text. What it can ask the editor for is the handle its
- * factory is called with, described in docs/plugins.md.
+ * marked become elements - one movable, deletable block each, in the column
+ * 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/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($) {
 
@@ -17,37 +21,41 @@ $.extend($.fn.gridEditor.locales.en, {
     'confirm.delete_element': 'Delete element?',
 });
 
+/** 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) {
 
+    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;
     }
 
-    function elementsIn(contentArea) {
+    /** Whether a child of a column is an element. */
+    function isElement(node) {
         return ge.settings.elements.auto
-            ? contentArea.children()
-            : contentArea.children(ge.settings.elements.selector);
+            ? !node.is(NOT_ELEMENTS)
+            : node.is(ge.settings.elements.selector);
     }
 
     function markElements() {
         if (!elementsEnabled()) { return; }
 
-        ge.canvas.find('.ge-content').each(function() {
-            elementsIn($(this)).each(function() {
-                var element = $(this).addClass('ge-element').attr('contenteditable', 'false');
+        ge.canvas.find('.column').children().each(function() {
+            var element = $(this);
+            if (!element.hasClass('ge-element') && !isElement(element)) { return; }
 
-                if (element.find('> .ge-tools-drawer').length) { return; }
-
-                createElementControls(element);
-            });
+            element.addClass('ge-element');
+            if (!element.find('> .ge-tools-drawer').length) { createElementControls(element); }
         });
     }
 
     function unmarkElements() {
         ge.canvas.find('.ge-element').each(function() {
-            var element = $(this).removeClass('ge-element').removeAttr('contenteditable');
+            var element = $(this).removeClass('ge-element');
 
             // A host element that had no class of its own should not come
             // back from getHtml carrying an empty one
@@ -56,16 +64,7 @@ $.fn.gridEditor.features.elements = function(ge) {
     }
 
     function createElementControls(element) {
-        // data-mce-bogus="all" is how tinyMCE is told that a node is the
-        // editor's furniture rather than content: it leaves the subtree
-        // alone and keeps it out of what it serializes. Without it the
-        // drawer's tools are inline elements with no text, which is
-        // exactly what its cleanup removes, so an element inside an open
-        // editor would lose its move and delete tools.
-        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />')
-            .attr('data-mce-bogus', 'all')
-            .prependTo(element)
-        ;
+        var drawer = $('<div class="ge-tools-drawer ge-element-drawer" />').prependTo(element);
 
         ge.createMoveTool(drawer);
         ge.createTool(drawer, ge.t('tool.element_info', { name: elementName(element) }),
@@ -93,6 +92,32 @@ $.fn.gridEditor.features.elements = function(ge) {
         return label || type || element[0].tagName.toLowerCase();
     }
 
+    /**
+     * Placed into a content area, as 5.x did, an element would be text
+     * again, and the next init would cut it out. So it goes beside that
+     * content area instead - after it for appendTo, before it for
+     * prependTo - with a word to the host.
+     */
+    function placementBesideText(options) {
+        var placed = $.extend({}, 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; }
+
+            if (!warnedIntoText) {
+                warnedIntoText = true;
+                ge.warn('createElement: an element is a block of the column since 6.0, not part of a ' +
+                    'content area\'s text; it goes beside the content area. Place it in a column instead.');
+            }
+
+            delete placed[pair[0]];
+            placed[pair[1]] = target.parent('.ge-text-block').length ? target.parent() : target;
+        });
+
+        return placed;
+    }
+
     function apiCreateElement(content, options) {
         options = options || {};
 
@@ -104,7 +129,7 @@ $.fn.gridEditor.features.elements = function(ge) {
             element.attr('data-ge-label', options.label);
         }
 
-        return ge.place(element, 'element', options);
+        return ge.place(element, 'element', placementBesideText(options));
     }
 
     return {
@@ -117,24 +142,27 @@ $.fn.gridEditor.features.elements = function(ge) {
             return node.hasClass('ge-element') ? 'element' : null;
         },
 
-        onInit: markElements,
-        onDeinit: unmarkElements,
-
         /**
-         * An editor rewrites the content area as it takes it over, drawers
-         * included, so they go back in when it says it is ready.
+         * An element cuts the text it sits in: 5.x's markup, or markup a host
+         * wrote the same way, has it inside a content area, and it comes out.
          */
-        onContentReady: markElements,
+        cuts: function() {
+            if (!elementsEnabled()) { return null; }
 
-        /** Elements move within a content area and between them. */
-        onSortable: function(sortable) {
-            if (!elementsEnabled()) { return; }
+            return ge.settings.elements.auto ? '*' : ge.settings.elements.selector;
+        },
 
-            sortable(ge.canvas.find('.ge-content'), {
-                draggable: '.ge-element',
-                group: 'element',
-            });
+        // A block the columns move, beside the texts, the rows and the
+        // containers - and only the columns
+        blocks: '.ge-element',
+        accepts: function(region, node) {
+            if (node.hasClass('ge-element')) { return region.is('.column'); }
+
+            return true;
         },
+
+        onInit: markElements,
+        onDeinit: unmarkElements,
     };
 };
 

package/src/js/plugins/grideditor.sections.js

@@ -90,7 +90,7 @@ $.fn.gridEditor.features.sections = function(ge) {
             });
 
             if (!ge.emit('before-utility', payload)) {
-                section.find('> .ge-tools-drawer .ge-section-width select').val(from);
+                ge.detailsOf(section).find('.ge-section-width select').val(from);
                 return false;
             }
 
@@ -102,7 +102,7 @@ $.fn.gridEditor.features.sections = function(ge) {
     }
 
     function widthField(section) {
-        var select = $('<select />');
+        var select = $('<select class="form-select form-select-sm" />');
         var current = widthOf(section);
         var offered = options.widths.indexOf(current) === -1 ? options.widths.concat([current]) : options.widths;
 

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

@@ -183,7 +183,7 @@ $.fn.gridEditor.utilities.spacing = function(ge) {
     /** A padding or margin group: its name, the side, and the field of that side's family. */
     function group(node, key, labelText) {
         var box = $('<div class="ge-spacing-group" />').attr('data-ge-spacing', key);
-        var side = $('<select class="ge-spacing-side" />');
+        var side = $('<select class="ge-spacing-side form-select form-select-sm" />');
 
         $('<span class="ge-utility-label" />').text(labelText).appendTo(box);
 

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

@@ -10,7 +10,8 @@
  *   <script src="dist/jquery.grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.summernote.min.js"></script>
  *
- * Up to 6.0 the main bundle carries a copy of this file too.
+ * 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.
  */
 (function($) {
 

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

@@ -10,7 +10,8 @@
  *   <script src="dist/jquery.grideditor.min.js"></script>
  *   <script src="dist/plugins/grideditor.tinymce.min.js"></script>
  *
- * Up to 6.0 the main bundle carries a copy of this file too.
+ * 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.
  */
 (function($) {
 

package/src/less/grideditor.less

@@ -157,6 +157,177 @@
     .ge-tools-drawer .ge-details {
         cursor: auto;
     }
+    /* An info tool does nothing when clicked, so it is somewhere to hold */
+    .ge-tools-drawer > a.ge-text-info,
+    .ge-tools-drawer > a.ge-element-info {
+        cursor: move;
+    }
+    /* A text's drawer sits over the text, small, and is mostly tools: a grip
+       at its start says where to take hold of it */
+    .ge-text-block > .ge-text-drawer {
+        padding-left: 14px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 4px;
+            width: 6px;
+            height: 14px;
+            transform: translateY(-50%);
+            background-image: radial-gradient(circle, @textTextColor 1px, transparent 1.3px);
+            background-size: 3px 3px;
+            opacity: 0.7;
+        }
+    }
+}
+
+/* A node's settings, wherever settings_panel shows them: in its drawer, or
+   in one of Bootstrap's offcanvas, popover or modal, outside the canvas. The
+   fields are Bootstrap's own - form-control-sm, form-select-sm,
+   btn-outline-secondary - and this only lays them out. */
+.ge-details {
+    font-size: 0.8125rem;
+
+    .ge-details-general {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+    .ge-field {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+    }
+    .ge-field-label,
+    .ge-utility-label {
+        color: var(--bs-secondary-color, #6c757d);
+        font-size: 0.75rem;
+    }
+    .ge-presets:empty {
+        display: none;
+    }
+
+    /* The utility plugins' fields, folded under one toggle */
+    .ge-utilities {
+        margin-top: 10px;
+
+        > .ge-utilities-toggle {
+            display: block;
+            color: var(--bs-body-color, #333);
+            font-weight: 500;
+            cursor: pointer;
+            text-decoration: none;
+
+            &::before {
+                content: '\25B8';
+                display: inline-block;
+                width: 1em;
+            }
+        }
+        &.ge-open > .ge-utilities-toggle::before {
+            content: '\25BE';
+        }
+
+        > .ge-utilities-body {
+            display: none;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 8px 10px;
+            margin-top: 6px;
+        }
+        &.ge-open > .ge-utilities-body {
+            display: grid;
+        }
+
+        .ge-utility {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            margin: 0;
+        }
+        .ge-utility-note {
+            color: var(--bs-secondary-color, #666);
+            font-size: 0.6875rem;
+        }
+
+        /* The spacing plugin: a side and a value per group */
+        .ge-spacing {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+            gap: 8px 10px;
+            grid-column: 1 / -1;
+        }
+        .ge-spacing-group {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+
+            /* The group names the field once */
+            .ge-utility > .ge-utility-label {
+                display: none;
+            }
+        }
+        .ge-spacing-gutter {
+            grid-column: 1 / -1;
+            color: var(--bs-secondary-color, #666);
+            font-size: 0.6875rem;
+        }
+    }
+}
+
+/* In a drawer it is part of the drawer, compact */
+.ge-tools-drawer > .ge-details {
+    font-size: 11px;
+
+    .ge-utilities > .ge-utilities-body {
+        grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
+    }
+}
+
+/* In one of Bootstrap's, outside the canvas */
+.ge-settings-panel {
+    .ge-details {
+        display: block;
+    }
+    .ge-settings-title {
+        font-size: 1rem;
+        font-weight: 500;
+    }
+}
+
+.ge-settings-offcanvas {
+    /* Beside the canvas rather than over most of it */
+    --bs-offcanvas-width: 340px;
+    --bs-offcanvas-height: 60vh;
+}
+
+.ge-settings-popover {
+    /* Popper would position it; without Popper that is the editor's job */
+    position: absolute;
+    --bs-popover-max-width: 360px;
+    width: 360px;
+    max-width: calc(100vw - 16px);
+
+    > .popover-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+
+        > .btn-close {
+            font-size: 0.65rem;
+        }
+    }
+    > .popover-body {
+        overflow-y: auto;
+    }
+}
+
+/* The node whose settings are open */
+.ge-canvas.ge-editing .ge-settings-target {
+    outline: 2px solid var(--bs-primary, #0d6efd);
+    outline-offset: 1px;
 }
 
 /* While editing */
@@ -195,113 +366,24 @@
             background: rgba(255, 255, 255, 0.5);
             cursor: pointer;
         }
-        .ge-details {
+        /* A node's settings, unfolded in its drawer: settings_panel 'inline' */
+        > .ge-details {
+            display: none;
             padding: 5px;
             border-top: 1px solid rgba(0,0,0,0.05);
-            display: none;
-            
-            .btn-group {
-                a {
-                    color: #333;
-                    
-                    &.active {
-                        color: white;
-                    }
-                }
-                a:hover {
-                    text-decoration: none;
-                    cursor: pointer;
-                }
+            text-align: left;
+            cursor: auto;
+
+            .ge-details-general {
+                flex-direction: row;
+                align-items: flex-end;
             }
-            input.ge-id,
-            input.ge-classes {
-                border: 1px solid #7F7F7F;
-                border-radius: 4px;
-                font-size: 11px;
-                padding: 2px 5px;
-                margin-right: 5px;
-                width: 80px;
+            input.ge-id {
+                width: 90px;
             }
             input.ge-classes {
                 width: 200px;
             }
-
-            /* The utility plugins' fields, folded under one toggle */
-            .ge-utilities {
-                margin-top: 5px;
-                font-size: 11px;
-
-                > .ge-utilities-toggle {
-                    color: #333;
-                    cursor: pointer;
-                    text-decoration: none;
-
-                    &::before {
-                        content: '\25B8';
-                        display: inline-block;
-                        width: 1em;
-                    }
-                }
-                &.ge-open > .ge-utilities-toggle::before {
-                    content: '\25BE';
-                }
-
-                > .ge-utilities-body {
-                    display: none;
-                    flex-wrap: wrap;
-                    gap: 4px 10px;
-                    margin-top: 4px;
-                }
-                &.ge-open > .ge-utilities-body {
-                    display: flex;
-                }
-
-                .ge-utility {
-                    display: inline-flex;
-                    flex-direction: column;
-                    margin: 0;
-
-                    select {
-                        border: 1px solid #7F7F7F;
-                        border-radius: 4px;
-                        font-size: 11px;
-                        padding: 1px 2px;
-                    }
-                }
-                .ge-utility-note {
-                    color: #666;
-                    font-size: 10px;
-                    max-width: 160px;
-                }
-
-                /* The spacing plugin: a side and a value per group */
-                .ge-spacing {
-                    display: flex;
-                    flex-wrap: wrap;
-                    gap: 4px 10px;
-                }
-                .ge-spacing-group {
-                    display: inline-flex;
-                    flex-direction: column;
-
-                    > .ge-spacing-side {
-                        border: 1px solid #7F7F7F;
-                        border-radius: 4px;
-                        font-size: 11px;
-                        padding: 1px 2px;
-                        margin-bottom: 2px;
-                    }
-                    /* The group names the field once */
-                    .ge-utility > .ge-utility-label {
-                        display: none;
-                    }
-                }
-                .ge-spacing-gutter {
-                    flex-basis: 100%;
-                    color: #666;
-                    font-size: 10px;
-                }
-            }
         }
     }
     .row {
@@ -603,6 +685,23 @@
             }
         }
 
+        /* While the text is being edited it would sit over the end of its
+           first line, so it stands back - faint, still there to click - until
+           the pointer is on the drawer itself */
+        &:has(> .ge-rte-active) > .ge-text-drawer:not(:hover) {
+            opacity: 0.35;
+        }
+
+        /* Except when something in it is in use: its settings, a choice it
+           offers, a drag */
+        &.ge-drag-chosen,
+        &:has(> .ge-text-drawer.ge-picker-open),
+        &:has(> .ge-text-drawer > .ge-details[style*="block"]) {
+            > .ge-text-drawer:not(:hover) {
+                opacity: 1;
+            }
+        }
+
         /* With its settings open it spans the text, so the panel has room */
         &:has(> .ge-text-drawer > .ge-details[style*="block"]) > .ge-text-drawer {
             left: 0;
@@ -961,19 +1060,11 @@
 }
 
 /* The width field, in the section's settings panel beside id and classes */
-.ge-canvas.ge-editing .ge-details .ge-section-width {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
+.ge-details .ge-section-width {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     margin: 0;
-    font-size: 11px;
-
-    select {
-        border: 1px solid #7F7F7F;
-        border-radius: 4px;
-        font-size: 11px;
-        padding: 1px 2px;
-    }
 }
 
 @ge-section-classes: container, container-sm, container-md, container-lg, container-xl, container-xxl;

package/src/js/compat/bundled-texts.js

@@ -1,14 +0,0 @@
-/**
- * Up to 6.0 the main bundle carries a copy of each text editor plugin, so a
- * page that loaded only the editor keeps the editor it had. This marks those
- * copies, and the editor warns once when a content area is edited with one:
- * 6.0 leaves them out. Loaded on its own, a plugin's file registers itself
- * again, unmarked, and is the one used.
- *
- * Only ever concatenated after the plugins it marks, never built on its own.
- */
-(function($) {
-    ['tinymce', 'ckeditor', 'summernote'].forEach(function(type) {
-        if ($.fn.gridEditor.texts[type]) { $.fn.gridEditor.texts[type].bundled = true; }
-    });
-})(jQuery);