@schukai/monster 4.43.1 → 4.43.3

package/source/components/navigation/site-navigation.mjs

@@ -12,34 +12,24 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-/**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
- * Node module: @schukai/monster
- *
- * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
- * SPDX-License-Identifier: AGPL-3.0
- */
-
 import {
-  CustomElement,
-  getSlottedElements,
-  registerCustomElement,
-  assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
+	assembleMethodSymbol,
 } from "../../dom/customelement.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { SiteNavigationStyleSheet } from "./stylesheet/site-navigation.mjs";
-// --- NEW: Import Floating UI ---
 import {
-  computePosition,
-  autoUpdate,
-  flip,
-  shift,
-  offset,
-} from "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.6.3/+esm";
+	computePosition,
+	autoUpdate,
+	flip,
+	shift,
+	offset,
+} from "@floating-ui/dom";
 
 export { SiteNavigation };
 
-// Symbols for private class members
 const resizeObserverSymbol = Symbol("resizeObserver");
 const timerCallbackSymbol = Symbol("timerCallback");
 const navElementSymbol = Symbol("navElement");
@@ -48,223 +38,406 @@ const hiddenElementsSymbol = Symbol("hiddenElements");
 const hamburgerButtonSymbol = Symbol("hamburgerButton");
 const hamburgerNavSymbol = Symbol("hamburgerNav");
 const instanceSymbol = Symbol("instanceSymbol");
+const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
 
 /**
- * A responsive site navigation element that automatically moves items
- * that don't fit into a hamburger menu and handles submenus.
+ * Responsive site navigation component.
+ *
+ * @fragments /fragments/components/navigation/site-navigation/
+ *
+ * @example /examples/components/navigation/site-navigation-simple
+ *
+ * @since 4.41.0
+ * @copyright schukai GmbH
+ * @summary Responsive site navigation with hamburger menu and submenus
  */
 class SiteNavigation extends CustomElement {
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/navigation/site@@instance");
-  }
-
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: { main: getTemplate() },
-    });
-  }
-
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    initControlReferences.call(this);
-    initEventHandler.call(this);
-  }
-
-  static getCSSStyleSheet() {
-    return [SiteNavigationStyleSheet];
-  }
-
-  static getTag() {
-    return "monster-site-navigation";
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    attachResizeObserver.call(this);
-    setTimeout(() => populateTabs.call(this), 0);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    detachResizeObserver.call(this);
-  }
+	/**
+	 * Returns a unique symbol for the instance.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/navigation/site@@instance");
+	}
+
+	/**
+	 * Returns the default options for the component.
+	 * @returns {object}
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: { main: getTemplate() },
+		});
+	}
+
+	/**
+	 * Assembles the component and initializes controls and event handlers.
+	 * @returns {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * Returns the CSS stylesheet for the component.
+	 * @returns {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [SiteNavigationStyleSheet];
+	}
+
+	/**
+	 * Returns the custom element tag name.
+	 * @returns {string}
+	 */
+	static getTag() {
+		return "monster-site-navigation";
+	}
+
+	/**
+	 * Called when the component is connected to the DOM.
+	 * @returns {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+		attachResizeObserver.call(this);
+		setTimeout(() => populateTabs.call(this), 0);
+	}
+
+	/**
+	 * Called when the component is disconnected from the DOM.
+	 * @returns {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		detachResizeObserver.call(this);
+	}
 }
 
+/**
+ * Initializes references to important control elements.
+ * @private
+ * @this {SiteNavigation}
+ * @returns {void}
+ */
 function initControlReferences() {
-  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-  this[navElementSymbol] = this.shadowRoot.querySelector(
-    '[data-monster-role="navigation"]',
-  );
-  this[visibleElementsSymbol] =
-    this.shadowRoot.querySelector("#visible-elements");
-  this[hiddenElementsSymbol] =
-    this.shadowRoot.querySelector("#hidden-elements");
-  this[hamburgerButtonSymbol] =
-    this.shadowRoot.querySelector("#hamburger-button");
-  this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
-    '[data-monster-role="hamburger-nav"]',
-  );
+	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+	this[navElementSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="navigation"]',
+	);
+	this[visibleElementsSymbol] =
+		this.shadowRoot.querySelector("#visible-elements");
+	this[hiddenElementsSymbol] =
+		this.shadowRoot.querySelector("#hidden-elements");
+	this[hamburgerButtonSymbol] =
+		this.shadowRoot.querySelector("#hamburger-button");
+	this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="hamburger-nav"]',
+	);
 }
 
