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 @@

-
+