diff --git a/src/core/static/css/main.css b/src/core/static/css/main.css
index b98b752..b688417 100644
--- a/src/core/static/css/main.css
+++ b/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;
}
}
diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js
index 34ebd0c..a2e1197 100644
--- a/src/core/static/js/events.js
+++ b/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,
diff --git a/src/core/static/js/main.css b/src/core/static/js/main.css
deleted file mode 100644
index b98b752..0000000
--- a/src/core/static/js/main.css
+++ /dev/null
@@ -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); }
diff --git a/src/core/templates/index.html b/src/core/templates/index.html
index 10f1750..5977fb6 100644
--- a/src/core/templates/index.html
+++ b/src/core/templates/index.html
@@ -28,7 +28,7 @@