@schukai/monster 4.140.2 → 4.141.0

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.140.2"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.141.0"}

package/source/components/form/control-bar.mjs

@@ -36,11 +36,13 @@ import { getDocument } from "../../dom/util.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { ID } from "../../types/id.mjs";
 import { Observer } from "../../types/observer.mjs";
+import { Queue } from "../../types/queue.mjs";
 import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
 import { ControlBarStyleSheet } from "./stylesheet/control-bar.mjs";
 import { positionPopper } from "./util/floating-ui.mjs";
 import { convertToPixels } from "../../dom/dimension.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Processing } from "../../util/processing.mjs";
 export { ControlBar };
 
@@ -132,6 +134,11 @@ const layoutTokenSymbol = Symbol("layoutToken");
 const observedLayoutNodesSignatureSymbol = Symbol(
 	"observedLayoutNodesSignature",
 );
+const layoutChangedEventQueueSymbol = Symbol("layoutChangedEventQueue");
+const layoutChangedEventSwitchSymbol = Symbol("layoutChangedEventSwitch");
+const layoutChangedEventLastSignatureSymbol = Symbol(
+	"layoutChangedEventLastSignature",
+);
 
 /**
  * @private
@@ -152,6 +159,45 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
  */
 const ATTRIBUTE_LAYOUT_ALIGNMENT = "data-monster-layout-alignment";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_LAYOUT_STACKED = "data-monster-layout-stacked";
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT =
+	"data-monster-option-layout-alignment";
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT =
+	"data-monster-option-layout-stacked-alignment";
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT =
+	"data-monster-option-layout-stacked-breakpoint";
+
+/**
+ * @private
+ * @type {string}
+ */
+const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
+
+/**
+ * @private
+ * @type {number}
+ */
+const LAYOUT_CHANGED_EVENT_DELAY = 20;
+
 /**
  * A control bar control.
  *
@@ -193,6 +239,8 @@ class ControlBar extends CustomElement {
 			labels: {},
 			layout: {
 				alignment: "left",
+				stackedAlignment: undefined,
+				stackedBreakpoint: undefined,
 			},
 			popper: {
 				placement: "left",
@@ -228,7 +276,9 @@ class ControlBar extends CustomElement {
 		// setup structure
 		initControlBar.call(this);
 		initPopperSwitch.call(this);
+		setLayoutStackedState.call(this, false);
 		applyLayoutAlignment.call(this);
+		this[layoutChangedEventQueueSymbol] = new Queue();
 		this.attachObserver(
 			new Observer(() => {
 				applyLayoutAlignment.call(this);
@@ -236,6 +286,25 @@ class ControlBar extends CustomElement {
 		);
 	}
 
+	/**
+	 * Set option and sync layout state for reactive layout options.
+	 *
+	 * @param {string} path
+	 * @param {*} value
+	 * @return {ControlBar}
+	 */
+	setOption(path, value) {
+		super.setOption(path, value);
+		if (
+			path === "layout.alignment" ||
+			path === "layout.stackedAlignment" ||
+			path === "layout.stackedBreakpoint"
+		) {
+			syncLayoutState.call(this);
+		}
+		return this;
+	}
+
 	/**
 	 * This method is called internal and should not be called directly.
 	 *
@@ -280,6 +349,9 @@ class ControlBar extends CustomElement {
 	static get observedAttributes() {
 		const attributes = super.observedAttributes;
 		attributes.push(ATTRIBUTE_POPPER_POSITION);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT);
 		return attributes;
 	}
 
@@ -305,6 +377,7 @@ class ControlBar extends CustomElement {
 		this[layoutTokenSymbol] = (this[layoutTokenSymbol] || 0) + 1;
 
 		disconnectResizeObserver.call(this);
+		defuseLayoutChangedEvent.call(this);
 		if (this[mutationObserverSymbol]) {
 			this[mutationObserverSymbol].disconnect();
 		}
@@ -457,11 +530,25 @@ function initEventHandler() {
 		});
 	}
 
-	self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
+	self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = (value) => {
 		self.setOption("popper.placement", value);
 		updatePopper.call(self);
 	};
 
+	self[attributeObserverSymbol][ATTRIBUTE_OPTION_LAYOUT_ALIGNMENT] = () => {
+		syncLayoutState.call(self);
+	};
+
+	self[attributeObserverSymbol][ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT] =
+		() => {
+			syncLayoutState.call(self);
+		};
+
+	self[attributeObserverSymbol][ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT] =
+		() => {
+			syncLayoutState.call(self);
+		};
+
 	self[resizeObserverSymbol] = new ResizeObserver(() => {
 		scheduleLayout.call(self, { measure: true, layout: true });
 	});
@@ -628,7 +715,7 @@ function rearrangeItems() {
 		let itemWidth = 0;
 		try {
 			itemWidth = this[dimensionsSymbol].getVia(`data.item.${ref}`);
-		} catch (e) {
+		} catch {
 			// If the path does not exist, pathfinder throws an error.
 			// In this case, we assume the width is 0.
 			// This can happen for items that have never been visible.
@@ -674,8 +761,11 @@ function rearrangeItems() {
 
 	const shouldShowSwitch =
 		layout.itemsToMoveToPopper.length > 0 && hasItems;
+	const shouldUseStackedLayout =
+		shouldShowSwitch || isStackedBreakpointMatched.call(this);
 
 	suppressLayoutFeedback.call(this);
+	setLayoutStackedState.call(this, shouldUseStackedLayout);
 
 	for (const item of layout.itemsToMoveToPopper) {
 		if (item.getAttribute("slot") !== "popper") {
@@ -692,6 +782,7 @@ function rearrangeItems() {
 	setSwitchVisible.call(this, shouldShowSwitch);
 	updateControlSizing.call(this, layout, shouldShowSwitch);
 	updateJoinedBorders.call(this, layout, shouldShowSwitch);
+	applyLayoutAlignment.call(this);
 	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
@@ -1136,6 +1227,7 @@ function calculateControlBarDimensions() {
 	}
 
 	this[dimensionsSymbol].setVia("data.visible", !(width === 0));
+	this[dimensionsSymbol].setVia("data.containerWidth", width);
 
 	const itemReferences = [];
 
@@ -1398,17 +1490,204 @@ function applyLayoutAlignment() {
 		return;
 	}
 
-	const alignment = this.getOption("layout.alignment", "left");
+	const layoutState = this[layoutStateSymbol] || {};
+	const stackedAlignment = this.getOption("layout.stackedAlignment");
+	let alignment = this.getOption("layout.alignment", "left");
+	if (
+		layoutState.stacked === true &&
+		typeof stackedAlignment === "string" &&
+		stackedAlignment !== ""
+	) {
+		alignment = stackedAlignment;
+	}
 
 	if (alignment === "right") {
-		this[controlBarElementSymbol].setAttribute(
+		if (setAttributeIfChanged(
+			this[controlBarElementSymbol],
 			ATTRIBUTE_LAYOUT_ALIGNMENT,
 			"right",
-		);
+		)) {
+			queueLayoutChangedEvent.call(this);
+		}
+		return;
+	}
+
+	if (setAttributeIfChanged(
+		this[controlBarElementSymbol],
+		ATTRIBUTE_LAYOUT_ALIGNMENT,
+		"left",
+	)) {
+		queueLayoutChangedEvent.call(this);
+	}
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function syncLayoutState() {
+	applyLayoutAlignment.call(this);
+	scheduleLayout.call(this, { measure: true, layout: true });
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isStackedBreakpointMatched() {
+	const breakpoint = this.getOption("layout.stackedBreakpoint");
+	if (typeof breakpoint !== "string" || breakpoint.trim() === "") {
+		return false;
+	}
+
+	let width = 0;
+	try {
+		width = this[dimensionsSymbol].getVia("data.containerWidth");
+	} catch {
+		try {
+			width = this[dimensionsSymbol].getVia("data.space");
+		} catch {}
+	}
+
+	if (!(width > 0)) {
+		return false;
+	}
+
+	const breakpointWidth = getComputedCssPixels(breakpoint);
+	if (!(breakpointWidth > 0)) {
+		return false;
+	}
+
+	return width <= breakpointWidth;
+}
+
+/**
+ * @private
+ * @param {boolean} stacked
+ * @return {void}
+ */
+function setLayoutStackedState(stacked) {
+	if (!this[layoutStateSymbol]) {
+		return;
+	}
+	this[layoutStateSymbol].stacked = stacked === true;
+
+	if (!(this[controlBarElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	if (setAttributeIfChanged(
+		this[controlBarElementSymbol],
+		ATTRIBUTE_LAYOUT_STACKED,
+		this[layoutStateSymbol].stacked ? "true" : "false",
+	)) {
+		queueLayoutChangedEvent.call(this);
+	}
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function queueLayoutChangedEvent() {
+	if (!(this[layoutChangedEventQueueSymbol] instanceof Queue)) {
+		return;
+	}
+
+	this[layoutChangedEventQueueSymbol].add(getLayoutChangedEventDetail.call(this));
+
+	if (this[layoutChangedEventSwitchSymbol] instanceof DeadMansSwitch) {
+		this[layoutChangedEventSwitchSymbol].touch();
+		return;
+	}
+
+	this[layoutChangedEventSwitchSymbol] = new DeadMansSwitch(
+		LAYOUT_CHANGED_EVENT_DELAY,
+		() => {
+			this[layoutChangedEventSwitchSymbol] = undefined;
+			dispatchQueuedLayoutChangedEvent.call(this);
+		},
+	);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function dispatchQueuedLayoutChangedEvent() {
+	if (!(this[layoutChangedEventQueueSymbol] instanceof Queue)) {
+		return;
+	}
+
+	let detail;
+	while (!this[layoutChangedEventQueueSymbol].isEmpty()) {
+		detail = this[layoutChangedEventQueueSymbol].poll();
+	}
+
+	if (!detail) {
+		return;
+	}
+
+	const signature = JSON.stringify(detail);
+	if (this[layoutChangedEventLastSignatureSymbol] === signature) {
 		return;
 	}
+	this[layoutChangedEventLastSignatureSymbol] = signature;
+
+	this.dispatchEvent(
+		new CustomEvent(EVENT_LAYOUT_CHANGED, {
+			bubbles: true,
+			composed: true,
+			detail,
+		}),
+	);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function defuseLayoutChangedEvent() {
+	if (this[layoutChangedEventSwitchSymbol] instanceof DeadMansSwitch) {
+		this[layoutChangedEventSwitchSymbol].defuse();
+		this[layoutChangedEventSwitchSymbol] = undefined;
+	}
+}
+
+/**
+ * @private
+ * @return {Object}
+ */
+function getLayoutChangedEventDetail() {
+	const layoutState = this[layoutStateSymbol] || {};
+	const stacked = layoutState.stacked === true;
+	const alignment = this[controlBarElementSymbol]?.getAttribute(
+		ATTRIBUTE_LAYOUT_ALIGNMENT,
+	);
+
+	return {
+		alignment: alignment || this.getOption("layout.alignment", "left"),
+		configuredAlignment: this.getOption("layout.alignment", "left"),
+		stacked,
+		stackedAlignment: this.getOption("layout.stackedAlignment"),
+		stackedBreakpoint: this.getOption("layout.stackedBreakpoint"),
+	};
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {string} attribute
+ * @param {string} value
+ * @return {boolean}
+ */
+function setAttributeIfChanged(element, attribute, value) {
+	if (element.getAttribute(attribute) !== value) {
+		element.setAttribute(attribute, value);
+		return true;
+	}
 
-	this[controlBarElementSymbol].setAttribute(ATTRIBUTE_LAYOUT_ALIGNMENT, "left");
+	return false;
 }
 
 /**

package/test/cases/components/form/control-bar.mjs

@@ -3,7 +3,7 @@ import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
 import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 
-let expect = chai.expect;
+const expect = chai.expect;
 chai.use(chaiDom);
 
 const html = `
@@ -103,6 +103,68 @@ describe("ControlBar", function () {
     }, 50);
   });
 
+  it("should update the rendered layout alignment when the option changes", async function () {
+    const bar = document.getElementById("bar-right");
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    const controlBar = bar.shadowRoot.querySelector(
+      '[data-monster-role="control-bar"]',
+    );
+
+    expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+      "right",
+    );
+
+    bar.setOption("layout.alignment", "left");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+      "left",
+    );
+  });
+
+  it("should update the rendered layout alignment when the host option attribute changes", async function () {
+    const bar = document.getElementById("bar");
+    const controlBar = bar.shadowRoot.querySelector(
+      '[data-monster-role="control-bar"]',
+    );
+
+    bar.setAttribute("data-monster-option-layout-alignment", "right");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(bar.getOption("layout.alignment")).to.equal("right");
+    expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+      "right",
+    );
+  });
+
+  it("should dispatch one final layout changed event for rapid alignment changes", async function () {
+    const bar = document.getElementById("bar-right");
+    const events = [];
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    bar.addEventListener("monster-control-bar-layout-changed", (event) => {
+      events.push(event.detail);
+    });
+
+    bar.setOption("layout.alignment", "left");
+    bar.setOption("layout.alignment", "right");
+    bar.setOption("layout.alignment", "left");
+
+    await new Promise((resolve) => setTimeout(resolve, 60));
+
+    expect(events).to.have.length(1);
+    expect(events[0]).to.deep.equal({
+      alignment: "left",
+      configuredAlignment: "left",
+      stacked: false,
+      stackedAlignment: undefined,
+      stackedBreakpoint: undefined,
+    });
+  });
+
   it("should map popper position attributes to the popper placement option", function () {
     const bar = document.getElementById("bar");
 
@@ -515,7 +577,11 @@ describe("ControlBar", function () {
       const mocks = document.getElementById("mocks");
       mocks.innerHTML = `
         <div id="control-bar-wrapper">
-          <monster-control-bar id="overflow-bar">
+          <monster-control-bar
+            id="overflow-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+          >
             <input id="overflow-input" type="search">
             <select id="overflow-select"><option>One</option></select>
             <button id="overflow-button">Run</button>
@@ -567,12 +633,21 @@ describe("ControlBar", function () {
         configurable: true,
         value: 20,
       });
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
 
       await flushFrames();
       await new Promise((resolve) => setTimeout(resolve, 0));
       await new Promise((resolve) => setTimeout(resolve, 0));
 
       expect(switchButton.hasAttribute("hidden")).to.be.false;
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
       expect(document.getElementById("overflow-input").hasAttribute("slot")).to
         .be.false;
       expect(document.getElementById("overflow-select").getAttribute("slot")).to
@@ -586,4 +661,94 @@ describe("ControlBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should apply stacked alignment below the configured container breakpoint without overflow", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="breakpoint-bar-wrapper">
+          <monster-control-bar
+            id="breakpoint-bar"
+            data-monster-option-layout-alignment="right"
+            data-monster-option-layout-stacked-alignment="left"
+            data-monster-option-layout-stacked-breakpoint="100px"
+          >
+            <button id="breakpoint-button">Run</button>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("breakpoint-bar-wrapper");
+      const button = document.getElementById("breakpoint-button");
+      const bar = document.getElementById("breakpoint-bar");
+      const controlBar = bar.shadowRoot.querySelector(
+        '[data-monster-role="control-bar"]',
+      );
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 90,
+      });
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 40,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 40,
+        height: 30,
+        top: 0,
+        right: 40,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(switchButton.hasAttribute("hidden")).to.be.true;
+      expect(button.hasAttribute("slot")).to.be.false;
+      expect(controlBar.getAttribute("data-monster-layout-stacked")).to.equal(
+        "true",
+      );
+      expect(controlBar.getAttribute("data-monster-layout-alignment")).to.equal(
+        "left",
+      );
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });