own modals - first implementation

5 files changed, 109 insertions, 39 deletions

diff --git a/kvmd/web/js/atx.js b/kvmd/web/js/atx.js
index cb0163ed..7e047176 100644
--- a/kvmd/web/js/atx.js
+++ b/kvmd/web/js/atx.js
@@ -38,17 +38,19 @@ function Atx() {
 	};
 
 	var __clickButton = function(button, timeout, confirm_msg) {
-		if (confirm(confirm_msg)) {
-			var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
-				if (http.readyState === 4) {
-					if (http.status === 409) {
-						alert("Performing another ATX operation for other client, please try again later");
-					} else if (http.status !== 200) {
-						alert("Click error:", http.responseText);
+		modal.confirm(confirm_msg).then(function(ok) {
+			if (ok) {
+				var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
+					if (http.readyState === 4) {
+						if (http.status === 409) {
+							modal.error("Performing another ATX operation for other client.<br>Please try again later");
+						} else if (http.status !== 200) {
+							modal.error("Click error:<br>", http.responseText);
+						}
 					}
-				}
-			}, timeout);
-		}
+				}, timeout);
+			}
+		});
 	};
 
 	var __setButtonsBusy = function(busy) {
diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js
index 319b0327..eef503d1 100644
--- a/kvmd/web/js/hid.js
+++ b/kvmd/web/js/hid.js
@@ -123,32 +123,35 @@ function Hid() {
 
 				var confirm_msg = (
 					"You are going to automatically type " + codes_count
-					+ " characters from the system clipboard.\nAre you sure you want to continue?\n"
-					+ "It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds."
+					+ " characters from the system clipboard."
+					+ "It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds.<br>"
+					+ "<br>Are you sure you want to continue?<br>"
 				);
 
-				if (codes_count <= 256 || confirm(confirm_msg)) {
-					$("pak-button").disabled = true;
-					$("pak-led").className = "led-pak-typing";
-					$("pak-led").title = "Autotyping...";
-
-					tools.debug("Paste-as-keys:", clipboard_text);
-
-					var index = 0;
-					var iterate = function() {
-						__emitShortcut(clipboard_codes[index]).then(function() {
-							++index;
-							if (index < clipboard_codes.length && __ws) {
-								iterate();
-							} else {
-								$("pak-button").disabled = false;
-								$("pak-led").className = "led-off";
-								$("pak-led").title = "";
-							}
-						});
-					};
-					iterate();
-				}
+				modal.confirm(confirm_msg).then(function(ok) {
+					if (ok) {
+						$("pak-button").disabled = true;
+						$("pak-led").className = "led-pak-typing";
+						$("pak-led").title = "Autotyping...";
+
+						tools.debug("Paste-as-keys:", clipboard_text);
+
+						var index = 0;
+						var iterate = function() {
+							__emitShortcut(clipboard_codes[index]).then(function() {
+								++index;
+								if (index < clipboard_codes.length && __ws) {
+									iterate();
+								} else {
+									$("pak-button").disabled = false;
+									$("pak-led").className = "led-off";
+									$("pak-led").title = "";
+								}
+							});
+						};
+						iterate();
+					}
+				});
 			}
 		});
 	};
