@themarioga/grid-editor 8.8.1 → 8.9.0

package/src/less/grideditor.less

@@ -585,6 +585,65 @@
     --bs-offcanvas-height: 60vh;
 }
 
+/* The sidebar: always there while editing, with the page making room for it
+   (html.ge-sidebar-open) where the window is wide enough. Narrower than
+   Bootstrap's sm it covers the page instead. */
+.ge-settings-sidebar {
+    --bs-offcanvas-width: 340px;
+
+    .ge-sidebar-empty {
+        margin: 0;
+        color: var(--bs-secondary-color, #6c757d);
+    }
+}
+
+html.ge-sidebar-open {
+    padding-right: 340px;
+}
+
+/* On the panel's left edge, centred; folded away, on the window's right edge.
+   Its own element, so the panel can slide out from under it. */
+.ge-sidebar-toggle {
+    position: fixed;
+    top: 50%;
+    right: 340px;
+    z-index: 1045;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 3rem;
+    padding: 0;
+    transform: translateY(-50%);
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    border-right: 0;
+    border-radius: 0.375rem 0 0 0.375rem;
+    background: var(--bs-body-bg, #fff);
+    color: var(--bs-body-color, #212529);
+    transition: right 0.3s ease-in-out;
+
+    &[aria-expanded="false"] {
+        right: 0;
+    }
+}
+
+.ge-sidebar-toggle.ge-under-dialog {
+    z-index: 1040;
+}
+
+@media (max-width: 575.98px) {
+    .ge-settings-sidebar {
+        --bs-offcanvas-width: 100vw;
+    }
+
+    .ge-sidebar-toggle[aria-expanded="true"] {
+        right: calc(100vw - 1.5rem);
+        border: 1px solid var(--bs-border-color, #dee2e6);
+        border-left: 0;
+        border-radius: 0 0.375rem 0.375rem 0;
+    }
+}
+
 .ge-settings-popover {
     /* Popper would position it; without Popper that is the editor's job */
     position: absolute;
@@ -909,10 +968,11 @@
     }
 
     /* A carousel shows one slide, the one Bootstrap's .active says, and the
-       container's drawer moves between them. Bootstrap's arrows and
-       indicators are drawn but the editor's javascript answers, not theirs:
-       a click goes through them to what is under, and a slide is changed
-       with no transition */
+       container's drawer moves between them. Bootstrap's arrows are kept in
+       the markup but not drawn: they would sit over the slide's content and
+       the drawer's already do their work. Its indicators are drawn but the
+       editor's javascript answers, not theirs: a click goes through them to
+       what is under, and a slide is changed with no transition */
     .ge-container-carousel {
         .carousel-inner {
             overflow: visible;
@@ -921,7 +981,9 @@
             transition: none;
         }
         .carousel-control-prev,
-        .carousel-control-next,
+        .carousel-control-next {
+            display: none;
+        }
         .carousel-indicators {
             pointer-events: none;
         }

package/types/grideditor.d.ts

@@ -121,6 +121,18 @@ export interface InlineStyleOptions {
     visibility?: { drawer?: boolean };
 }
 
+/** What the sidebar shows while nothing is selected, instead of its message. */
+export interface SidebarContent {
+    /** Text, not html. Default the sidebar's own title. */
+    title?: string;
+    body: Element;
+}
+
+export interface SidebarSettings {
+    /** Called whenever the sidebar is left with nothing selected. Null gives the message. */
+    empty?: ((ge: GridEditor) => SidebarContent | null) | null;
+}
+
 export type CustomFilter = ((canvas: HTMLElement, isInit: boolean) => void) | string;
 
 /** The settings. Every one is optional. */
@@ -183,7 +195,10 @@ export interface GridEditorOptions {
     locale_strings?: Record<string, string>;
     callbacks?: Partial<GridEditorCallbacks>;
     confirm_delete?: boolean;
-    settings_panel?: 'offcanvas' | 'popover' | 'modal' | 'inline';
+    /** Where a node's settings open. 'sidebar' is a panel that stays on the right while editing, showing the selected node's; one editor per page has it. */
+    settings_panel?: 'offcanvas' | 'popover' | 'modal' | 'inline' | 'sidebar';
+    /** The 'sidebar' panel. */
+    sidebar?: SidebarSettings;
     drag?: { delay?: number; touch_delay?: number; threshold?: number; animation?: number; scroll?: boolean };
     tinymce?: { config?: Record<string, unknown> };
     ckeditor?: { config?: Record<string, unknown> };
@@ -317,6 +332,13 @@ export interface TargetChangePayload {
     from: HTMLElement | null;
 }
 
+/** The selection changed, with settings_panel 'sidebar': the node whose settings the sidebar shows, or null. */
+export interface SelectionChangePayload {
+    canvas: HTMLElement;
+    node: HTMLElement | null;
+    from: HTMLElement | null;
+}
+
 /** The events, by name, with their payloads. Adding fires a specific name and the generic one. */
 export interface GridEditorEventMap {
     'grideditor:before-add': Payload;
@@ -357,6 +379,7 @@ export interface GridEditorEventMap {
     'grideditor:popup-orphan': PopupOrphanPayload;
     'grideditor:view-change': ViewChangePayload;
     'grideditor:target-change': TargetChangePayload;
+    'grideditor:selection-change': SelectionChangePayload;
     'grideditor:after-autosave': AutosavePayload;
     'grideditor:after-restore-draft': RestoreDraftPayload;
     'grideditor:autosave-error': AutosaveErrorPayload;
@@ -468,6 +491,10 @@ export declare class GridEditor {
     getActiveTarget(): HTMLElement | null;
     /** Make a column or region, or the first a selector matches, where the toolbar adds; null for none. */
     setActiveTarget(target: HTMLElement | string | null): this;
+    /** The node whose settings the sidebar shows, or null. Null unless settings_panel is 'sidebar'. */
+    getSelected(): HTMLElement | null;
+    /** Select a node with settings, or the first a selector matches, or null for none. Does nothing unless settings_panel is 'sidebar'. */
+    setSelected(node: HTMLElement | string | null): this;
     getView(): View;
     setLocale(code: string): this;
     createRow(layout?: RowLayout, options?: Placement): HTMLElement | null;