mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-13 09:40:30 +08:00
better windows management
This commit is contained in:
parent
a7409e3a7a
commit
5dd3327031
@ -208,11 +208,11 @@ function Streamer() {
|
||||
});
|
||||
};
|
||||
|
||||
var __resize = function(center=false) {
|
||||
var __resize = function() {
|
||||
let size = $("stream-size-slider").value;
|
||||
$("stream-size-value").innerHTML = size + "%";
|
||||
__size_factor = size / 100;
|
||||
__applySizeFactor(center);
|
||||
__applySizeFactor();
|
||||
};
|
||||
|
||||
var __adjustSizeFactor = function() {
|
||||
@ -223,7 +223,7 @@ function Streamer() {
|
||||
for (let size = 100; size >= el_slider.min; size -= el_slider.step) {
|
||||
tools.info("Stream: adjusting size:", size);
|
||||
$("stream-size-slider").value = size;
|
||||
__resize(true);
|
||||
__resize();
|
||||
|
||||
let rect = el_window.getBoundingClientRect();
|
||||
if (
|
||||
@ -237,11 +237,11 @@ function Streamer() {
|
||||
}
|
||||
};
|
||||
|
||||
var __applySizeFactor = function(center=false) {
|
||||
var __applySizeFactor = function() {
|
||||
let el_stream_image = $("stream-image");
|
||||
el_stream_image.style.width = __resolution.width * __size_factor + "px";
|
||||
el_stream_image.style.height = __resolution.height * __size_factor + "px";
|
||||
wm.showWindow($("stream-window"), false, center);
|
||||
wm.showWindow($("stream-window"), false);
|
||||
};
|
||||
|
||||
__init__();
|
||||
|
||||
@ -62,8 +62,8 @@ function WindowManager() {
|
||||
window.addEventListener("focusin", __focusIn);
|
||||
window.addEventListener("focusout", __focusOut);
|
||||
|
||||
window.addEventListener("resize", () => __organizeWindowsOnResize(false));
|
||||
window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true));
|
||||
window.addEventListener("resize", __organizeWindowsOnResize);
|
||||
window.addEventListener("orientationchange", __organizeWindowsOnResize);
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
@ -159,15 +159,10 @@ function WindowManager() {
|
||||
};
|
||||
|
||||
self.showWindow = function(el_window, activate=true, center=false) {
|
||||
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
|
||||
let view = self.getViewGeometry();
|
||||
let rect = el_window.getBoundingClientRect();
|
||||
|
||||
el_window.style.top = Math.max(__getMenuHeight(), 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", "");
|
||||
if (el_window.style.visibility === "hidden") {
|
||||
center = true;
|
||||
}
|
||||
|
||||
__organizeWindow(el_window, center);
|
||||
el_window.style.visibility = "visible";
|
||||
if (activate) {
|
||||
__activateWindow(el_window);
|
||||
@ -175,31 +170,15 @@ function WindowManager() {
|
||||
};
|
||||
|
||||
self.getViewGeometry = function() {
|
||||
let el_menu = $("menu");
|
||||
return {
|
||||
top: __getMenuHeight(),
|
||||
top: (el_menu ? el_menu.clientHeight : 0), // Menu height
|
||||
bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
|
||||
left: 0,
|
||||
right: Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
|
||||
};
|
||||
};
|
||||
|
||||
var __getMenuHeight = function() {
|
||||
let el_menu = $("menu");
|
||||
return (el_menu ? el_menu.clientHeight : 0);
|
||||
};
|
||||
|
||||
var __isWindowOnPage = function(el_window) {
|
||||
let view = self.getViewGeometry();
|
||||
let rect = el_window.getBoundingClientRect();
|
||||
|
||||
return (
|
||||
(rect.bottom - el_window.clientHeight / 1.5) <= view.bottom
|
||||
&& rect.top >= view.top
|
||||
&& (rect.left + el_window.clientWidth / 1.5) >= view.left
|
||||
&& (rect.right - el_window.clientWidth / 1.5) <= view.right
|
||||
);
|
||||
};
|
||||
|
||||
var __toggleMenu = function(el_a) {
|
||||
let all_hidden = true;
|
||||
|
||||
@ -277,16 +256,33 @@ function WindowManager() {
|
||||
}
|
||||
};
|
||||
|
||||
var __organizeWindowsOnResize = function(orientation) {
|
||||
let view = self.getViewGeometry();
|
||||
|
||||
var __organizeWindowsOnResize = function() {
|
||||
for (let el_window of $$("window")) {
|
||||
if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
|
||||
let rect = el_window.getBoundingClientRect();
|
||||
if (el_window.style.visibility === "visible") {
|
||||
__organizeWindow(el_window);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
el_window.style.top = Math.max(__getMenuHeight(), 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 __organizeWindow = function(el_window, center=false) {
|
||||
let view = self.getViewGeometry();
|
||||
let 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", "");
|
||||
} else {
|
||||
if (rect.top <= view.top) {
|
||||
el_window.style.top = view.top + "px";
|
||||
} else if (rect.bottom > view.bottom) {
|
||||
el_window.style.top = view.bottom - rect.height + "px";
|
||||
}
|
||||
|
||||
if (rect.left <= view.left) {
|
||||
el_window.style.left = view.left + "px";
|
||||
} else if (rect.right > view.right) {
|
||||
el_window.style.left = view.right - rect.width + "px";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user