summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDevaev Maxim <[email protected]>2018-08-27 13:13:49 +0300
committerDevaev Maxim <[email protected]>2018-08-27 13:13:49 +0300
commita8773eab1e8f82a7bd862492e5520dcb9690a5e0 (patch)
tree77c8caeaf749073e26ef50e83c44b784312dd79b
parent47a077a3b7d7ccadf8a1adcd608ffe61ac5bf818 (diff)
own modals - first implementation
Diffstat
-rw-r--r--kvmd/eslintrc.yaml1
-rw-r--r--kvmd/web/css/main.css23
-rw-r--r--kvmd/web/css/mobile.css4
-rw-r--r--kvmd/web/css/modals.css31
-rw-r--r--kvmd/web/css/vars.css1
-rw-r--r--kvmd/web/index.html25
-rw-r--r--kvmd/web/js/atx.js22
-rw-r--r--kvmd/web/js/hid.js51
-rw-r--r--kvmd/web/js/modal.js65
-rw-r--r--kvmd/web/js/msd.js6
-rw-r--r--kvmd/web/js/stream.js4
11 files changed, 167 insertions, 66 deletions
diff --git a/kvmd/eslintrc.yaml b/kvmd/eslintrc.yaml
index 74240a54..477dea69 100644
--- a/kvmd/eslintrc.yaml
+++ b/kvmd/eslintrc.yaml
@@ -8,6 +8,7 @@ globals:
Stream: true
Ui: true
tools: true
+ modal: true
"$": true
"$$": true
diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index 289730b1..d8477ed5 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -70,6 +70,18 @@ select:active {
background-image: url("../svg/select-arrow-intensive.svg") !important;
}
+.row50 {
+ display: inline-block;
+ width: 50%;
+}
+.row25 {
+ display: inline-block;
+ width: 25%;
+}
+.row50:not(:first-child), .row25:not(:first-child) {
+ border-left: var(--dark-border);
+}
+
img#logo {
-webkit-filter: invert(0.7);
filter: invert(0.7);
@@ -142,17 +154,6 @@ div.ctl-dropdown-content div.buttons-row {
padding: 0;
font-size: 0;
}
-div.ctl-dropdown-content .row50 {
- display: inline-block;
- width: 50%;
-}
-div.ctl-dropdown-content .row25 {
- display: inline-block;
- width: 25%;
-}
-div.ctl-dropdown-content .row50:not(:first-child), .row25:not(:first-child) {
- border-left: var(--dark-border);
-}
div.ctl-dropdown-content hr {
margin: 0;
display: block;
diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css
index f12e1f8c..24bf9ca8 100644
--- a/kvmd/web/css/mobile.css
+++ b/kvmd/web/css/mobile.css
@@ -36,6 +36,10 @@
background-color: var(--bg-color-normal) !important;
}
+ div.modal div.modal-window div.modal-buttons button {
+ height: 50px !important;
+ }
+
div#stream-window {
padding-top: 9px !important;
border-top: 0 !important;
diff --git a/kvmd/web/css/modals.css b/kvmd/web/css/modals.css
index eedb4ef6..441c065f 100644
--- a/kvmd/web/css/modals.css
+++ b/kvmd/web/css/modals.css
@@ -10,16 +10,39 @@ div.modal {
z-index: 2147483647;
}
-div.modal-content {
+div.modal div.modal-window {
display: table;
outline: none;
margin: 15% auto;
overflow: hidden;
- border: var(--important-border);
+ border: var(--intensive-border);
border-radius: 8px;
box-sizing: border-box;
box-shadow: var(--big-shadow);
- white-space: nowrap;
background-color: var(--bg-color-light);
- padding: 9px;
+ padding: 0;
+}
+
+div.modal div.modal-window 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 {
+ max-width: 500px;
+ max-height: 500px;
+ padding: 16px 9px 16px 9px;
+}
+
+div.modal div.modal-window div.modal-buttons {
+ border-top: var(--dark-border);
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+}
+
+div.modal div.modal-window div.modal-buttons button {
+ height: 40px;
}
diff --git a/kvmd/web/css/vars.css b/kvmd/web/css/vars.css
index 35d68c26..d6d5a604 100644
--- a/kvmd/web/css/vars.css
+++ b/kvmd/web/css/vars.css
@@ -28,7 +28,6 @@
--black-border: thin solid black;
--intensive-border: 2px solid var(--border-color-intensive);
--thin-intensive-border: thin solid var(--border-color-intensive);
- --important-border: 2px solid var(--border-color-important);
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
diff --git a/kvmd/web/index.html b/kvmd/web/index.html
index 8ae5d250..6f64c7d7 100644
--- a/kvmd/web/index.html
+++ b/kvmd/web/index.html
@@ -21,6 +21,7 @@
<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>
@@ -36,17 +37,19 @@
<body>
<div id="bad-browser-modal" class="modal">
- <div class="modal-content">
- You are using an incompatible or legacy browser.<br>
- Please use one of the following browsers:<br>
- <hr>
- <ul>
- <li><a target="_blank" href="https://www.google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li>
- <li><a target="_blank" href="https://www.chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li>
- <li><a target="_blank" href="https://www.mozilla.org/firefox">Mozilla Firefox</a></li>
- <li><a target="_blank" href="https://www.apple.com/safari">Apple Safari</a></li>
- <li><a target="_blank" href="https://www.opera.com">Opera</a></li>
- </ul>
+ <div class="modal-window">
+ <div class="modal-content">
+ Hello. You are using an incompatible or legacy browser.<br>
+ Please use one of the following browsers:
+ <hr>
+ <ul>
+ <li><a target="_blank" href="https://www.google.com/chrome">Google Chrome</a> <sup><i>recommended</i></sup></li>
+ <li><a target="_blank" href="https://www.chromium.org/Home">Chromium</a> <sup><i>recommended</i></sup></li>
+ <li><a target="_blank" href="https://www.mozilla.org/firefox">Mozilla Firefox</a></li>
+ <li><a target="_blank" href="https://www.apple.com/safari">Apple Safari</a></li>
+ <li><a target="_blank" href="https://www.opera.com">Opera</a></li>
+ </ul>
+ </div>
</div>
</div>
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);
}
}
});
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 14:24:35 +0000