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

js-based windows centering

Browse Source
This commit is contained in:
Devaev Maxim
2018-07-31 21:57:20 +03:00
parent 89fca27520
commit 3a748859ff
3 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,14 +6,10 @@ div.window {
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: var(--big-shadow); box-shadow: var(--big-shadow);
display: block; visibility: hidden;
white-space: nowrap; white-space: nowrap;
background-color: var(--bg-color-light); background-color: var(--bg-color-light);
padding: 30px 9px 9px 9px; padding: 30px 9px 9px 9px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
} }
div.window:focus { div.window:focus {
border: var(--intensive-border) !important; border: var(--intensive-border) !important;

4
kvmd/web/index.html
View File

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

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

@@ -12,16 +12,13 @@ var ui = new function() {
Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) { Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) {
var el_grab = el_window.querySelector(".window-header .window-grab"); 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); __makeWindowMovable(el_grab, el_window);
__windows.push(el_window); __windows.push(el_window);
var el_button = el_window.querySelector(".window-header .window-button-close"); var el_button = el_window.querySelector(".window-header .window-button-close");
if (el_button) { if (el_button) {
el_button.onclick = function() { el_button.onclick = function() {
el_window.style.display = "none"; el_window.style.visibility = "hidden";
__raiseLastWindow(); __raiseLastWindow();
}; };
} }
@@ -56,35 +53,42 @@ var ui = new function() {
window.onmouseup = __globalMouseButtonHandler; window.onmouseup = __globalMouseButtonHandler;
// window.oncontextmenu = __globalMouseButtonHandler; // window.oncontextmenu = __globalMouseButtonHandler;
__raiseWindow($("stream-window")); ui.showWindow("stream-window");
}; };
this.showWindow = function(id) { this.showWindow = function(id) {
var el_window = $(id); var el_window = $(id);
if (!__isWindowOnPage(el_window)) { if (!__isWindowOnPage(el_window)) {
el_window.style.top = "50%"; var view = __getViewGeometry();
el_window.style.left = "50%"; var rect = el_window.getBoundingClientRect();
el_window.style.top = Math.max($("ctl").clientHeight, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
} }
el_window.style.display = "block"; el_window.style.visibility = "visible";
__raiseWindow(el_window); __raiseWindow(el_window);
}; };
var __isWindowOnPage = function(el_window) { var __isWindowOnPage = function(el_window) {
var view_top = $("ctl").clientHeight; var view = __getViewGeometry();
var view_bottom = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var view_left = 0;
var view_right = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var rect = el_window.getBoundingClientRect(); var rect = el_window.getBoundingClientRect();
return ( return (
(rect.bottom - el_window.clientHeight / 1.5) <= view_bottom (rect.bottom - el_window.clientHeight / 1.5) <= view.bottom
&& rect.top >= view_top && rect.top >= view.top
&& (rect.left + el_window.clientWidth / 1.5) >= view_left && (rect.left + el_window.clientWidth / 1.5) >= view.left
&& (rect.right - el_window.clientWidth / 1.5) <= view_right && (rect.right - el_window.clientWidth / 1.5) <= view.right
); );
}; };
var __getViewGeometry = function() {
return {
top: $("ctl").clientHeight,
bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
left: 0,
right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
};
};
var __toggleMenu = function(el_a) { var __toggleMenu = function(el_a) {
var all_hidden = true; var all_hidden = true;
@@ -178,8 +182,8 @@ var ui = new function() {
var last_el_window = null; var last_el_window = null;
var max_z_index = 0; var max_z_index = 0;
__windows.forEach(function(el_window) { __windows.forEach(function(el_window) {
z_index = parseInt(el_window.style.zIndex); z_index = parseInt(window.getComputedStyle(el_window, null).zIndex);
if (max_z_index < z_index && el_window.style.display !== "none") { if (max_z_index < z_index && window.getComputedStyle(el_window, null).visibility !== "hidden") {
last_el_window = el_window; last_el_window = el_window;
max_z_index = z_index; max_z_index = z_index;
} }