refactoring

web/js/kvm/main.js

@@ -0,0 +1,23 @@
+var ui;
+
+function main() {
+	if (
+		!window.navigator
+		|| window.navigator.userAgent.indexOf("MSIE ") > 0
+		|| window.navigator.userAgent.indexOf("Trident/") > 0
+		|| window.navigator.userAgent.indexOf("Edge/") > 0
+	) {
+		$("bad-browser-modal").style.visibility = "visible";
+	} else {
+		ui = new Ui();
+
+		tools.setOnClick($("show-about-button"), () => ui.showWindow($("about-window")));
+		tools.setOnClick($("show-keyboard-button"), () => ui.showWindow($("keyboard-window")));
+		tools.setOnClick($("show-stream-button"), () => ui.showWindow($("stream-window")));
+		tools.setOnClick($("open-log-button"), () => ui.open("kvmd/log?seek=3600&follow=1", "_blank"));
+
+		ui.showWindow($("stream-window"));
+
+		new Session();
+	}
+}

web/js/kvm/session.js

@@ -1,4 +1,4 @@
-function Session(hid, atx, msd, streamer) {
+function Session() {
 	// var self = this;
 
 	/********************************************************************************/
@@ -8,6 +8,11 @@ function Session(hid, atx, msd, streamer) {
 	var __ping_timer = null;
 	var __missed_heartbeats = 0;
 
+	var __hid = new Hid();
+	var __atx = new Atx();
+	var __msd = new Msd();
+	var __streamer = new Streamer();
+
 	var __init__ = function() {
 		$("link-led").title = "Not connected yet...";
 		__loadKvmdVersion();
@@ -53,10 +58,10 @@ function Session(hid, atx, msd, streamer) {
 		$("link-led").className = "led-green";
 		$("link-led").title = "Connected";
 		tools.debug("Session: socket opened:", event);
-		streamer.loadInitialState();
-		atx.loadInitialState();
-		msd.loadInitialState();
-		hid.setSocket(__ws);
+		__streamer.loadInitialState();
+		__atx.loadInitialState();
+		__msd.loadInitialState();
+		__hid.setSocket(__ws);
 		__missed_heartbeats = 0;
 		__ping_timer = setInterval(__pingServer, 1000);
 	};
@@ -68,11 +73,11 @@ function Session(hid, atx, msd, streamer) {
 			__missed_heartbeats = 0;
 		} else if (event.msg_type === "event") {
 			if (event.msg.event === "streamer_state") {
-				streamer.setState(event.msg.event_attrs);
+				__streamer.setState(event.msg.event_attrs);
 			} else if (event.msg.event === "atx_state") {
-				atx.setState(event.msg.event_attrs);
+				__atx.setState(event.msg.event_attrs);
 			} else if (event.msg.event === "msd_state") {
-				msd.setState(event.msg.event_attrs);
+				__msd.setState(event.msg.event_attrs);
 			}
 		}
 	};
@@ -93,9 +98,9 @@ function Session(hid, atx, msd, streamer) {
 			clearInterval(__ping_timer);
 			__ping_timer = null;
 		}
-		streamer.clearState();
-		atx.clearState();
-		hid.setSocket(null);
+		__streamer.clearState();
+		__atx.clearState();
+		__hid.setSocket(null);
 		__ws = null;
 		setTimeout(function() {
 			$("link-led").className = "led-yellow";

web/js/main.js

@@ -1,15 +0,0 @@
-var ui;
-
-function main() {
-	if (
-		!window.navigator
-		|| window.navigator.userAgent.indexOf("MSIE ") > 0
-		|| window.navigator.userAgent.indexOf("Trident/") > 0
-		|| window.navigator.userAgent.indexOf("Edge/") > 0
-	) {
-		$("bad-browser-modal").style.visibility = "visible";
-	} else {
-		ui = new Ui();
-		new Session(new Hid(), new Atx(), new Msd(), new Streamer());
-	}
-}

web/js/ui.js

@@ -5,7 +5,7 @@ function Ui() {
 
 	var __top_z_index = 0;
 	var __windows = [];
-	var __ctl_items = [];
+	var __menu_items = [];
 
 	var __init__ = function() {
 		Array.prototype.forEach.call(document.querySelectorAll("button"), function(el_button) {
@@ -14,9 +14,9 @@ function Ui() {
 			el_button.ontouchstart = function() {};
 		});
 
-		Array.prototype.forEach.call($$("ctl-item"), function(el_item) {
+		Array.prototype.forEach.call($$("menu-item"), function(el_item) {
 			tools.setOnClick(el_item, () => __toggleMenu(el_item));
-			__ctl_items.push(el_item);
+			__menu_items.push(el_item);
 		});
 
 		Array.prototype.forEach.call($$("window"), function(el_window) {
@@ -37,13 +37,6 @@ function Ui() {
 
 		window.addEventListener("resize", () => __organizeWindowsOnResize(false));
 		window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
-
-		tools.setOnClick($("show-about-button"), () => self.showWindow($("about-window")));
-		tools.setOnClick($("show-keyboard-button"), () => self.showWindow($("keyboard-window")));
-		tools.setOnClick($("show-stream-button"), () => self.showWindow($("stream-window")));
-		tools.setOnClick($("open-log-button"), () => window.open("kvmd/log?seek=3600&follow=1", "_blank"));
-
-		self.showWindow($("stream-window"));
 	};
 
 	/********************************************************************************/
@@ -127,7 +120,7 @@ function Ui() {
 		if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
 			var view = self.getViewGeometry();
 			var rect = el_window.getBoundingClientRect();
-			el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+			el_window.style.top = Math.max($("menu").clientHeight, 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", "");
 		}
@@ -139,7 +132,7 @@ function Ui() {
 
 	self.getViewGeometry = function() {
 		return {
-			top: $("ctl").clientHeight,
+			top: $("menu").clientHeight,
 			bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
 			left: 0,
 			right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
@@ -161,15 +154,15 @@ function Ui() {
 	var __toggleMenu = function(el_a) {
 		var all_hidden = true;
 
-		__ctl_items.forEach(function(el_item) {
-			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
+		__menu_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
 			if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
 				el_item.focus();
-				el_item.classList.add("ctl-item-selected");
+				el_item.classList.add("menu-item-selected");
 				el_menu.style.visibility = "visible";
 				all_hidden &= false;
 			} else {
-				el_item.classList.remove("ctl-item-selected");
+				el_item.classList.remove("menu-item-selected");
 				el_menu.style.visibility = "hidden";
 			}
 		});
@@ -190,15 +183,15 @@ function Ui() {
 
 	var __closeAllMenues = function() {
 		document.onkeyup = null;
-		__ctl_items.forEach(function(el_item) {
-			var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
-			el_item.classList.remove("ctl-item-selected");
+		__menu_items.forEach(function(el_item) {
+			var el_menu = el_item.parentElement.querySelector(".menu-dropdown-content");
+			el_item.classList.remove("menu-item-selected");
 			el_menu.style.visibility = "hidden";
 		});
 	};
 
 	var __globalMouseButtonHandler = function(event) {
-		if (!event.target.matches(".ctl-item")) {
+		if (!event.target.matches(".menu-item")) {
 			for (var el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
 				if (el_item.hasAttribute("data-force-hide-menu")) {
 					break;
@@ -216,7 +209,7 @@ function Ui() {
 		Array.prototype.forEach.call($$("window"), function(el_window) {
 			if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
 				var rect = el_window.getBoundingClientRect();
-				el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
+				el_window.style.top = Math.max($("menu").clientHeight, 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", "");
 			}