touch improvements

kvmd/web/css/main.css

@@ -14,7 +14,7 @@ a {
 	text-decoration: underline dotted;
 	color: var(--fg-color-normal);
 }
-@media (hover: hover) {
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
 	a:hover {
 		text-decoration: underline;
 	}
@@ -37,7 +37,7 @@ button, select {
 	outline: none;
 	cursor: pointer;
 }
-@media (hover: hover) {
+@media (hover: hover), (min--moz-device-pixel-ratio: 0) {
 	button:enabled:hover, select:enabled:hover {
 		color: var(--fg-color-intensive);
 		background-color: var(--bg-color-dark) !important;
@@ -45,6 +45,9 @@ button, select {
 	button:active, select:active {
 		color: var(--fg-color-selected) !important;
 	}
+	select:enabled:hover {
+		background-image: url("../svg/select-arrow-intensive.svg") !important;
+	}
 }
 @media (hover: none) {
 	button:active, select:active {
@@ -68,9 +71,6 @@ select {
 	background-position: center right;
 	background-repeat: no-repeat;
 }
-select:enabled:hover {
-	background-image: url("../svg/select-arrow-intensive.svg") !important;
-}
 select:disabled {
 	background-image: url("../svg/select-arrow-inactive.svg") !important;
 }
@@ -200,9 +200,5 @@ ul#footer li.footer-right {
 	float: right;
 }
 ul#footer li a {
-	text-decoration: underline dotted;
 	color: var(--fg-color-inactive);
 }
-ul#footer li a:hover {
-	text-decoration: underline;
-}

kvmd/web/js/atx.js

@@ -7,9 +7,9 @@ function Atx() {
 		$("atx-power-led").title = "Power Led";
 		$("atx-hdd-led").title = "Disk Activity Led";
 
-		$("atx-power-button").onclick = () => __clickButton("power", null, "Are you sure to click the power button?");
+		tools.setOnClick($("atx-power-button"), () => __clickButton("power", null, "Are you sure to click the power button?"));
-		$("atx-power-button-long").onclick = () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?");
+		tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?"));
-		$("atx-reset-button").onclick = () => __clickButton("reset", null, "Are you sure to reboot the server?");
+		tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", null, "Are you sure to reboot the server?"));
 	};
 
 	/********************************************************************************/

kvmd/web/js/hid.js

@@ -43,13 +43,13 @@ function Hid() {
 
 		if (window.navigator.clipboard && window.navigator.clipboard.readText) {
 			__chars_to_codes = __buildCharsToCodes();
-			$("pak-button").onclick = __pasteAsKeys;
+			tools.setOnClick($("pak-button"), __pasteAsKeys);
 		} else {
 			$("pak-button").title = $("pak-led").title = "Your browser does not support the Clipboard API.\nUse Google Chrome or Chromium.";
 		}
 
 		Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) {
-			el_shortcut.onclick = () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" "));
+			tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
 		});
 	};
 

kvmd/web/js/keyboard.js

