summaryrefslogtreecommitdiff
path: root/kvmd/web
diff options
context:
space:
mode:
Diffstat (limited to 'kvmd/web')
-rw-r--r--kvmd/web/css/mobile.css2
-rw-r--r--kvmd/web/css/modals.css16
-rw-r--r--kvmd/web/index.html1
-rw-r--r--kvmd/web/js/atx.js6
-rw-r--r--kvmd/web/js/hid.js4
-rw-r--r--kvmd/web/js/main.js6
-rw-r--r--kvmd/web/js/modal.js65
-rw-r--r--kvmd/web/js/msd.js6
-rw-r--r--kvmd/web/js/stream.js6
-rw-r--r--kvmd/web/js/ui.js78
10 files changed, 101 insertions, 89 deletions
diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css
index 24bf9ca8..a298865f 100644
--- a/kvmd/web/css/mobile.css
+++ b/kvmd/web/css/mobile.css
@@ -36,7 +36,7 @@
background-color: var(--bg-color-normal) !important;
}
- div.modal div.modal-window div.modal-buttons button {
+ div.modal-buttons button {
height: 50px !important;
}
diff --git a/kvmd/web/css/modals.css b/kvmd/web/css/modals.css
index 441c065f..cfb0df20 100644
--- a/kvmd/web/css/modals.css
+++ b/kvmd/web/css/modals.css
@@ -10,39 +10,43 @@ div.modal {
z-index: 2147483647;
}
-div.modal div.modal-window {
+div.modal-window {
display: table;
outline: none;
margin: 15% auto;
overflow: hidden;
- border: var(--intensive-border);
+ border: var(--dark-border);
border-radius: 8px;
box-sizing: border-box;
box-shadow: var(--big-shadow);
background-color: var(--bg-color-light);
padding: 0;
}
+div.modal-window:focus {
+ border: var(--intensive-border) !important;
+}
+
-div.modal div.modal-window div.modal-header {
+div.modal-header {
text-align: center;
font-weight: bold;
padding: 3px 9px 3px 9px;
border-bottom: var(--normal-border);
}
-div.modal div.modal-window div.modal-content {
+div.modal-content {
max-width: 500px;
max-height: 500px;
padding: 16px 9px 16px 9px;
}
-div.modal div.modal-window div.modal-buttons {
+div.modal-buttons {
border-top: var(--dark-border);
margin: 0;
padding: 0;
font-size: 0;
}
-div.modal div.modal-window div.modal-buttons button {
+div.modal-buttons button {
height: 40px;
}
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 6f64c7d7..9cf6b87f 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -21,7 +21,6 @@
<link rel="stylesheet" href="css/mobile.css">
<script src="js/tools.js"></script>
- <script src="js/modal.js"></script>
<script src="js/stream.js"></script>
<script src="js/atx.js"></script>
<script src="js/keyboard.js"></script>
diff --git a/kvmd/web/js/atx.js b/kvmd/web/js/atx.js
index 7e047176..6f1d2b19 100644
--- a/kvmd/web/js/atx.js
+++ b/kvmd/web/js/atx.js
@@ -38,14 +38,14 @@ function Atx() {
};
var __clickButton = function(button, timeout, confirm_msg) {
- modal.confirm(confirm_msg).then(function(ok) {
+ ui.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");
+ ui.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);
+ ui.error("Click error:<br>", http.responseText);
}
}
}, timeout);
diff --git a/kvmd/web/js/hid.js b/kvmd/web/js/hid.js
index 50bbd5e7..09c67d98 100644
--- a/kvmd/web/js/hid.js
+++ b/kvmd/web/js/hid.js
@@ -148,11 +148,11 @@ function Hid() {
var confirm_msg = (
"You are going to automatically type " + codes_count
+ " characters from the system clipboard."
- + "It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds.<br>"
+ + " It will take " + (__codes_delay * codes_count * 2 / 1000) + " seconds.<br>"
+ "<br>Are you sure you want to continue?<br>"
);
- modal.confirm(confirm_msg).then(function(ok) {
+ ui.confirm(confirm_msg).then(function(ok) {
if (ok) {
$("pak-button").disabled = true;
$("pak-led").className = "led-pak-typing";
diff --git a/kvmd/web/js/main.js b/kvmd/web/js/main.js
index a1cd8b5d..211e8525 100644
--- a/kvmd/web/js/main.js
+++ b/kvmd/web/js/main.js
@@ -1,3 +1,5 @@
+var ui;
+
function main() {
if (
!window.navigator
@@ -7,8 +9,8 @@ function main() {
) {
$("bad-browser-modal").style.visibility = "visible";
} else {
- var ui = new Ui();
+ ui = new Ui();
new Session(new Atx(), new Hid(), new Msd());
- new Stream(ui);
+ new Stream();
}
}
diff --git a/kvmd/web/js/modal.js b/kvmd/web/js/modal.js
deleted file mode 100644
index b838a609..00000000
--- a/kvmd/web/js/modal.js
+++ /dev/null
@@ -1,65 +0,0 @@
-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 7652d4fe..f8225406 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) {
- modal.error("Switch error:<br>", http.responseText);
+ ui.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) {
- modal.error("New image is too big for your Mass Storage Device.<br>Maximum:", __formatSize(__state.info.size));
+ ui.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) {
- modal.error("Can't upload image to the Mass Storage Device:<br>", __upload_http.responseText);
+ ui.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 d6147310..51372420 100644
--- a/kvmd/web/js/stream.js
+++ b/kvmd/web/js/stream.js
@@ -1,4 +1,4 @@
-function Stream(ui) {
+function Stream() {
// var self = this;
/********************************************************************************/
@@ -60,7 +60,7 @@ function Stream(ui) {
var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
if (http.readyState === 4) {
if (http.status !== 200) {
- modal.error("Can't reset stream:<br>", http.responseText);
+ ui.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) {
- modal.error("Can't configure stream:<br>", http.responseText);
+ ui.error("Can't configure stream:<br>", http.responseText);
}
}
});
diff --git a/kvmd/web/js/ui.js b/kvmd/web/js/ui.js
index 94924d8c..c0a1bef0 100644
--- a/kvmd/web/js/ui.js
+++ b/kvmd/web/js/ui.js
@@ -41,6 +41,73 @@ function Ui() {
/********************************************************************************/
+ self.error = (...args) => __modalDialog("Error", args.join(" "), true, false);
+ self.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";
+
+ 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);
+
+ var close = function(retval) {
+ el_modal.outerHTML = "";
+ var index = __windows.indexOf(el_modal);
+ if (index !== -1) {
+ __windows.splice(index, 1);
+ }
+ tools.info(__windows);
+ __raiseLastWindow();
+ resolve(retval);
+ };
+
+ if (cancel) {
+ var el_cancel_button = document.createElement("button");
+ el_cancel_button.innerHTML = "Cancel";
+ el_cancel_button.onclick = () => close(false);
+ el_buttons.appendChild(el_cancel_button);
+ }
+ if (ok) {
+ var el_ok_button = document.createElement("button");
+ el_ok_button.innerHTML = "OK";
+ el_ok_button.onclick = () => close(true);
+ el_buttons.appendChild(el_ok_button);
+ }
+ if (ok && cancel) {
+ el_ok_button.className = "row50";
+ el_cancel_button.className = "row50";
+ }
+ });
+ }
+
+ __windows.push(el_modal);
+ document.body.appendChild(el_modal);
+ __raiseWindow(el_modal);
+
+ return promise;
+ };
+
self.showWindow = function(el_window, raise=true) {
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered")) {
var view = __getViewGeometry();
@@ -210,7 +277,7 @@ function Ui() {
var last_el_window = null;
var max_z_index = 0;
__windows.forEach(function(el_window) {
- var z_index = parseInt(window.getComputedStyle(el_window, null).zIndex);
+ var z_index = parseInt(window.getComputedStyle(el_window, null).zIndex) || 0;
if (max_z_index < z_index && window.getComputedStyle(el_window, null).visibility !== "hidden") {
last_el_window = el_window;
max_z_index = z_index;
@@ -220,8 +287,13 @@ function Ui() {
};
var __raiseWindow = function(el_window) {
- el_window.focus();
- if (parseInt(el_window.style.zIndex) !== __top_z_index) {
+ if (el_window.className === "modal") {
+ el_window.querySelector(".modal-window").focus();
+ } else {
+ el_window.focus();
+ }
+ tools.debug("Focused window:", el_window);
+ if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
var z_index = __top_z_index + 1;
el_window.style.zIndex = z_index;
__top_z_index = z_index;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 16:59:02 +0000