testing mouse buttons for touch interface

kvmd/web/css/main.css

@@ -14,8 +14,10 @@ a {
 	text-decoration: underline dotted;
 	color: var(--fg-color-normal);
 }
-a:hover {
+@media (hover: hover) {
-	text-decoration: underline;
+	a:hover {
+		text-decoration: underline;
+	}
 }
 
 hr {
@@ -35,17 +37,25 @@ button, select {
 	outline: none;
 	cursor: pointer;
 }
-button:enabled:hover, select:enabled:hover {
+@media (hover: hover) {
-	color: var(--fg-color-intensive);
+	button:enabled:hover, select:enabled:hover {
-	background-color: var(--bg-color-dark) !important;
+		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;

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;

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;
+}

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

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").ontouchstart = (event) => __touchMoveHandler(event);
-		$("stream-box").ontouchend = (event) => __touchHandler(event, false);
+		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) {
+	var __buttonHandler = function(event, state) {
-		if (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) {

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) {