@themarioga/grid-editor 4.1.0 → 5.1.0

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

@@ -21,6 +21,8 @@
         '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.column_equal': 'Igual: reparte lo que queda de la fila',
+        'tool.column_auto': 'Auto: tan ancha como su contenido',
         'tool.delete_row': 'Borrar fila',
         'tool.delete_column': 'Borrar columna',
         'tool.delete_element': 'Borrar elemento',
@@ -41,6 +43,7 @@
         'tool.classes_title': 'Clases css, separadas por espacios',
         'tool.toggle_class': 'Aplicar o quitar el estilo "{label}"',
         'row.add': 'Añadir fila {layout}',
+        'row.add_row_cols': 'Añadir una fila de {columns} columnas, {counts} por fila',
         'container.add_tabs': 'Pestañas',
         'container.add_tab': 'Añadir pestaña',
         'container.tab_label': 'Pestaña {number}',
@@ -70,6 +73,25 @@
         'view.xl': 'Escritorio grande',
         'view.xxl': 'Pantalla panorámica',
         'utility.section': 'Responsive: {view}',
+        'utility.col_width': 'Ancho',
+        'utility.col_equal': 'Igual',
+        'utility.col_auto': 'Auto',
+        'section.add': 'Sección',
+        'section.width': 'Ancho',
+        'section.fixed': 'Fijo',
+        'section.fluid': 'Ancho completo',
+        'section.from': 'Fijo desde {breakpoint}',
+        'tool.add_row_to_section': 'Añadir fila',
+        'tool.delete_section': 'Quitar sección',
+        'confirm.delete_section': '¿Seguro que quieres borrar esta sección y todo su contenido?',
+        'tool.copy': 'Copiar',
+        'tool.paste': 'Pegar',
+        'clipboard.paste_row': 'Pegar fila',
+        'clipboard.paste_section': 'Pegar sección',
+        'utility.col_from_row': 'De la fila: {count}',
+        'utility.row_cols': 'Columnas por fila',
+        'badge.row_cols': '{count} por fila',
+        'badge.row_cols_auto': 'Tan anchas como su contenido',
         'utility.default': 'Por defecto',
         'utility.inherit': 'Hereda: {value} (de {breakpoint})',
         'utility.varies': 'Cambia en {breakpoints}; elegir aquí lo sustituye',
@@ -100,6 +122,14 @@
         'utility.side_b': 'Abajo',
         'utility.side_s': 'Inicio',
         'utility.side_e': 'Fin',
+        'utility.text_align': 'Alineación del texto',
+        'utility.text_start': 'Inicio',
+        'utility.text_center': 'Centro',
+        'utility.text_end': 'Fin',
+        'utility.float': 'Flotar',
+        'utility.float_start': 'Inicio',
+        'utility.float_end': 'Fin',
+        'utility.float_none': 'Ninguno',
         'utility.spacing_gutter': 'El relleno lateral de una columna es su espaciado: cambiarlo cambia el espacio entre columnas',
         'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
         'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',

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

