diff --git a/views/scripts/windows.js b/views/scripts/windows.js index c33d794..4314672 100755 --- a/views/scripts/windows.js +++ b/views/scripts/windows.js @@ -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", () => { - window.open(this.content); - }); + 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); }