@themarioga/grid-editor 4.0.0 → 5.0.0

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

@@ -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;
@@ -207,6 +215,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 {
@@ -237,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;
             }
@@ -293,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;
@@ -567,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;
@@ -617,3 +740,179 @@
 }
 
 .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));
+        }
+    }
+}
+
+/* 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();