fucusable windows

kvmd/web/css/main.css

@@ -39,6 +39,7 @@ ul#ctl img {
 	height: 20px;
 }
 ul#ctl li a.ctl-item {
+	outline: none;
 	cursor: pointer;
 	border-left: var(--black-border);
 	display: inline-block;

kvmd/web/css/vars.css

@@ -3,6 +3,7 @@
 	--grey-border: thin solid #202225;
 	--normal-border: thin solid #36393f;
 	--black-border: thin solid black;
+	--intensive-border: 2px solid #5b90bb;
 
 	--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
 	--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

kvmd/web/css/windows.css

@@ -1,4 +1,5 @@
 div.window {
+	outline: none;
 	overflow: hidden;
 	position: absolute;
 	border: var(--dark-border);
@@ -17,6 +18,9 @@ div.window {
 	top: 50%;
 	left: 50%;
 }
+div.window:focus {
+	border: var(--intensive-border) !important;
+}
 
 div.window-header {
 	overflow: hidden;

kvmd/web/index.html

@@ -202,12 +202,12 @@
 		</li>
 	</ul>
 
-	<div id="stream-window" class="window">
+	<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
 		<div class="window-header"><div class="window-grab">Stream</div></div>
 		<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
 	</div>
 
-	<div id="keyboard-window" class="window" style="display:none">
+	<div id="keyboard-window" class="window" style="display:none" tabindex="0">
 		<div class="window-header">
 			<div class="window-grab">Virtual Keyboard</div>
 			<button class="window-button-close">&times;</button>
@@ -334,7 +334,7 @@
 		</div>
 	</div>
 
-	<div id="about-window" class="window" style="display:none">
+	<div id="about-window" class="window" style="display:none" tabindex="0">
 		<div class="window-header">
 			<div class="window-grab">About Pi-KVM</div>
 			<button class="window-button-close">&times;</button>

kvmd/web/js/keyboard.js

@@ -4,8 +4,11 @@ var keyboard = new function() {
 	var __modifiers = [];
 
 	this.init = function() {
-		document.onkeydown = (event) => __keyboardHandler(event, true);
+		$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
-		document.onkeyup = (event) => __keyboardHandler(event, false);
+		$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
+
+		$("stream-window").onkeydown = (event) => __keyboardHandler(event, true);
+		$("stream-window").onkeyup = (event) => __keyboardHandler(event, false);
 
 		Array.prototype.forEach.call(document.getElementsByClassName("key"), function(el_key) {
 			el_key.onmousedown = () => __clickHandler(el_key, true);
@@ -38,7 +41,7 @@ var keyboard = new function() {
 	};
 
 	this.fireEvent = function(code, state) {
-		document.dispatchEvent(new KeyboardEvent(
+		$("keyboard-window").dispatchEvent(new KeyboardEvent(
 			(state ? "keydown" : "keyup"),
 			{code: code},
 		));

kvmd/web/js/ui.js

@@ -1,15 +1,22 @@
 var ui = new function() {
-	var __top_z_index = 1;
+	var __top_z_index = 0;
+	var __windows = [];
+	var __ctl_items = [];
 
 	this.init = function() {
 		Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
 			el_item.onclick = function() { __toggleMenu(el_item); };
+			__ctl_items.push(el_item);
 		});
 
-		window.onclick = __windowClickHandler;
 		Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) {
 			var el_grab = el_window.querySelector(".window-header .window-grab");
+
+			el_window.style.display = window.getComputedStyle(el_window, null).display;
+			el_window.style.zIndex = parseInt(window.getComputedStyle(el_window, null).zIndex);
+
 			__makeWindowMovable(el_grab, el_window);
+			__windows.push(el_window);
 
 			var el_button = el_window.querySelector(".window-header .window-button-close");
 			if (el_button) {
@@ -42,8 +49,11 @@ var ui = new function() {
 			);
 		}
 
+		window.onclick = __windowClickHandler;
 		window.onpagehide = hid.releaseAll;
 		window.onblur = hid.releaseAll;
+
+		__raiseWindow($("stream-window"));
 	};
 
 	this.showWindow = function(id) {
@@ -73,7 +83,7 @@ var ui = new function() {
 	};
 
 	var __toggleMenu = function(el_a) {
-		Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
+		__ctl_items.forEach(function(el_item) {
 			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
 			if (el_item === el_a && el_menu.style.display === "none") {
 				el_menu.style.display = "block";
@@ -96,6 +106,7 @@ var ui = new function() {
 				}
 			}
 			__toggleMenu(null);
+			__raiseLastWindow();
 		}
 	};
 
@@ -130,11 +141,29 @@ var ui = new function() {
 		}
 
 		el_grab.onmousedown = startMoving;
-		el_window.onclick = function () { __raiseWindow(el_window) };
+		el_window.onclick = function() { __raiseWindow(el_window) };
+	};
+
+	var __raiseLastWindow = function() {
+		var last_el_window = null;
+		var max_z_index = 0;
+		__windows.forEach(function(el_window) {
+			z_index = parseInt(el_window.style.zIndex);
+			if (max_z_index < z_index && el_window.style.display !== "none") {
+				last_el_window = el_window;
+				max_z_index = z_index;
+			}
+		});
+		if (last_el_window) {
+			__raiseWindow(last_el_window);
+		}
 	};
 
 	var __raiseWindow = function(el_window) {
-		__top_z_index += 1;
+		var z_index = __top_z_index + 1;
-		el_window.style.zIndex = __top_z_index;
+		el_window.style.zIndex = z_index;
+		el_window.focus();
+		__top_z_index = z_index;
+		console.log("raise", el_window, el_window.style.zIndex);
 	};
 };