windows control

kvmd/web/css/main.css

@@ -110,10 +110,10 @@ div.ctl-dropdown-content button.row50:not(:first-child), button.row25:not(:first
 div.ctl-dropdown-content hr {
 	margin: 0;
 	display: block;
-	height: 1px;
+	height: 0px;
-	border: 0;
 	padding: 0;
-	background-color: var(--bg-color-dark);
+	border: none;
+	border-top: var(--dark-border);
 }
 div.ctl-dropdown-content-text {
 	margin: 10px 15px 10px 15px;

kvmd/web/css/vars.css

@@ -1,7 +1,8 @@
 :root {
-	--dark-border: 1px solid #17191d;
+	--dark-border: thin solid #17191d;
-	--grey-border: 1px solid #202225;
+	--grey-border: thin solid #202225;
-	--black-border: 1px solid black;
+	--normal-border: thin solid #36393f;
+	--black-border: thin solid black;
 
 	--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

@@ -2,6 +2,7 @@ div.window {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
+	overflow: hidden;
 	position: absolute;
 	border: var(--dark-border);
 	-webkit-border-radius: 8px;
@@ -11,23 +12,60 @@ div.window {
 	box-shadow: var(--big-shadow);
 	display: inline-block;
 	background-color: var(--bg-color-light);
-	padding: 3px 10px 10px 10px;
+	padding: 30px 9px 9px 9px;
-	-webkit-transform: translate(-50%);
+	-webkit-transform: translate(-50%, -50%);
-	-moz-transform: translate(-50%);
+	-moz-transform: translate(-50%, -50%);
-	transform: translate(-50%);
+	transform: translate(-50%, -50%);
+	top: 50%;
+	left: 50%;
 }
 
 div.window-header {
-	color: var(--fg-color-dark);
+	overflow: hidden;
-	font-size: 0.8em;
+	top: 0;
-	cursor: move;
+	left: 0;
-	padding-left: 6px;
+	position: absolute;
-	padding-bottom: 4px;
+	width: 100%;
+	padding: 0;
+	height: 20px;
+	border-bottom: var(--normal-border);
 }
 
-div.window hr.window-sep {
+div.window-grab {
-	margin: 0 0 6px 0;
+	overflow: hidden;
-	display: block;
+	font-size: 0.8em;
-	border: none;
+	top: 0;
-	border-top: 1px solid var(--bg-color-normal);
+	left: 0;
+	position: absolute;
+	width: 100%;
+	height: 20px;
+	cursor: move;
+	padding: 3px 0 2px 20px;
+	color: var(--fg-color-dark);
+}
+
+button.window-button-close {
+	outline: none;
+	position: absolute;
+	top: -2px;
+	right: -6px;
+	width: 44px;
+	height: 24px;
+	padding-left: 0;
+	color: var(--fg-color-inactive);
+	background-color: var(--bg-color-normal);
+	display: inline-block;
+	border: none;
+	cursor: pointer;
+}
+button.window-button-close:hover {
+	color: var(--fg-color-intensive);
+	background-color: var(--bg-color-dark) !important;
+}
+button.window-button-close:disabled {
+	color: var(--fg-color-inactive);
+	cursor: default;
+}
+button.window-button-close:active {
+	color: var(--fg-color-selected) !important;
 }

kvmd/web/index.html

@@ -44,6 +44,9 @@
 					System ↴
 				</a>
 				<div class="ctl-dropdown-content" style="display:none">
+					<button onclick="ui.showWindow('stream-window')">&bull; Show stream</button>
+					<button onclick="ui.showWindow('keyboard-window')">&bull; Show keyboard</button>
+					<hr>
 					<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">&bull; Reset stream</button>
 				</div>
 			</div>
@@ -196,15 +199,16 @@
 		</li>
 	</ul>
 
-	<div class="window" style="left:50%; top:70px">
+	<div id="stream-window" class="window">
-		<div class="window-header">Stream</div>
+		<div class="window-header"><div class="window-grab">Stream</div></div>
-		<!-- <hr class="window-sep"> -->
 		<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
 	</div>
 
-	<div class="window" style="left:75%; top:60%">
+	<div id="keyboard-window" class="window">
-		<div class="window-header">Virtual Keyboard</div>
+		<div class="window-header">
-		<hr class="window-sep">
+			<div class="window-grab">Virtual Keyboard</div>
+			<button class="window-button-close">&times;</button>
+		</div>
 		<div id="keyboard">
 			<div class="keyboard-block">
 				<div class="keyboard-row">

kvmd/web/js/ui.js

@@ -7,10 +7,16 @@ var ui = new function() {
 		});
 
 		window.onclick = __windowClickHandler;
-
 		Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) {
-			var el_header = el_window.querySelector(".window-header");
+			var el_grab = el_window.querySelector(".window-header .window-grab");
-			__makeWindowMovable(el_header, el_window);
+			__makeWindowMovable(el_grab, el_window);
+
+			var el_button = el_window.querySelector(".window-header .window-button-close");
+			if (el_button) {
+				el_button.onclick = function() {
+					el_window.style.display = "none";
+				};
+			}
 		});
 
 		if (typeof document.hidden !== "undefined") {
@@ -40,6 +46,32 @@ var ui = new function() {
 		window.onblur = hid.releaseAll;
 	};
 
+	this.showWindow = function(id) {
+		var el_window = $(id);
+		if (!__isWindowOnPage(el_window)) {
+			el_window.style.top = "50%";
+			el_window.style.left = "50%";
+		}
+		el_window.style.display = "block";
+		__raiseWindow(el_window);
+	};
+
+	var __isWindowOnPage = function(el_window) {
+		var view_top = $("ctl").clientHeight;
+		var view_bottom = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+		var view_left = 0;
+		var view_right = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+
+		var rect = el_window.getBoundingClientRect();
+
+		return (
+			(rect.bottom - el_window.clientHeight / 1.5) <= view_bottom
+			&& rect.top >= view_top
+			&& (rect.left + el_window.clientWidth / 1.5) >= view_left
+			&& (rect.right - el_window.clientWidth / 1.5) <= view_right
+		);
+	};
+
 	var __toggleMenu = function(el_a) {
 		Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
 			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
@@ -67,12 +99,12 @@ var ui = new function() {
 		}
 	};
 
-	var __makeWindowMovable = function(el_header, el_body) {
+	var __makeWindowMovable = function(el_grab, el_window) {
 		var prev_x = 0;
 		var prev_y = 0;
 
 		function startMoving(event) {
-			__raiseWindow(el_body);
+			__raiseWindow(el_window);
 			event = (event || window.event);
 			event.preventDefault();
 			prev_x = event.clientX;
@@ -88,8 +120,8 @@ var ui = new function() {
 			y = prev_y - event.clientY;
 			prev_x = event.clientX;
 			prev_y = event.clientY;
-			el_body.style.top = (el_body.offsetTop - y) + "px";
+			el_window.style.top = (el_window.offsetTop - y) + "px";
-			el_body.style.left = (el_body.offsetLeft - x) + "px";
+			el_window.style.left = (el_window.offsetLeft - x) + "px";
 		}
 
 		function stopMoving() {
@@ -97,12 +129,12 @@ var ui = new function() {
 			document.onmouseup = null;
 		}
 
-		el_header.onmousedown = startMoving;
+		el_grab.onmousedown = startMoving;
-		el_body.onclick = function () { __raiseWindow(el_body) };
+		el_window.onclick = function () { __raiseWindow(el_window) };
 	};
 
-	var __raiseWindow = function(el_body) {
+	var __raiseWindow = function(el_window) {
 		__top_z_index += 1;
-		el_body.style.zIndex = __top_z_index;
+		el_window.style.zIndex = __top_z_index;
 	};
 };