refactoring + some tools

6 files changed, 135 insertions, 88 deletions

diff --git a/web/share/css/kvm/hid.css b/web/share/css/kvm/hid.css
index 5c710ac2..32a92e0f 100644
--- a/web/share/css/kvm/hid.css
+++ b/web/share/css/kvm/hid.css
@@ -24,28 +24,6 @@ div#text-menu {
 	width: 340px;
 }
 
-textarea#hid-pak-text {
-	display: block;
-	resize: none;
-	height: 120px;
-	width: 100%;
-	border: var(--border-default-thin);
-	border-radius: 4px;
-	color: var(--cs-code-default-fg);
-	background-color: var(--cs-code-default-bg);
-	-webkit-appearance:none;
-}
-
-textarea#hid-pak-text::-moz-placeholder {
-	line-height: 60px;
-	text-align: center;
-}
-
-textarea#hid-pak-text::-webkit-input-placeholder {
-	line-height: 60px;
-	text-align: center;
-}
-
 input#hid-recorder-new-script-file {
 	display: none;
 }
diff --git a/web/share/css/main.css b/web/share/css/main.css
index 8e6af465..cd8b6342 100644
--- a/web/share/css/main.css
+++ b/web/share/css/main.css
@@ -123,6 +123,26 @@ select {
 	display: block;
 	width: 100%;
 	padding-left: 5px;
+}
+select[size] {
+	height: auto;
+	padding: 5px;
+}
+select[size]::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+select[size]::-webkit-scrollbar-thumb {
+	border-radius: 4px;
+	background: var(--cs-scroll-default-bg);
+}
+@-moz-document url-prefix() {
+	select[size] {
+		scrollbar-width: 8px;
+		scrollbar-color: var(--cs-scroll-default-bg) var(--cs-code-default-bg);
+	}
+}
+select:not([size]) {
 	padding-right: 25px;
 }
 button.small {
@@ -149,22 +169,24 @@ select {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
+}
+select:not([size]) {
 	background-image: url("../svg/select-arrow-normal.svg");
 	background-position: center right;
 	background-repeat: no-repeat;
 }
-select:disabled {
+select:not([size]):disabled {
 	background-image: url("../svg/select-arrow-inactive.svg") !important;
 }
-select:active {
+select:not([size]):active {
 	color: var(--cs-control-intensive-fg) !important;
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
-select option {
+select:not([size]) option {
 	color: var(--cs-control-default-fg);
 	background-color: var(--cs-control-default-bg);
 }
-select option.comment {
+select:not([size]) option.comment {
 	color: var(--cs-control-disabled-fg);
 	font-style: italic;
 }
@@ -180,6 +202,26 @@ input[type=text], input[type=password] {
 	height: 30px;
 }
 
+textarea {
+	display: block;
+	resize: none;
+	height: 120px;
+	width: 100%;
+	border: var(--border-default-thin);
+	border-radius: 4px;
+	color: var(--cs-code-default-fg);
+	background-color: var(--cs-code-default-bg);
+	-webkit-appearance:none;
+}
+textarea::-moz-placeholder {
+	line-height: 60px;
+	text-align: center;
+}
+textarea::-webkit-input-placeholder {
+	line-height: 60px;
+	text-align: center;
+}
+
 div.buttons-row {
 	margin: 0;
 	padding: 0;
@@ -218,6 +260,30 @@ div.buttons-row {
 	border-bottom-right-radius: 0;
 }
 
+table.kv {
+	border-spacing: 5px;
+	margin: 0 10px 0 10px;
+	font-size: 12px;
+}
+table.kv td {
+	text-align: left;
+}
+table.kv td.value {
+	font-weight: bold;
+	max-width: 310px;
+	overflow: hidden;
+}
+table.kv td.value-slider {
+	width: 100%;
+}
+table.kv td.value-number {
+	font-weight: bold;
+	max-width: 310px;
+	overflow: hidden;
+	min-width: 40px;
+	max-width: 40px;
+}
+
 ul.footer {
 	list-style-type: none;
 	bottom: 0;
diff --git a/web/share/css/navbar.css b/web/share/css/navbar.css
index 04d15e05..eb125f9a 100644
--- a/web/share/css/navbar.css
+++ b/web/share/css/navbar.css
@@ -167,30 +167,6 @@ ul#navbar li div.menu div.text {
 	font-size: 14px;
 }
 
-ul#navbar li div.menu table.kv {
-	border-spacing: 5px;
-	margin: 0 10px 0 10px;
-	font-size: 12px;
-}
-ul#navbar li div.menu table.kv td {
-	text-align: left;
-}
-ul#navbar li div.menu table.kv td.value {
-	font-weight: bold;
-	max-width: 310px;
-	overflow: hidden;
-}
-ul#navbar li div.menu table.kv td.value-slider {
-	width: 100%;
-}
-ul#navbar li div.menu table.kv td.value-number {
-	font-weight: bold;
-	max-width: 310px;
-	overflow: hidden;
-	min-width: 40px;
-	max-width: 40px;
-}
-
 ul#navbar li div.menu div.buttons button,
 ul#navbar li div.menu div.buttons select {
 	border-radius: 0;
diff --git a/web/share/css/x-desktop.css b/web/share/css/x-desktop.css
index a652c61b..732f8aa2 100644
--- a/web/share/css/x-desktop.css
+++ b/web/share/css/x-desktop.css
@@ -23,7 +23,7 @@
 /* ===== main.css ===== */
 
 button:enabled:hover,
-select:enabled:hover,
+select:not([size]):enabled:hover,
 input[type=file]:enabled:hover::-webkit-file-selector-button,
 input[type=file]:enabled:hover::file-selector-button {
 	color: var(--cs-control-hovered-fg);
@@ -31,7 +31,7 @@ input[type=file]:enabled:hover::file-selector-button {
 }
 
 button:active,
-select:active,
+select:not([size]):active,
 input[type=file]:active::-webkit-file-selector-button,
 input[type=file]:active::file-selector-button {
 	color: var(--cs-control-pressed-fg) !important;
@@ -42,7 +42,7 @@ button.key:active,
 select.key:active {
 	box-shadow: none;
 }
-select:enabled:hover {
+select:not([size]):enabled:hover {
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
 
diff --git a/web/share/js/tools.js b/web/share/js/tools.js
index fbf712de..48f5b420 100644
--- a/web/share/js/tools.js
+++ b/web/share/js/tools.js
@@ -64,6 +64,17 @@ export var tools = new function() {
 
 	/************************************************************************/
 
+	self.escape = function(text) {
+		return text.replace(
+			/[^0-9A-Za-z ]/g,
+			ch => "&#" + ch.charCodeAt(0) + ";"
+		);
+	};
+
+	self.makeClosure = function(func, ...args) {
+		return () => func(...args);
+	};
+
 	self.upperFirst = function(text) {
 		return text[0].toUpperCase() + text.slice(1);
 	};
@@ -87,6 +98,10 @@ export var tools = new function() {
 		return Math.floor(Math.random() * (max - min + 1)) + min;
 	};
 
+	self.formatHex = function(value) {
+		return `0x${value.toString(16).toUpperCase()}`;
+	};
+
 	self.formatSize = function(size) {
 		if (size > 0) {
 			let index = Math.floor( Math.log(size) / Math.log(1024) );
@@ -283,9 +298,9 @@ export var tools = new function() {
 				option.className = "comment";
 				el.add(option);
 			},
-			"addSeparator": function(el) {
+			"addSeparator": function(el, repeat=30) {
 				if (!self.browser.is_mobile) {
-					self.selector.addComment(el, "\u2500".repeat(30));
+					self.selector.addComment(el, "\u2500".repeat(repeat));
 				}
 			},
 
diff --git a/web/share/js/wm.js b/web/share/js/wm.js
index 6a26a648..41709dd2 100644
--- a/web/share/js/wm.js
+++ b/web/share/js/wm.js
@@ -147,7 +147,7 @@ function __WindowManager() {
 	self.copyTextToClipboard = function(text) {
 		let workaround = function(ex) {
 			// https://stackoverflow.com/questions/60317969/document-execcommandcopy-not-working-even-though-the-dom-element-is-created
-			let callback = function() {
+			__modalDialog("Info", "Press OK to copy the text to the clipboard", true, false).then(function() {
 				tools.error("copyTextToClipboard(): navigator.clipboard.writeText() is not working:", ex);
 				tools.info("copyTextToClipboard(): Trying a workaround...");
 
@@ -175,8 +175,7 @@ function __WindowManager() {
 					tools.error("copyTextToClipboard(): Workaround failed:", ex);
 					wm.error("Can't copy text to the clipboard:<br>", ex);
 				}
-			};
-			__modalDialog("Info", "Press OK to copy the text to the clipboard", true, false, callback);
+			});
 		};
 		if (navigator.clipboard) {
 			navigator.clipboard.writeText(text).then(function() {
@@ -192,8 +191,9 @@ function __WindowManager() {
 	self.info = (...args) => __modalDialog("Info", args.join(" "), true, false);
 	self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
 	self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
+	self.modal = (header, text, ok, cancel) => __modalDialog(header, text, ok, cancel);
 
-	var __modalDialog = function(header, text, ok, cancel, callback=null, parent=null) {
+	var __modalDialog = function(header, text, ok, cancel, parent=null) {
 		let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
 
 		let el_modal = document.createElement("div");
@@ -212,22 +212,45 @@ function __WindowManager() {
 
 		let el_content = document.createElement("div");
 		el_content.className = "modal-content";
-		el_content.innerHTML = text;
 		el_window.appendChild(el_content);
 
+		let el_buttons = document.createElement("div");
+		el_buttons.classList.add("modal-buttons", "buttons-row");
+		el_window.appendChild(el_buttons);
+
+		let el_cancel_button = null;
+		let el_ok_button = null;
+		if (cancel) {
+			el_cancel_button = document.createElement("button");
+			el_cancel_button.className = "row100";
+			el_cancel_button.innerHTML = "Cancel";
+			el_buttons.appendChild(el_cancel_button);
+		}
+		if (ok) {
+			el_ok_button = document.createElement("button");
+			el_ok_button.className = "row100";
+			el_ok_button.innerHTML = "OK";
+			el_buttons.appendChild(el_ok_button);
+		}
+		if (ok && cancel) {
+			el_ok_button.className = "row50";
+			el_cancel_button.className = "row50";
+		}
+
+		el_window.onkeyup = function(event) {
+			event.preventDefault();
+			if (ok && event.code === "Enter") {
+				el_ok_button.click();
+			} else if (cancel && event.code === "Escape") {
+				el_cancel_button.click();
+			}
+		};
+
 		let promise = null;
 		if (ok || cancel) {
 			promise = new Promise(function(resolve) {
-				let el_buttons = document.createElement("div");
-				el_buttons.className = "modal-buttons";
-				el_window.appendChild(el_buttons);
-
 				function close(retval) {
-					if (callback) {
-						callback(retval);
-					}
 					__closeWindow(el_window);
-					el_modal.outerHTML = "";
 					let index = __windows.indexOf(el_modal);
 					if (index !== -1) {
 						__windows.splice(index, 1);
@@ -238,38 +261,27 @@ function __WindowManager() {
 						__activateLastWindow(el_modal);
 					}
 					resolve(retval);
+					// Так как resolve() асинхронный, надо выполнить в эвентлупе после него
+					setTimeout(function() { el_modal.outerHTML = ""; }, 0);
 				}
 
 				if (cancel) {
-					var el_cancel_button = document.createElement("button");
-					el_cancel_button.innerHTML = "Cancel";
 					tools.el.setOnClick(el_cancel_button, () => close(false));
-					el_buttons.appendChild(el_cancel_button);
 				}
 				if (ok) {
-					var el_ok_button = document.createElement("button");
-					el_ok_button.innerHTML = "OK";
 					tools.el.setOnClick(el_ok_button, () => close(true));
-					el_buttons.appendChild(el_ok_button);
 				}
-				if (ok && cancel) {
-					el_ok_button.className = "row50";
-					el_cancel_button.className = "row50";
-				}
-
-				el_window.onkeyup = function(event) {
-					event.preventDefault();
-					if (ok && event.code === "Enter") {
-						el_ok_button.click();
-					} else if (cancel && event.code === "Escape") {
-						el_cancel_button.click();
-					}
-				};
 			});
 		}
 
 		__windows.push(el_modal);
 		(parent || document.fullscreenElement || document.body).appendChild(el_modal);
+		if (typeof text === "function") {
+			// Это должно быть здесь, потому что элемент должен иметь родителя чтобы существовать
+			text(el_content, el_ok_button);
+		} else {
+			el_content.innerHTML = text;
+		}
 		__activateWindow(el_modal);
 
 		return promise;
@@ -625,7 +637,7 @@ function __WindowManager() {
 				+ "In Chrome use HTTPS and enable <i>system-keyboard-lock</i><br>"
 				+ "by putting at URL <i>chrome://flags/#system-keyboard-lock</i>"
 			);
-			__modalDialog("Keyboard lock is unsupported", msg, true, false, null, el_window);
+			__modalDialog("Keyboard lock is unsupported", msg, true, false, el_window);
 		}
 	};