ipad mouse buttons, keyboard refactoring

3 files changed, 35 insertions, 128 deletions

diff --git a/web/share/js/kvm/hid.js b/web/share/js/kvm/hid.js
index 9ecc4be5..c731843c 100644
--- a/web/share/js/kvm/hid.js
+++ b/web/share/js/kvm/hid.js
@@ -91,6 +91,7 @@ function Hid() {
 
 	var __releaseAll = function() {
 		__keyboard.releaseAll();
+		__mouse.releaseAll();
 	};
 
 	var __emitShortcut = function(codes) {
@@ -107,7 +108,7 @@ function Hid() {
 
 			var index = 0;
 			var iterate = () => setTimeout(function() {
-				__keyboard.fireEvent(raw_events[index].code, raw_events[index].state);
+				__keyboard.emit(raw_events[index].code, raw_events[index].state);
 				++index;
 				if (index < raw_events.length) {
 					iterate();
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({
diff --git a/web/share/js/kvm/mouse.js b/web/share/js/kvm/mouse.js
index 1b93e6ab..e63a639a 100644
--- a/web/share/js/kvm/mouse.js
+++ b/web/share/js/kvm/mouse.js
@@ -28,6 +28,8 @@ function Mouse() {
 	var __ws = null;
 	var __online = true;
 
+	var __keypad = null;
+
 	var __current_pos = {x: 0, y:0};
 	var __sent_pos = {x: 0, y:0};
 	var __wheel_delta = {x: 0, y: 0};
@@ -35,22 +37,18 @@ function Mouse() {
 	var __stream_hovered = false;
 
 	var __init__ = function() {
+		__keypad = new Keypad("div#stream-mouse-buttons", __sendButton);
+
 		$("hid-mouse-led").title = "Mouse free";
 
 		$("stream-box").onmouseenter = __hoverStream;
 		$("stream-box").onmouseleave = __leaveStream;
-		$("stream-box").onmousedown = (event) => __buttonHandler(event, true);
-		$("stream-box").onmouseup = (event) => __buttonHandler(event, false);
+		$("stream-box").onmousedown = (event) => __streamButtonHandler(event, true);
+		$("stream-box").onmouseup = (event) => __streamButtonHandler(event, false);
 		$("stream-box").oncontextmenu = (event) => event.preventDefault();
-		$("stream-box").onmousemove = __moveHandler;
-		$("stream-box").onwheel = __wheelHandler;
-		$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
-
-		tools.forEach($$$("[data-mouse-button]"), function(el_button) {
-			var button = el_button.getAttribute("data-mouse-button");
-			tools.setOnDown(el_button, () => __sendButton(button, true));
-			tools.setOnUp(el_button, () => __sendButton(button, false));
-		});
+		$("stream-box").onmousemove = __streamMoveHandler;
+		$("stream-box").onwheel = __streamWheelHandler;
+		$("stream-box").ontouchstart = (event) => __streamTouchMoveHandler(event);
 
 		setInterval(__sendMove, 100);
 	};
@@ -72,6 +70,10 @@ function Mouse() {
 		__updateLeds();
 	};
 
+	self.releaseAll = function() {
+		__keypad.releaseAll();
+	};
+
 	var __hoverStream = function() {
 		__stream_hovered = true;
 		__updateLeds();
@@ -106,16 +108,16 @@ function Mouse() {
 		$("hid-mouse-led").title = title;
 	};
 
-	var __buttonHandler = function(event, state) {
+	var __streamButtonHandler = function(event, 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;
+			case 0: __keypad.emit("left", state); break;
+			case 2: __keypad.emit("right", state); break;
 		}
 	};
 
-	var __touchMoveHandler = function(event) {
+	var __streamTouchMoveHandler = function(event) {
 		event.preventDefault();
 		if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
 			var rect = event.touches[0].target.getBoundingClientRect();
@@ -127,7 +129,7 @@ function Mouse() {
 		}
 	};
 
-	var __moveHandler = function(event) {
+	var __streamMoveHandler = function(event) {
 		var rect = event.target.getBoundingClientRect();
 		__current_pos = {
 			x: Math.round(event.clientX - rect.left),
@@ -172,7 +174,7 @@ function Mouse() {
 		return Math.round((x - a) / (b - a) * (d - c) + c);
 	};
 
-	var __wheelHandler = function(event) {
+	var __streamWheelHandler = function(event) {
 		// https://learn.javascript.ru/mousewheel
 		if (event.preventDefault) {
 			event.preventDefault();