1 files changed, 14 insertions, 110 deletions

diff --git a/web/share/js/kvm/keyboard.js b/web/share/js/kvm/keyboard.js
index 189abb2c..23d5665d 100644
--- a/web/share/js/kvm/keyboard.js
+++ b/web/share/js/kvm/keyboard.js
@@ -28,10 +28,12 @@ function Keyboard() {
 	var __ws = null;
 	var __online = true;
 
-	var __keys = [].slice.call($$$("div#keyboard-desktop div.keyboard-block div.keyboard-row div.key"));
-	var __modifiers = [].slice.call($$$("div#keyboard-desktop div.keyboard-block div.keyboard-row div.modifier"));
+	var __keypad = null;
+	var __use_release_hook = false;
 
 	var __init__ = function() {
+		__keypad = new Keypad("div#keyboard-window", __sendKey);
+
 		$("hid-keyboard-led").title = "Keyboard free";
 
 		$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
@@ -47,22 +49,11 @@ function Keyboard() {
 		window.addEventListener("focusin", __updateLeds);
 		window.addEventListener("focusout", __updateLeds);
 
-		tools.forEach($$("key"), function(el_key) {
-			tools.setOnDown(el_key, () => __clickHandler(el_key, true));
-			tools.setOnUp(el_key, () => __clickHandler(el_key, false));
-			el_key.onmouseout = function() {
-				if (__isPressed(el_key)) {
-					__clickHandler(el_key, false);
-				}
-			};
-		});
-
-		tools.forEach($$("modifier"), function(el_key) {
-			tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
-		});
-
 		if (tools.browser.is_mac) {
+			// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
+			// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
 			tools.info("Keyboard: enabled Mac-CMD-Hook");
+			__use_release_hook = true;
 		}
 	};
 
@@ -82,14 +73,10 @@ function Keyboard() {
 	};
 
 	self.releaseAll = function() {
-		__keys.concat(__modifiers).forEach(function(el_key) {
-			if (__isActive(el_key)) {
-				self.fireEvent(el_key.getAttribute("data-key"), false);
-			}
-		});
+		__keypad.releaseAll(__use_release_hook);
 	};
 
-	self.fireEvent = function(code, state) {
+	self.emit = function(code, state) {
 		__keyboardHandler({code: code}, state);
 	};
 
@@ -124,97 +111,14 @@ function Keyboard() {
 		if (event.preventDefault) {
 			event.preventDefault();
 		}
-		var el_key = document.querySelector(`[data-key='${event.code}']`);
-		if (el_key && !event.repeat) {
-			__commonHandler(el_key, state, "pressed");
-			if (tools.browser.is_mac) {
-				// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
-				// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
-				if ((event.code === "MetaLeft" || event.code === "MetaRight") && !state) {
-					__keys.forEach(function(el_key) {
-						if (__isActive(el_key)) {
-							self.fireEvent(el_key.getAttribute("data-key"), false);
-						}
-					});
-				}
-			}
-			__unholdModifiers();
-		}
-	};
-
-	var __clickHandler = function(el_key, state) {
-		__commonHandler(el_key, state, "pressed");
-		__unholdModifiers();
-	};
-
-	var __toggleModifierHandler = function(el_key) {
-		__commonHandler(el_key, !__isActive(el_key), "holded");
-	};
-
-	var __unholdModifiers = function() {
-		__modifiers.forEach(function(el_key) {
-			if (__isHolded(el_key)) {
-				__deactivate(el_key);
-				__sendKey(el_key, false);
-			}
-		});
-	};
-
-	var __commonHandler = function(el_key, state, cls) {
-		if (state && !__isActive(el_key)) {
-			__deactivate(el_key);
-			__activate(el_key, cls);
-			__sendKey(el_key, true);
-		} else {
-			__deactivate(el_key);
-			__sendKey(el_key, false);
+		if (!event.repeat) {
+			// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
+			// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
+			__keypad.emit(event.code, state, __use_release_hook);
 		}
 	};
 
-	var __isPressed = function(el_key) {
-		var is_pressed = false;
-		tools.forEach(__resolveKeys(el_key), function(el_key) {
-			is_pressed = (is_pressed || el_key.classList.contains("pressed"));
-		});
-		return is_pressed;
-	};
-
-	var __isHolded = function(el_key) {
-		var is_holded = false;
-		tools.forEach(__resolveKeys(el_key), function(el_key) {
-			is_holded = (is_holded || el_key.classList.contains("holded"));
-		});
-		return is_holded;
-	};
-
-	var __isActive = function(el_key) {
-		var is_active = false;
-		tools.forEach(__resolveKeys(el_key), function(el_key) {
-			is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
-		});
-		return is_active;
-	};
-
-	var __activate = function(el_key, cls) {
-		tools.forEach(__resolveKeys(el_key), function(el_key) {
-			el_key.classList.add(cls);
-		});
-	};
-
-	var __deactivate = function(el_key) {
-		tools.forEach(__resolveKeys(el_key), function(el_key) {
-			el_key.classList.remove("pressed");
-			el_key.classList.remove("holded");
-		});
-	};
-
-	var __resolveKeys = function(el_key) {
-		var code = el_key.getAttribute("data-key");
-		return $$$(`[data-key='${code}']`);
-	};
-
-	var __sendKey = function(el_key, state) {
-		var code = el_key.getAttribute("data-key");
+	var __sendKey = function(code, state) {
 		tools.debug("Keyboard: key", (state ? "pressed:" : "released:"), code);
 		if (__ws) {
 			__ws.send(JSON.stringify({