mobile freindly mouse code cleanup

xibyte · Aug 25, 2023 · c244bc2 · c244bc2
1 parent 92cf2ce
commit c244bc2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 100 deletions.
diff --git a/web/mouse.html b/web/mouse.html
@@ -117,7 +117,6 @@
         overflow-x: hidden;
         overflow-y: hidden;
         overflow: hidden;
-
     }
 
     iframe {
@@ -128,8 +127,6 @@
         border: 0px;
         z-index: 1;
         overflow: hidden;
-        zoom: 0.25;
-
     }
 
 
@@ -145,18 +142,6 @@
         margin: 20px;
         float: left;
     }
-
-
-
-    #saveSettings {
-        width: 100%;
-        height: 100%;
-        font-size: large;
-        cursor: pointer;
-        text-align: center;
-        text-decoration: none;
-        background-color: #4CAF50;
-    }
 </style>
 
 <body>
@@ -195,18 +180,28 @@
         }
 
         #settings>div {
-            border: 2px dashed rgba(0, 0, 0, 0.4);
+            border: 2px solid rgba(0, 0, 0, 0.4);
+
             border-radius: 10px;
             margin: 0px;
             overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: klarge;
+            background-color: rgb(173, 157, 130);
         }
 
         #settingsWindowLabel1 {
             grid-area: 1 / 1 / 2 / 2;
         }
 
-        #settingsWindow1 {
+        #saveSettings {
             grid-area: 1 / 2 / 2 / 6;
+            cursor: pointer;
+            text-align: center;
+            text-decoration: none;
+            color: #ff0000;
         }
 
         #settingsWindowLabel2 {
@@ -245,7 +240,7 @@
             grid-area: 6 / 1 / 7 / 2;
         }
 
-        #settingsWindow6 {
+        #fullscreenToggle {
             grid-area: 6 / 2 / 7 / 4;
         }
 
@@ -270,10 +265,8 @@
 
 
     <div id="settings">
-
-        <div id="settingsWindowLabel1"></div>
-        <div id="settingsWindow1">
-            <button id="saveSettings">Close Settings</button>
+        <div id="saveSettings">
+            Close Settings
         </div>
 
 
@@ -284,21 +277,22 @@
             <output>.6</output>
         </div>
 
-        <div id="settingsWindowLabel3"></div>
         <div id="toggleUItabs">
             Toggel Tabs
         </div>
 
-        <div id="settingsWindowLabel4"></div>
         <div id="toggleUIoverlay">
             Toggle objects overlay
         </div>
 
-        <div id="settingsWindowLabel5"></div>
         <div id="toggleUItoolbar">
             Toggle menues
         </div>
 
+        <div id="fullscreenToggle">
+            Toggle fullscreen mode
+            ⛶
+        </div>
 
     </div>
 

