summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--kvmd/web/css/main.css26
-rw-r--r--kvmd/web/css/mobile.css10
-rw-r--r--kvmd/web/css/stream.css7
-rw-r--r--kvmd/web/index.html4
-rw-r--r--kvmd/web/js/mouse.js70
-rw-r--r--kvmd/web/js/ui.js8
6 files changed, 76 insertions, 49 deletions
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index d8477ed5..8290ef42 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -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;
diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css
index a298865f..0675b6c9 100644
--- a/kvmd/web/css/mobile.css
+++ b/kvmd/web/css/mobile.css
@@ -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;
diff --git a/kvmd/web/css/stream.css b/kvmd/web/css/stream.css
index 01fd3cc4..dc510a62 100644
--- a/kvmd/web/css/stream.css
+++ b/kvmd/web/css/stream.css
@@ -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;
+}
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 9cf6b87f..4d284e04 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -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">
diff --git a/kvmd/web/js/mouse.js b/kvmd/web/js/mouse.js
index 9ee92053..30897233 100644
--- a/kvmd/web/js/mouse.js
+++ b/kvmd/web/js/mouse.js
@@ -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) {
diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js
index 60284d61..6b519bdc 100644
--- a/kvmd/web/js/ui.js
+++ b/kvmd/web/js/ui.js
@@ -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) {
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 09:33:11 +0000