@themarioga/grid-editor 4.0.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}',
@@ -69,6 +72,61 @@
         'view.lg': 'Escritorio',
         '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',
+        'utility.visibility': 'Visibilidad',
+        'utility.visibility_hidden': 'Oculto',
+        'utility.visibility_shown': 'Visible',
+        'tool.hide_in_view': 'Ocultar en esta vista',
+        'tool.show_in_view': 'Mostrar en esta vista',
+        'badge.hidden_in': 'Oculto en {breakpoints}',
+        'utility.order': 'Orden',
+        'utility.order_first': 'Primero',
+        'utility.order_last': 'Último',
+        'tool.order_earlier': 'Antes en esta vista',
+        'tool.order_later': 'Después en esta vista',
+        'badge.order': 'Orden: {value}',
+        'utility.justify_content': 'Justificar columnas',
+        'utility.align_items': 'Alinear columnas',
+        'utility.align_self': 'Alinearse',
+        'utility.gutters': 'Espaciado entre columnas',
+        'utility.gutters_x': 'Espaciado horizontal',
+        'utility.gutters_y': 'Espaciado vertical',
+        'utility.padding': 'Relleno',
+        'utility.margin': 'Margen',
+        'utility.side_all': 'Todos los lados',
+        'utility.side_x': 'Izquierda y derecha',
+        'utility.side_y': 'Arriba y abajo',
+        'utility.side_t': 'Arriba',
+        '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.',
         'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',

package/src/js/plugins/grideditor.alignment.js

