Scroll change, cleanup, logic changes

This commit is contained in:
Maxim Stewart 2020-07-09 21:55:45 -05:00
parent e7df3f47f8
commit 9bfa74ad50
4 changed files with 23 additions and 107 deletions

View File

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

View File

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

View File

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

View File

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