@themarioga/grid-editor 4.0.0 → 4.1.0

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

@@ -0,0 +1,299 @@
+/**
+ * Spacing for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and every row, column,
+ * element and container can have its padding and margin set per breakpoint,
+ * with Bootstrap's p-{breakpoint}-*, pt-, px- … and m-{breakpoint}-*, mt-, mx-
+ * … 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.spacing.min.js"></script>
+ *
+ * Fourteen families would be fourteen fields, so the panel has two, padding
+ * and margin, each a choice of side and a value for that side.
+ *
+ * utilities.spacing.values narrows the values offered, and
+ * utilities.spacing.scale is what 0 to 5 come to, for a page that changed
+ * Bootstrap's $spacers.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.padding': 'Padding',
+    'utility.margin': 'Margin',
+    'utility.side_all': 'All sides',
+    'utility.side_x': 'Left and right',
+    'utility.side_y': 'Top and bottom',
+    'utility.side_t': 'Top',
+    'utility.side_b': 'Bottom',
+    'utility.side_s': 'Start',
+    'utility.side_e': 'End',
+    'utility.spacing_gutter': 'A column\'s side padding is its gutter: changing it changes the gutter',
+});
+
+var VALUES = ['0', '1', '2', '3', '4', '5'];
+
+/** Bootstrap's $spacers. */
+var SCALE = ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'];
+
+/**
+ * The sides, in the order Bootstrap's css writes their rules: within one
+ * breakpoint a later rule wins, so p-3 pt-1 has a top of .25rem.
+ */
+var SIDES = ['', 'x', 'y', 't', 'e', 'b', 's'];
+
+/** What each side sets. Start and end are left and right: Bootstrap's css is left to right. */
+var SET = {
+    '': ['top', 'right', 'bottom', 'left'],
+    x: ['left', 'right'],
+    y: ['top', 'bottom'],
+    t: ['top'],
+    e: ['right'],
+    b: ['bottom'],
+    s: ['left'],
+};
+
+var INFIXES = ['', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+var PROPERTIES = { p: 'padding', m: 'margin' };
+
+/** Every class of the plugin's, padding or margin. */
+function pattern(key) {
+    return new RegExp('^' + key + '[xytbse]?-(?:(?:sm|md|lg|xl|xxl)-)?(?:[0-5]|auto)$');
+}
+
+$.fn.gridEditor.utilities.spacing = function(ge) {
+
+    var options = $.extend({ values: VALUES, scale: SCALE }, ge.settings.utilities.spacing);
+    var patterns = { p: pattern('p'), m: pattern('m') };
+
+    function applies(node, kind) {
+        return kind === 'row' || kind === 'column' || kind === 'element' ||
+            node.is('[data-ge-container]');
+    }
+
+    function classes(node) {
+        return (node.attr('class') || '').split(/\s+/);
+    }
+
+    function carries(node, key) {
+        return classes(node).some(function(name) { return patterns[key].test(name); });
+    }
+
+    /**
+     * The class of one family that decides a side at a breakpoint: the
+     * widest breakpoint up to it that has one, as { tier, value }.
+     */
+    function source(node, family, tier) {
+        var names = classes(node);
+        var values = family.charAt(0) === 'm' ? VALUES.concat(['auto']) : VALUES;
+
+        for (var i = tier; i >= 0; i--) {
+            for (var v = 0; v < values.length; v++) {
+                var name = family + (INFIXES[i] ? '-' + INFIXES[i] : '') + '-' + values[v];
+                if (names.indexOf(name) !== -1) { return { tier: i, value: values[v] }; }
+            }
+        }
+
+        return null;
+    }
+
+    /**
+     * What padding or margin is on each side with none of the plugin's
+     * classes: the editor's frame for a row or a column, the host's css
+     * for anything else. Read by taking the classes off for a moment,
+     * since that is the only way to ask the browser.
+     */
+    function without(node, key) {
+        var original = node.attr('class');
+        var style;
+        var bare = {};
+
+        node.attr('class', classes(node).filter(function(name) { return !patterns[key].test(name); }).join(' '));
+        style = getComputedStyle(node[0]);
+        ['top', 'right', 'bottom', 'left'].forEach(function(side) {
+            bare[side] = style.getPropertyValue(PROPERTIES[key] + '-' + side);
+        });
+        node.attr('class', original);
+
+        return bare;
+    }
+
+    /**
+     * Each side the way Bootstrap's css settles it: the class from the
+     * widest breakpoint wins, and within one breakpoint the side written
+     * later in the css. A side no class reaches shows what it is without
+     * any, over a wider breakpoint's class that is live in a wide window.
+     */
+    function sides(node, key, breakpoint) {
+        var tier = ge.breakpoints.indexOf(breakpoint);
+        var winners = {};
+        var styles = {};
+        var neutral = null;
+
+        SIDES.forEach(function(side, order) {
+            var found = source(node, key + side, tier);
+            if (!found) { return; }
+
+            SET[side].forEach(function(set) {
+                var current = winners[set];
+                if (!current || found.tier > current.tier || (found.tier === current.tier && order > current.order)) {
+                    winners[set] = { tier: found.tier, order: order, value: found.value };
+                }
+            });
+        });
+
+        ['top', 'right', 'bottom', 'left'].forEach(function(set) {
+            var winner = winners[set];
+
+            if (!winner) {
+                neutral = neutral || without(node, key);
+                styles[PROPERTIES[key] + '-' + set] = neutral[set];
+            } else {
+                styles[PROPERTIES[key] + '-' + set] = winner.value === 'auto' ? 'auto' : options.scale[winner.value];
+            }
+        });
+
+        return styles;
+    }
+
+    /** The side a group's select starts on: the first that has a class, or all. */
+    function startingSide(node, key) {
+        var names = classes(node).filter(function(name) { return patterns[key].test(name); });
+        var found = SIDES.filter(function(side) {
+            return names.some(function(name) { return name.indexOf(key + side + '-') === 0; });
+        });
+
+        return found.length ? found[0] : '';
+    }
+
+    function sideLabel(side) {
+        switch (side) {
+            case 'x': return ge.t('utility.side_x');
+            case 'y': return ge.t('utility.side_y');
+            case 't': return ge.t('utility.side_t');
+            case 'b': return ge.t('utility.side_b');
+            case 's': return ge.t('utility.side_s');
+            case 'e': return ge.t('utility.side_e');
+            default: return ge.t('utility.side_all');
+        }
+    }
+
+    /** 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" />');
+
+        $('<span class="ge-utility-label" />').text(labelText).appendTo(box);
+
+        SIDES.forEach(function(value) {
+            $('<option />').attr('value', value).text(sideLabel(value)).appendTo(side);
+        });
+
+        var field = ge.utilityField(node, key + startingSide(node, key));
+
+        side.val(field.attr('data-ge-family').slice(1))
+            .on('change', function() {
+                var next = ge.utilityField(node, key + this.value);
+                field.replaceWith(next);
+                field = next;
+            })
+            .appendTo(box)
+        ;
+        field.appendTo(box);
+
+        return box;
+    }
+
+    var NODES = '.row, .column, .ge-element, [data-ge-container]';
+
+    /**
+     * Keep each drawer on its node's edges. A drawer is pulled out over the
+     * editor's frame by as much as the frame pads the node, and a padding
+     * class replaces the frame, so a padded node's drawer is pulled out by
+     * its real padding instead. And a column padded at the sides gets a word
+     * about what that does to its gutter.
+     */
+    function mark(scope) {
+        scope.find(NODES).addBack(NODES).each(function() {
+            var node = $(this);
+            var drawer = node.children('.ge-tools-drawer');
+
+            if (!drawer.length || !applies(node, ge.kindOf(node))) { return; }
+
+            if (carries(node, 'p')) {
+                var style = getComputedStyle(node[0]);
+
+                drawer.css({
+                    marginTop: '-' + style.paddingTop,
+                    marginLeft: '-' + style.paddingLeft,
+                    marginRight: '-' + style.paddingRight,
+                    width: 'calc(100% + ' + style.paddingLeft + ' + ' + style.paddingRight + ')',
+                });
+            } else {
+                drawer.css({ marginTop: '', marginLeft: '', marginRight: '', width: '' });
+            }
+
+            if (node.hasClass('column')) {
+                drawer.find('.ge-spacing-gutter').toggle(classes(node).some(function(name) {
+                    return /^p[xse]?-/.test(name) && patterns.p.test(name);
+                }));
+            }
+        });
+    }
+
+    function families(key, labelKey) {
+        var values = key === 'm' ? VALUES.concat(['auto']) : VALUES;
+        var offered = options.values.concat(key === 'm' ? ['auto'] : []);
+
+        return SIDES.map(function(side) {
+            return {
+                name: key + side,
+                prefix: key + side,
+                values: values,
+                appliesTo: ['row', 'column', 'element', 'container'],
+                labelKey: labelKey,
+                panel: false,
+                choices: function() {
+                    return values.filter(function(value) { return offered.indexOf(value) !== -1; });
+                },
+            };
+        });
+    }
+
+    return {
+        families: families('p', 'utility.padding').concat(families('m', 'utility.margin')),
+
+        panel: function(node, kind) {
+            if (!applies(node, kind)) { return null; }
+
+            var box = $('<div class="ge-spacing" />')
+                .append(group(node, 'p', ge.t('utility.padding')))
+                .append(group(node, 'm', ge.t('utility.margin')))
+            ;
+
+            if (kind === 'column') {
+                $('<small class="ge-spacing-gutter" />').text(ge.t('utility.spacing_gutter')).appendTo(box);
+            }
+
+            return box;
+        },
+
+        preview: function(node, kind, breakpoint) {
+            if (!applies(node, kind)) { return {}; }
+
+            var styles = {};
+
+            ['p', 'm'].forEach(function(key) {
+                if (carries(node, key)) { $.extend(styles, sides(node, key, breakpoint)); }
+            });
+
+            return styles;
+        },
+
+        onRefresh: mark,
+    };
+};
+
+})(jQuery);

