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

fucusable windows

Browse Source
This commit is contained in:
Devaev Maxim 2018-07-28 04:44:44 +03:00
parent af70d123cb
commit ab48c5e3dd
6 changed files with 50 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
kvmd/web/css/main.css
View File

@ -39,6 +39,7 @@ ul#ctl img {
height: 20px;
}
ul#ctl li a.ctl-item {
outline: none;
cursor: pointer;
border-left: var(--black-border);
display: inline-block;

1
kvmd/web/css/vars.css
View File

@ -3,6 +3,7 @@
--grey-border: thin solid #202225;
--normal-border: thin solid #36393f;
--black-border: thin solid black;
--intensive-border: 2px solid #5b90bb;
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);

4
kvmd/web/css/windows.css
View File

@ -1,4 +1,5 @@
div.window {
outline: none;
overflow: hidden;
position: absolute;
border: var(--dark-border);
@ -17,6 +18,9 @@ div.window {
top: 50%;
left: 50%;
}
div.window:focus {
border: var(--intensive-border) !important;
}
div.window-header {
overflow: hidden;

6
kvmd/web/index.html
View File

@ -202,12 +202,12 @@
</li>
</ul>
<div id="stream-window" class="window">
<div id="stream-window" class="window" style="z-index: 1" tabindex="0">
<div class="window-header"><div class="window-grab">Stream</div></div>
<img id="stream-image" class="stream-image-inactive" alt="Loading..." src="/streamer/?action=stream"/>
</div>
<div id="keyboard-window" class="window" style="display:none">
<div id="keyboard-window" class="window" style="display:none" tabindex="0">
<div class="window-header">
<div class="window-grab">Virtual Keyboard</div>
<button class="window-button-close">&times;</button>
@ -334,7 +334,7 @@
</div>
</div>
<div id="about-window" class="window" style="display:none">
<div id="about-window" class="window" style="display:none" tabindex="0">
<div class="window-header">
<div class="window-grab">About Pi-KVM</div>
<button class="window-button-close">&times;</button>

9
kvmd/web/js/keyboard.js
View File

@ -4,8 +4,11 @@ var keyboard = new function() {
var __modifiers = [];
this.init = function() {
document.onkeydown = (event) => __keyboardHandler(event, true);
document.onkeyup = (event) => __keyboardHandler(event, false);
$("keyboard-window").onkeydown = (event) => __keyboardHandler(event, true);
$("keyboard-window").onkeyup = (event) => __keyboardHandler(event, false);
$("stream-window").onkeydown = (event) => __keyboardHandler(event, true);
$("stream-window").onkeyup = (event) => __keyboardHandler(event, false);
Array.prototype.forEach.call(document.getElementsByClassName("key"), function(el_key) {
el_key.onmousedown = () => __clickHandler(el_key, true);
@ -38,7 +41,7 @@ var keyboard = new function() {
};
this.fireEvent = function(code, state) {
document.dispatchEvent(new KeyboardEvent(
$("keyboard-window").dispatchEvent(new KeyboardEvent(
(state ? "keydown" : "keyup"),
{code: code},
));

41
kvmd/web/js/ui.js
View File

@ -1,15 +1,22 @@
var ui = new function() {
var __top_z_index = 1;
var __top_z_index = 0;
var __windows = [];
var __ctl_items = [];
this.init = function() {
Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
el_item.onclick = function() { __toggleMenu(el_item); };
__ctl_items.push(el_item);
});
window.onclick = __windowClickHandler;
Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) {
var el_grab = el_window.querySelector(".window-header .window-grab");
el_window.style.display = window.getComputedStyle(el_window, null).display;
el_window.style.zIndex = parseInt(window.getComputedStyle(el_window, null).zIndex);
__makeWindowMovable(el_grab, el_window);
__windows.push(el_window);
var el_button = el_window.querySelector(".window-header .window-button-close");
if (el_button) {
@ -42,8 +49,11 @@ var ui = new function() {
);
}
window.onclick = __windowClickHandler;
window.onpagehide = hid.releaseAll;
window.onblur = hid.releaseAll;
__raiseWindow($("stream-window"));
};
this.showWindow = function(id) {
@ -73,7 +83,7 @@ var ui = new function() {
};
var __toggleMenu = function(el_a) {
Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
__ctl_items.forEach(function(el_item) {
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
if (el_item === el_a && el_menu.style.display === "none") {
el_menu.style.display = "block";
@ -96,6 +106,7 @@ var ui = new function() {
}
}
__toggleMenu(null);
__raiseLastWindow();
}
};
@ -130,11 +141,29 @@ var ui = new function() {
}
el_grab.onmousedown = startMoving;
el_window.onclick = function () { __raiseWindow(el_window) };
el_window.onclick = function() { __raiseWindow(el_window) };
};
var __raiseLastWindow = function() {
var last_el_window = null;
var max_z_index = 0;
__windows.forEach(function(el_window) {
z_index = parseInt(el_window.style.zIndex);
if (max_z_index < z_index && el_window.style.display !== "none") {
last_el_window = el_window;
max_z_index = z_index;
}
});
if (last_el_window) {
__raiseWindow(last_el_window);
}
};
var __raiseWindow = function(el_window) {
__top_z_index += 1;
el_window.style.zIndex = __top_z_index;
var z_index = __top_z_index + 1;
el_window.style.zIndex = z_index;
el_window.focus();
__top_z_index = z_index;
console.log("raise", el_window, el_window.style.zIndex);
};
};