hold modifiers on mouse click

kvmd/web/css/keyboard.css

@@ -22,7 +22,7 @@ div#keyboard div.keyboard-row:last-child {
 	margin-bottom: 0;
 }
 
-div#keyboard div.key, div.empty-key {
+div#keyboard div.key, div.modifier, div.empty-key {
 	box-sizing: border-box;
 	display: inline-block;
 	margin-right: 5px;
@@ -30,7 +30,7 @@ div#keyboard div.key, div.empty-key {
 	width: 40px;
 	height: 40px;
 }
-div#keyboard div.key {
+div#keyboard div.key, div.modifier {
 	font-size: 0.9em;
 	text-align: center;
 	vertical-align: top;
@@ -43,16 +43,21 @@ div#keyboard div.key {
 	background-color: var(--bg-color-gray);
 	cursor: pointer;
 }
-div#keyboard div.key:hover {
+div#keyboard div.key:hover, div.modifier:hover {
 	color: var(--fg-color-intensive);
 	background-color: var(--bg-color-ctl);
 }
-div#keyboard div.key:active {
+div#keyboard div.pressed, div.pressed {
 	box-shadow: none;
 	color: var(--fg-color-selected);
 	background-color: var(--bg-color-dark);
 }
-div#keyboard div.key:last-child, div.empty-key:last-child {
+div#keyboard div.holded {
+	box-shadow: none;
+	color: var(--fg-color-normal);
+	background-color: var(--bg-color-intensive);
+}
+div#keyboard div.key:last-child, div.empty-key:last-child, div.modifier:last-child {
 	margin-right: 0;
 }
 div#keyboard div.wide-1 {
@@ -82,7 +87,7 @@ div#keyboard div.small {
 	font-size: 0.7em;
 }
 
-div#keyboard div.key p {
+div#keyboard p {
 	margin: 0;
 	position: relative;
 	top: 50%;
@@ -90,3 +95,6 @@ div#keyboard div.key p {
 	-moz-transform: translateY(-50%);
 	transform: translateY(-50%);
 }
+div#keyboard b {
+	color: var(--fg-color-special);
+}

kvmd/web/css/vars.css

@@ -12,6 +12,7 @@
 	--bg-color-gray: #3b3e43;
 	--bg-color-dark: #17191d;
 	--bg-color-ctl: #202225;
+	--bg-color-intensive: #436a8a;
 	--bg-color-hovered: #1a1c1f;
 	--bg-color-selected: #171717;
 	--bg-color-progress: #171717;
@@ -22,6 +23,7 @@
 	--fg-color-inactive: #6c7481;
 	--fg-color-selected: #6c7481;
 	--fg-color-progress: #436a8a;
+	--fg-color-special: #436a8a;
 
 	--bg-color-stream-screen: black;
 }

kvmd/web/index.html

@@ -245,7 +245,7 @@
 					<div id="Enter" class="key wide-3 right small"><p>Enter<br>&crarr;</p></div>
 				</div>
 				<div class="keyboard-row">
-					<div id="ShiftLeft" class="key wide-4 left small"><p>Shift</p></div>
+					<div id="ShiftLeft" class="modifier wide-4 left small"><p><b>&bull;</b><br>Shift</p></div>
 					<div id="KeyZ" class="key single"><p>Z</p></div>
 					<div id="KeyX" class="key single"><p>X</p></div>
 					<div id="KeyC" class="key single"><p>C</p></div>
@@ -256,16 +256,16 @@
 					<div id="Comma" class="key"><p>&lt;<br>,</p></div>
 					<div id="Period" class="key"><p>&gt;<br>.</p></div>
 					<div id="Slash" class="key"><p>?<br>/</p></div>
-					<div id="ShiftRight" class="key wide-4 right small"><p>Shift</p></div>
+					<div id="ShiftRight" class="modifier wide-4 right small"><p><b>&bull;</b><br>Shift</p></div>
 				</div>
 				<div class="keyboard-row">
