mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
testing mouse buttons for touch interface
This commit is contained in:
Devaev Maxim
parent
1bf3506d2e
commit
ecb866f57a
@ -14,8 +14,10 @@ a {
|
||||
text-decoration: underline dotted;
|
||||
color: var(--fg-color-normal);
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -35,17 +37,25 @@ button, select {
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button:enabled:hover, select:enabled:hover {
|
||||
color: var(--fg-color-intensive);
|
||||
background-color: var(--bg-color-dark) !important;
|
||||
@media (hover: hover) {
|
||||
button:enabled:hover, select:enabled:hover {
|
||||
color: var(--fg-color-intensive);
|
||||
background-color: var(--bg-color-dark) !important;
|
||||
}
|
||||
button:active, select:active {
|
||||
color: var(--fg-color-selected) !important;
|
||||
}
|
||||
}
|
||||
@media (hover: none) {
|
||||
button:active, select:active {
|
||||
color: var(--fg-color-intensive);
|
||||
background-color: var(--bg-color-dark);
|
||||
}
|
||||
}
|
||||
button:disabled, select:disabled {
|
||||
color: var(--fg-color-inactive);
|
||||
cursor: default;
|
||||
}
|
||||
button:active, select:active {
|
||||
color: var(--fg-color-selected) !important;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: button;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488
|
||||
*/
|
||||
|
||||
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
|
||||
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
|
||||
div.window {
|
||||
padding-top: 45px !important;
|
||||
}
|
||||
@ -25,16 +25,16 @@
|
||||
color: var(--fg-color-normal);
|
||||
background-color: var(--bg-color-gray);
|
||||
}
|
||||
|
||||
div#stream-mouse-buttons {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
|
||||
button, select {
|
||||
height: 45px !important;
|
||||
}
|
||||
button:enabled:hover, select:enabled:hover {
|
||||
color: var(--fg-color-normal) !important;
|
||||
background-color: var(--bg-color-normal) !important;
|
||||
}
|
||||
|
||||
div.modal-buttons button {
|
||||
height: 50px !important;
|
||||
|
||||
@ -100,3 +100,10 @@ div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-thumb
|
||||
border-radius: 25px;
|
||||
background: var(--bg-color-intensive);
|
||||
}
|
||||
|
||||
div#stream-mouse-buttons {
|
||||
display: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@ -246,6 +246,10 @@
|
||||
<div id="stream-box" class="stream-box-inactive">
|
||||
<img id="stream-image" class="stream-image-inactive" src="png/blank-stream.png" />
|
||||
</div>
|
||||
<div id="stream-mouse-buttons">
|
||||
<button data-mouse-button="left" class="row50">Left Click</button>
|
||||
<button data-mouse-button="right" class="row50">Right Click</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="keyboard-window" class="window" tabindex="0">
|
||||
|
||||
@ -21,8 +21,14 @@ function Mouse() {
|
||||
$("stream-box").onmousemove = __moveHandler;
|
||||
$("stream-box").onwheel = __wheelHandler;
|
||||
|
||||
$("stream-box").ontouchstart = (event) => __touchHandler(event, true);
|
||||
$("stream-box").ontouchend = (event) => __touchHandler(event, false);
|
||||
$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
|
||||
Array.prototype.forEach.call(document.querySelectorAll("[data-mouse-button]"), function(el_button) {
|
||||
var button = el_button.getAttribute("data-mouse-button");
|
||||
el_button.onmousedown = () => __sendButton(button, true);
|
||||
el_button.onmouseup = () => __sendButton(button, false);
|
||||
el_button.ontouchstart = () => __sendButton(button, true);
|
||||
el_button.ontouchend = () => __sendButton(button, false);
|
||||
});
|
||||
|
||||
setInterval(__sendMove, 100);
|
||||
};
|
||||
@ -58,8 +64,19 @@ function Mouse() {
|
||||
}
|
||||
};
|
||||
|
||||
var __touchHandler = function(event, state) {
|
||||
if (state) {
|
||||
var __buttonHandler = function(event, state) {
|
||||
// https://www.w3schools.com/jsref/event_button.asp
|
||||
event.preventDefault();
|
||||
switch (event.button) {
|
||||
case 0: __sendButton("left", state); break;
|
||||
case 2: __sendButton("right", state); break;
|
||||
}
|
||||
};
|
||||
|
||||
var __touchMoveHandler = function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
|
||||
var rect = event.touches[0].target.getBoundingClientRect();
|
||||
__current_pos = {
|
||||
x: Math.round(event.touches[0].clientX - rect.left),
|
||||
@ -67,38 +84,6 @@ function Mouse() {
|
||||
};
|
||||
__sendMove();
|
||||
}
|
||||
var button = "left"; // TODO
|
||||
tools.debug("Mouse button", (state ? "pressed:" : "released:"), button);
|
||||
if (__ws) {
|
||||
__ws.send(JSON.stringify({
|
||||
event_type: "mouse_button",
|
||||
button: button,
|
||||
state: state,
|
||||
}));
|
||||
}
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
var __buttonHandler = function(event, state) {
|
||||
// https://www.w3schools.com/jsref/event_button.asp
|
||||
var button = null;
|
||||
switch (event.button) {
|
||||
case 0: button = "left"; break;
|
||||
case 2: button = "right"; break;
|
||||
}
|
||||
if (button) {
|
||||
event.preventDefault();
|
||||
tools.debug("Mouse button", (state ? "pressed:" : "released:"), button);
|
||||
__sendMove();
|
||||
if (__ws) {
|
||||
__ws.send(JSON.stringify({
|
||||
event_type: "mouse_button",
|
||||
button: button,
|
||||
state: state,
|
||||
}));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var __moveHandler = function(event) {
|
||||
@ -109,6 +94,19 @@ function Mouse() {
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
var __sendButton = function(button, state) {
|
||||
tools.debug("Mouse button", (state ? "pressed:" : "released:"), button);
|
||||
__sendMove();
|
||||
if (__ws) {
|
||||
__ws.send(JSON.stringify({
|
||||
event_type: "mouse_button",
|
||||
button: button,
|
||||
state: state,
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
var __sendMove = function() {
|
||||
var pos = __current_pos;
|
||||
if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
|
||||
|
||||
@ -8,6 +8,12 @@ function Ui() {
|
||||
var __ctl_items = [];
|
||||
|
||||
var __init__ = function() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll("button"), function(el_button) {
|
||||
// XXX: Workaround for iOS Safari:
|
||||
// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
|
||||
el_button.ontouchstart = function() {};
|
||||
});
|
||||
|
||||
Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
|
||||
el_item.onclick = () => __toggleMenu(el_item);
|
||||
__ctl_items.push(el_item);
|
||||
@ -85,12 +91,14 @@ function Ui() {
|
||||
var el_cancel_button = document.createElement("button");
|
||||
el_cancel_button.innerHTML = "Cancel";
|
||||
el_cancel_button.onclick = () => close(false);
|
||||
el_cancel_button.ontouchstart = function() {};
|
||||
el_buttons.appendChild(el_cancel_button);
|
||||
}
|
||||
if (ok) {
|
||||
var el_ok_button = document.createElement("button");
|
||||
el_ok_button.innerHTML = "OK";
|
||||
el_ok_button.onclick = () => close(true);
|
||||
el_cancel_button.ontouchstart = function() {};
|
||||
el_buttons.appendChild(el_ok_button);
|
||||
}
|
||||
if (ok && cancel) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user