@@ -0,0 +1,81 @@
+/**
+ * Alignment for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and a row's columns can be
+ * justified and aligned per breakpoint, and a column can align itself, with
+ * Bootstrap's justify-content-{breakpoint}-*, align-items-{breakpoint}-* and
+ * align-self-{breakpoint}-* 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.alignment.min.js"></script>
+ *
+ * Fields only, in the settings panels: alignment is set now and then, not
+ * clicked through, and a drawer is short of room.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.justify_content': 'Justify columns',
+    'utility.align_items': 'Align columns',
+    'utility.align_self': 'Align self',
+});
+
+/** What Bootstrap's value names come to in css. */
+var FLEX = {
+    start: 'flex-start',
+    end: 'flex-end',
+    center: 'center',
+    between: 'space-between',
+    around: 'space-around',
+    evenly: 'space-evenly',
+    baseline: 'baseline',
+    stretch: 'stretch',
+    auto: 'auto',
+};
+
+/**
+ * A family whose preview is its one css property. `none` is what the
+ * property is when no class says anything, which a view has to show over a
+ * wider breakpoint's class that is live in a wide window.
+ */
+function family(definition) {
+    return $.extend({
+        prefix: definition.name,
+        preview: function(value) {
+            var styles = {};
+            styles[definition.name] = value === null ? definition.none : FLEX[value];
+            return styles;
+        },
+    }, definition);
+}
+
+$.fn.gridEditor.utilities.alignment = function() {
+    return {
+        families: [
+            family({
+                name: 'justify-content',
+                labelKey: 'utility.justify_content',
+                values: ['start', 'center', 'end', 'between', 'around', 'evenly'],
+                appliesTo: ['row'],
+                none: 'normal',
+            }),
+            family({
+                name: 'align-items',
+                labelKey: 'utility.align_items',
+                values: ['start', 'center', 'end', 'baseline', 'stretch'],
+                appliesTo: ['row'],
+                none: 'normal',
+            }),
+            family({
+                name: 'align-self',
+                labelKey: 'utility.align_self',
+                values: ['auto', 'start', 'center', 'end', 'baseline', 'stretch'],
+                appliesTo: ['column'],
+                none: 'auto',
+            }),
+        ],
+    };
+};
+
+})(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.gutters.js

@@ -0,0 +1,145 @@
+/**
+ * Gutters for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and a row's gutters can
+ * differ per breakpoint, with Bootstrap's g-{breakpoint}-*, gx-{breakpoint}-*
+ * and gy-{breakpoint}-* 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.gutters.min.js"></script>
+ *
+ * The editor draws its own frame round every column, narrower than any
+ * gutter, so a row with gutter classes is drawn with its real gutters instead.
+ *
+ * utilities.gutters.scale is what 0 to 5 come to, for a page that changed
+ * Bootstrap's $spacers.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.gutters': 'Gutters',
+    'utility.gutters_x': 'Horizontal gutters',
+    'utility.gutters_y': 'Vertical gutters',
+});
+
+var VALUES = ['0', '1', '2', '3', '4', '5'];
+
+/** Bootstrap's own: $spacers, and what a row's gutters are with no class. */
+var SCALE = ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'];
+var DEFAULT_X = '1.5rem';
+var DEFAULT_Y = '0';
+
+var INFIXES = ['', 'sm', 'md', 'lg', 'xl', 'xxl'];
+var CLASS_PATTERN = /(?:^|\s)g[xy]?-(?:(?:sm|md|lg|xl|xxl)-)?[0-5](?:\s|$)/;
+
+$.fn.gridEditor.utilities.gutters = function(ge) {
+
+    var options = $.extend({ scale: SCALE }, ge.settings.utilities.gutters);
+
+    /**
+     * The class of a family that decides a row's gutters at a breakpoint:
+     * the widest breakpoint up to it that has one, as { tier, value }.
+     */
+    function source(row, prefix, tier) {
+        var classes = (row.attr('class') || '').split(/\s+/);
+
+        for (var i = tier; i >= 0; i--) {
+            for (var value = VALUES.length - 1; value >= 0; value--) {
+                var name = prefix + (INFIXES[i] ? '-' + INFIXES[i] : '') + '-' + value;
+                if (classes.indexOf(name) !== -1) { return { tier: i, value: value }; }
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * One axis the way Bootstrap's css settles it. g and gx (or gy) set the
+     * same variable, every breakpoint's rules come after the smaller ones',
+     * and within a breakpoint the bigger values come later. So the class
+     * that wins is the one from the wider breakpoint, then the bigger one -
+     * not the more specific family, whatever that would suggest.
+     */
+    function axis(row, prefix, fallback) {
+        var tier = ge.breakpoints.indexOf(ge.view());
+        var winner = [source(row, 'g', tier), source(row, prefix, tier)]
+            .filter(Boolean)
+            .sort(function(a, b) { return b.tier - a.tier || b.value - a.value; })[0];
+
+        return winner ? options.scale[winner.value] : fallback;
+    }
+
+    function preview(axes) {
+        return function(value, row) {
+            var styles = {};
+
+            if (axes.indexOf('x') !== -1) { styles['--bs-gutter-x'] = axis(row, 'gx', DEFAULT_X); }
+            if (axes.indexOf('y') !== -1) { styles['--bs-gutter-y'] = axis(row, 'gy', DEFAULT_Y); }
+
+            return styles;
+        };
+    }
+
+    /**
+     * Choosing g sets both axes, so a gx or gy the same breakpoint had is
+     * taken off: left on, the bigger of the two would win, and the field the
+     * user just chose would not be what the row shows.
+     */
+    function afterUtility(e, payload) {
+        if (payload.family !== 'g') { return; }
+
+        ['gx', 'gy'].forEach(function(family) {
+            ge.setUtility(payload.node, family, null, { view: payload.breakpoint, source: payload.source });
+        });
+    }
+
+    function mark(scope) {
+        scope.find('.row').addBack('.row').each(function() {
+            var row = $(this);
+            row.toggleClass('ge-gutters', CLASS_PATTERN.test(row.attr('class') || ''));
+        });
+    }
+
+    return {
+        families: [
+            {
+                name: 'g',
+                prefix: 'g',
+                values: VALUES,
+                appliesTo: ['row'],
+                labelKey: 'utility.gutters',
+                preview: preview(['x', 'y']),
+            },
+            {
+                name: 'gx',
+                prefix: 'gx',
+                values: VALUES,
+                appliesTo: ['row'],
+                labelKey: 'utility.gutters_x',
+                preview: preview(['x']),
+            },
+            {
+                name: 'gy',
+                prefix: 'gy',
+                values: VALUES,
+                appliesTo: ['row'],
+                labelKey: 'utility.gutters_y',
+                preview: preview(['y']),
+            },
+        ],
+
+        onInit: function() {
+            ge.canvas.off('grideditor:after-utility.ge-gutters').on('grideditor:after-utility.ge-gutters', afterUtility);
+        },
+
+        onRefresh: mark,
+
+        onDeinit: function() {
+            ge.canvas.off('grideditor:after-utility.ge-gutters');
+            ge.canvas.find('.ge-gutters').removeClass('ge-gutters');
+        },
+    };
+};
+
+})(jQuery);

package/src/js/plugins/grideditor.order.js

@@ -0,0 +1,206 @@
+/**
+ * Column order for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and a column's place in
+ * its row can differ per breakpoint, with Bootstrap's order-{breakpoint}-*
+ * 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.order.min.js"></script>
+ *
+ * Two arrows in each column's drawer move it one place earlier or later in
+ * the view being edited, by numbering the row's columns; the markup does not
+ * move. Dragging still moves the markup, as it always has.
+ *
+ * utilities.order.drawer: false leaves the arrows out, and the panel field is
+ * the only control.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.order': 'Order',
+    'utility.order_first': 'First',
+    'utility.order_last': 'Last',
+    'tool.order_earlier': 'Earlier in this view',
+    'tool.order_later': 'Later in this view',
+    'badge.order': 'Order: {value}',
+});
+
+var VALUES = ['first', '0', '1', '2', '3', '4', '5', 'last'];
+
+/** Where each value puts a column, as Bootstrap's css has it. */
+var RANK = { first: -1, last: 6 };
+
+/** A column that carries any class of the family, at any breakpoint. */
+var CLASS_PATTERN = /(?:^|\s)order-(?:(?:sm|md|lg|xl|xxl)-)?(?:first|last|[0-5])(?:\s|$)/;
+
+$.fn.gridEditor.utilities.order = function(ge) {
+
+    var options = $.extend({ drawer: true }, ge.settings.utilities.order);
+    var warnedAboutDrag = false;
+
+    function rank(value) {
+        if (value === null) { return 0; }
+
+        return RANK[value] !== undefined ? RANK[value] : parseInt(value, 10);
+    }
+
+    function label(value) {
+        if (value === 'first') { return ge.t('utility.order_first'); }
+        if (value === 'last') { return ge.t('utility.order_last'); }
+
+        return value;
+    }
+
+    /** The columns of a row in the order a view shows them, given what each one's order is. */
+    function visualOrder(columns, read) {
+        return columns.get()
+            .map(function(element, index) {
+                return { element: element, index: index, rank: rank(read($(element))) };
+            })
+            .sort(function(a, b) { return a.rank - b.rank || a.index - b.index; })
+            .map(function(entry) { return entry.element; });
+    }
+
+    function sameOrder(a, b) {
+        return a.every(function(element, index) { return element === b[index]; });
+    }
+
+    /**
+     * The values that put n columns in n places, or null past eight: that
+     * is how many places Bootstrap's order classes have.
+     */
+    function slots(count) {
+        if (count <= 6) { return VALUES.slice(1, 1 + count); }
+        if (count === 7) { return VALUES.slice(1); }
+        if (count === 8) { return VALUES.slice(); }
+
+        return null;
+    }
+
+    /**
+     * Move a column one place earlier or later in the view being edited.
+     *
+     * The row's columns are numbered in their new order. When that order is
+     * the markup's own, the numbers are taken off instead - unless what is
+     * left underneath, the breakpoint below, would then order them some other
+     * way, and the numbers are what keep them in the markup's order.
+     */
+    function move(col, direction) {
+        var view = ge.view();
+        var columns = col.parent().children('.column');
+        var shown = visualOrder(columns, function(column) { return ge.getUtility(column, 'order', view); });
+        var from = shown.indexOf(col[0]);
+        var to = from + direction;
+
+        if (to < 0 || to >= shown.length) { return; }
+
+        shown.splice(to, 0, shown.splice(from, 1)[0]);
+
+        var values = null;
+        if (!sameOrder(shown, columns.get()) || !inheritsMarkupOrder(columns, view)) {
+            values = slots(shown.length);
+
+            if (!values) {
+                ge.warn('a row of ' + shown.length + ' columns cannot be reordered with Bootstrap\'s ' +
+                    'order classes, which have eight places');
+                return;
+            }
+        }
+
+        ge.operate(function() {
+            shown.forEach(function(element, index) {
+                ge.setUtility($(element), 'order', values ? values[index] : null, { source: 'tool' });
+            });
+        });
+    }
+
+    /** Whether taking this view's classes off leaves the columns in the markup's order. */
+    function inheritsMarkupOrder(columns, view) {
+        var index = ge.breakpoints.indexOf(view);
+        if (index <= 0) { return true; }
+
+        var below = ge.breakpoints[index - 1];
+
+        return sameOrder(visualOrder(columns, function(column) {
+            return ge.getUtility(column, 'order', below);
+        }), columns.get());
+    }
+
+    /** Whether a row's columns are ordered by class, rather than by the markup, in this view. */
+    function ordered(row) {
+        return row.children('.column').get().some(function(element) {
+            return ge.getUtility($(element), 'order', ge.view()) !== null;
+        });
+    }
+
+    /** The badge: a column ordered by class in this view says where. */
+    function mark(scope) {
+        scope.find('.column').addBack('.column').each(function() {
+            var col = $(this);
+            var value = CLASS_PATTERN.test(col.attr('class') || '')
+                ? ge.getUtility(col, 'order', ge.view())
+                : null;
+
+            if (value === null) {
+                col.removeAttr('data-ge-order');
+            } else {
+                col.attr('data-ge-order', ge.t('badge.order', { value: label(value) }));
+            }
+        });
+    }
+
+    /**
+     * A column dropped in a row ordered by class lands where the markup puts
+     * it, and shows up where its order does, which is worth saying once.
+     */
+    function afterMove(e, payload) {
+        if (warnedAboutDrag || payload.kind !== 'column' || !payload.to) { return; }
+        if (!ordered(payload.to.parent)) { return; }
+
+        warnedAboutDrag = true;
+        ge.warn('a column was dropped in a row whose columns carry order classes in this view: ' +
+            'where it shows is set by those classes, not by where it sits in the markup');
+    }
+
+    return {
+        families: [{
+            name: 'order',
+            prefix: 'order',
+            values: VALUES,
+            appliesTo: ['column'],
+            labelKey: 'utility.order',
+            label: label,
+            preview: function(value) {
+                return { order: rank(value) };
+            },
+        }],
+
+        drawerTools: function(drawer, node, kind) {
+            if (!options.drawer || kind !== 'column') { return; }
+
+            ge.createTool(drawer, ge.t('tool.order_earlier'), 'ge-order-earlier', 'bi bi-chevron-left', function() {
+                move(node, -1);
+            });
+            ge.createTool(drawer, ge.t('tool.order_later'), 'ge-order-later', 'bi bi-chevron-right', function() {
+                move(node, 1);
+            });
+        },
+
+        // init runs again whenever a node is added, without a deinit
+        // between, so the listener is replaced rather than stacked
+        onInit: function() {
+            ge.canvas.off('grideditor:after-move.ge-order').on('grideditor:after-move.ge-order', afterMove);
+        },
+
+        onRefresh: mark,
+
+        onDeinit: function() {
+            ge.canvas.off('grideditor:after-move.ge-order');
+            ge.canvas.find('[data-ge-order]').removeAttr('data-ge-order');
+        },
+    };
+};
+
+})(jQuery);