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

Rework of #39 (#40)

Browse Source 
* Rework of #39 patch from @arykov (thanks)

* styled resize corner

* fixed squashing of resizaable window on moving

* keep window size and opsition after full screen

* not necessary

* attempt to fix desktop overflow

* improved

* ios fixes

* refactoring
This commit is contained in:
Maxim Devaev
2021-04-12 15:26:32 +03:00
committed by GitHub
parent 8158941833
commit 3af4a8b852
15 changed files with 1478 additions and 1332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -54,14 +54,37 @@ function __WindowManager() {
__menu_buttons.push(el_button);
}
if (!window.ResizeObserver) {
tools.error("ResizeObserver not supported");
}
for (let el_window of $$("window")) {
el_window.setAttribute("tabindex", "-1");
__makeWindowMovable(el_window);
__windows.push(el_window);
let el_button = el_window.querySelector(".window-header .window-button-close");
if (el_button) {
tools.setOnClick(el_button, function() {
if (el_window.classList.contains("window-resizable") && window.ResizeObserver) {
new ResizeObserver(function() {
// При переполнении рабочей области сократить размер окна по высоте.
// По ширине оно настраивается само в CSS.
let view = self.getViewGeometry();
let rect = el_window.getBoundingClientRect();
if ((rect.bottom - rect.top) > (view.bottom - view.top)) {
el_window.style.height = view.bottom - view.top + "px";
}
if (el_window.hasAttribute("data-centered")) {
__centerWindow(el_window);
}
if (el_window.resize_hook) {
el_window.resize_hook();
}
}).observe(el_window);
}
let el_close_button = el_window.querySelector(".window-header .window-button-close");
if (el_close_button) {
tools.setOnClick(el_close_button, function() {
let close_window = function() {
__closeWindow(el_window);
__activateLastWindow(el_window);
@@ -78,6 +101,22 @@ function __WindowManager() {
}
});
}
let el_maximize_button = el_window.querySelector(".window-header .window-button-maximize");
if (el_maximize_button) {
tools.setOnClick(el_maximize_button, function() {
__maximizeWindow(el_window);
__activateLastWindow(el_window);
});
}
let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen");
if (el_full_screen_button) {
tools.setOnClick(el_full_screen_button, function() {
__fullScreenWindow(el_window);
__activateLastWindow(el_window);
});
}
}
window.onmouseup = __globalMouseButtonHandler;
@@ -86,8 +125,10 @@ function __WindowManager() {
window.addEventListener("focusin", __focusIn);
window.addEventListener("focusout", __focusOut);
window.addEventListener("resize", __organizeWindowsOnResize);
window.addEventListener("orientationchange", __organizeWindowsOnResize);
window.addEventListener("resize", __organizeWindowsOnBrowserResize);
window.addEventListener("orientationchange", __organizeWindowsOnBrowserResize);
document.onfullscreenchange = __onFullScreenChange;
};
/************************************************************************/
@@ -205,7 +246,7 @@ function __WindowManager() {
if (activate) {
__activateWindow(el_window);
}
if (Object.prototype.hasOwnProperty.call(el_window, "show_hook")) {
if (el_window.show_hook) {
if (showed) {
el_window.show_hook();
}
@@ -239,7 +280,7 @@ function __WindowManager() {
let el_menu = el_button.parentElement.querySelector(".menu");
if (el_button === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
let rect = el_menu.getBoundingClientRect();
let offset = self.getViewGeometry().right - (rect.x + el_menu.clientWidth + 2); // + 2 is ugly hack
let offset = self.getViewGeometry().right - (rect.left + el_menu.clientWidth + 2); // + 2 is ugly hack
if (offset < 0) {
el_menu.style.right = "0px";
} else {
@@ -319,7 +360,7 @@ function __WindowManager() {
}
};
var __organizeWindowsOnResize = function() {
var __organizeWindowsOnBrowserResize = function() {
for (let el_window of $$("window")) {
if (el_window.style.visibility === "visible") {
__organizeWindow(el_window);
@@ -331,10 +372,19 @@ function __WindowManager() {
let view = self.getViewGeometry();
let rect = el_window.getBoundingClientRect();
if (el_window.classList.contains("window-resizable")) {
// При переполнении рабочей области сократить размер окна
if ((rect.bottom - rect.top) > (view.bottom - view.top)) {
el_window.style.height = view.bottom - view.top + "px";
}
if ((rect.right - rect.left) > (view.right - view.left)) {
el_window.style.width = view.right - view.left + "px";
}
rect = el_window.getBoundingClientRect();
}
if (el_window.hasAttribute("data-centered") || center) {
el_window.style.top = Math.max(view.top, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
el_window.setAttribute("data-centered", "");
__centerWindow(el_window);
} else {
if (rect.top <= view.top) {
el_window.style.top = view.top + "px";
@@ -350,6 +400,14 @@ function __WindowManager() {
}
};
var __centerWindow = function(el_window) {
let view = self.getViewGeometry();
let rect = el_window.getBoundingClientRect();
el_window.style.top = Math.max(view.top, Math.round((view.bottom - rect.height) / 2)) + "px";
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px";
el_window.setAttribute("data-centered", "");
};
var __activateLastWindow = function(el_except_window=null) {
let el_last_window = null;
@@ -415,6 +473,10 @@ function __WindowManager() {
let prev_pos = {x: 0, y: 0};
function startMoving(event) {
// При перетаскивании resizable-окна за правый кран экрана оно ужимается.
// Этот костыль фиксит это.
el_window.style.width = el_window.offsetWidth + "px";
__closeAllMenues();
__activateWindow(el_window);
event = (event || window.event);
@@ -474,5 +536,45 @@ function __WindowManager() {
el_grab.ontouchstart = startMoving;
};
var __onFullScreenChange = function(event) {
let el_window = event.target;
if (!document.fullscreenElement) {
el_window.style.padding = "";
let rect = el_window.before_full_screen;
if (rect) {
el_window.style.width = rect.width + "px";
el_window.style.height = rect.height + "px";
el_window.style.top = rect.top + "px";
el_window.style.left = rect.left + "px";
}
} else {
el_window.style.padding = "0px 0px 0px 0px";
}
};
var __fullScreenWindow = function(el_window) {
el_window.before_full_screen = el_window.getBoundingClientRect();
el_window.requestFullscreen();
if ("keyboard" in navigator && "lock" in navigator.keyboard) {
navigator.keyboard.lock();
} else {
let el_lock_alert = el_window.querySelector(".window-lock-alert");
if (el_lock_alert) {
tools.hiddenSetVisible(el_lock_alert, true);
setTimeout(function() {
tools.hiddenSetVisible(el_lock_alert, false);
}, 7000);
}
}
};
var __maximizeWindow = function(el_window) {
let vertical_offset = $("navbar").offsetHeight;
el_window.style.left = "0px";
el_window.style.top = vertical_offset + "px";
el_window.style.width = window.innerWidth + "px";
el_window.style.height = window.innerHeight - vertical_offset + "px";
};
__init__();
}