+/**
+ * Initializes event handlers for hamburger menu and submenu interactions.
+ * @private
+ * @this {SiteNavigation}
+ * @returns {void}
+ */
 function initEventHandler() {
-  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-  const hamburgerButton = this[hamburgerButtonSymbol];
-  if (hamburgerButton) {
-    hamburgerButton.addEventListener("click", () => {
-      this.classList.toggle("is-open");
-    });
-  }
+	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+
+	const hamburgerButton = this[hamburgerButtonSymbol];
+	const hamburgerNav = this[hamburgerNavSymbol];
+	let cleanup;
+
+	if (!hamburgerButton || !hamburgerNav) return;
+
+	const showMenu = () => {
+		hamburgerNav.style.display = "block";
+		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
+			computePosition(hamburgerButton, hamburgerNav, {
+				placement: "bottom-end",
+				middleware: [offset(8), flip(), shift({ padding: 8 })],
+			}).then(({ x, y }) => {
+				Object.assign(hamburgerNav.style, {
+					left: `${x}px`,
+					top: `${y}px`,
+				});
+			});
+		});
+		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
+	};
+
+	const hideMenu = () => {
+		hamburgerNav.style.display = "none";
+		if (cleanup) {
+			cleanup();
+		}
+		document.removeEventListener("click", handleOutsideClick);
+	};
+
+	const handleOutsideClick = (event) => {
+		if (
+			!hamburgerButton.contains(event.target) &&
+			!hamburgerNav.contains(event.target)
+		) {
+			hideMenu();
+		}
+	};
+
+	hamburgerButton.addEventListener("click", (event) => {
+		event.stopPropagation();
+		const isVisible = hamburgerNav.style.display === "block";
+		if (isVisible) {
+			hideMenu();
+		} else {
+			showMenu();
+		}
+	});
 }
 
+/**
+ * Attaches a ResizeObserver to re-calculate tabs when the component's size changes.
+ * @private
+ * @this {SiteNavigation}
+ * @returns {void}
+ */
 function attachResizeObserver() {
-  this[resizeObserverSymbol] = new ResizeObserver(() => {
-    if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-      try {
-        this[timerCallbackSymbol].touch();
-        return;
-      } catch (e) {
-        delete this[timerCallbackSymbol];
-      }
-    }
-    this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
-      populateTabs.call(this),
-    );
-  });
-  this[resizeObserverSymbol].observe(this[navElementSymbol]);
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
+			populateTabs.call(this),
+		);
+	});
+	this[resizeObserverSymbol].observe(this[navElementSymbol]);
 }
 
+/**
+ * Detaches the ResizeObserver when the component is removed from the DOM.
+ * @private
+ * @this {SiteNavigation}
+ * @returns {void}
+ */
 function detachResizeObserver() {
-  if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-    this[resizeObserverSymbol].disconnect();
-    delete this[resizeObserverSymbol];
-  }
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+		delete this[resizeObserverSymbol];
+	}
 }
 
 /**
- * --- NEW: Function to set up a submenu with Floating UI ---
- * Handles intelligent hover behavior.
+ * Sets up a submenu based on its context (visible nav or hidden hamburger menu).
+ * @private
+ * @this {SiteNavigation}
  * @param {HTMLElement} parentLi The list item that contains the submenu.
+ * @param {'visible' | 'hidden'} context The context in which the submenu appears.
+ * @returns {void}
  */
