mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 01:00:29 +08:00
windows control
This commit is contained in:
Devaev Maxim
parent
34d3e9d637
commit
57ea0c285c
@ -110,10 +110,10 @@ div.ctl-dropdown-content button.row50:not(:first-child), button.row25:not(:first
|
||||
div.ctl-dropdown-content hr {
|
||||
margin: 0;
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
height: 0px;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color-dark);
|
||||
border: none;
|
||||
border-top: var(--dark-border);
|
||||
}
|
||||
div.ctl-dropdown-content-text {
|
||||
margin: 10px 15px 10px 15px;
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
:root {
|
||||
--dark-border: 1px solid #17191d;
|
||||
--grey-border: 1px solid #202225;
|
||||
--black-border: 1px solid black;
|
||||
--dark-border: thin solid #17191d;
|
||||
--grey-border: thin solid #202225;
|
||||
--normal-border: thin solid #36393f;
|
||||
--black-border: thin solid black;
|
||||
|
||||
--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
@ -2,6 +2,7 @@ div.window {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
border: var(--dark-border);
|
||||
-webkit-border-radius: 8px;
|
||||
@ -11,23 +12,60 @@ div.window {
|
||||
box-shadow: var(--big-shadow);
|
||||
display: inline-block;
|
||||
background-color: var(--bg-color-light);
|
||||
padding: 3px 10px 10px 10px;
|
||||
-webkit-transform: translate(-50%);
|
||||
-moz-transform: translate(-50%);
|
||||
transform: translate(-50%);
|
||||
padding: 30px 9px 9px 9px;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
-moz-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
div.window-header {
|
||||
color: var(--fg-color-dark);
|
||||
font-size: 0.8em;
|
||||
cursor: move;
|
||||
padding-left: 6px;
|
||||
padding-bottom: 4px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
height: 20px;
|
||||
border-bottom: var(--normal-border);
|
||||
}
|
||||
|
||||
div.window hr.window-sep {
|
||||
margin: 0 0 6px 0;
|
||||
display: block;
|
||||
border: none;
|
||||
border-top: 1px solid var(--bg-color-normal);
|
||||
div.window-grab {
|
||||
overflow: hidden;
|
||||
font-size: 0.8em;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
cursor: move;
|
||||
padding: 3px 0 2px 20px;
|
||||
color: var(--fg-color-dark);
|
||||
}
|
||||
|
||||
button.window-button-close {
|
||||
outline: none;
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -6px;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
padding-left: 0;
|
||||
color: var(--fg-color-inactive);
|
||||
background-color: var(--bg-color-normal);
|
||||
display: inline-block;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
button.window-button-close:hover {
|
||||
color: var(--fg-color-intensive);
|
||||
background-color: var(--bg-color-dark) !important;
|
||||
}
|
||||
button.window-button-close:disabled {
|
||||
color: var(--fg-color-inactive);
|
||||
cursor: default;
|
||||
}
|
||||
button.window-button-close:active {
|
||||
color: var(--fg-color-selected) !important;
|
||||
}
|
||||
|
||||
@ -44,6 +44,9 @@
|
||||
System ↴
|
||||
</a>
|
||||
<div class="ctl-dropdown-content" style="display:none">
|
||||
<button onclick="ui.showWindow('stream-window')">• Show stream</button>
|
||||
<button onclick="ui.showWindow('keyboard-window')">• Show keyboard</button>
|
||||
<hr>
|
||||
<button disabled id="stream-reset-button" onclick="stream.clickResetButton();">• Reset stream</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -196,15 +199,16 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="window" style="left:50%; top:70px">
|
||||
<div class="window-header">Stream</div>
|
||||
<!-- <hr class="window-sep"> -->
|
||||
<div id="stream-window" class="window">
|
||||
<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 class="window" style="left:75%; top:60%">
|
||||
<div class="window-header">Virtual Keyboard</div>
|
||||
<hr class="window-sep">
|
||||
<div id="keyboard-window" class="window">
|
||||
<div class="window-header">
|
||||
<div class="window-grab">Virtual Keyboard</div>
|
||||
<button class="window-button-close">×</button>
|
||||
</div>
|
||||
<div id="keyboard">
|
||||
<div class="keyboard-block">
|
||||
<div class="keyboard-row">
|
||||
|
||||
@ -7,10 +7,16 @@ var ui = new function() {
|
||||
});
|
||||
|
||||
window.onclick = __windowClickHandler;
|
||||
|
||||
Array.prototype.forEach.call(document.getElementsByClassName("window"), function(el_window) {
|
||||
var el_header = el_window.querySelector(".window-header");
|
||||
__makeWindowMovable(el_header, el_window);
|
||||
var el_grab = el_window.querySelector(".window-header .window-grab");
|
||||
__makeWindowMovable(el_grab, el_window);
|
||||
|
||||
var el_button = el_window.querySelector(".window-header .window-button-close");
|
||||
if (el_button) {
|
||||
el_button.onclick = function() {
|
||||
el_window.style.display = "none";
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof document.hidden !== "undefined") {
|
||||
@ -40,6 +46,32 @@ var ui = new function() {
|
||||
window.onblur = hid.releaseAll;
|
||||
};
|
||||
|
||||
this.showWindow = function(id) {
|
||||
var el_window = $(id);
|
||||
if (!__isWindowOnPage(el_window)) {
|
||||
el_window.style.top = "50%";
|
||||
el_window.style.left = "50%";
|
||||
}
|
||||
el_window.style.display = "block";
|
||||
__raiseWindow(el_window);
|
||||
};
|
||||
|
||||
var __isWindowOnPage = function(el_window) {
|
||||
var view_top = $("ctl").clientHeight;
|
||||
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();
|
||||
|
||||
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) {
|
||||
Array.prototype.forEach.call(document.getElementsByClassName("ctl-item"), function(el_item) {
|
||||
var el_menu = el_item.parentElement.querySelector(".ctl-dropdown-content");
|
||||
@ -67,12 +99,12 @@ var ui = new function() {
|
||||
}
|
||||
};
|
||||
|
||||
var __makeWindowMovable = function(el_header, el_body) {
|
||||
var __makeWindowMovable = function(el_grab, el_window) {
|
||||
var prev_x = 0;
|
||||
var prev_y = 0;
|
||||
|
||||
function startMoving(event) {
|
||||
__raiseWindow(el_body);
|
||||
__raiseWindow(el_window);
|
||||
event = (event || window.event);
|
||||
event.preventDefault();
|
||||
prev_x = event.clientX;
|
||||
@ -88,8 +120,8 @@ var ui = new function() {
|
||||
y = prev_y - event.clientY;
|
||||
prev_x = event.clientX;
|
||||
prev_y = event.clientY;
|
||||
el_body.style.top = (el_body.offsetTop - y) + "px";
|
||||
el_body.style.left = (el_body.offsetLeft - x) + "px";
|
||||
el_window.style.top = (el_window.offsetTop - y) + "px";
|
||||
el_window.style.left = (el_window.offsetLeft - x) + "px";
|
||||
}
|
||||
|
||||
function stopMoving() {
|
||||
@ -97,12 +129,12 @@ var ui = new function() {
|
||||
document.onmouseup = null;
|
||||
}
|
||||
|
||||
el_header.onmousedown = startMoving;
|
||||
el_body.onclick = function () { __raiseWindow(el_body) };
|
||||
el_grab.onmousedown = startMoving;
|
||||
el_window.onclick = function () { __raiseWindow(el_window) };
|
||||
};
|
||||
|
||||
var __raiseWindow = function(el_body) {
|
||||
var __raiseWindow = function(el_window) {
|
||||
__top_z_index += 1;
|
||||
el_body.style.zIndex = __top_z_index;
|
||||
el_window.style.zIndex = __top_z_index;
|
||||
};
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user