mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
own modals - first implementation
This commit is contained in:
Devaev Maxim
parent
47a077a3b7
commit
a8773eab1e
@ -8,6 +8,7 @@ globals:
|
||||
Stream: true
|
||||
Ui: true
|
||||
tools: true
|
||||
modal: true
|
||||
"$": true
|
||||
"$$": true
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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...";
|
||||
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);
|
||||
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();
|
||||
}
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
65
kvmd/web/js/modal.js
Normal file
65
kvmd/web/js/modal.js
Normal file
@ -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;
|
||||
};
|
||||
};
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user