-function setupSubmenu(parentLi) {
-  const submenu = parentLi.querySelector("ul");
-  if (!submenu) return; // No submenu to set up
-
-  submenu.setAttribute("part", "submenu");
-
-  let cleanup;
-  let hideTimeout;
-
-  const show = () => {
-    clearTimeout(hideTimeout);
-    submenu.style.display = "block";
-    // autoUpdate handles positioning on scroll/resize
-    cleanup = autoUpdate(parentLi, submenu, () => {
-      computePosition(parentLi, submenu, {
-        placement: "bottom-start",
-        middleware: [offset(8), flip(), shift({ padding: 8 })],
-      }).then(({ x, y }) => {
-        Object.assign(submenu.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
-    });
-  };
-
-  const hide = () => {
-    // Use a timeout to create a "grace period", allowing diagonal mouse movement.
-    hideTimeout = setTimeout(() => {
-      submenu.style.display = "none";
-      if (cleanup) {
-        cleanup(); // Stop the autoUpdate listeners
-      }
-    }, 200); // 200ms delay
-  };
-
-  // Show on entering the parent, hide on leaving.
-  parentLi.addEventListener("mouseenter", show);
-  parentLi.addEventListener("mouseleave", hide);
-
-  // If the mouse enters the submenu itself, cancel the pending hide command.
-  submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
-  submenu.addEventListener("mouseleave", hide);
+function setupSubmenu(parentLi, context = "visible") {
+	const submenu = parentLi.querySelector("ul");
+	if (!submenu) return;
+
+	submenu.setAttribute("part", "submenu");
+
+	if (context === "visible") {
+		const component = this;
+		let cleanup;
+		let hideTimeout;
+
+		const immediateHide = () => {
+			submenu.style.display = "none";
+			if (cleanup) {
+				cleanup();
+				cleanup = null;
+			}
+			if (component[activeSubmenuHiderSymbol] === immediateHide) {
+				component[activeSubmenuHiderSymbol] = null;
+			}
+		};
+
+		const show = () => {
+			clearTimeout(hideTimeout);
+			if (
+				component[activeSubmenuHiderSymbol] &&
+				component[activeSubmenuHiderSymbol] !== immediateHide
+			) {
+				component[activeSubmenuHiderSymbol]();
+			}
+			submenu.style.display = "block";
+			if (!cleanup) {
+				cleanup = autoUpdate(parentLi, submenu, () => {
+					computePosition(parentLi, submenu, {
+						placement: "bottom-start",
+						middleware: [offset(8), flip(), shift({ padding: 8 })],
+					}).then(({ x, y }) => {
+						Object.assign(submenu.style, { left: `${x}px`, top: `${y}px` });
+					});
+				});
+			}
+			component[activeSubmenuHiderSymbol] = immediateHide;
+		};
+
+		const hideWithDelay = () => {
+			hideTimeout = setTimeout(immediateHide, 200);
+		};
+
+		parentLi.addEventListener("mouseenter", show);
+		parentLi.addEventListener("mouseleave", hideWithDelay);
+		submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
+		submenu.addEventListener("mouseleave", hideWithDelay);
+	} else {
+		submenu.style.display = "none";
+		const anchor = parentLi.querySelector("a");
+		if (anchor) {
+			anchor.addEventListener("click", (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				const isVisible = submenu.style.display === "block";
+				submenu.style.display = isVisible ? "none" : "block";
+			});
+		}
+	}
 }
 
+/**
+ * Calculates which navigation items fit in the visible area and moves the rest
+ * to a hidden "hamburger" menu.
+ * @private
+ * @this {SiteNavigation}
+ * @returns {void}
+ */
 function populateTabs() {
-  const visibleList = this[visibleElementsSymbol];
-  const hiddenList = this[hiddenElementsSymbol];
-  const hamburgerNav = this[hamburgerNavSymbol];
-
-  const sourceItems = Array.from(
-    getSlottedElements.call(this, "ul > li"),
-  ).filter((item) => item instanceof HTMLElement);
-
-  // 1. PREPARATION
-  visibleList.style.visibility = "hidden";
-  hamburgerNav.style.display = "none";
-  visibleList.innerHTML = "";
-  hiddenList.innerHTML = "";
-
-  const maxWidth = this[navElementSymbol].clientWidth;
-  if (maxWidth === 0) {
-    visibleList.style.visibility = "visible";
-    return;
-  }
-
-  // 2. MEASUREMENT
-  const measurementList = visibleList.cloneNode(true);
-  Object.assign(measurementList.style, {
-    position: "absolute",
-    left: "0",
-    top: "0",
-    width: "auto",
-    visibility: "hidden",
-  });
-  this.shadowRoot.appendChild(measurementList);
-
-  const itemsToMove = [];
-  for (const item of sourceItems) {
-    const itemClone = item.cloneNode(true);
-    // Important: For measurement, hide submenus so they don't affect width.
-    const submenu = itemClone.querySelector("ul");
-    if (submenu) submenu.style.display = "none";
-
-    measurementList.appendChild(itemClone);
-
-    if (measurementList.scrollWidth > maxWidth) {
-      break;
-    } else {
-      itemsToMove.push(item);
-    }
-  }
-
-  this.shadowRoot.removeChild(measurementList);
-
-  // 3. DOM MANIPULATION
-  const visibleItems = itemsToMove;
-  const hiddenItems = sourceItems.slice(visibleItems.length);
-
-  // Populate visible list and set up submenus
-  if (visibleItems.length > 0) {
-    visibleList.append(...visibleItems.map((item) => item.cloneNode(true)));
-    // After appending, initialize submenus for visible items
-    visibleList.querySelectorAll("li").forEach(setupSubmenu);
-  }
-
-  // Populate hidden list and set up submenus
-  if (hiddenItems.length > 0) {
-    hiddenList.append(...hiddenItems.map((item) => item.cloneNode(true)));
-    hamburgerNav.style.display = "flex";
-    // After appending, initialize submenus for hidden items as well
-    hiddenList.querySelectorAll("li").forEach(setupSubmenu);
-  }
-
-  visibleList.style.visibility = "visible";
+	const visibleList = this[visibleElementsSymbol];
+	const hiddenList = this[hiddenElementsSymbol];
+	const hamburgerButton = this[hamburgerButtonSymbol];
+	const hamburgerNav = this[hamburgerNavSymbol];
+
+	const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
+		(ul) => ul.parentElement === this,
+	);
+
+	if (!topLevelUl) {
+		visibleList.style.visibility = "visible";
+		hamburgerButton.style.display = "none";
+		return;
+	}
+
+	const sourceItems = Array.from(topLevelUl.children).filter(
+		(item) => item.tagName === "LI",
+	);
+
+	visibleList.style.visibility = "hidden";
+	hamburgerButton.style.display = "none";
+	hamburgerNav.style.display = "none";
+	visibleList.innerHTML = "";
+	hiddenList.innerHTML = "";
+
+	const originalDisplay = hamburgerButton.style.display;
+	hamburgerButton.style.visibility = "hidden";
+	hamburgerButton.style.display = "flex";
+	const hamburgerWidth = hamburgerButton.offsetWidth;
+	hamburgerButton.style.display = originalDisplay;
+	hamburgerButton.style.visibility = "visible";
+
+	const navWidth = this[navElementSymbol].clientWidth;
+	if (navWidth === 0) {
+		visibleList.style.visibility = "visible";
+		return;
+	}
+
+	const measurementList = visibleList.cloneNode(true);
+	Object.assign(measurementList.style, {
+		position: "absolute",
+		left: "0",
+		top: "0",
+		width: "auto",
+		visibility: "hidden",
+	});
+	this.shadowRoot.appendChild(measurementList);
+
+	const itemsToMove = [];
+	const availableWidthForTabs = navWidth - hamburgerWidth;
+
+	for (let i = 0; i < sourceItems.length; i++) {
+		const item = sourceItems[i];
+		const itemClone = item.cloneNode(true);
+		const submenu = itemClone.querySelector("ul");
+		if (submenu) submenu.style.display = "none";
+
+		measurementList.appendChild(itemClone);
+
+		const isLastItem = i === sourceItems.length - 1;
+		const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
+
+		if (measurementList.scrollWidth > effectiveMaxWidth) {
+			break;
+		} else {
+			itemsToMove.push(item);
+		}
+	}
+	this.shadowRoot.removeChild(measurementList);
+
+	const visibleItems = itemsToMove;
+	const hiddenItems = sourceItems.slice(visibleItems.length);
+
+	if (visibleItems.length > 0) {
+		const clonedVisibleItems = visibleItems.map((item) => {
+			const liClone = item.cloneNode(true);
+			const aClone = liClone.querySelector("a");
+
+			liClone.setAttribute("part", "nav-item");
+			if (aClone) aClone.setAttribute("part", "nav-link");
+
+			if (item.classList.contains("active")) {
+				liClone.setAttribute("part", "nav-item nav-item-active");
+				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
+			}
+			return liClone;
+		});
+		visibleList.append(...clonedVisibleItems);
+		visibleList
+			.querySelectorAll("li")
+			.forEach((li) => setupSubmenu.call(this, li, "visible"));
+	}
+
+	if (hiddenItems.length > 0) {
+		const clonedHiddenItems = hiddenItems.map((item) => {
+			const liClone = item.cloneNode(true);
+			const aClone = liClone.querySelector("a");
+
+			liClone.setAttribute("part", "nav-item");
+			if (aClone) aClone.setAttribute("part", "nav-link");
+			if (item.classList.contains("active")) {
+				liClone.setAttribute("part", "nav-item nav-item-active");
+				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
+			}
+			return liClone;
+		});
+		hiddenList.append(...clonedHiddenItems);
+		hamburgerButton.style.display = "flex";
+		hiddenList
+			.querySelectorAll("li")
+			.forEach((li) => setupSubmenu.call(this, li, "hidden"));
+	}
+
+	visibleList.style.visibility = "visible";
 }
 
+/**
+ * Returns the HTML template for the component's shadow DOM.
+ * @private
+ * @returns {string}
+ */
 function getTemplate() {
-  // language=HTML
-  return `
+	return `
     <div data-monster-role="control" part="control">
       <nav data-monster-role="navigation" role="navigation" part="nav">
         <ul id="visible-elements" part="visible-list"></ul>