please

src/models/WindowManager.ts

@@ -0,0 +1,70 @@
+export class WindowManager {
+	private static _topmost: HTMLElement | null;
+
+	static get topmost() {
+		return this._topmost;
+	}
+
+	static set topmost(e) {
+		if (this._topmost) {
+			this._topmost.style.zIndex = "0";
+		}
+		this._topmost = e;
+		this._topmost.style.display = "block";
+		this._topmost.style.zIndex = "1";
+	}
+
+	static observe(element) {
+		element.addEventListener("mousedown", () => {
+			this.topmost = element;
+		});
+
+		const titleBar = element.querySelector(".title-bar");
+
+		titleBar.addEventListener("mousedown", startDrag);
+		titleBar.addEventListener("touchstart", startDrag, { passive: false });
+
+		function startDrag(e) {
+			if (e.target !== titleBar) return;
+
+			let isTouch = e.type.startsWith("touch");
+			let startX = isTouch ? e.touches[0].clientX : e.clientX;
+			let startY = isTouch ? e.touches[0].clientY : e.clientY;
+
+			let offsetX = startX - element.offsetLeft;
+			let offsetY = startY - element.offsetTop;
+
+			function onMove(e) {
+				let clientX = isTouch ? e.touches[0].clientX : e.clientX;
+				let clientY = isTouch ? e.touches[0].clientY : e.clientY;
+
+				let newX = clientX - offsetX;
+				let newY = clientY - offsetY;
+
+				element.style.top = `${newY}px`;
+				element.style.left = `${newX}px`;
+			}
+
+			function stopMove() {
+				let maxX = window.innerWidth - element.offsetWidth;
+				let maxY = window.innerHeight - element.offsetHeight;
+
+				let finalX = Math.min(Math.max(element.offsetLeft, 0), maxX);
+				let finalY = Math.min(Math.max(element.offsetTop, 0), maxY);
+
+				element.style.top = `${finalY}px`;
+				element.style.left = `${finalX}px`;
+
+				document.removeEventListener("mousemove", onMove);
+				document.removeEventListener("mouseup", stopMove);
+				document.removeEventListener("touchmove", onMove);
+				document.removeEventListener("touchend", stopMove);
+			}
+
+			document.addEventListener("mousemove", onMove);
+			document.addEventListener("mouseup", stopMove);
+			document.addEventListener("touchmove", onMove, { passive: false });
+			document.addEventListener("touchend", stopMove);
+		}
+	}
+}