@schukai/monster 4.129.3 → 4.129.4

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"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.129.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6","@popperjs/core":"^2.11.8"},"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.129.4"}

package/source/components/form/util/floating-ui.mjs

@@ -59,44 +59,7 @@ function positionPopper(controlElement, popperElement, options) {
 			return;
 		}
 
-		teardownNativePopover(popperElement);
-		popperElement.style.removeProperty("visibility");
-		popperElement.style.display = "block";
-
-		const arrowElement = popperElement.querySelector(
-			"[data-monster-role=arrow]",
-		);
-		const floatingMiddleware = [...config.floatingMiddleware];
-		if (
-			arrowElement instanceof HTMLElement &&
-			config.middlewareTokens.includes("arrow")
-		) {
-			floatingMiddleware.push(arrow({ element: arrowElement }));
-		}
-
-		startAutoUpdate(controlElement, popperElement, () => {
-			computePosition(
-				controlElement,
-				popperElement,
-				Object.assign({}, config, {
-					middleware: floatingMiddleware,
-				}),
-			).then(({ x, y, placement, middlewareData }) => {
-				Object.assign(popperElement.style, {
-					top: "0",
-					left: "0",
-					transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
-				});
-
-				if (middlewareData.arrow) {
-					applyFloatingArrowStyles(
-						arrowElement,
-						placement,
-						middlewareData.arrow,
-					);
-				}
-			});
-		});
+		enableFloatingPositioning(controlElement, popperElement, config);
 	}).run();
 }
 
@@ -116,6 +79,47 @@ function openPositionedPopper(controlElement, popperElement, options) {
 	popperElement.style.display = "block";
 }
 
+function enableFloatingPositioning(controlElement, popperElement, config) {
+	teardownNativePopover(popperElement);
+	popperElement.style.removeProperty("visibility");
+	popperElement.style.display = "block";
+
+	startAutoUpdate(controlElement, popperElement, () => {
+		syncFloatingPopover(controlElement, popperElement, config);
+	});
+	syncFloatingPopover(controlElement, popperElement, config);
+}
+
+function syncFloatingPopover(controlElement, popperElement, config) {
+	const arrowElement = popperElement.querySelector("[data-monster-role=arrow]");
+	const floatingMiddleware = [...config.floatingMiddleware];
+
+	if (
+		arrowElement instanceof HTMLElement &&
+		config.middlewareTokens.includes("arrow")
+	) {
+		floatingMiddleware.push(arrow({ element: arrowElement }));
+	}
+
+	computePosition(
+		controlElement,
+		popperElement,
+		Object.assign({}, config, {
+			middleware: floatingMiddleware,
+		}),
+	).then(({ x, y, placement, middlewareData }) => {
+		Object.assign(popperElement.style, {
+			top: "0",
+			left: "0",
+			transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
+		});
+
+		if (middlewareData.arrow) {
+			applyFloatingArrowStyles(arrowElement, placement, middlewareData.arrow);
+		}
+	});
+}
+
 function closePositionedPopper(popperElement) {
 	stopAutoUpdate(popperElement);
 	cancelScheduledNativeArrowSync(popperElement);
@@ -404,6 +408,12 @@ function syncNativePopover(controlElement, popperElement, config) {
 
 	applyNativePlacementStyles(popperElement, placement, offsetValue);
 	popperElement.style.removeProperty("visibility");
+
+	if (hasViewportOverflow(popperElement)) {
+		enableFloatingPositioning(controlElement, popperElement, config);
+		return;
+	}
+
 	syncNativeArrow(controlElement, popperElement);
 	scheduleNativeArrowSync(controlElement, popperElement);
 }
@@ -861,6 +871,24 @@ function matchesPopoverOpen(popperElement) {
 	}
 }
 
+function hasViewportOverflow(popperElement) {
+	if (!(popperElement instanceof HTMLElement)) {
+		return false;
+	}
+
+	const rect = popperElement.getBoundingClientRect();
+	const tolerance = 1;
+	const viewportWidth = window.innerWidth;
+	const viewportHeight = window.innerHeight;
+
+	return (
+		rect.left < -tolerance ||
+		rect.top < -tolerance ||
+		rect.right > viewportWidth + tolerance ||
+		rect.bottom > viewportHeight + tolerance
+	);
+}
+
 function clamp(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }

package/test/cases/components/content/image-editor.mjs

@@ -9,29 +9,24 @@ let expect = chai.expect;
 chai.use(chaiDom);
 
 describe('ImageEditor', function () {
+    this.timeout(10000);
 
     let ImageEditor, document;
     let registerCustomElement;
     let CustomElement;
     let assembleMethodSymbol;
 
-    before(function (done) {
-        initJSDOM({}).then(() => {
-            import("../../../../source/dom/customelement.mjs").then((domModule) => {
-                registerCustomElement = domModule['registerCustomElement'];
-                CustomElement = domModule['CustomElement'];
-                assembleMethodSymbol = domModule['assembleMethodSymbol'];
-                return import("../../../../source/components/content/image-editor.mjs");
-            }).then((m) => {
-                try {
-                    ImageEditor = m['ImageEditor'];
-                    document = getDocument();
-                    done();
-                } catch (e) {
-                    done(e);
-                }
-            }).catch((e) => done(e));
-        });
+    before(async function () {
+        await initJSDOM({});
+
+        const domModule = await import("../../../../source/dom/customelement.mjs");
+        registerCustomElement = domModule['registerCustomElement'];
+        CustomElement = domModule['CustomElement'];
+        assembleMethodSymbol = domModule['assembleMethodSymbol'];
+
+        const componentModule = await import("../../../../source/components/content/image-editor.mjs");
+        ImageEditor = componentModule['ImageEditor'];
+        document = getDocument();
     });
 
     beforeEach(() => {