website/src/models/WindowManager.ts
2025-04-20 14:28:22 -05:00

70 lines
2 KiB
TypeScript

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);
}
}
}