fixed some keyboard corner cases

1 files changed, 32 insertions, 6 deletions

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