@themarioga/grid-editor 3.1.0

package/src/js/jquery.grideditor.summernote.js

@@ -0,0 +1,72 @@
+(function($) {
+
+    $.fn.gridEditor.RTEs.summernote = {
+
+        init: function(settings, contentAreas) {
+            
+            if (!jQuery().summernote) {
+                console.error($.fn.gridEditor.t(settings, 'error.summernote_missing'));
+            }
+
+            var self = this;
+            contentAreas.each(function() {
+                var contentArea = $(this);
+                if (!contentArea.hasClass('active')) {
+                    if (contentArea.html() == self.initialContent) {
+                        contentArea.html('');
+                    }
+                    contentArea.addClass('active');
+
+                    var configuration = $.extend(
+                        true, // deep copy
+                        {},
+                        (settings.summernote && settings.summernote.config ? settings.summernote.config : {}),
+                        {
+                            tabsize: 2,
+                            airMode: true,
+                            // Focus editor on creation
+                            callbacks: {
+                                onInit: function() {
+                                    
+                                    // Call original oninit function, if one was passed in the config
+                                    var callback;
+                                    try {
+                                        callback = settings.summernote.config.callbacks.onInit;
+                                    } catch (err) {
+                                        // No callback passed
+                                    }
+                                    if (callback) {
+                                        callback.call(this);
+                                    }
+
+                                    // The editor owns what is inside the
+                                    // content area now, so the grid editor is
+                                    // told to put its own furniture back
+                                    contentArea.trigger('ge-rte-ready');
+                                    
+                                    contentArea.summernote('focus');
+                                }
+                            }
+                        }
+                    );
+                    contentArea.summernote(configuration);
+                }
+            });
+        },
+
+        deinit: function(settings, contentAreas) {
+            contentAreas.filter('.active').each(function() {
+                var contentArea = $(this);
+                contentArea.summernote('destroy');
+                contentArea
+                    .removeClass('active')
+                    .removeAttr('id')
+                    .removeAttr('style')
+                    .removeAttr('spellcheck')
+                ;
+            });
+        },
+
+        initialContent: '<p>Lorem ipsum dolores</p>',
+    };
+})(jQuery);

package/src/js/jquery.grideditor.tinymce.js

@@ -0,0 +1,135 @@
+(function($) {
+
+    // 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')
+        ;
+    }
+
+    $.fn.gridEditor.RTEs.tinymce = {
+
+        init: function(settings, contentAreas) {
+
+            if (!window.tinymce) {
+                console.error($.fn.gridEditor.t(settings, 'error.tinymce_missing'));
+                return;
+            }
+
+            var self = this;
+            var userConfig = (settings.tinymce && settings.tinymce.config) ? settings.tinymce.config : {};
+
+            contentAreas.each(function() {
+                var contentArea = $(this);
+                if (contentArea.hasClass('active')) { return; }
+
+                if (contentArea.html() == self.initialContent) {
+                    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 (see RTE_READY in the core).
+                        contentArea.trigger('ge-rte-ready');
+
+                        // 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();
+                            });
+                        });
+
+                        // 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);
+                        }
+                    }
+                });
+                // 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);
+            });
+        },
+
+        deinit: function(settings, 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);
+            });
+        },
+
+        initialContent: '<p>Lorem ipsum dolores</p>',
+    };
+})(jQuery);

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

