floating windows

kvmd/web/css/main.css

@@ -14,6 +14,7 @@
 	--bg-color-progress: #171717;
 
 	--fg-color-normal: #c3c3c3;
+	--fg-color-dark: #aaaaaa;
 	--fg-color-intensive: white;
 	--fg-color-inactive: #6c7481;
 	--fg-color-selected: #6c7481;
@@ -24,6 +25,7 @@
 
 body {
 	margin: 0;
+	overflow: hidden;
 	color: var(--fg-color-normal);
 	background-color: var(--bg-color-normal);
 	font-family: sans-serif !important;
@@ -34,14 +36,28 @@ img#logo {
 	vertical-align: middle;
 	padding: 13px 15px;
 }
-div.centered {
+
+div.window {
+	user-select: none;
 	position: absolute;
+	border: var(--dark-border);
+	border-radius: 8px;
+	box-sizing: border-box;
+	box-shadow: var(--big-shadow);
+	display: inline-block;
+	background-color: var(--bg-color-light);
+	padding: 3px 10px 10px 10px;
 	top: 70px;
 	left: 50%;
 	-webkit-transform: translate(-50%);
 	-moz-transform: translate(-50%);
 	transform: translate(-50%);
 }
+div.window-header {
+	color: var(--fg-color-dark);
+	cursor: move;
+	padding-bottom: 3px;
+}
 
 ul#ctl {
 	user-select: none;
@@ -144,16 +160,6 @@ div.ctl-dropdown-content-text {
 	font-size: 14px;
 }
 
-div#stream-box {
-	user-select: none;
-	border: var(--dark-border);
-	border-radius: 8px;
-	box-sizing: border-box;
-	box-shadow: var(--big-shadow);
-	display: inline-block;
-	background-color: var(--bg-color-light);
-	padding: 10px;
-}
 img#stream-image {
 	width: 640px;
 	height: 480px;

kvmd/web/index.html

@@ -162,10 +162,9 @@
 		</li>
 	</ul>
 
-	<div class="centered">
+	<div class="window">
-		<div id="stream-box">
+		<div class="window-header">Stream</div>
-			<img src="/streamer/?action=stream" id="stream-image" class="stream-image-inactive" alt="Loading..." />
+		<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
-		</div>
 	</div>
 
 	<ul id="bottom">

kvmd/web/js/main.js

@@ -1,5 +1,5 @@
 function main () {
-	window.onclick = ui.windowClickHandler;
+	ui.init();
 	session.loadKvmdVersion();
 	session.startPoller();
 	stream.startPoller();

kvmd/web/js/ui.js

@@ -1,4 +1,13 @@
 var ui = new function() {
+	this.init = function() {
+		window.onclick = __windowClickHandler;
+
+		Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) {
+			var el_header = el_window.querySelector(".window-header");
+			__makeWindowMovable(el_header, el_window);
+		});
+	};
+
 	this.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");
@@ -12,7 +21,7 @@ var ui = new function() {
 		});
 	};
 
-	this.windowClickHandler = function(event) {
+	var __windowClickHandler = function(event) {
 		if (!event.target.matches(".ctl-item")) {
 			for (el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
 				if (el_item.hasAttribute("data-force-hide-menu")) {
@@ -25,4 +34,36 @@ var ui = new function() {
 			ui.toggleMenu(null);
 		}
 	};
+
+	var __makeWindowMovable = function(el_header, el_body) {
+		var prev_x = 0;
+		var prev_y = 0;
+
+		function startMoving(event) {
+			event = (event || window.event);
+			event.preventDefault();
+			prev_x = event.clientX;
+			prev_y = event.clientY;
+			document.onmousemove = doMoving;
+			document.onmouseup = stopMoving;
+		}
+
+		function doMoving(event) {
+			event = (event || window.event);
+			event.preventDefault();
+			x = prev_x - event.clientX;
+			y = prev_y - event.clientY;
+			prev_x = event.clientX;
+			prev_y = event.clientY;
+			el_body.style.top = (el_body.offsetTop - y) + "px";
+			el_body.style.left = (el_body.offsetLeft - x) + "px";
+		}
+
+		function stopMoving() {
+			document.onmousemove = null;
+			document.onmouseup = null;
+		}
+
+		el_header.onmousedown = startMoving;
+	};
 };