@@ -0,0 +1,274 @@
+/**
+ * Copy and paste for grid-editor.
+ *
+ * A feature plugin: load this file after the editor and every row, column,
+ * section, container and element gets a copy tool, and every place one of
+ * them can go gets a paste tool while there is something copied that fits.
+ * 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.clipboard.min.js"></script>
+ *
+ * What is copied is kept in localStorage, so it survives a reload and can be
+ * pasted in another tab or another editor of the same site. A browser that
+ * will not give the page its storage keeps it in memory, for this page only.
+ *
+ * A paste is an add like any other - before-add-* and after-add-*, with
+ * `source: 'paste'` - so a host can turn one away.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'tool.copy': 'Copy',
+    'tool.paste': 'Paste',
+    'clipboard.paste_row': 'Paste row',
+    'clipboard.paste_section': 'Paste section',
+});
+
+var STORAGE_ITEM = 'grideditor.clipboard';
+var CHANGE = 'grideditor-clipboard';
+var VERSION = 1;
+
+/** Where nothing can be stored, what was copied lives here, for this page. */
+var memory = null;
+var editors = 0;
+
+/**
+ * What each drawer takes when something is pasted into it, by the kind of the
+ * node the drawer belongs to. A category is what was copied: a row, a column,
+ * a section, a container of any type, an element.
+ */
+var TARGETS = {
+    column: ['row', 'container', 'element'],
+    row: ['column'],
+    section: ['row'],
+};
+
+/**
+ * The attributes that point at an id, as the id itself or as a #selector.
+ * A pasted copy that has to take new ids takes them here too, so its tabs,
+ * its accordion and its popups still point at their own panes.
+ */
+var REFERENCES = ['data-bs-target', 'data-bs-parent', 'href', 'aria-controls', 'aria-labelledby',
+    'aria-describedby', 'for', 'data-ge-popup-id', 'data-ge-popup-target'];
+
+/** An id grid-editor generated: ge-{type}-{counter}-{random}. */
+var GENERATED_ID = /^ge-([a-z][a-z-]*?)-\d+-[a-z0-9]+$/;
+
+function read() {
+    var raw;
+
+    try {
+        raw = window.localStorage.getItem(STORAGE_ITEM);
+    } catch (error) {
+        return memory;
+    }
+    if (raw === null) { return memory; }
+
+    try {
+        var clip = JSON.parse(raw);
+        return clip && clip.version === VERSION && clip.html ? clip : null;
+    } catch (error) {
+        return null;
+    }
+}
+
+function write(clip) {
+    try {
+        window.localStorage.setItem(STORAGE_ITEM, JSON.stringify(clip));
+        memory = null;
+    } catch (error) {
+        memory = clip;
+    }
+
+    $(document).trigger(CHANGE);
+}
+
+// Another tab copied something: every editor here looks again
+$(window).on('storage', function(e) {
+    if (e.originalEvent && e.originalEvent.key === STORAGE_ITEM) { $(document).trigger(CHANGE); }
+});
+
+$.fn.gridEditor.features.clipboard = function(ge) {
+
+    var namespace = '.ge-clipboard-' + (++editors);
+    var shown = null; // What the toolbar's paste buttons stand for
+
+    function used(name) {
+        return !ge.settings.plugins || ge.settings.plugins.indexOf(name) !== -1;
+    }
+
+    /** A category this editor can take: the plugin that makes it is here. */
+    function available(clip) {
+        if (clip.category === 'container') {
+            return !!$.fn.gridEditor.containers[clip.kind] && used(clip.kind);
+        }
+        if (clip.category === 'section') { return !!$.fn.gridEditor.features.sections && used('sections'); }
+        if (clip.category === 'element') { return !!$.fn.gridEditor.features.elements && used('elements'); }
+
+        return true;
+    }
+
+    function fits(clip, categories) {
+        return !!clip && categories.indexOf(clip.category) !== -1 && available(clip);
+    }
+
+    function categoryOf(kind) {
+        if ($.fn.gridEditor.containers[kind]) { return 'container'; }
+
+        return ['row', 'column', 'section', 'element'].indexOf(kind) !== -1 ? kind : null;
+    }
+
+    function copy(node, kind) {
+        var html = ge.nodeHtml(node);
+
+        write({ version: VERSION, category: categoryOf(kind), kind: kind, html: html });
+        ge.emit('after-copy', ge.payloadFor(kind, node, { source: 'tool' }));
+
+        // The canvas came back with new drawers: the one to flash is the
+        // node's new copy tool
+        var tool = node.children('.ge-tools-drawer').find('> .ge-copy');
+        tool.addClass('ge-copied').find('i').attr('class', 'bi bi-check2');
+        setTimeout(function() {
+            tool.removeClass('ge-copied').find('i').attr('class', 'bi bi-copy');
+        }, 1200);
+    }
+
+    function paste(target, categories) {
+        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.children('.ge-content').last();
+            if (area.length) { into = area; }
+        }
+
+        ge.place(node, clip.kind, { appendTo: into, source: 'paste' });
+    }
+
+    /**
+     * The copied markup as a node, with new ids where the page already has
+     * them: two copies of a tab strip pointing at one set of panes is a tab
+     * strip that opens the other copy's tabs. An id the page does not have
+     * is kept, so pasting into another page changes nothing.
+     */
+    function fresh(html) {
+        var node = $($.parseHTML(html.trim(), document, true)).first();
+        var renamed = {};
+        var taken = function(id) {
+            return !!document.getElementById(id) || Object.keys(renamed).some(function(old) {
+                return renamed[old] === id;
+            });
+        };
+
+        node.find('[id]').addBack('[id]').each(function() {
+            var id = this.id;
+            if (!document.getElementById(id)) { return; }
+
+            var generated = GENERATED_ID.exec(id);
+            var next;
+
+            if (generated) {
+                do { next = ge.containerId(generated[1]); } while (taken(next));
+            } else {
+                var n = 2;
+                while (taken(id + '-' + n)) { n++; }
+                next = id + '-' + n;
+            }
+
+            renamed[id] = next;
+            this.id = next;
+        });
+
+        if (!Object.keys(renamed).length) { return node; }
+
+        node.find('*').addBack().each(function() {
+            var element = this;
+
+            REFERENCES.forEach(function(name) {
+                var value = element.getAttribute(name);
+                if (value === null) { return; }
+                if (name === 'href' && value.charAt(0) !== '#') { return; }
+
+                var rewritten = value.split(/(\s+)/).map(function(token) {
+                    if (renamed[token]) { return renamed[token]; }
+                    if (token.charAt(0) === '#' && renamed[token.slice(1)]) { return '#' + renamed[token.slice(1)]; }
+
+                    return token;
+                }).join('');
+
+                if (rewritten !== value) { element.setAttribute(name, rewritten); }
+            });
+        });
+
+        return node;
+    }
+
+    /** Show the paste tools, and the toolbar's paste buttons, that fit what is copied. */
+    function refresh() {
+        var clip = read();
+
+        ge.canvas.find('.ge-paste').each(function() {
+            $(this).toggle(fits(clip, $(this).attr('data-ge-paste').split(' ')));
+        });
+
+        ge.toolbarItems('clipboard').each(function() {
+            var item = TOOLBAR[parseInt($(this).attr('data-ge-item'), 10)];
+            $(this).toggle(fits(clip, [item.kind]));
+        });
+
+        shown = clip;
+    }
+
+    var TOOLBAR = [
+        { kind: 'row', labelKey: 'clipboard.paste_row' },
+        { kind: 'section', labelKey: 'clipboard.paste_section' },
+    ].map(function(item) {
+        return $.extend(item, {
+            iconClass: 'bi bi-clipboard-plus',
+            source: 'paste',
+            // What the button showed, even if another tab has copied
+            // something else since
+            create: function() { return fresh(shown.html); },
+        });
+    });
+
+    return {
+        drawerTools: function(drawer, node, kind) {
+            if (categoryOf(kind)) {
+                ge.createTool(drawer, ge.t('tool.copy'), 'ge-copy', 'bi bi-copy', function() {
+                    copy(node, kind);
+                });
+            }
+
+            var categories = TARGETS[kind];
+            if (!categories) { return; }
+
+            ge.createTool(drawer, ge.t('tool.paste'), 'ge-paste', 'bi bi-clipboard-plus', function() {
+                paste(node, categories);
+            });
+            drawer.children('.ge-paste').last()
+                .attr('data-ge-paste', categories.join(' '))
+                .toggle(fits(read(), categories));
+        },
+
+        toolbar: TOOLBAR,
+
+        onInit: function() {
+            refresh();
+            $(document).off(CHANGE + namespace).on(CHANGE + namespace, refresh);
+        },
+
+        onDeinit: function() {
+            $(document).off(CHANGE + namespace);
+        },
+    };
+};
+
+})(jQuery);

