GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2025-12-13 01:30:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

using modals over full screen

Browse Source
This commit is contained in:
Devaev Maxim 2021-04-17 13:48:40 +03:00
parent 05327d6026
commit 8fdc79d679
4 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/kvm/index.html
View File

@ -507,14 +507,7 @@
<button class="window-button-full-screen">&#10530;</button> <button class="window-button-full-screen">&#10530;</button>
</div> </div>
<div id="stream-info"></div> <div id="stream-info"></div>
<div class="stream-box-inactive" id="stream-box"> <div class="stream-box-inactive" id="stream-box"><img class="stream-image-inactive" id="stream-image" src="/share/png/blank-stream.png"></div>
<div class="window-lock-alert hidden"><b>Failed to acquire keyboard lock.<br>Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.</b><br>
<br>
For best keyboard handling use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API#Browser_compatibility">browser with keyboard lock support API</a>.<br>
In Chrome use HTTPS and enable <i>system-keyboard-lock</i> by putting at URL <i>chrome://flags/#system-keyboard-lock</i>.<br>
More details on keyboard lock API are <a href="https://wicg.github.io/keyboard-lock/" target="_blank">here</a>.
</div><img class="stream-image-inactive" id="stream-image" src="/share/png/blank-stream.png">
</div>
<div class="keypad" id="stream-mouse-buttons" align="center"> <div class="keypad" id="stream-mouse-buttons" align="center">
<div class="keypad-block"> <div class="keypad-block">
<div class="keypad-row"> <div class="keypad-row">

6
web/kvm/window-stream.pug
View File

@ -8,12 +8,6 @@ div(id="stream-window" class="window window-resizable" data-show-by-button="show
div(id="stream-info") div(id="stream-info")
div(id="stream-box" class="stream-box-inactive") div(id="stream-box" class="stream-box-inactive")
div(class="window-lock-alert hidden")
| #[b Failed to acquire keyboard lock.#[br]Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.]#[br]
| #[br]
| For best keyboard handling use a #[a(href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API#Browser_compatibility") browser with keyboard lock support API].#[br]
| In Chrome use HTTPS and enable #[i system-keyboard-lock] by putting at URL #[i chrome://flags/#system-keyboard-lock].#[br]
| More details on keyboard lock API are #[a(href="https://wicg.github.io/keyboard-lock/" target="_blank") here].
img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`) img(id="stream-image" class="stream-image-inactive" src=`${png_dir}/blank-stream.png`)
div(id="stream-mouse-buttons" class="keypad" align="center") div(id="stream-mouse-buttons" class="keypad" align="center")

16
web/share/css/window.css
View File

@ -59,6 +59,7 @@ div.window:fullscreen {
left: 0px !important; left: 0px !important;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
padding: 0px !important;
} }
div.window:-webkit-full-screen { div.window:-webkit-full-screen {
resize: none !important; resize: none !important;
@ -129,21 +130,6 @@ div.window div.window-header button.window-button-maximize {
right: 45px; right: 45px;
} }
div.window div.window-lock-alert {
white-space: normal;
text-align: justify;
border: var(--border-window-thin);
border-radius: 8px;
box-sizing: border-box;
padding: 5px 5px 5px 5px;
background-color: var(--cs-window-default-bg);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad */ /* iPad */
div.window { div.window {

29
web/share/js/wm.js
View File

@ -125,10 +125,10 @@ function __WindowManager() {
/************************************************************************/ /************************************************************************/
self.error = (...args) => __modalDialog("Error", args.join(" "), true, false); self.error = (...args) => __modalDialog("Error", args.join(" "), true, false, null);
self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true); self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true, null);
var __modalDialog = function(header, text, ok, cancel) { var __modalDialog = function(header, text, ok, cancel, parent) {
let el_active_menu = (document.activeElement && document.activeElement.closest(".menu")); let el_active_menu = (document.activeElement && document.activeElement.closest(".menu"));
let el_modal = document.createElement("div"); let el_modal = document.createElement("div");
@ -201,7 +201,7 @@ function __WindowManager() {
} }
__windows.push(el_modal); __windows.push(el_modal);
document.body.appendChild(el_modal); (parent || document.fullscreenElement || document.body).appendChild(el_modal);
__activateWindow(el_modal); __activateWindow(el_modal);
return promise; return promise;
@ -532,10 +532,7 @@ function __WindowManager() {
var __onFullScreenChange = function(event) { var __onFullScreenChange = function(event) {
let el_window = event.target; let el_window = event.target;
if (document.fullscreenElement) { if (!document.fullscreenElement) {
el_window.style.padding = "0px 0px 0px 0px";
} else {
el_window.style.padding = "";
let rect = el_window.before_full_screen; let rect = el_window.before_full_screen;
if (rect) { if (rect) {
el_window.style.width = rect.width + "px"; el_window.style.width = rect.width + "px";
@ -552,13 +549,15 @@ function __WindowManager() {
if (navigator.keyboard && navigator.keyboard.lock) { if (navigator.keyboard && navigator.keyboard.lock) {
navigator.keyboard.lock(); navigator.keyboard.lock();
} else { } else {
let el_lock_alert = el_window.querySelector(".window-lock-alert"); let msg = (
if (el_lock_alert) { "Shortcuts like Alt+Tab, Ctrl+W, Ctrl+N might not be captured.<br>"
tools.hiddenSetVisible(el_lock_alert, true); + "For best keyboard handling use any browser with<br><a target=\"_blank\""
setTimeout(function() { + " href=\"https://developer.mozilla.org/en-US/docs/Web"
tools.hiddenSetVisible(el_lock_alert, false); + "/API/Keyboard_API#Browser_compatibility\">keyboard lock support from this list</a>.<br><br>"
}, 7000); + "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, el_window);
} }
}; };