@themarioga/grid-editor 7.2.0 → 7.3.0

package/src/js/style/visibility.js

@@ -0,0 +1,160 @@
+/**
+ * Visibility, a part of the style plugin: hiding and showing per breakpoint, with Bootstrap's d-{breakpoint}-none
+ * and d-{breakpoint}-block or -flex classes, and the eye in the drawers.
+ *
+ * The part is what the visibility plugin was up to 7.2 - its families, and
+ * whatever it did on the canvas - as a function of the handle and its options.
+ * grideditor.style.js puts it in its sections; the deprecated
+ * grideditor.visibility.js still registers it on its own, as it always did.
+ */
+import { GridEditor } from '../grideditor.js';
+import * as dom from '../dom.js';
+
+Object.assign(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-content, .ge-element, [data-ge-container]';
+
+export function visibilityPart(ge, given) {
+
+    var options = Object.assign({ drawer: true }, given);
+
+    /** 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' || kind === 'text' || kind === 'plain' ||
+            dom.is(node, '[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) {
+        dom.selfAndAll(scope, NODES).forEach(function(node) {
+            var kind = ge.kindOf(node);
+            var carries = applies(node, kind) && CLASS_PATTERN.test(node.getAttribute('class') || '');
+            var tiers = carries ? hiddenTiers(node) : [];
+            var here = carries && hiddenHere(node);
+            var partly = carries && ge.view() === 'all' && tiers.length > 0 && !here;
+
+            dom.toggleClass(node, 'ge-visibility', carries);
+            dom.toggleClass(node, 'ge-hidden-in-view', here);
+
+            if (partly) {
+                node.setAttribute('data-ge-hidden-in', ge.t('badge.hidden_in', { breakpoints: tiers.join(', ') }));
+            } else {
+                node.removeAttribute('data-ge-hidden-in');
+            }
+
+            dom.children(node, '.ge-tools-drawer').forEach(function(drawer) {
+                dom.children(drawer, '.ge-visibility-tool').forEach(function(tool) {
+                    tool.setAttribute('title', here ? ge.t('tool.show_in_view') : ge.t('tool.hide_in_view'));
+                    dom.all(tool, 'i').forEach(function(icon) {
+                        icon.setAttribute('class', here ? 'bi bi-eye-slash' : 'bi bi-eye');
+                    });
+                });
+            });
+        });
+    }
+
+    function unmark() {
+        dom.all(ge.canvas, '.ge-visibility, .ge-hidden-in-view, [data-ge-hidden-in]').forEach(function(node) {
+            dom.removeClass(node, 'ge-visibility ge-hidden-in-view');
+            node.removeAttribute('data-ge-hidden-in');
+            dom.dropEmptyClass(node);
+        });
+    }
+
+    return {
+        families: [{
+            name: 'visibility',
+            prefix: 'd',
+            values: ['none', 'block', 'flex'],
+            appliesTo: ['row', 'column', 'text', '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,
+    };
+}

package/src/less/grideditor.less

@@ -330,6 +330,117 @@
     }
 }
 
+/* A settings panel the dialog was opened from waits under its backdrop:
+   Bootstrap's popover would sit over the modal */
+.ge-settings-panel.ge-under-dialog {
+    z-index: 1040;
+}
+
+/* What plugins add to a panel, between its general fields and Responsive.
+   In a popover or inline, a button that opens it in the dialog. */
+.ge-details .ge-panel-section {
+    margin-top: 10px;
+}
+
+/* The style plugin's accordion: in a panel, or in the dialog, which is
+   outside any panel, so it carries the look of the fields it shares. */
+.ge-style {
+    font-size: 0.8125rem;
+
+    .accordion-button {
+        padding: 6px 10px;
+        font-size: 0.8125rem;
+        font-weight: 500;
+    }
+    .accordion-body {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 8px 10px;
+    }
+
+    .ge-style-label,
+    .ge-utility-label,
+    .ge-style-shadow-label {
+        color: var(--bs-secondary-color, #6c757d);
+        font-size: 0.75rem;
+    }
+    .ge-style-note,
+    .ge-utility-note,
+    .ge-spacing-gutter {
+        color: var(--bs-secondary-color, #666);
+        font-size: 0.6875rem;
+    }
+
+    .ge-style-fields,
+    .ge-spacing {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 8px 10px;
+    }
+    .ge-style-field,
+    .ge-utility,
+    .ge-spacing-group {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+    }
+    .ge-spacing-group .ge-utility > .ge-utility-label {
+        display: none;
+    }
+    .ge-spacing-gutter {
+        grid-column: 1 / -1;
+    }
+
+    .ge-style-color .form-control-color {
+        flex: 0 0 2.25rem;
+        padding: 2px;
+    }
+
+    .ge-style-shadow,
+    .ge-style-field:has(.ge-style-shadow) {
+        grid-column: 1 / -1;
+    }
+    .ge-style-shadow-builder {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+        gap: 4px 8px;
+        align-items: end;
+    }
+    .ge-style-shadow-part {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin: 0;
+    }
+    .ge-style-shadow-color {
+        grid-column: span 2;
+    }
+    .ge-style-shadow-mode {
+        display: inline-block;
+        margin-top: 2px;
+        font-size: 0.6875rem;
+    }
+
+    .ge-style-catalog {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+    .ge-style-chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 3px;
+    }
+    .ge-style-chip {
+        --bs-btn-padding-y: 0;
+        --bs-btn-padding-x: 6px;
+        --bs-btn-font-size: 0.6875rem;
+        font-family: var(--bs-font-monospace, monospace);
+    }
+}
+
 /* In a drawer it is part of the drawer, compact */
 .ge-tools-drawer > .ge-details {
     font-size: 11px;

package/types/grideditor.d.ts

@@ -53,6 +53,22 @@ export interface PresetClass {
 }
 
 /** A content filter: run on init and deinit with the canvas. A string names a function on window. */
+/** A section of the style plugin's accordion. */
+export type StyleSectionKey = 'size' | 'spacing' | 'border' | 'background' | 'text' | 'typography' | 'display' | 'position' | 'custom';
+
+/** A section on or off, or on with some of its properties and without its catalog. */
+export type StyleSection = boolean | { properties?: string[]; catalog?: boolean };
+
+/** The style plugin's settings. */
+export interface StyleOptions {
+    /** Every section is on unless it is turned off here. */
+    sections?: Partial<Record<StyleSectionKey, StyleSection>>;
+    /** What utilities.spacing was: the values offered, and what 0 to 5 come to. */
+    spacing?: { values?: string[]; scale?: string[] };
+    /** What utilities.visibility was: false leaves the eye out of the drawers. */
+    visibility?: { drawer?: boolean };
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -79,6 +95,8 @@ export interface GridEditorOptions {
     content_types?: string[];
     row_cols?: boolean;
     utilities?: Record<string, unknown>;
+    /** The style plugin's sections, and the options of the utilities it carries. */
+    style?: StyleOptions;
     elements?: { enabled?: boolean | 'auto'; selector?: string; auto?: boolean };
     custom_filter?: CustomFilter | CustomFilter[] | '';
     valid_col_sizes?: ColumnSize[];