70 lines
2 KiB
TypeScript
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);
|
|
}
|
|
}
|
|
}
|