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

better windows management

Browse Source
This commit is contained in:
Devaev Maxim 2019-05-04 00:27:18 +03:00
parent a7409e3a7a
commit 5dd3327031
2 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/share/js/kvm/stream.js
View File

@ -208,11 +208,11 @@ function Streamer() {
}); });
}; };
var __resize = function(center=false) { var __resize = function() {
let size = $("stream-size-slider").value; let size = $("stream-size-slider").value;
$("stream-size-value").innerHTML = size + "%"; $("stream-size-value").innerHTML = size + "%";
__size_factor = size / 100; __size_factor = size / 100;
__applySizeFactor(center); __applySizeFactor();
}; };
var __adjustSizeFactor = function() { var __adjustSizeFactor = function() {
@ -223,7 +223,7 @@ function Streamer() {
for (let size = 100; size >= el_slider.min; size -= el_slider.step) { for (let size = 100; size >= el_slider.min; size -= el_slider.step) {
tools.info("Stream: adjusting size:", size); tools.info("Stream: adjusting size:", size);
$("stream-size-slider").value = size; $("stream-size-slider").value = size;
__resize(true); __resize();
let rect = el_window.getBoundingClientRect(); let rect = el_window.getBoundingClientRect();
if ( if (
@ -237,11 +237,11 @@ function Streamer() {
} }
}; };
var __applySizeFactor = function(center=false) { var __applySizeFactor = function() {
let el_stream_image = $("stream-image"); let el_stream_image = $("stream-image");
el_stream_image.style.width = __resolution.width * __size_factor + "px"; el_stream_image.style.width = __resolution.width * __size_factor + "px";
el_stream_image.style.height = __resolution.height * __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__(); __init__();

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

@ -62,8 +62,8 @@ function WindowManager() {
window.addEventListener("focusin", __focusIn); window.addEventListener("focusin", __focusIn);
window.addEventListener("focusout", __focusOut); window.addEventListener("focusout", __focusOut);
window.addEventListener("resize", () => __organizeWindowsOnResize(false)); window.addEventListener("resize", __organizeWindowsOnResize);
window.addEventListener("orientationchange", () => __organizeWindowsOnResize(true)); window.addEventListener("orientationchange", __organizeWindowsOnResize);
}; };
/************************************************************************/ /************************************************************************/
@ -159,15 +159,10 @@ function WindowManager() {
}; };
self.showWindow = function(el_window, activate=true, center=false) { self.showWindow = function(el_window, activate=true, center=false) {
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) { if (el_window.style.visibility === "hidden") {
let view = self.getViewGeometry(); center = true;
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", "");
} }
__organizeWindow(el_window, center);
el_window.style.visibility = "visible"; el_window.style.visibility = "visible";
if (activate) { if (activate) {
__activateWindow(el_window); __activateWindow(el_window);
@ -175,31 +170,15 @@ function WindowManager() {
}; };
self.getViewGeometry = function() { self.getViewGeometry = function() {
let el_menu = $("menu");
return { return {
top: __getMenuHeight(), top: (el_menu ? el_menu.clientHeight : 0), // Menu height
bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0), bottom: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
left: 0, left: 0,
right: Math.max(document.documentElement.clientWidth, window.innerWidth || 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) { var __toggleMenu = function(el_a) {
let all_hidden = true; let all_hidden = true;
@ -277,16 +256,33 @@ function WindowManager() {
} }
}; };
var __organizeWindowsOnResize = function(orientation) { var __organizeWindowsOnResize = function() {
let view = self.getViewGeometry();
for (let el_window of $$("window")) { for (let el_window of $$("window")) {
if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) { if (el_window.style.visibility === "visible") {
let rect = el_window.getBoundingClientRect(); __organizeWindow(el_window);
}
}
};
el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px"; var __organizeWindow = function(el_window, center=false) {
el_window.style.left = Math.round((view.right - rect.width) / 2) + "px"; let view = self.getViewGeometry();
el_window.setAttribute("data-centered", ""); 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";
} }
} }
}; };