better windows management

2 files changed, 36 insertions, 40 deletions

diff --git a/web/share/js/kvm/stream.js b/web/share/js/kvm/stream.js
index 0a0de313..f6d19718 100644
--- a/web/share/js/kvm/stream.js
+++ b/web/share/js/kvm/stream.js
@@ -208,11 +208,11 @@ function Streamer() {
 		});
 	};
 
-	var __resize = function(center=false) {
+	var __resize = function() {
 		let size = $("stream-size-slider").value;
 		$("stream-size-value").innerHTML = size + "%";
 		__size_factor = size / 100;
-		__applySizeFactor(center);
+		__applySizeFactor();
 	};
 
 	var __adjustSizeFactor = function() {
@@ -223,7 +223,7 @@ function Streamer() {
 		for (let size = 100; size >= el_slider.min; size -= el_slider.step) {
 			tools.info("Stream: adjusting size:", size);
 			$("stream-size-slider").value = size;
-			__resize(true);
+			__resize();
 
 			let rect = el_window.getBoundingClientRect();
 			if (
@@ -237,11 +237,11 @@ function Streamer() {
 		}
 	};
 
-	var __applySizeFactor = function(center=false) {
+	var __applySizeFactor = function() {
 		let el_stream_image = $("stream-image");
 		el_stream_image.style.width = __resolution.width * __size_factor + "px";
 		el_stream_image.style.height = __resolution.height * __size_factor + "px";
-		wm.showWindow($("stream-window"), false, center);
+		wm.showWindow($("stream-window"), false);
 	};
 
 	__init__();
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 9b80fc98..1732934f 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -62,8 +62,8 @@ function WindowManager() {
 		window.addEventListener("focusin", __focusIn);
 		window.addEventListener("focusout", __focusOut);
 
-		window.addEventListener("resize", () => __organizeWindowsOnResize(false));
-		window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
+		window.addEventListener("resize", __organizeWindowsOnResize);
+		window.addEventListener("orientationchange", __organizeWindowsOnResize);
 	};
 
 	/************************************************************************/
@@ -159,15 +159,10 @@ function WindowManager() {
 	};
 
 	self.showWindow = function(el_window, activate=true, center=false) {
-		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
-			let view = self.getViewGeometry();
-			let rect = el_window.getBoundingClientRect();
-
-			el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px";
-			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
-			el_window.setAttribute("data-centered", "");
+		if (el_window.style.visibility === "hidden") {
+			center = true;
 		}
-
+		__organizeWindow(el_window, center);
 		el_window.style.visibility = "visible";
 		if (activate) {
 			__activateWindow(el_window);
@@ -175,31 +170,15 @@ function WindowManager() {
 	};
 
 	self.getViewGeometry = function() {
+		let el_menu = $("menu");
 		return {
-			top: __getMenuHeight(),
+			top: (el_menu ? el_menu.clientHeight : 0), // Menu height
 			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
 			left: 0,
 			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
 		};
 	};
 
-	var __getMenuHeight = function() {
-		let el_menu = $("menu");
-		return (el_menu ? el_menu.clientHeight : 0);
-	};
-
-	var __isWindowOnPage = function(el_window) {
-		let view = self.getViewGeometry();
-		let 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) {
 		let all_hidden = true;
 
@@ -277,16 +256,33 @@ function WindowManager() {
 		}
 	};
 
-	var __organizeWindowsOnResize = function(orientation) {
+	var __organizeWindowsOnResize = function() {
+		for (let el_window of $$("window")) {
+			if (el_window.style.visibility === "visible") {
+				__organizeWindow(el_window);
+			}
+		}
+	};
+
+	var __organizeWindow = function(el_window, center=false) {
 		let view = self.getViewGeometry();
+		let rect = el_window.getBoundingClientRect();
 
-		for (let el_window of $$("window")) {
-			if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
-				let rect = el_window.getBoundingClientRect();
+		if (el_window.hasAttribute("data-centered") || center) {
+			el_window.style.top = Math.max(view.top, Math.round((view.bottom - rect.height) / 2)) + "px";
+			el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
+			el_window.setAttribute("data-centered", "");
+		} else {
+			if (rect.top <= view.top) {
+				el_window.style.top = view.top + "px";
+			} else if (rect.bottom > view.bottom) {
+				el_window.style.top = view.bottom - rect.height + "px";
+			}
 
-				el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px";
-				el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
-				el_window.setAttribute("data-centered", "");
+			if (rect.left <= view.left) {
+				el_window.style.left = view.left + "px";
+			} else if (rect.right > view.right) {
+				el_window.style.left = view.right - rect.width + "px";
 			}
 		}
 	};