-					<div id="ControlLeft" class="key wide-1 left small"><p>Ctrl</p></div>
+					<div id="ControlLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Ctrl</p></div>
-					<div id="MetaLeft" class="key wide-1 left small"><p>Win</p></div>
+					<div id="MetaLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Win</p></div>
-					<div id="AltLeft" class="key wide-1 left small"><p>Alt</p></div>
+					<div id="AltLeft" class="modifier wide-1 left small"><p><b>&bull;</b><br>Alt</p></div>
 					<div id="Space" class="key wide-5"></div>
-					<div id="AltRight" class="key wide-1 right small"><p>Alt</p></div>
+					<div id="AltRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Alt</p></div>
-					<div id="MetaRight" class="key wide-1 right small"><p>Win</p></div>
+					<div id="MetaRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Win</p></div>
-					<div id="ControlRight" class="key wide-1 right small"><p>Ctrl</p></div>
+					<div id="ControlRight" class="modifier wide-1 right small"><p><b>&bull;</b><br>Ctrl</p></div>
 				</div>
 			</div>
 			<div class="keyboard-block">

kvmd/web/js/keyboard.js

@@ -1,9 +1,19 @@
 var keyboard = new function() {
 	var __ws = null;
+	var __modifiers = [];
 
 	this.init = function() {
-		document.onkeydown = (event) => __keyHandler(event, true);
+		document.onkeydown = (event) => __keyboardHandler(event, true);
-		document.onkeyup = (event) => __keyHandler(event, false);
+		document.onkeyup = (event) => __keyboardHandler(event, false);
+
+		Array.prototype.forEach.call(document.getElementsByClassName("key"), function(el_key) {
+			el_key.onmousedown = () => __clickHandler(el_key, true);
+			el_key.onmouseup = () => __clickHandler(el_key, false);
+		});
+		Array.prototype.forEach.call(document.getElementsByClassName("modifier"), function(el_key) {
+			el_key.onmousedown = () => __toggleModifierHandler(el_key);
+			__modifiers.push(el_key);
+		});
 	};
 
 	this.setSocket = function(ws) {
@@ -11,29 +21,62 @@ var keyboard = new function() {
 		$("hid-keyboard-led").className = (ws ? "led-on" : "led-off");
 	};
 
-	var __keyHandler = function(event, state) {
+	var __keyboardHandler = function(event, state) {
-		// https://github.com/wesbos/keycodes/blob/gh-pages/scripts.js
+		event.preventDefault();
 		el_key = $(event.code);
 		if (el_key) {
-			event.preventDefault();
+			__commonHandler(el_key, state, "pressed");
-
+			__unholdModifiers();
-			tools.debug("Key", (state ? "pressed:" : "released:"), event);
-
-			if (state) {
-				el_key.style.boxShadow = "none";
-				el_key.style.color = "var(--fg-color-selected)";
-				el_key.style.backgroundColor = "var(--bg-color-dark)";
-			} else {
-				el_key.removeAttribute("style");
 		}
+	};
 
+	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)) {
+				el_key.classList.remove("pressed");
+				el_key.classList.remove("holded");
+				__sendKey(el_key.id, false);
+			}
+		});
+	};
+
+	var __commonHandler = function(el_key, state, cls) {
+		if (state && !__isActive(el_key)) {
+			el_key.classList.remove("holded");
+			el_key.classList.add(cls);
+			__sendKey(el_key.id, true);
+		} else {
+			el_key.classList.remove("pressed");
+			el_key.classList.remove("holded");
+			__sendKey(el_key.id, false);
+		}
+	};
+
+	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));
+	};
+
+	var __sendKey = function(code, state) {
+		tools.debug("Key", (state ? "pressed:" : "released:"), code);
 		if (__ws) {
 			__ws.send(JSON.stringify({
 				event_type: "key",
-					key: event.code,
+				key: code,
 				state: state,
 			}));
 		}
-		}
 	};
 };