Touch support

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