package/src/js/plugins/grideditor.float.js

@@ -0,0 +1,56 @@
+/**
+ * Floating elements for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and after the elements
+ * plugin, and an element can float to the start or the end of its content
+ * area per breakpoint, with the text around it, using Bootstrap's
+ * float-{breakpoint}-start, -end and -none 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/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($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.float': 'Float',
+    'utility.float_start': 'Start',
+    'utility.float_end': 'End',
+    'utility.float_none': 'None',
+});
+
+/** 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) {
+
+    function label(value) {
+        if (value === 'start') { return ge.t('utility.float_start'); }
+        if (value === 'end') { return ge.t('utility.float_end'); }
+
+        return ge.t('utility.float_none');
+    }
+
+    return {
+        families: [{
+            name: 'float',
+            prefix: 'float',
+            values: ['start', 'end', 'none'],
+            appliesTo: ['element'],
+            labelKey: 'utility.float',
+            label: label,
+
+            /** With no class applying here, whatever the host's css floats it as. */
+            preview: function(value, node) {
+                return { float: value === null ? ge.bareStyle(node, 'float', 'float') : CSS[value] };
+            },
+        }],
+    };
+};
+
+})(jQuery);

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

@@ -0,0 +1,199 @@
+/**
+ * Sections for grid-editor.
+ *
+ * A feature plugin: load this file after the editor and the canvas can hold
+ * sections - Bootstrap's .container, .container-fluid and .container-{bp} -
+ * each grouping rows at a width of its own. 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.sections.min.js"></script>
+ *
+ * Called sections, not containers, because a container is what the tabs,
+ * accordion, popup and card plugins make. A section is recognised by its
+ * Bootstrap class alone, and only as a child of the canvas: a .container
+ * somewhere inside an element's markup is that element's business.
+ *
+ * sections.widths narrows the widths the field offers.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'section.add': 'Section',
+    'section.width': 'Width',
+    'section.fixed': 'Fixed',
+    'section.fluid': 'Full width',
+    'section.from': 'Fixed from {breakpoint}',
+    'tool.add_row_to_section': 'Add row',
+    'tool.delete_section': 'Remove section',
+    'confirm.delete_section': 'Delete this section and everything in it?',
+});
+
+/** Each width, and the class that gives it. */
+var WIDTHS = {
+    fixed: 'container',
+    fluid: 'container-fluid',
+    sm: 'container-sm',
+    md: 'container-md',
+    lg: 'container-lg',
+    xl: 'container-xl',
+    xxl: 'container-xxl',
+};
+
+var ORDER = ['fixed', 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid'];
+
+$.fn.gridEditor.features.sections = function(ge) {
+
+    var options = $.extend({ widths: ORDER }, ge.settings.sections);
+
+    function widthOf(section) {
+        var found = null;
+
+        $.each(WIDTHS, function(width, className) {
+            if (!found && section.hasClass(className)) { found = width; }
+        });
+
+        return found;
+    }
+
+    function isSection(node) {
+        return node.parent()[0] === ge.canvas[0] && widthOf(node) !== null;
+    }
+
+    function sections() {
+        return ge.canvas.children().filter(function() { return isSection($(this)); });
+    }
+
+    function label(width) {
+        if (width === 'fixed') { return ge.t('section.fixed'); }
+        if (width === 'fluid') { return ge.t('section.fluid'); }
+
+        return ge.t('section.from', { breakpoint: width });
+    }
+
+    /**
+     * Change a section's width, announced like a utility: the width is its
+     * one container class, the same at every breakpoint.
+     */
+    function setWidth(section, width, source) {
+        var from = widthOf(section);
+        if (from === width || !WIDTHS[width]) { return false; }
+
+        return ge.operate(function() {
+            var payload = ge.payloadFor('section', section, {
+                family: 'section',
+                breakpoint: 'all',
+                tiers: [],
+                from: from,
+                to: width,
+                source: source || 'api',
+            });
+
+            if (!ge.emit('before-utility', payload)) {
+                section.find('> .ge-tools-drawer .ge-section-width select').val(from);
+                return false;
+            }
+
+            section.removeClass(WIDTHS[from]).addClass(WIDTHS[width]);
+            ge.emit('after-utility', payload);
+
+            return true;
+        });
+    }
+
+    function widthField(section) {
+        var select = $('<select />');
+        var current = widthOf(section);
+        var offered = options.widths.indexOf(current) === -1 ? options.widths.concat([current]) : options.widths;
+
+        ORDER.forEach(function(width) {
+            if (offered.indexOf(width) === -1) { return; }
+            $('<option />').attr('value', width).text(label(width)).appendTo(select);
+        });
+
+        select.val(current).on('change', function() { setWidth(section, this.value, 'panel'); });
+
+        return $('<label class="ge-utility ge-section-width" />')
+            .append($('<span class="ge-utility-label" />').text(ge.t('section.width')))
+            .append(select);
+    }
+
+    function createControls(section) {
+        var drawer = $('<div class="ge-tools-drawer ge-section-drawer" />').prependTo(section);
+
+        ge.createMoveTool(drawer);
+        ge.addSettingsTool(drawer, section, ge.settings.section_classes || []).append(widthField(section));
+
+        ge.createTool(drawer, ge.t('tool.delete_section'), 'ge-delete-section', 'bi bi-trash', function() {
+            ge.deleteNode('section', section, ge.t('confirm.delete_section'), function(removed) {
+                section.slideUp(removed);
+            });
+        });
+
+        ge.createTool(drawer, ge.t('tool.add_row_to_section'), 'ge-add-row', 'bi bi-plus-circle', function() {
+            ge.place(ge.rowFromLayout([12]), 'row', { appendTo: section });
+        });
+    }
+
+    function mark() {
+        sections().each(function() {
+            var section = $(this).addClass('ge-section');
+            if (!section.children('.ge-tools-drawer').length) { createControls(section); }
+        });
+    }
+
+    function unmark() {
+        ge.canvas.children('.ge-section').removeClass('ge-section');
+    }
+
+    /** createSection(options): a section, detached unless a placement is given. */
+    function createSection(settings) {
+        settings = settings || {};
+
+        var section = $('<div />').addClass(WIDTHS[settings.width] || WIDTHS.fixed);
+
+        (settings.rows || [[12]]).forEach(function(layout) {
+            ge.rowFromLayout(layout).appendTo(section);
+        });
+
+        return ge.place(section, 'section', settings);
+    }
+
+    return {
+        methods: {
+            createSection: createSection,
+        },
+
+        kindOf: function(node) {
+            return node.hasClass('ge-section') ? 'section' : null;
+        },
+
+        // A section is a block the canvas moves, and a region rows move in
+        blocks: '.ge-section',
+        regions: '.ge-section',
+
+        /** A section goes on the canvas and nowhere else, and holds rows and nothing else. */
+        accepts: function(region, node) {
+            if (node.hasClass('ge-section') || isSectionMade(node)) { return region[0] === ge.canvas[0]; }
+            if (region.hasClass('ge-section')) { return node.hasClass('row'); }
+
+            return true;
+        },
+
+        toolbar: [{
+            labelKey: 'section.add',
+            kind: 'section',
+            create: function() { return createSection(); },
+        }],
+
+        onInit: mark,
+        onDeinit: unmark,
+    };
+
+    /** A section the toolbar just made, before init has marked it. */
+    function isSectionMade(node) {
+        return !node.parent().length && widthOf(node) !== null;
+    }
+};
+
+})(jQuery);