diff --git a/web/mouse/checkIfMobile.js b/web/mouse/checkIfMobile.js
@@ -1,22 +1,22 @@
-    // check for common mobile user agents
-    if (
-        navigator.userAgent.match(/Android/i) ||
-        navigator.userAgent.match(/webOS/i) ||
-        navigator.userAgent.match(/iPhone/i) ||
-        navigator.userAgent.match(/iPad/i) ||
-        navigator.userAgent.match(/iPod/i) ||
-        navigator.userAgent.match(/BlackBerry/i) ||
-        navigator.userAgent.match(/Windows Phone/i)
-      ) {
-        // the user is using a mobile device, so redirect to the mobile version of the website
-        try {
-          //detect iframe parent and see if it is the mobile mouse
-          //if frame is loaded in mouse page do nothing otherwise redirect to mouse page
-          if ( window.location.pathname == window.parent.location.pathname ) {
-            //test if parent is mobile mouse emulator page and redirect if not
-            if (!window.parent.location.pathname.includes("/mouse.html")){
-              window.location = "./mouse.html" + window.location.search;
-            }
-          }
-        } catch { }
-      }
+// check for common mobile user agents
+if (
+  navigator.userAgent.match(/Android/i) ||
+  navigator.userAgent.match(/webOS/i) ||
+  navigator.userAgent.match(/iPhone/i) ||
+  navigator.userAgent.match(/iPad/i) ||
+  navigator.userAgent.match(/iPod/i) ||
+  navigator.userAgent.match(/BlackBerry/i) ||
+  navigator.userAgent.match(/Windows Phone/i)
+) {
+  // the user is using a mobile device, so redirect to the mobile version of the website
+  try {
+    //detect iframe parent and see if it is the mobile mouse
+    //if frame is loaded in mouse page do nothing otherwise redirect to mouse page
+    if (window.location.pathname == window.parent.location.pathname) {
+      //test if parent is mobile mouse emulator page and redirect if not
+      if (!window.parent.location.pathname.includes("/mouse.html")) {
+        window.location = "./mouse.html" + window.location.search;
+      }
+    }
+  } catch {}
+}
diff --git a/web/mouse/mouseController.js b/web/mouse/mouseController.js
@@ -38,25 +38,20 @@ function sendNewEvent(eventType) {
 }
 
 document.getElementById("touchpadArea").addEventListener("touchstart", function (event) {
-  if (window.innerHeight !== screen.height) document.body.requestFullscreen();
-
-  if (event.touches.length == 1){
+  if (event.touches.length == 1) {
     lastTouchX = event.touches[0].clientX;
     lastTouchY = event.touches[0].clientY;
   }
 
-  if (event.touches.length ==2){
+  if (event.touches.length == 2) {
     lastScrollY = event.touches[0].clientY;
     zooming = true;
     event.preventDefault();
-
   }
-
 });
 
-
 document.getElementById("touchpadArea").addEventListener("touchend", function (event) {
-  if (event.touches.length ==2){
+  if (event.touches.length == 2) {
     zooming = false;
     mouseObject.deltaY = 0;
     lastScrollY = 0;
@@ -65,10 +60,6 @@ document.getElementById("touchpadArea").addEventListener("touchend", function (e
 });
 
 document.getElementById("touchpadArea").addEventListener("click", async function (event) {
-  // //alert(await sendNewEvent("whatUnderTouchLocation"));
-  // let bla =  await sendNewEvent("whatUnderTouchLocation");
-  // console.log(bla)
-
   document.getElementById("leftMouseButton").click();
 });
 
@@ -85,31 +76,31 @@ document.getElementById("touchpadArea").addEventListener("contextmenu", function
 
 document.getElementById("touchpadArea").addEventListener("touchmove", function (event) {
   event.preventDefault();
-  if (event.touches.length == 1){
+  if (event.touches.length == 1) {
     let x = event.touches[0].clientX;
     let y = event.touches[0].clientY;
-  
+
     let difrenceX = x - lastTouchX;
     let difrenceY = y - lastTouchY;
-  
+
     lastTouchX = x;
     lastTouchY = y;
-  
+
     mouseObject.absoluteX = mouseObject.absoluteX + difrenceX * speed;
     mouseObject.absoluteY = mouseObject.absoluteY + difrenceY * speed;
-  
+
     mouseObject.absoluteX = mouseObject.absoluteX > 0 ? mouseObject.absoluteX : 1;
     mouseObject.absoluteY = mouseObject.absoluteY > 0 ? mouseObject.absoluteY : 1;
-  
+
     cursor.style.left = mouseObject.absoluteX + "px";
     cursor.style.top = mouseObject.absoluteY + "px";
-  
+
     sendNewEvent("mousemove");
   }
 
-  if (event.touches.length == 2){
+  if (event.touches.length == 2) {
     //zoom zoom zoom
-    console.log("zoom zoom zoom")
+    console.log("zoom zoom zoom");
 
     let y = event.touches[0].clientY;
     let difrenceY = y - lastScrollY;
@@ -167,7 +158,7 @@ document.getElementById("rightMouseButton").addEventListener("click", function (
     mouseObject.rightMouseDown = false;
     event.target.style.backgroundColor = InactiveButtonBackgroundColor;
     sendNewEvent("mousemove");
-  }else{
+  } else {
     doRightClick();
   }
 });
@@ -255,12 +246,10 @@ window.addEventListener("message", function (event) {
   if (event.data == "showTouchpad") toggleMousepad("show");
 });
 
-
-
 pointerTarget.onload = function () {
   const elem = document.createElement(`script`);
   elem.src = "./mouse/virtualMousePointer.js";
-  elem.type="module";
+  elem.type = "module";
 
   pointerTarget.contentDocument.body.appendChild(elem);
 
@@ -298,3 +287,11 @@ document.getElementById("settingsButton").onclick = function (event) {
   document.getElementById("settings").style.display = "";
   //console.log("dats the window locations", window.location.search);
 };
+
+document.getElementById("fullscreenToggle").onclick = (event) => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen();
+  } else {
+    document.documentElement.requestFullscreen();
+  }
+};