@@ -0,0 +1,74 @@
+/**
+ * Spanish strings for grid-editor.
+ *
+ * Load after the plugin and select with `locale: 'es'`:
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/locales/grideditor.es.js"></script>
+ *   <script>$('#myGrid').gridEditor({ locale: 'es' });</script>
+ *
+ * This is one of the two locales grid-editor ships, so it is held to complete
+ * coverage of `$.fn.gridEditor.locales.en`: test/locales.js fails when a key
+ * is missing. Add the Spanish string in the same change that adds the English
+ * one, and keep the wording short enough to fit the tooltip or the dropdown
+ * item it appears in.
+ */
+(function($) {
+
+    $.fn.gridEditor.locales.es = {
+        'tool.move': 'Mover',
+        'tool.settings': 'Configuración',
+        'tool.add_row': 'Añadir fila',
+        'tool.add_column': 'Añadir columna\n(mantén pulsado para elegir el ancho)',
+        'tool.column_size': '{size} de 12',
+        'tool.delete_row': 'Borrar fila',
+        'tool.delete_column': 'Borrar columna',
+        'tool.delete_element': 'Borrar elemento',
+        'tool.delete_container': 'Borrar contenedor',
+        'tool.delete_pane': 'Borrar panel',
+        'tool.rename': 'Haz doble clic para renombrar',
+        'tool.toggle_popup': 'Plegar esta ventana mientras editas',
+        'tool.element_info': 'Elemento: {name}',
+        'tool.column_narrower': 'Estrechar columna\n(Mayús para el mínimo)',
+        'tool.column_wider': 'Ensanchar columna\n(Mayús para el máximo)',
+        'tool.indent_decrease': 'Reducir sangría\n(Mayús para quitarla)',
+        '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',
+        'tool.id_placeholder': 'id',
+        'tool.id_title': 'Asignar un identificador único',
+        'tool.classes_placeholder': 'clases',
+        'tool.classes_title': 'Clases css, separadas por espacios',
+        'tool.toggle_class': 'Aplicar o quitar el estilo "{label}"',
+        'row.add': 'Añadir fila {layout}',
+        'container.add_tabs': 'Pestañas',
+        'container.add_tab': 'Añadir pestaña',
+        'container.tab_label': 'Pestaña {number}',
+        'container.add_accordion': 'Acordeón',
+        'container.add_accordion_item': 'Añadir apartado',
+        'container.accordion_label': 'Apartado {number}',
+        'container.add_popup': 'Ventana emergente',
+        'container.popup_title': 'Título',
+        'container.popup_trigger': 'Abrir',
+        'confirm.title': 'Confirmar',
+        'confirm.ok': 'Borrar',
+        'confirm.cancel': 'Cancelar',
+        'confirm.delete_row': '¿Seguro que quieres borrar esta fila?',
+        'confirm.delete_column': '¿Seguro que quieres borrar esta columna?',
+        'confirm.delete_element': '¿Seguro que quieres borrar este elemento?',
+        'confirm.delete_container': '¿Seguro que quieres borrar este contenedor y todo su contenido?',
+        'confirm.delete_tab': '¿Seguro que quieres borrar esta pestaña y todo su contenido?',
+        'confirm.delete_accordion_item': '¿Seguro que quieres borrar este apartado y todo su contenido?',
+        'view.all': 'Todos los tamaños',
+        'view.xs': 'Móvil',
+        'view.sm': 'Tablet',
+        'view.md': 'Escritorio pequeño',
+        'view.lg': 'Escritorio',
+        'view.xl': 'Escritorio grande',
+        'view.xxl': 'Pantalla panorámica',
+        'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
+        'error.ckeditor_missing': '¡CKEditor no está disponible! Asegúrate de haber cargado los archivos js de ckeditor y del adaptador de jQuery.',
+        'error.summernote_missing': '¡Summernote no está disponible! Asegúrate de haber cargado el archivo js de Summernote.',
+    };
+
+})(jQuery);

package/src/js/plugins/grideditor.accordion.js

