MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Touch support

Browse source
This commit is contained in:
MeowcaTheoRange 2023-11-23 12:26:44 -06:00
parent e28fa649a7
commit 5b752df28e
1 changed files with 48 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
views/scripts/windows.js
View file

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