Touch support

This commit is contained in:
MeowcaTheoRange 2023-11-23 12:26:44 -06:00
parent e28fa649a7
commit 5b752df28e

View file

@ -1,3 +1,11 @@
function isTouchDevice() {
return (
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
}
class WindowObject {
windowObject;
@ -18,6 +26,8 @@ class WindowObject {
WindowObject.raiseWindow(this.windowObject);
if (isTouchDevice()) this.maximizeWindow();
this.windowManager = this.windowObject.querySelector(".window-manager");
this.windowManagerLabel = this.windowObject.querySelector(
".window-manager-label"
@ -36,6 +46,15 @@ class WindowObject {
this.windowManager.addEventListener("mouseout", (e) =>
this.event__dragMouseMove(e)
);
this.windowManager.addEventListener("touchstart", (e) =>
this.event__dragMouseDown(e, true)
);
this.windowManager.addEventListener("touchmove", (e) =>
this.event__dragMouseMove(e, true)
);
this.windowManager.addEventListener("touchend", (e) =>
this.event__dragMouseUp(e, true)
);
this.windowObject.addEventListener("mousedown", (e) =>
WindowObject.raiseWindow(this.windowObject)
@ -49,12 +68,14 @@ class WindowObject {
this.windowContent.addEventListener("load", () => {
this.title = this.windowContent.contentWindow.document.title;
if (!srcdoc)
this.windowManager
.querySelector(".window-new-button")
.addEventListener("click", () => {
if (!srcdoc) {
const nb = this.windowManager.querySelector(".window-new-button");
nb.addEventListener("click", () => {
window.open(this.content);
});
nb.addEventListener("touchstart", (e) => e.stopPropagation());
nb.addEventListener("touchend", (e) => e.stopPropagation());
}
});
}
@ -107,11 +128,11 @@ class WindowObject {
}, 250);
}
event__dragMouseDown(e) {
event__dragMouseDown(e, touch) {
e.preventDefault();
this.#orig_mousePosX = e.clientX;
this.#orig_mousePosY = e.clientY;
this.#orig_mousePosX = touch ? e.touches[0].clientX : e.clientX;
this.#orig_mousePosY = touch ? e.touches[0].clientY : e.clientY;
this.#orig_selfPosX = this.windowObject.offsetLeft;
this.#orig_selfPosY = this.windowObject.offsetTop;
this.windowContent.style.userSelect = "none";
@ -122,7 +143,7 @@ class WindowObject {
WindowObject.raiseWindow(this.windowObject);
}
event__dragMouseUp(e) {
event__dragMouseUp(e, touch) {
e.preventDefault();
this.#orig_mousePosX = 0;
@ -133,14 +154,16 @@ class WindowObject {
this.#isDragging = false;
}
event__dragMouseMove(e) {
event__dragMouseMove(e, touch) {
e.preventDefault();
if (this.#isDragging) {
var cX = touch ? e.touches[0].clientX : e.clientX;
var cY = touch ? e.touches[0].clientY : e.clientY;
this.windowObject.style.left =
this.#orig_selfPosX - (this.#orig_mousePosX - e.clientX) + "px";
this.#orig_selfPosX - (this.#orig_mousePosX - cX) + "px";
this.windowObject.style.top =
this.#orig_selfPosY - (this.#orig_mousePosY - e.clientY) + "px";
this.#orig_selfPosY - (this.#orig_mousePosY - cY) + "px";
}
}
@ -199,6 +222,12 @@ class WindowObject {
windowMaximizeButton.addEventListener("click", () =>
windowRef.maximizeWindow()
);
windowMaximizeButton.addEventListener("touchstart", (e) =>
e.stopPropagation()
);
windowMaximizeButton.addEventListener("touchend", (e) =>
e.stopPropagation()
);
windowManagerEnd.appendChild(windowMaximizeButton);
}
@ -211,6 +240,12 @@ class WindowObject {
windowDestroyButton.addEventListener("click", () =>
windowRef.destroy()
);
windowDestroyButton.addEventListener("touchstart", (e) =>
e.stopPropagation()
);
windowDestroyButton.addEventListener("touchend", (e) =>
e.stopPropagation()
);
windowManagerEnd.appendChild(windowDestroyButton);
}