diff --git a/kvmd/web/js/modal.js b/kvmd/web/js/modal.js
new file mode 100644
index 00000000..b838a609
--- /dev/null
+++ b/kvmd/web/js/modal.js
@@ -0,0 +1,65 @@
+var modal = new function() {
+	this.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
+	this.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
+
+	var __modalDialog = function(header, text, ok, cancel) {
+		var el_modal = document.createElement("div");
+		el_modal.className = "modal";
+		el_modal.style.visibility = "visible";
+		el_modal.setAttribute("data-dont-hide-menu", "");
+
+		var el_window = document.createElement("div");
+		el_window.className = "modal-window";
+		el_window.setAttribute("tabindex", "-1");
+		el_modal.appendChild(el_window);
+
+		var el_header = document.createElement("div");
+		el_header.className = "modal-header";
+		el_header.innerHTML = header;
+		el_window.appendChild(el_header);
+
+		var el_content = document.createElement("div");
+		el_content.className = "modal-content";
+		el_content.innerHTML = text;
+		el_window.appendChild(el_content);
+
+		var promise = null;
+		if (ok || cancel) {
+			promise = new Promise(function(resolve) {
+				var el_buttons = document.createElement("div");
+				el_buttons.className = "modal-buttons";
+				el_window.appendChild(el_buttons);
+
+				if (cancel) {
+					var el_cancel_button = document.createElement("button");
+					el_cancel_button.innerHTML = "Cancel";
+					el_cancel_button.setAttribute("data-force-hide-menu", "");
+					el_cancel_button.onclick = function() {
+						el_modal.outerHTML = "";
+						resolve(false);
+					};
+					el_buttons.appendChild(el_cancel_button);
+				}
+				if (ok) {
+					var el_ok_button = document.createElement("button");
+					el_ok_button.innerHTML = "OK";
+					el_ok_button.setAttribute("data-force-hide-menu", "");
+					el_ok_button.onclick = function() {
+						el_modal.outerHTML = "";
+						resolve(true);
+					};
+					el_buttons.appendChild(el_ok_button);
+				}
+				if (ok && cancel) {
+					el_ok_button.className = "row50";
+					el_cancel_button.className = "row50";
+				}
+			});
+		}
+
+		document.body.appendChild(el_modal);
+		el_window.focus();
+
+		return promise;
+	};
+};
diff --git a/kvmd/web/js/msd.js b/kvmd/web/js/msd.js
index 1dfdd1d3..7652d4fe 100644
--- a/kvmd/web/js/msd.js
+++ b/kvmd/web/js/msd.js
@@ -65,7 +65,7 @@ function Msd() {
 		var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
 			if (http.readyState === 4) {
 				if (http.status !== 200) {
-					alert("Switch error:", http.responseText);
+					modal.error("Switch error:<br>", http.responseText);
 				}
 			}
 			__applyState();
@@ -78,7 +78,7 @@ function Msd() {
 		var el_input = $("msd-select-new-image-file");
 		var image_file = (el_input.files.length ? el_input.files[0] : null);
 		if (image_file && image_file.size > __state.info.size) {
-			alert("New image is too big for your Mass Storage Device; maximum: " + __formatSize(__state.info.size));
+			modal.error("New image is too big for your Mass Storage Device.<br>Maximum:", __formatSize(__state.info.size));
 			el_input.value = "";
 			image_file = null;
 		}
@@ -143,7 +143,7 @@ function Msd() {
 	var __uploadStateChange = function() {
 		if (__upload_http.readyState === 4) {
 			if (__upload_http.status !== 200) {
-				alert("Can't upload image to the Mass Storage Device:", __upload_http.responseText);
+				modal.error("Can't upload image to the Mass Storage Device:<br>", __upload_http.responseText);
 			}
 			$("msd-select-new-image-file").value = "";
 			__image_file = null;
diff --git a/kvmd/web/js/stream.js b/kvmd/web/js/stream.js
index baee87c1..d6147310 100644
--- a/kvmd/web/js/stream.js
+++ b/kvmd/web/js/stream.js
@@ -60,7 +60,7 @@ function Stream(ui) {
 		var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
 			if (http.readyState === 4) {
 				if (http.status !== 200) {
-					alert("Can't reset stream:", http.responseText);
+					modal.error("Can't reset stream:<br>", http.responseText);
 				}
 			}
 		});
@@ -73,7 +73,7 @@ function Stream(ui) {
 			var http = tools.makeRequest("POST", "/kvmd/streamer/set_params?resolution=" + resolution, function() {
 				if (http.readyState === 4) {
 					if (http.status !== 200) {
-						alert("Can't change stream:", http.responseText);
+						modal.error("Can't configure stream:<br>", http.responseText);
 					}
 				}
 			});