Scroll change, cleanup, logic changes

src/core/static/css/main.css

@@ -51,7 +51,6 @@ input {
 }
 
 #rightClickBtn {
-    display: none; /* Hide button unless screen bigger than media query says it is */
     border-style: dashed;
     border-width: 2px;
     overflow: auto;
@@ -72,6 +71,10 @@ input {
     width: 100%;
 }
 
+#scrollToggleContainer,
+#rightClickBtn {
+    display: none; /* Hide button unless screen bigger than media query says it is */
+}
 
 @media only screen and (max-device-width: 800px) {
     #sendKeysField {
@@ -86,8 +89,9 @@ input {
     	margin: 0 auto;
     }
 
+    #scrollToggleContainer,
     #rightClickBtn {
-        display: inline-block;
+        display: block;
     }
 }
 

src/core/static/js/events.js

@@ -3,6 +3,7 @@ let mouseHoldToggle  = document.getElementById("mouseHoldToggle");
 let scrollTggl       = document.getElementById("scrollToggle");
 let clickSound       = document.getElementById("clickSound");
 let isHoldingMouse   = false;
+let isTwoFinger      = false;
 let isScrolling      = false;
 let isRightClicking  = false;
 let isClicking       = true;
@@ -21,8 +22,7 @@ socket.on('connect', function() {
 $(function () {
     $.mousedirection();
     $("#canvas").on("mousedirection", function (e) {
-        isClicking       = false;
-        isRightClicking  = false;
+        isClicking = false;
 
         if (e.direction == "up") {
             px = 0;
@@ -71,12 +71,23 @@ function touchHandler(event) {
     if (event.type == "touchstart" && event.touches.length > 1) {
         isClicking      = false;
         isRightClicking = true;
+        isTwoFinger     = true;
     }
 
-    if (event.type == "touchend" && isRightClicking) {
+    if (event.type == "touchmove" && isTwoFinger) {
+        isClicking      = false;
         isRightClicking = false;
-        rightClick();
-        return ;
+        isScrolling     = true;
+    }
+
+    if (event.type == "touchend") {
+        isTwoFinger = false;
+        isScrolling = false;
+        if (isRightClicking) {
+            isRightClicking = false;
+            rightClick();
+            return ;
+        }
     }
 
     let touches = event.changedTouches,

src/core/static/js/main.css

@@ -1,99 +0,0 @@
-/* Elms */
-ul, li {
-    list-style: none;
-}
-
-body {
-    touch-action: manipulation;
-    overflow: hidden; /* Used to prevent touch scroll down reloading page. Ref: https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature */
-    -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-       -khtml-user-select: none; /* Konqueror HTML */
-         -moz-user-select: none; /* Old versions of Firefox */
-          -ms-user-select: none; /* Internet Explorer/Edge */
-              user-select: none; /* Non-prefixed version, currently
-                                    supported by Chrome, Opera and Firefox */
-}
-
-input {
-    width: 100% !important;
-    margin: 0 auto !important;
-    background-color: #00000000 !important;
-}
-
-
-/* IDs */
-#bg {
-    position: fixed;
-    top: 0%;
-    left: 0%;
-    width: 100%;
-    height: 100%;
-    z-index: -999;
-}
-
-#bg img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: -999;
-}
-
-#canvas {
-    position: relative;
-    width: 98%;
-    min-height: 1000px;
-    border: 2px solid #c3c3c3;
-}
-
-#rightClickBtn {
-    display: none; /* Hide button unless screen bigger than media query says it is */
-    border-style: dashed;
-    border-width: 2px;
-    overflow: auto;
-    font-size: 280%;
-}
-
-#rightClickBtn:hover {
-    background-color: rgba(0, 232, 255, 0.5);
-    cursor: pointer;
-}
-
-#sendKeysBtn,
-#pressEnterBtn,
-#scrollToggle,
-#mouseHoldToggle {
-    display: inline-block;
-    font-size: 280%;
-    width: 100%;
-}
-
-
-@media only screen and (max-device-width: 800px) {
-    #sendKeysField {
-        font-size: 300% !important;
-    }
-}
-
-/* nothing with screen size smaller than 8000px */
-@media only screen and (min-device-width: 801px) {
-    body {
-    	width: 800px;
-    	margin: 0 auto;
-    }
-
-    #rightClickBtn {
-        display: inline-block;
-    }
-}
-
-
-/* Classes */
-/* Other message text colors */
-.errorTxt   { color: rgb(170, 18, 18);  }
-.warningTxt { color: rgb(255, 168, 0);  }
-.successTxt { color: rgb(136, 204, 39); }

src/core/templates/index.html

@@ -28,7 +28,7 @@
     </div>
     <br/><br/>
     <div class="row">
-        <div class="col justify-content-center text-center">
+        <div id="scrollToggleContainer" class="col justify-content-center text-center">
             <button id="scrollToggle" class="btn btn-success btn-lg">Scroll Mode: Inactive</button>
         </div>
         <div class="col justify-content-center text-center">