@themarioga/grid-editor 4.1.0 → 5.0.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,21 @@
         '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?',
+        '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 +118,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.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.add_row_to_section'), 'ge-add-row', 'bi bi-plus-circle', function() {
+            ge.place(ge.rowFromLayout([12]), 'row', { appendTo: 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);
+            });
+        });
+    }
+
+    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);

package/src/less/grideditor.less

@@ -44,6 +44,8 @@
         
         .ge-row-icon {
             width: 48px;
+            /* A button shrinks to its content, and an equal column has none */
+            flex: 0 0 48px;
             margin: 0;
             
             .column {
@@ -52,6 +54,10 @@
                 padding: 0;
                 border-left: 2px solid #f4f4f4;
             }
+            /* Nothing inside to be as wide as */
+            .col-auto {
+                min-width: 8px;
+            }
         }
     }
     
@@ -167,6 +173,8 @@
         margin: 0 -@editGutter @editGutter;
         display: block;
         width: calc(~"100% +" 2 * @editGutter);
+        /* Its node may align text, and the drawer's tools would follow */
+        text-align: left;
         
         > a {
             display: inline-block;
@@ -314,6 +322,10 @@
         position: relative;
         
         > .ge-tools-drawer {
+            /* The drawer is not content: an auto column is as wide as what
+               it holds, and its tools would make it as wide as a drawer */
+            contain: inline-size;
+
             a {
                 color: @colTextColor;
             }
@@ -370,6 +382,13 @@
                 color: #fff;
             }
 
+            /* col and col-auto: a word, not a number */
+            &.ge-size-flex {
+                width: auto;
+                padding-left: 5px;
+                padding-right: 5px;
+            }
+
             /* Wider than what is left of the row: allowed, but said so */
             &.ge-size-tight {
                 color: #999;
@@ -644,16 +663,43 @@
     /* this tier applies at the active one, so it is written by the pass below */
 }
 .ge-tier-above-off(@j, @active) when (@j > @active) {
+    .ge-flex-columns-off(extract(@ge-col-prefixes, @j));
     .ge-columns-off(extract(@ge-col-prefixes, @j));
     .ge-offsets-off(extract(@ge-offset-prefixes, @j));
 }
 
 .ge-tiers-upto-on(@active, @j: 1) when (@j =< @active) {
+    .ge-flex-columns-on(extract(@ge-col-prefixes, @j));
     .ge-columns-on(extract(@ge-col-prefixes, @j));
     .ge-offsets-on(extract(@ge-offset-prefixes, @j));
     .ge-tiers-upto-on(@active, @j + 1);
 }
 
+/*
+ * col and col-auto, in the order Bootstrap writes them: before the numbered
+ * sizes, so that of two classes for one tier the number wins, as it does on
+ * the real page.
+ */
+.ge-flex-columns-on(@prefix) {
+    .@{prefix} {
+        flex: 1 0 0%;
+        max-width: 100%;
+    }
+    .@{prefix}-auto {
+        flex: 0 0 auto;
+        width: auto;
+        max-width: 100%;
+    }
+}
+.ge-flex-columns-off(@prefix) {
+    .@{prefix},
+    .@{prefix}-auto {
+        flex: 0 0 auto;
+        width: 100%;
+        max-width: 100%;
+    }
+}
+
 .ge-columns-on(@prefix, @i: 1) when (@i =< @ge-columns) {
     .@{prefix}-@{i} {
         flex: 0 0 auto;
@@ -784,3 +830,89 @@
         }
     }
 }
+
+/* A row whose row-cols sizes its columns in this view says how many */
+.ge-canvas.ge-editing .row[data-ge-row-cols] {
+    position: relative;
+
+    &::before {
+        content: attr(data-ge-row-cols);
+        position: absolute;
+        left: 2px;
+        bottom: 2px;
+        z-index: 1;
+        padding: 0 4px;
+        border-radius: 3px;
+        background: rgba(0, 0, 0, .55);
+        color: #fff;
+        font-size: 10px;
+        line-height: 16px;
+        pointer-events: none;
+    }
+}
+
+/*
+ * The sections plugin: Bootstrap's containers on the canvas. A section is
+ * framed while editing, and in a breakpoint view each container class gets
+ * the max-width it has at that breakpoint - Bootstrap sets it for the
+ * window, and the window is not what a breakpoint view narrows.
+ */
+@ge-section-color: #8a6d3b;
+
+.ge-canvas.ge-editing > .ge-section {
+    border: 1px dashed @ge-section-color;
+    margin-bottom: @editGutter;
+    padding-bottom: @editGutter;
+
+    > .ge-section-drawer {
+        background: fadeout(@ge-section-color, 85%);
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+
+        > a {
+            color: darken(@ge-section-color, 5%);
+        }
+    }
+}
+
+/* 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;
+    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;
+@ge-section-from: 2, 2, 3, 4, 5, 6;
+@ge-section-widths: 100%, 540px, 720px, 960px, 1140px, 1320px;
+
+.ge-section-modes(@i: 1) when (@i =< length(@ge-tiers)) {
+    @tier: extract(@ge-tiers, @i);
+    .ge-section-classes(@i, @tier);
+    .ge-section-modes(@i + 1);
+}
+.ge-section-classes(@i, @tier, @k: 1) when (@k =< length(@ge-section-classes)) {
+    .ge-section-width(@i, @tier, extract(@ge-section-classes, @k), extract(@ge-section-from, @k));
+    .ge-section-classes(@i, @tier, @k + 1);
+}
+.ge-section-width(@i, @tier, @class, @from) when (@i >= @from) {
+    .ge-canvas.ge-layout-@{tier} > .@{class} {
+        max-width: extract(@ge-section-widths, @i);
+    }
+}
+.ge-section-width(@i, @tier, @class, @from) when (@i < @from) {
+    .ge-canvas.ge-layout-@{tier} > .@{class} {
+        max-width: 100%;
+    }
+}
+.ge-section-modes();