@@ -0,0 +1,185 @@
+/**
+ * Accordions for grid-editor.
+ *
+ * A container plugin: load this file after the editor and the toolbar offers
+ * 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/plugins/grideditor.accordion.min.js"></script>
+ */
+(function($) {
+
+$.extend($.fn.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) {
+
+    function staysOpen(container, ignore) {
+        var items = container.find('> .accordion > .accordion-item > .accordion-collapse');
+
+        if (ignore) { items = items.not(ignore.find('> .accordion-collapse')); }
+
+        return items.length > 0 && !items.filter('[data-bs-parent]').length;
+    }
+
+    function addAccordionItemTo(container, options) {
+        options = options || {};
+
+        var accordion = container.find('> .accordion');
+        var id = ge.containerId('acc-item');
+        var number = accordion.children('.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);
+    }
+
+    function toggleAccordionItem(container, item) {
+        var collapse = item.find('> .accordion-collapse');
+        var opening = collapse.attr('data-ge-open') !== 'true';
+
+        if (opening && !staysOpen(container)) {
+            container.find('> .accordion > .accordion-item').not(item).each(function() {
+                setAccordionItemOpen($(this), false);
+            });
+        }
+
+        setAccordionItemOpen(item, opening);
+    }
+
+    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')
+        ;
+    }
+
+    function reparentAccordionItem(container, item) {
+        var accordion = item.closest('.accordion');
+        var collapse = item.find('> .accordion-collapse');
+
+        // 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');
+        } else {
+            collapse.attr('data-bs-parent', '#' + accordion.attr('id'));
+        }
+    }
+
+    return {
+        labelKey: 'container.add_accordion',
+        addPaneKey: 'container.add_accordion_item',
+        paneKind: 'accordion-item',
+
+        create: function(options) {
+            var container = $('<div />').attr('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)
+            ;
+
+            for (var i = 0; i < count; i++) {
+                addAccordionItemTo(container, {
+                    label: labels[i],
+                    open: i === 0,
+                    stay_open: options.stay_open,
+                });
+            }
+
+            return container;
+        },
+
+        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');
+
+                // 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');
+                }
+
+                var button = item.find('> .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.data('ge-toggles')) {
+                    button.data('ge-toggles', true).on('click', function(e) {
+                        if (ge.labelIn(button).attr('contenteditable') === 'true') { return; }
+
+                        e.preventDefault();
+                        toggleAccordionItem(container, item);
+                    });
+                }
+
+                if (item.find('> .ge-tools-drawer').length) { return; }
+
+                ge.createPaneControls(item, 'accordion-item', ge.settings.accordion_tools,
+                    ge.t('confirm.delete_accordion_item'), function(removed) {
+                        item.slideUp(200, removed);
+                    });
+            });
+        },
+
+        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');
+            });
+
+            container.find('.ge-accordion-item').removeClass('ge-accordion-item');
+            ge.unwrapLabels(container);
+        },
+
+        afterPaneMove: function(container, item) {
+            reparentAccordionItem(container, item);
+        },
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +1,141 @@
+/**
+ * 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.
+ *
+ *   <script src="dist/jquery.grideditor.min.js"></script>
+ *   <script src="dist/plugins/grideditor.elements.min.js"></script>
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'tool.delete_element': 'Remove element',
+    'tool.element_info': 'Element: {name}',
+    'confirm.delete_element': 'Delete element?',
+});
+
+$.fn.gridEditor.features.elements = function(ge) {
+
+    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) {
+        return ge.settings.elements.auto
+            ? contentArea.children()
+            : contentArea.children(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');
+
+                if (element.find('> .ge-tools-drawer').length) { return; }
+
+                createElementControls(element);
+            });
+        });
+    }
+
+    function unmarkElements() {
+        ge.canvas.find('.ge-element').each(function() {
+            var element = $(this).removeClass('ge-element').removeAttr('contenteditable');
+
+            // 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'); }
+        });
+    }
+
+    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)
+        ;
+
+        ge.createMoveTool(drawer);
+        ge.createTool(drawer, ge.t('tool.element_info', { name: elementName(element) }),
+            'ge-element-info', 'bi bi-info-circle');
+        ge.addSettingsTool(drawer, element, ge.settings.element_classes);
+
+        ge.settings.element_tools.forEach(function(hostTool) {
+            ge.createTool(drawer, hostTool.title || '', hostTool.className || '',
+                hostTool.iconClass || 'bi bi-wrench', hostTool.on);
+        });
+
+        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);
+            });
+        });
+    }
+
+    function elementName(element) {
+        var type = element.attr('data-ge-element');
+        var label = element.attr('data-ge-label');
+
+        if (label && type) { return label + ' (' + type + ')'; }
+
+        return label || type || element[0].tagName.toLowerCase();
+    }
+
+    function apiCreateElement(content, options) {
+        options = options || {};
+
+        var element = $('<div class="ge-element" />')
+            .attr('data-ge-element', options.type || 'element')
+            .append(content)
+        ;
+        if (options.label !== undefined) {
+            element.attr('data-ge-label', options.label);
+        }
+
+        return ge.place(element, 'element', options);
+    }
+
+    return {
+        methods: {
+            createElement: apiCreateElement,
+        },
+
+        /** A node this plugin marked is an element, whatever else it is. */
+        kindOf: function(node) {
+            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.
+         */
+        onContentReady: markElements,
+
+        /** Elements move within a content area and between them. */
+        onSortable: function(shared) {
+            if (!elementsEnabled()) { return; }
+
+            ge.canvas.find('.ge-content').sortable($.extend({
+                items: '> .ge-element',
+                connectWith: '.ge-canvas .ge-content',
+            }, shared, ge.settings.sortable_options));
+        },
+    };
+};
+
+})(jQuery);