domma-cms 0.48.0 → 0.49.1

package/server/services/menuRender.js

@@ -10,7 +10,7 @@
  * Item filtering (visibility, `hidden`), depth capping and badge-count
  * resolution happen before this - callers hand in the items they want drawn.
  */
-import {colourToCss, floatToCss} from './menus.js';
+import {colourToCss, floatToCss, floatBehaviour, spacerSize} from './menus.js';
 
 /** Attribute-safe escaping - mirrors escapeAttr in markdown.js. */
 function esc(str) {
@@ -35,6 +35,11 @@ export function renderMenuItemsAsUl(items) {
     if (!items || !items.length) return '';
     const lis = items.map(it => {
         if (it && it.type === 'separator') return '<li class="dm-menu-sep" role="separator"><hr></li>';
+        // Spacers are blank room, not content - hidden from assistive tech so
+        // they don't read as an empty list item.
+        if (it && it.type === 'spacer') {
+            return `<li class="dm-menu-spacer dm-menu-spacer--${esc(spacerSize(it))}" aria-hidden="true"></li>`;
+        }
         const href  = esc(it.url || '#');
         const text  = esc(it.text || '');
         const child = Array.isArray(it.items) && it.items.length ? renderMenuItemsAsUl(it.items) : '';
@@ -85,6 +90,61 @@ export function buildMenuNav(menu, items, opts = {}) {
         ? ` style="${esc(floatCss)}" data-float-anchor="${esc(menu.float?.anchor || 'TL')}"`
         : '';
 
-    return `<nav class="dm-menu dm-menu--${esc(menu.slug)}${orientClass}${variantClass}${floatClass}${klass}"`
-        + ` data-menu="${esc(menu.slug)}"${floatAttrs}>${renderMenuItemsAsUl(items)}</nav>`;
+    // Panel behaviour - only ever applies where the menu actually floats, so a
+    // shortcode rendered inline (noFloat) never grows a drag handle.
+    const beh        = floatCss ? floatBehaviour(menu) : floatBehaviour(null);
+    const behAttrs   = [
+        beh.collapsible && ' data-float-collapsible="1"',
+        beh.movable     && ' data-float-movable="1"',
+        beh.resizable   && ' data-float-resizable="1"'
+    ].filter(Boolean).join('');
+    // The author's default state is stamped as a class, not left to JS, so a
+    // panel that starts collapsed never flashes open on first paint.
+    const collapsedClass = beh.collapsed ? ' is-collapsed' : '';
+
+    const flexClass = hasFlexSpacer(items) ? ' dm-menu--has-flex-spacer' : '';
+
+    return `<nav class="dm-menu dm-menu--${esc(menu.slug)}${orientClass}${variantClass}${floatClass}${collapsedClass}${flexClass}${klass}"`
+        + ` data-menu="${esc(menu.slug)}"${floatAttrs}${behAttrs}>`
+        + buildFloatChrome(menu, beh)
+        + renderMenuItemsAsUl(items)
+        + `</nav>`;
+}
+
+/** Does this level contain a spacer that soaks up the leftover room? */
+function hasFlexSpacer(items) {
+    return (items || []).some(it => it && it.type === 'spacer' && spacerSize(it) === 'flex');
+}
+
+/**
+ * The bar across the top of a floating panel: drag grip, title, and the
+ * hamburger that collapses the panel down to just that button.
+ *
+ * Returns '' when the menu is neither collapsible nor movable - a plain
+ * floating panel keeps the bare `<ul>` markup it has always had.
+ *
+ * @param   {object} menu
+ * @param   {object} beh   Result of floatBehaviour(menu)
+ * @returns {string}
+ */
+function buildFloatChrome(menu, beh) {
+    if (!beh.chrome) return '';
+
+    const grip = beh.movable
+        ? '<span class="dm-menu-float-grip" aria-hidden="true"></span>'
+        : '';
+    const title = beh.title
+        ? `<span class="dm-menu-float-title">${esc(beh.title)}</span>`
+        : '';
+    // No aria-expanded here: sanitize-html strips aria attributes from the
+    // `[menu]` shortcode path, so menu-float.js stamps the ARIA state on init
+    // and keeps it in step from then on.
+    const toggle = beh.collapsible
+        ? `<button type="button" class="dm-menu-float-toggle" data-float-toggle`
+          + ` aria-label="${esc(beh.title ? `Toggle ${beh.title}` : 'Toggle menu')}">`
+          + `<span class="dm-menu-float-icon" data-icon="bars"></span></button>`
+        : '';
+
+    return `<div class="dm-menu-float-bar"${beh.movable ? ' data-float-handle' : ''}>`
+        + `${grip}${title}${toggle}</div>`;
 }

package/server/services/menus.js

@@ -184,6 +184,48 @@ export function floatToCss(menu) {
     return decls.join(';');
 }
 
+// ---------------------------------------------------------------------------
+// Floating panel behaviour - collapse to a hamburger, drag to move, resize.
+//
+// These are behaviour flags rather than CSS: `floatToCss` still owns where the
+// panel starts, and `menu-float.js` owns what the visitor can then do to it.
+// The server needs them at render time to emit the panel chrome (title bar and
+// toggle button), so they resolve here and are mirrored in menu-decor.mjs.
+//
+// A visitor's own drag/size/collapse state lives in their browser, keyed by
+// menu slug - the config below is only ever the starting point.
+// ---------------------------------------------------------------------------
+export const FLOAT_FLAGS = ['collapsible', 'collapsed', 'movable', 'resizable'];
+
+/**
+ * Resolve a floating menu's behaviour flags, plus whether it needs the chrome
+ * bar drawn at all. Returns all-false for a menu that is not floating, so a
+ * `[menu]` shortcode rendered inline never grows a drag handle.
+ *
+ * `title` is what the bar shows: the author's override, else the menu name.
+ *
+ * @param   {object} menu  A menu record (uses .position, .float, .name)
+ * @returns {{collapsible: boolean, collapsed: boolean, movable: boolean,
+ *            resizable: boolean, chrome: boolean, title: string}}
+ */
+export function floatBehaviour(menu) {
+    const off = {collapsible: false, collapsed: false, movable: false, resizable: false, chrome: false, title: ''};
+    if (!menu || menu.position !== 'floating') return off;
+
+    const f = (menu.float && typeof menu.float === 'object' && !Array.isArray(menu.float)) ? menu.float : {};
+    const flags = {
+        collapsible: !!f.collapsible,
+        collapsed:   !!f.collapsible && !!f.collapsed,
+        movable:     !!f.movable,
+        resizable:   !!f.resizable
+    };
+    // The bar carries the toggle and doubles as the drag handle; a menu that
+    // can only be resized needs no bar - the UA resize grip is enough.
+    const chrome = flags.collapsible || flags.movable;
+    const title  = typeof f.title === 'string' && f.title !== '' ? f.title : (menu.name || '');
+    return {...flags, chrome, title: chrome ? title : ''};
+}
+
 // ---------------------------------------------------------------------------
 // Orientation - how the menu flows where it renders. `horizontal` is the
 // historic behaviour and stays the default for every menu without the field.
@@ -193,6 +235,23 @@ export function floatToCss(menu) {
 // `side` only means anything for a vertical menu in the navbar slot - it picks
 // the viewport edge the rail docks to.
 // ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// Spacer items - `{type: 'spacer'}`, the sibling of `{type: 'separator'}`.
+//
+// A separator draws a line; a spacer draws nothing and just takes up room. The
+// fixed sizes map to the theme's spacing tokens so a spacer scales with the
+// rest of the UI. `flex` is the interesting one: it soaks up all the leftover
+// room, which is how you push the items after it to the far end of a navbar or
+// down to the foot of a vertical rail.
+// ---------------------------------------------------------------------------
+export const SPACER_SIZES = new Set(['xs', 'sm', 'md', 'lg', 'xl', 'flex']);
+export const SPACER_DEFAULT_SIZE = 'md';
+
+/** A spacer's size, defaulted and validated. */
+export function spacerSize(item) {
+    return SPACER_SIZES.has(item?.size) ? item.size : SPACER_DEFAULT_SIZE;
+}
+
 export const ORIENTATIONS = new Set(['horizontal', 'vertical']);
 export const SIDES        = new Set(['left', 'right']);
 
@@ -260,7 +319,7 @@ export async function resolveMenuDecorations(items, opts = {}) {
 
     async function walk(list) {
         return Promise.all((list || []).map(async (it) => {
-            if (!it || it.type === 'separator') return it;
+            if (!it || it.type === 'separator' || it.type === 'spacer') return it;
             const next = {...it};
             if (it.badge && it.badge.countFrom) {
                 try {
@@ -591,6 +650,15 @@ export function validateMenu(menu) {
             if (menu.float.accent != null && menu.float.accent !== '' && !isValidColour(menu.float.accent)) {
                 errors.push('float.accent must be a preset key or #rrggbb');
             }
+            for (const key of FLOAT_FLAGS) {
+                const v = menu.float[key];
+                if (v != null && typeof v !== 'boolean') {
+                    errors.push(`float.${key} must be true or false`);
+                }
+            }
+            if (menu.float.title != null && typeof menu.float.title !== 'string') {
+                errors.push('float.title must be a string');
+            }
         }
     }
     if (!Array.isArray(menu.items)) {
@@ -601,6 +669,14 @@ export function validateMenu(menu) {
             // Renderers translate them into <hr> / structural breaks.
             if (item && item.type === 'separator') return;
 
+            // Spacers are blank room, likewise with nothing to point at.
+            if (item && item.type === 'spacer') {
+                if (item.size != null && !SPACER_SIZES.has(item.size)) {
+                    errors.push(`Item ${path}: spacer size must be one of: ${[...SPACER_SIZES].join(', ')}`);
+                }
+                return;
+            }
+
             if (!item.text || typeof item.text !== 'string') {
                 errors.push(`Item ${path}: text is required`);
             }

package/server/templates/page.html

@@ -119,6 +119,11 @@
     <script src="/public/js/site.js?v=20260829-motion-toggle" type="module"></script>
     <script src="/public/js/collection-context.js?v=20260819-export" type="module"></script>
 
+    <!-- Floating menu panels: collapse to a hamburger, drag to move, resize.
+         Loaded here rather than from site.js so server-rendered overlays and
+         [menu] shortcodes are wired even on pages with no floating navbar. -->
+    <script src="/public/js/menu-float.js?v=20260829-float-panel" type="module"></script>
+
     <!-- Interactive Collection Browser (used by [collection] shortcodes with
          searchable / filterable / sortable / paginate attributes) -->
     <script src="/public/js/collection-browser.js?v=20260523-browser"></script>