domma-cms 0.39.0 → 0.40.0

package/server/services/menus.js

@@ -81,6 +81,65 @@ export function colourToCss(value) {
     return '';
 }
 
+// ---------------------------------------------------------------------------
+// Floating menus — a menu with position "floating" detaches from the document
+// flow and pins itself to a viewport corner or edge, the same way the
+// breadcrumb trail does. The anchor/offset shape deliberately mirrors
+// site.json's `breadcrumbs` config so the two read alike in the admin.
+//
+// Keep FLOAT_ANCHORS and floatToCss in sync with the copies in
+// public/js/menu-decor.mjs (tests/services/menu-decor-client.test.js asserts it).
+// ---------------------------------------------------------------------------
+export const FLOAT_ANCHORS = new Set(['TL', 'TR', 'BL', 'BR', 'L', 'R']);
+
+export const FLOAT_DEFAULTS = {anchor: 'TL', offsetX: 16, offsetY: 16, zIndex: 150};
+
+function floatNumber(value, fallback, min, max) {
+    const n = Number(value);
+    if (!Number.isFinite(n)) return fallback;
+    return Math.min(max, Math.max(min, Math.round(n)));
+}
+
+/**
+ * Build the inline CSS for a floating menu. Returns '' for any menu that is
+ * not floating, so callers can apply it unconditionally.
+ *
+ * `L` and `R` anchor to the middle of that edge; the four corner anchors use
+ * both offsets. Width is optional and only meaningful for panel-shaped menus
+ * (the admin sidebar); it is ignored when absent.
+ *
+ * @param   {object} menu  A menu record (uses .position and .float)
+ * @returns {string} CSS declarations, semicolon-separated, no trailing ';'
+ */
+export function floatToCss(menu) {
+    if (!menu || menu.position !== 'floating') return '';
+
+    const f      = (menu.float && typeof menu.float === 'object' && !Array.isArray(menu.float)) ? menu.float : {};
+    const anchor = FLOAT_ANCHORS.has(f.anchor) ? f.anchor : FLOAT_DEFAULTS.anchor;
+    const x      = floatNumber(f.offsetX, FLOAT_DEFAULTS.offsetX, 0, 4000);
+    const y      = floatNumber(f.offsetY, FLOAT_DEFAULTS.offsetY, 0, 4000);
+    const z      = floatNumber(f.zIndex,  FLOAT_DEFAULTS.zIndex,  0, 2147483647);
+
+    const decls = ['position:fixed', `z-index:${z}`];
+
+    if (anchor === 'L' || anchor === 'R') {
+        decls.push('top:50%', 'transform:translateY(-50%)');
+        decls.push(anchor === 'L' ? `left:${x}px` : `right:${x}px`);
+    } else {
+        decls.push(anchor[0] === 'T' ? `top:${y}px` : `bottom:${y}px`);
+        decls.push(anchor[1] === 'L' ? `left:${x}px` : `right:${x}px`);
+    }
+
+    if (f.width != null && f.width !== '') {
+        decls.push(`width:${floatNumber(f.width, 260, 120, 600)}px`);
+    }
+
+    // A pinned panel must never grow past the viewport — it scrolls instead.
+    decls.push(`max-height:calc(100vh - ${(anchor === 'L' || anchor === 'R') ? 32 : y * 2}px)`);
+
+    return decls.join(';');
+}
+
 /**
  * Walk a menu tree and resolve live badge counts. For any item whose
  * `badge.countFrom` names a collection, the entry count replaces `badge.text`.
@@ -215,6 +274,7 @@ export async function createMenu(input) {
         ...(input.variant  != null && {variant:  input.variant}),
         ...(input.position != null && {position: input.position}),
         ...(input.appearOnHover != null && {appearOnHover: !!input.appearOnHover}),
+        ...(input.float    != null && {float:    input.float}),
         ...(input.style    != null && {style:    input.style}),
         items: Array.isArray(input.items) ? input.items : [],
         meta: {
@@ -253,6 +313,7 @@ export async function updateMenu(slug, input) {
         ...(input.variant  != null && {variant:  input.variant}),
         ...(input.position != null && {position: input.position}),
         ...(input.appearOnHover != null && {appearOnHover: !!input.appearOnHover}),
+        ...(input.float    != null && {float:    input.float}),
         ...(input.style    != null && {style:    input.style}),
         items: Array.isArray(input.items) ? input.items : [],
         meta: {
@@ -333,6 +394,21 @@ export function validateMenu(menu) {
     if (menu.position != null && !POSITIONS.has(menu.position)) {
         errors.push(`Invalid position "${menu.position}" — expected one of: ${[...POSITIONS].join(', ')}`);
     }
+    if (menu.float != null) {
+        if (typeof menu.float !== 'object' || Array.isArray(menu.float)) {
+            errors.push('float must be an object');
+        } else {
+            if (menu.float.anchor != null && !FLOAT_ANCHORS.has(menu.float.anchor)) {
+                errors.push(`float.anchor must be one of: ${[...FLOAT_ANCHORS].join(', ')}`);
+            }
+            for (const key of ['offsetX', 'offsetY', 'width', 'zIndex']) {
+                const v = menu.float[key];
+                if (v != null && v !== '' && !Number.isFinite(Number(v))) {
+                    errors.push(`float.${key} must be a number`);
+                }
+            }
+        }
+    }
     if (!Array.isArray(menu.items)) {
         errors.push('items must be an array');
     } else {

package/server/templates/page.html

@@ -116,7 +116,7 @@
     </script>
 
     <!-- Site initialisation -->
-    <script src="/public/js/site.js?v=20260817-multi-chooser" type="module"></script>
+    <script src="/public/js/site.js?v=20260817-floating-menus" type="module"></script>
     <script src="/public/js/collection-context.js?v=20260722-ctx-cursor" defer></script>
 
     <!-- Interactive Collection Browser (used by [collection] shortcodes with
@@ -124,7 +124,7 @@
     <script src="/public/js/collection-browser.js?v=20260523-browser"></script>
 
     <!-- Core Forms (logic engine must load before renderer) -->
-    <script src="/public/js/form-logic-engine.js?v=20260817-multi-chooser"></script>
+    <script src="/public/js/form-logic-engine.js?v=20260817-transition-speed"></script>
     <script src="/public/js/forms.js?v=20260817-multi-chooser" type="module"></script>
 
     <!-- Core effects runtime -->