package/src/js/plugins/grideditor.visibility.js

@@ -0,0 +1,172 @@
+/**
+ * Visibility for grid-editor.
+ *
+ * A utility plugin: load this file after the editor and every row, column,
+ * element and container can be hidden at some breakpoints and shown at
+ * others, with Bootstrap's d-{breakpoint}-none and d-{breakpoint}-block (or
+ * -flex, for a row, which is a flex container and stops being a grid as a
+ * block). 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.visibility.min.js"></script>
+ *
+ * A hidden node is never hidden from the editor, which would leave nothing to
+ * click to show it again. It stays on the canvas, faded and striped in a view
+ * where it is hidden, and in the all view says at which breakpoints it is.
+ *
+ * utilities.visibility.drawer: false leaves the eye out of the drawers, and
+ * the panel field is the only control.
+ */
+(function($) {
+
+$.extend($.fn.gridEditor.locales.en, {
+    'utility.visibility': 'Visibility',
+    'utility.visibility_hidden': 'Hidden',
+    'utility.visibility_shown': 'Shown',
+    'tool.hide_in_view': 'Hide in this view',
+    'tool.show_in_view': 'Show in this view',
+    'badge.hidden_in': 'Hidden at {breakpoints}',
+});
+
+/** A node that carries any class of the family, at any breakpoint. */
+var CLASS_PATTERN = /(?:^|\s)d-(?:(?:sm|md|lg|xl|xxl)-)?(?:none|block|flex)(?:\s|$)/;
+
+var NODES = '.row, .column, .ge-element, [data-ge-container]';
+
+$.fn.gridEditor.utilities.visibility = function(ge) {
+
+    var options = $.extend({ drawer: true }, ge.settings.utilities.visibility);
+
+    /** What "shown" is written as on this kind of node. */
+    function shown(kind) {
+        return kind === 'row' ? 'flex' : 'block';
+    }
+
+    function applies(node, kind) {
+        return kind === 'row' || kind === 'column' || kind === 'element' ||
+            node.is('[data-ge-container]');
+    }
+
+    function hiddenAt(node, view) {
+        return ge.getUtility(node, 'visibility', view) === 'none';
+    }
+
+    /** The breakpoints at which the node is hidden, smallest first. */
+    function hiddenTiers(node) {
+        return ge.breakpoints.filter(function(key) { return hiddenAt(node, key); });
+    }
+
+    /**
+     * Whether the node is hidden in the view being edited. In the all view
+     * that means hidden at every breakpoint, since "hidden at some" is what
+     * the badge is for.
+     */
+    function hiddenHere(node) {
+        return ge.view() === 'all'
+            ? hiddenTiers(node).length === ge.breakpoints.length
+            : hiddenAt(node, ge.view());
+    }
+
+    /** What the breakpoint below the view shows, which an inherit falls back to. */
+    function hiddenBelow(node) {
+        var index = ge.breakpoints.indexOf(ge.view());
+
+        return index > 0 && hiddenAt(node, ge.breakpoints[index - 1]);
+    }
+
+    /**
+     * Hide or show the node in the view being edited, with as few classes as
+     * that takes. In a breakpoint view that is often none at all: showing a
+     * node the breakpoint below shows removes this breakpoint's d-*-none
+     * rather than writing a d-*-block on top of it. In the all view a node
+     * is hidden everywhere or shown everywhere, and shown is no class.
+     */
+    function toggle(node, kind) {
+        var hide = !hiddenHere(node);
+        var value;
+
+        if (ge.view() === 'all') {
+            value = hide ? 'none' : null;
+        } else if (hide) {
+            value = hiddenBelow(node) ? null : 'none';
+        } else {
+            value = hiddenBelow(node) ? shown(kind) : null;
+        }
+
+        ge.setUtility(node, 'visibility', value, { source: 'tool' });
+    }
+
+    /**
+     * The canvas shows each node as the view sees it. ge-visibility keeps a
+     * node Bootstrap would hide on the canvas, ge-hidden-in-view fades it,
+     * and data-ge-hidden-in carries the badge text for the all view.
+     */
+    function mark(scope) {
+        scope.find(NODES).addBack(NODES).each(function() {
+            var node = $(this);
+            var kind = ge.kindOf(node);
+            var carries = applies(node, kind) && CLASS_PATTERN.test(node.attr('class') || '');
+            var tiers = carries ? hiddenTiers(node) : [];
+            var here = carries && hiddenHere(node);
+            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
+
+            node.toggleClass('ge-visibility', carries).toggleClass('ge-hidden-in-view', here);
+
+            if (partly) {
+                node.attr('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
+            } else {
+                node.removeAttr('data-ge-hidden-in');
+            }
+
+            node.children('.ge-tools-drawer').children('.ge-visibility-tool').each(function() {
+                $(this)
+                    .attr('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'))
+                    .find('i').attr('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+            });
+        });
+    }
+
+    function unmark() {
+        ge.canvas.find('.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').each(function() {
+            var node = $(this)
+                .removeClass('ge-visibility ge-hidden-in-view')
+                .removeAttr('data-ge-hidden-in')
+            ;
+
+            if (!node.attr('class')) { node.removeAttr('class'); }
+        });
+    }
+
+    return {
+        families: [{
+            name: 'visibility',
+            prefix: 'd',
+            values: ['none', 'block', 'flex'],
+            appliesTo: ['row', 'column', 'element', 'container'],
+            labelKey: 'utility.visibility',
+
+            /** Hidden, or shown the way this kind of node is shown. */
+            choices: function(node, kind) {
+                return ['none', shown(kind)];
+            },
+
+            label: function(value) {
+                return value === 'none' ? ge.t('utility.visibility_hidden') : ge.t('utility.visibility_shown');
+            },
+        }],
+
+        drawerTools: function(drawer, node, kind) {
+            if (!options.drawer || !applies(node, kind)) { return; }
+
+            ge.createTool(drawer, ge.t('tool.hide_in_view'), 'ge-visibility-tool', 'bi bi-eye', function() {
+                toggle(node, kind);
+            });
+        },
+
+        onRefresh: mark,
+        onDeinit: unmark,
+    };
+};
+
+})(jQuery);

package/src/less/grideditor.less

@@ -207,6 +207,83 @@
             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 {
@@ -617,3 +694,93 @@
 }
 
 .ge-layout-modes();
+
+/*
+ * The visibility plugin. A node Bootstrap would hide is kept on the canvas -
+ * there would be nothing left to click to show it again - and shown the way
+ * the view sees it instead. The selectors outweigh Bootstrap's d-* classes,
+ * which are !important too.
+ */
+.ge-canvas.ge-editing {
+    .ge-visibility {
+        display: block !important;
+    }
+    .row.ge-visibility {
+        display: flex !important;
+    }
+
+    .ge-hidden-in-view {
+        opacity: .45;
+        background-image: repeating-linear-gradient(
+            -45deg, transparent 0, transparent 6px, rgba(0, 0, 0, .07) 6px, rgba(0, 0, 0, .07) 12px
+        );
+    }
+
+    /* The all view: hidden at some breakpoints, said in a corner */
+    [data-ge-hidden-in] {
+        position: relative;
+
+        &::after {
+            content: attr(data-ge-hidden-in);
+            position: absolute;
+            right: 2px;
+            bottom: 2px;
+            z-index: 1;
+            padding: 0 4px;
+            border-radius: 3px;
+            background: rgba(0, 0, 0, .6);
+            color: #fff;
+            font-size: 10px;
+            line-height: 16px;
+            pointer-events: none;
+        }
+    }
+}
+
+/* The order plugin: a column ordered by class in this view says where */
+.ge-canvas.ge-editing .column[data-ge-order]::before {
+    content: attr(data-ge-order);
+    position: absolute;
+    left: 2px;
+    bottom: 2px;
+    z-index: 1;
+    padding: 0 4px;
+    border-radius: 3px;
+    background: fade(@colTextColor, 85%);
+    color: #fff;
+    font-size: 10px;
+    line-height: 16px;
+    pointer-events: none;
+}
+
+/*
+ * The gutters plugin. A row with gutter classes is drawn with its real
+ * gutters rather than the editor's frame: each column padded by half the
+ * horizontal gutter, and the vertical gutter above each column. Bootstrap
+ * takes the first line's back with a negative top margin on the row, which
+ * here would pull it over the row above, so the row's drawer takes it back
+ * instead and the gap shows between lines of columns only.
+ */
+.ge-canvas.ge-editing .row.ge-gutters {
+    margin-top: 0;
+
+    > .ge-tools-drawer {
+        margin-top: 0;
+        margin-bottom: calc(@editGutter - var(--bs-gutter-y));
+        /* Bootstrap pads every child of a row by half its gutter, the drawer
+           too; it keeps the padding a row with no gutter class gives it */
+        padding-left: .75rem;
+        padding-right: .75rem;
+    }
+
+    > .column {
+        padding-left: calc(var(--bs-gutter-x) * .5);
+        padding-right: calc(var(--bs-gutter-x) * .5);
+
+        > .ge-tools-drawer {
+            margin-left: calc(var(--bs-gutter-x) * -.5);
+            margin-right: calc(var(--bs-gutter-x) * -.5);
+            width: calc(100% + var(--bs-gutter-x));
+        }
+    }
+}