@schukai/monster 4.10.3 → 4.10.4

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.10.4] - 2025-05-20
+
+### Bug Fixes
+
+- Add touch support for drag events in split-panel component
+
+
+
 ## [4.10.3] - 2025-05-20
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@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.10.3"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@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.10.4"}

package/source/components/layout/split-panel.mjs

@@ -269,8 +269,7 @@ function initEventHandler() {
 
 	this[internalSymbol].getSubject().isDragging = false;
 
-	// @todo: add better touch support
-	const eventTypes = ["dblclick", "touchstart"];
+	const eventTypes = ["dblclick"];
 	for (const eventType of eventTypes) {
 		this[draggerElementSymbol].addEventListener(eventType, () => {
 			self[internalSymbol].getSubject().isDragging = false;
@@ -297,6 +296,64 @@ function initEventHandler() {
 		});
 	}
 
+	this[draggerElementSymbol].addEventListener("touchstart", (startEvent) => {
+
+		startEvent.preventDefault();
+		self[internalSymbol].getSubject().isDragging = true;
+
+		const dragTouchMove = (e) => {
+			if (!self[internalSymbol].getSubject().isDragging) return;
+
+			const touch = e.touches[0];
+			if (!touch) return;
+
+			// identical logic as in mousemove - but with touch.clientX/clientY
+			let draggerWidth = getComputedStyle(self[draggerElementSymbol]).getPropertyValue("--monster-dragger-width") || "0";
+
+			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
+				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
+				let newTopHeight = touch.clientY - containerOffsetTop;
+
+				const min = this.getOption("dimension").min;
+				const max = this.getOption("dimension").max;
+				const topAsPercent = (newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
+
+				if (parseInt(min) > topAsPercent) newTopHeight = min;
+				else if (parseInt(max) < topAsPercent) newTopHeight = max;
+				else newTopHeight = topAsPercent + "%";
+
+				const newTopHeightPx = (parseInt(newTopHeight) / 100) * this[splitScreenElementSymbol].offsetHeight;
+
+				self[startPanelElementSymbol].style.height = `${newTopHeightPx}px`;
+				self[endPanelElementSymbol].style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
+			} else {
+				const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
+				let newLeftWidth = touch.clientX - containerOffsetLeft;
+
+				const min = this.getOption("dimension").min;
+				const max = this.getOption("dimension").max;
+				const leftAsPercent = (newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
+
+				if (parseInt(min) > leftAsPercent) newLeftWidth = min;
+				else if (parseInt(max) < leftAsPercent) newLeftWidth = max;
+				else newLeftWidth = leftAsPercent + "%";
+
+				self[startPanelElementSymbol].style.width = `${newLeftWidth}`;
+				self[endPanelElementSymbol].style.width = `calc(100% - ${newLeftWidth} - ${draggerWidth})`;
+			}
+		};
+
+		const dragTouchEnd = () => {
+			self[internalSymbol].getSubject().isDragging = false;
+			document.removeEventListener("touchmove", dragTouchMove);
+			document.removeEventListener("touchend", dragTouchEnd);
+		};
+
+		document.addEventListener("touchmove", dragTouchMove, { passive: false });
+		document.addEventListener("touchend", dragTouchEnd);
+	});
+
+
 	let userSelectDefault = getDocument().body.style.userSelect;
 
 	this[draggerElementSymbol].addEventListener("mousedown", () => {