package/src/js/plugins/grideditor.textalign.js

@@ -0,0 +1,60 @@
+/**
+ * Text alignment for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and a row, column,
+ * element or container can align its text per breakpoint, with Bootstrap's
+ * text-{breakpoint}-start, -center and -end 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/plugins/grideditor.textalign.min.js"></script>
+ *
+ * The class aligns everything inside the node that does not align itself: a
+ * paragraph the rich text editor gave its own text-align keeps it.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.text_align': 'Text alignment',
+    'utility.text_start': 'Start',
+    'utility.text_center': 'Center',
+    'utility.text_end': 'End',
+});
+
+/** Start and end are left and right: Bootstrap's css is left to right. */
+var CSS = { start: 'left', center: 'center', end: 'right' };
+
+$.fn.gridEditor.utilities.textalign = function(ge) {
+
+    function label(value) {
+        if (value === 'start') { return ge.t('utility.text_start'); }
+        if (value === 'center') { return ge.t('utility.text_center'); }
+
+        return ge.t('utility.text_end');
+    }
+
+    return {
+        families: [{
+            name: 'text-align',
+            prefix: 'text',
+            values: ['start', 'center', 'end'],
+            appliesTo: ['row', 'column', 'element', 'container'],
+            labelKey: 'utility.text_align',
+            label: label,
+
+            /**
+             * With no class applying here, the node aligns as its parent
+             * does - or as the host's css says - which only the browser can
+             * tell, so it is asked with the classes out of the way. Parents
+             * are previewed before their children, so the parent's answer is
+             * already the view's.
+             */
+            preview: function(value, node) {
+                return { 'text-align': value === null ? ge.bareStyle(node, 'text-align', 'text-align') : CSS[value] };
+            },
+        }],
+    };
+};
+
+})(jQuery);