fixed some keyboard corner cases

2 files changed, 40 insertions, 14 deletions

diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js
index 93a980bb..ccab02cc 100644
--- a/kvmd/web/js/hid.js
+++ b/kvmd/web/js/hid.js
@@ -1,5 +1,6 @@
 var hid = new function() {
 	var __install_timer = null;
+	var __installed = false;
 
 	this.init = function() {
 		keyboard.init();
@@ -12,12 +13,7 @@ var hid = new function() {
 		[[codes, true], [codes.slice().reverse(), false]].forEach(function(op) {
 			var [op_codes, state] = op;
 			op_codes.forEach(function(code) {
-				setTimeout(function() {
-					document.dispatchEvent(new KeyboardEvent(
-						(state ? "keydown" : "keyup"),
-						{code: code},
-					));
-				}, delay);
+				setTimeout(() => keyboard.fireEvent(code, state), delay);
 				delay += 100;
 			});
 		});
@@ -32,6 +28,7 @@ var hid = new function() {
 						mouse.setSocket(ws);
 					}
 					keyboard.setSocket(ws);
+					__installed = true;
 				} else {
 					tools.error("Can't resolve HID features:", http.responseText);
 					__install_timer = setTimeout(() => hid.installCapture(ws), 1000);
@@ -45,7 +42,10 @@ var hid = new function() {
 			clearTimeout(__install_timer);
 			__install_timer = null;
 		}
-		mouse.setSocket(null);
-		keyboard.setSocket(null);
+		if (__installed) {
+			mouse.setSocket(null);
+			keyboard.setSocket(null);
+			__installed = false;
+		}
 	};
 }
diff --git a/kvmd/web/js/keyboard.js b/kvmd/web/js/keyboard.js
index 9caae324..13b96561 100644
--- a/kvmd/web/js/keyboard.js
+++ b/kvmd/web/js/keyboard.js
@@ -1,5 +1,6 @@
 var keyboard = new function() {
 	var __ws = null;
+	var __keys = [];
 	var __modifiers = [];
 
 	this.init = function() {
@@ -9,6 +10,12 @@ var keyboard = new function() {
 		Array.prototype.forEach.call(document.getElementsByClassName("key"), function(el_key) {
 			el_key.onmousedown = () => __clickHandler(el_key, true);
 			el_key.onmouseup = () => __clickHandler(el_key, false);
+			el_key.onmouseout = function() {
+				if (__isPressed(el_key)) {
+					__clickHandler(el_key, false);
+				}
+			};
+			__keys.push(el_key);
 		});
 		Array.prototype.forEach.call(document.getElementsByClassName("modifier"), function(el_key) {
 			el_key.onmousedown = () => __toggleModifierHandler(el_key);
@@ -17,10 +24,22 @@ var keyboard = new function() {
 	};
 
 	this.setSocket = function(ws) {
+		__keys.concat(__modifiers).forEach(function(el_key) {
+			if (__isActive(el_key)) {
+				keyboard.fireEvent(el_key.id, false);
+			}
+		});
 		__ws = ws;
 		$("hid-keyboard-led").className = (ws ? "led-on" : "led-off");
 	};
 
+	this.fireEvent = function(code, state) {
+		document.dispatchEvent(new KeyboardEvent(
+			(state ? "keydown" : "keyup"),
+			{code: code},
+		));
+	};
+
 	var __keyboardHandler = function(event, state) {
 		event.preventDefault();
 		el_key = $(event.code);
@@ -42,8 +61,7 @@ var keyboard = new function() {
 	var __unholdModifiers = function() {
 		__modifiers.forEach(function(el_key) {
 			if (__isHolded(el_key)) {
-				el_key.classList.remove("pressed");
-				el_key.classList.remove("holded");
+				__deactivate(el_key);
 				__sendKey(el_key.id, false);
 			}
 		});
@@ -51,22 +69,30 @@ var keyboard = new function() {
 
 	var __commonHandler = function(el_key, state, cls) {
 		if (state && !__isActive(el_key)) {
-			el_key.classList.remove("holded");
+			__deactivate(el_key);
 			el_key.classList.add(cls);
 			__sendKey(el_key.id, true);
 		} else {
-			el_key.classList.remove("pressed");
-			el_key.classList.remove("holded");
+			__deactivate(el_key);
 			__sendKey(el_key.id, false);
 		}
 	};
 
+	var __isPressed = function(el_key) {
+		return el_key.classList.contains("pressed");
+	};
+
 	var __isHolded = function(el_key) {
 		return el_key.classList.contains("holded");
 	};
 
 	var __isActive = function(el_key) {
-		return (el_key.classList.contains("pressed") || __isHolded(el_key));
+		return (__isPressed(el_key) || __isHolded(el_key));
+	};
+
+	var __deactivate = function(el_key) {
+		el_key.classList.remove("pressed");
+		el_key.classList.remove("holded");
 	};
 
 	var __sendKey = function(code, state) {