@@ -29,19 +29,17 @@ function Keyboard() {
 		$("stream-window").onblur = __updateLeds;
 
 		Array.prototype.forEach.call($$("key"), function(el_key) {
-			el_key.onmousedown = () => __clickHandler(el_key, true);
+			tools.setOnDown(el_key, () => __clickHandler(el_key, true));
-			el_key.onmouseup = () => __clickHandler(el_key, false);
+			tools.setOnUp(el_key, () => __clickHandler(el_key, false));
 			el_key.onmouseout = function() {
 				if (__isPressed(el_key)) {
 					__clickHandler(el_key, false);
 				}
 			};
-			el_key.ontouchstart = (event) => __touchHandler(event, el_key, true);
-			el_key.ontouchend = (event) => __touchHandler(event, el_key, false);
 		});
 
 		Array.prototype.forEach.call($$("modifier"), function(el_key) {
-			el_key.onmousedown = () => __toggleModifierHandler(el_key);
+			tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
 		});
 
 		if (__mac_cmd_hook) {
@@ -68,10 +66,7 @@ function Keyboard() {
 	};
 
 	self.fireEvent = function(code, state) {
-		$("keyboard-window").dispatchEvent(new KeyboardEvent(
+		__keyboardHandler({code: code}, state);
-			(state ? "keydown" : "keyup"),
-			{code: code}
-		));
 	};
 
 	var __updateLeds = function() {
@@ -85,7 +80,9 @@ function Keyboard() {
 	};
 
 	var __keyboardHandler = function(event, state) {
+		if (event.preventDefault) {
 			event.preventDefault();
+		}
 		var el_key = document.querySelector("[data-key='" + event.code + "']");
 		if (el_key && !event.repeat) {
 			__commonHandler(el_key, state, "pressed");
@@ -104,12 +101,6 @@ function Keyboard() {
 		}
 	};
 
-	var __touchHandler = function(event, el_key, state) {
-		event.stopPropagation();
-		event.preventDefault();
-		__clickHandler(el_key, state);
-	};
-
 	var __clickHandler = function(el_key, state) {
 		__commonHandler(el_key, state, "pressed");
 		__unholdModifiers();

kvmd/web/js/mouse.js

@@ -24,10 +24,8 @@ function Mouse() {
 		$("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);
+			tools.setOnDown(el_button, () => __sendButton(button, true));
-			el_button.onmouseup = () => __sendButton(button, false);
+			tools.setOnUp(el_button, () => __sendButton(button, false));
-			el_button.ontouchstart = () => __sendButton(button, true);
-			el_button.ontouchend = () => __sendButton(button, false);
 		});
 
 		setInterval(__sendMove, 100);
@@ -74,7 +72,6 @@ function Mouse() {
 	};
 
 	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();

kvmd/web/js/msd.js

@@ -11,13 +11,13 @@ function Msd() {
 		$("msd-led").title = "Unknown state";
 
 		$("msd-select-new-image-file").onchange = __selectNewImageFile;
-		$("msd-select-new-image-button").onclick = () => $("msd-select-new-image-file").click();
+		tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
 
-		$("msd-upload-new-image-button").onclick = __clickUploadNewImageButton;
+		tools.setOnClick($("msd-upload-new-image-button"), __clickUploadNewImageButton);
-		$("msd-abort-uploading-button").onclick = __clickAbortUploadingButton;
+		tools.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton);
 
-		$("msd-switch-to-kvm-button").onclick = () => __clickSwitchButton("kvm");
+		tools.setOnClick($("msd-switch-to-kvm-button"), () => __clickSwitchButton("kvm"));
-		$("msd-switch-to-server-button").onclick = () => __clickSwitchButton("server");
+		tools.setOnClick($("msd-switch-to-server-button"), () => __clickSwitchButton("server"));
 	};
 
 	/********************************************************************************/

kvmd/web/js/stream.js

@@ -14,7 +14,7 @@ function Stream() {
 	var __init__ = function() {
 		$("stream-led").title = "Stream inactive";
 
-		$("stream-reset-button").onclick = __clickResetButton;
+		tools.setOnClick($("stream-reset-button"), __clickResetButton);
 		$("stream-resolution-select").onchange = __changeResolution;
 		$("stream-size-slider").oninput = __resize;
 		$("stream-size-slider").onchange = __resize;

kvmd/web/js/tools.js

@@ -10,6 +10,25 @@ var tools = new function() {
 		return http;
 	};
 
+	this.setOnClick = function(el, callback) {
+		el.onclick = el.ontouchend = function(event) {
+			event.preventDefault();
+			callback();
+		};
+	};
+	this.setOnDown = function(el, callback) {
+		el.onmousedown = el.ontouchstart = function(event) {
+			event.preventDefault();
+			callback();
+		};
+	};
+	this.setOnUp = function(el, callback) {
+		el.onmouseup = el.ontouchend = function(event) {
+			event.preventDefault();
+			callback();
+		};
+	};
+
 	this.debug = function(...args) {
 		if (__debug) {
 			console.log("LOG/DEBUG", ...args);  // eslint-disable-line no-console

kvmd/web/js/ui.js

@@ -15,7 +15,7 @@ function Ui() {
 		});
 
 		Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
-			el_item.onclick = () => __toggleMenu(el_item);
+			tools.setOnClick(el_item, () => __toggleMenu(el_item));
 			__ctl_items.push(el_item);
 		});
 
@@ -25,22 +25,22 @@ function Ui() {
 
 			var el_button = el_window.querySelector(".window-header .window-button-close");
 			if (el_button) {
-				el_button.onclick = function() {
+				tools.setOnClick(el_button, function() {
 					el_window.style.visibility = "hidden";
 					__raiseLastWindow();
-				};
+				});
 			}
 		});
 
 		window.onmouseup = __globalMouseButtonHandler;
-		// window.oncontextmenu = __globalMouseButtonHandler;
+		window.ontouchend = __globalMouseButtonHandler;
 
 		window.addEventListener("resize", () => __organizeWindowsOnResize(false));
 		window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
 
-		$("show-about-button").onclick = () => self.showWindow($("about-window"));
+		tools.setOnClick($("show-about-button"), () => self.showWindow($("about-window")));
-		$("show-keyboard-button").onclick = () => self.showWindow($("keyboard-window"));
+		tools.setOnClick($("show-keyboard-button"), () => self.showWindow($("keyboard-window")));
-		$("show-stream-button").onclick = () => self.showWindow($("stream-window"));
+		tools.setOnClick($("show-stream-button"), () => self.showWindow($("stream-window")));
 
 		self.showWindow($("stream-window"));
 	};
@@ -90,15 +90,13 @@ function Ui() {
 				if (cancel) {
 					var el_cancel_button = document.createElement("button");
 					el_cancel_button.innerHTML = "Cancel";
-					el_cancel_button.onclick = () => close(false);
+					tools.setOnClick(el_cancel_button, () => 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);
+					tools.setOnClick(el_ok_button, () => close(true));
-					el_cancel_button.ontouchstart = function() {};
 					el_buttons.appendChild(el_ok_button);
 				}
 				if (ok && cancel) {
@@ -165,6 +163,7 @@ function Ui() {
 		__ctl_items.forEach(function(el_item) {
 			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
 			if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
+				el_item.focus();
 				el_item.classList.add("ctl-item-selected");
 				el_menu.style.visibility = "visible";
 				all_hidden &= false;
@@ -283,7 +282,7 @@ function Ui() {
 		}
 
 		el_window.setAttribute("data-centered", "");
-		el_window.onclick = () => __raiseWindow(el_window);
+		tools.setOnClick(el_window, () => __raiseWindow(el_window));
 
 		el_grab.onmousedown = startMoving;
 		el_grab.ontouchstart = startMoving;
@@ -303,11 +302,9 @@ function Ui() {
 	};
 
 	var __raiseWindow = function(el_window) {
-		if (el_window.className === "modal") {
+		var el_to_focus = (el_window.className === "modal" ? el_window.querySelector(".modal-window") : el_window);
-			el_window.querySelector(".modal-window").focus();
+		if (document.activeElement !== el_to_focus) {
-		} else {
+			el_to_focus.focus();
-			el_window.focus();
-		}
 			tools.debug("Focused window:", el_window);
 			if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
 				var z_index = __top_z_index + 1;
@@ -315,6 +312,7 @@ function Ui() {
 				__top_z_index = z_index;
 				tools.debug("Raised window:", el_window);
 			}
+		}
 	};
 
 	__init__();