mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2025-12-12 17:20:30 +08:00
refactoring
This commit is contained in:
parent
b5ca09f310
commit
1897d72b51
@ -4,16 +4,15 @@ function main() {
|
||||
}
|
||||
|
||||
function __setAppText() {
|
||||
var url = window.location.href;
|
||||
$("app-text").innerHTML = `
|
||||
<span class="code-comment"># On Linux using Chromium/Chrome via any terminal:<br>
|
||||
$</span> \`which chromium 2>/dev/null || which chrome 2>/dev/null\` --app="${url}"<br>
|
||||
$</span> \`which chromium 2>/dev/null || which chrome 2>/dev/null\` --app="${window.location.href}"<br>
|
||||
<br>
|
||||
<span class="code-comment"># On MacOS using Terminal application:<br>
|
||||
$</span> /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app="${url}"<br>
|
||||
$</span> /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app="${window.location.href}"<br>
|
||||
<br>
|
||||
<span class="code-comment"># On Windows via cmd.exe:<br>
|
||||
C:\></span> start chrome --app="${url}"
|
||||
C:\></span> start chrome --app="${window.location.href}"
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@ -7,17 +7,20 @@ function Atx() {
|
||||
$("atx-power-led").title = "Power Led";
|
||||
$("atx-hdd-led").title = "Disk Activity Led";
|
||||
|
||||
tools.setOnClick($("atx-power-button"), () => __clickButton("power", null, "Are you sure to click the power button?"));
|
||||
tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", 15000, "Are you sure to perform the long press of the power button?"));
|
||||
tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", null, "Are you sure to reboot the server?"));
|
||||
tools.setOnClick($("atx-power-button"), () => __clickButton("power", "Are you sure to click the power button?"));
|
||||
tools.setOnClick($("atx-power-button-long"), () => __clickButton("power_long", "Are you sure to perform the long press of the power button?", 15000));
|
||||
tools.setOnClick($("atx-reset-button"), () => __clickButton("reset", "Are you sure to reboot the server?"));
|
||||
};
|
||||
|
||||
/********************************************************************************/
|
||||
|
||||
self.setState = function(state) {
|
||||
__setButtonsBusy(state.busy);
|
||||
$("atx-power-led").className = (state.leds.power ? "led-green" : "led-gray");
|
||||
$("atx-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray");
|
||||
|
||||
$("atx-power-button").disabled = state.busy;
|
||||
$("atx-power-button-long").disabled = state.busy;
|
||||
$("atx-reset-button").disabled = state.busy;
|
||||
};
|
||||
|
||||
self.clearState = function() {
|
||||
@ -25,7 +28,7 @@ function Atx() {
|
||||
$("atx-hdd-led").className = "led-gray";
|
||||
};
|
||||
|
||||
var __clickButton = function(button, timeout, confirm_msg) {
|
||||
var __clickButton = function(button, confirm_msg, timeout=null) {
|
||||
ui.confirm(confirm_msg).then(function(ok) {
|
||||
if (ok) {
|
||||
var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
|
||||
@ -41,11 +44,5 @@ function Atx() {
|
||||
});
|
||||
};
|
||||
|
||||
var __setButtonsBusy = function(busy) {
|
||||
$("atx-power-button").disabled = busy;
|
||||
$("atx-power-button-long").disabled = busy;
|
||||
$("atx-reset-button").disabled = busy;
|
||||
};
|
||||
|
||||
__init__();
|
||||
}
|
||||
|
||||
@ -42,8 +42,8 @@ function Hid() {
|
||||
window.onblur = __releaseAll;
|
||||
|
||||
__chars_to_codes = __buildCharsToCodes();
|
||||
tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
|
||||
|
||||
tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
|
||||
tools.setOnClick($("hid-reset-button"), __clickResetButton);
|
||||
|
||||
Array.prototype.forEach.call(document.querySelectorAll("[data-shortcut]"), function(el_shortcut) {
|
||||
@ -54,10 +54,12 @@ function Hid() {
|
||||
/********************************************************************************/
|
||||
|
||||
self.setSocket = function(ws) {
|
||||
$("hid-pak-text").disabled = !ws;
|
||||
$("hid-pak-button").disabled = !ws;
|
||||
$("hid-reset-button").disabled = !ws;
|
||||
__ws = ws;
|
||||
__keyboard.setSocket(ws);
|
||||
__mouse.setSocket(ws);
|
||||
$("hid-pak-text").disabled = $("hid-pak-button").disabled = $("hid-reset-button").disabled = !ws;
|
||||
};
|
||||
|
||||
var __releaseAll = function() {
|
||||
|
||||
@ -8,13 +8,6 @@ function Keyboard() {
|
||||
var __keys = [].slice.call(document.querySelectorAll("div#keyboard-desktop div.keyboard-block div.keyboard-row div.key"));
|
||||
var __modifiers = [].slice.call(document.querySelectorAll("div#keyboard-desktop div.keyboard-block div.keyboard-row div.modifier"));
|
||||
|
||||
var __mac_cmd_hook = ((
|
||||
window.navigator.oscpu
|
||||
|| window.navigator.platform
|
||||
|| window.navigator.appVersion
|
||||
|| "Unknown"
|
||||
).indexOf("Mac") !== -1);
|
||||
|
||||
var __init__ = function() {
|
||||
$("hid-keyboard-led").title = "Keyboard free";
|
||||
|
||||
@ -42,7 +35,7 @@ function Keyboard() {
|
||||
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
|
||||
});
|
||||
|
||||
if (__mac_cmd_hook) {
|
||||
if (tools.browser.is_mac) {
|
||||
tools.info("Keyboard: enabled Mac-CMD-Hook");
|
||||
}
|
||||
};
|
||||
@ -86,7 +79,7 @@ function Keyboard() {
|
||||
var el_key = document.querySelector(`[data-key='${event.code}']`);
|
||||
if (el_key && !event.repeat) {
|
||||
__commonHandler(el_key, state, "pressed");
|
||||
if (__mac_cmd_hook) {
|
||||
if (tools.browser.is_mac) {
|
||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=28089
|
||||
// https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
|
||||
if ((event.code === "MetaLeft" || event.code === "MetaRight") && !state) {
|
||||
|
||||
@ -21,8 +21,8 @@ function Mouse() {
|
||||
$("stream-box").oncontextmenu = (event) => event.preventDefault();
|
||||
$("stream-box").onmousemove = __moveHandler;
|
||||
$("stream-box").onwheel = __wheelHandler;
|
||||
|
||||
$("stream-box").ontouchstart = (event) => __touchMoveHandler(event);
|
||||
|
||||
Array.prototype.forEach.call(document.querySelectorAll("[data-mouse-button]"), function(el_button) {
|
||||
var button = el_button.getAttribute("data-mouse-button");
|
||||
tools.setOnDown(el_button, () => __sendButton(button, true));
|
||||
@ -115,6 +115,7 @@ function Mouse() {
|
||||
x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
|
||||
y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
|
||||
};
|
||||
|
||||
tools.debug("Mouse: moved:", to);
|
||||
if (__ws) {
|
||||
__ws.send(JSON.stringify({
|
||||
|
||||
@ -39,6 +39,7 @@ function Session() {
|
||||
document.title = "Pi-KVM Session";
|
||||
}
|
||||
}
|
||||
|
||||
$("about-version-kvmd").innerHTML = state.version.kvmd;
|
||||
$("about-version-streamer").innerHTML = `${state.version.streamer} (${state.streamer})`;
|
||||
};
|
||||
@ -46,6 +47,7 @@ function Session() {
|
||||
var __startPoller = function() {
|
||||
$("link-led").className = "led-yellow";
|
||||
$("link-led").title = "Connecting...";
|
||||
|
||||
var http = tools.makeRequest("GET", "/ws_auth", function() {
|
||||
if (http.readyState === 4) {
|
||||
if (http.status === 200) {
|
||||
@ -63,9 +65,9 @@ function Session() {
|
||||
};
|
||||
|
||||
var __wsOpenHandler = function(event) {
|
||||
tools.debug("Session: socket opened:", event);
|
||||
$("link-led").className = "led-green";
|
||||
$("link-led").title = "Connected";
|
||||
tools.debug("Session: socket opened:", event);
|
||||
__hid.setSocket(__ws);
|
||||
__missed_heartbeats = 0;
|
||||
__ping_timer = setInterval(__pingServer, 1000);
|
||||
@ -99,16 +101,20 @@ function Session() {
|
||||
};
|
||||
|
||||
var __wsCloseHandler = function(event) {
|
||||
$("link-led").className = "led-gray";
|
||||
tools.debug("Session: socket closed:", event);
|
||||
|
||||
$("link-led").className = "led-gray";
|
||||
|
||||
if (__ping_timer) {
|
||||
clearInterval(__ping_timer);
|
||||
__ping_timer = null;
|
||||
}
|
||||
|
||||
__streamer.clearState();
|
||||
__atx.clearState();
|
||||
__hid.setSocket(null);
|
||||
__ws = null;
|
||||
|
||||
setTimeout(function() {
|
||||
$("link-led").className = "led-yellow";
|
||||
setTimeout(__startPoller, 500);
|
||||
|
||||
@ -116,6 +116,7 @@ function Streamer() {
|
||||
|
||||
self.clearState = function() {
|
||||
tools.info("Stream: refreshing ...");
|
||||
|
||||
$("stream-image").className = "stream-image-inactive";
|
||||
$("stream-box").classList.add("stream-box-inactive");
|
||||
$("stream-led").className = "led-gray";
|
||||
@ -124,6 +125,7 @@ function Streamer() {
|
||||
$("stream-reset-button").disabled = true;
|
||||
$("stream-quality-slider").disabled = true;
|
||||
$("stream-desired-fps-slider").disabled = true;
|
||||
|
||||
__client_key = tools.makeId();
|
||||
__client_id = "";
|
||||
__client_fps = -1;
|
||||
|
||||
@ -108,6 +108,14 @@ var tools = new function() {
|
||||
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
|
||||
var is_ios = (!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform));
|
||||
|
||||
// Any browser on Mac
|
||||
var is_mac = ((
|
||||
window.navigator.oscpu
|
||||
|| window.navigator.platform
|
||||
|| window.navigator.appVersion
|
||||
|| "Unknown"
|
||||
).indexOf("Mac") !== -1);
|
||||
|
||||
return {
|
||||
"is_opera": is_opera,
|
||||
"is_firefox": is_firefox,
|
||||
@ -115,6 +123,7 @@ var tools = new function() {
|
||||
"is_chrome": is_chrome,
|
||||
"is_blink": is_blink,
|
||||
"is_ios": is_ios,
|
||||
"is_mac": is_mac,
|
||||
};
|
||||
};
|
||||
this.info("Browser:", this.browser);
|
||||
|
||||
14
web/js/ui.js
14
web/js/ui.js
@ -32,9 +32,8 @@ function Ui() {
|
||||
}
|
||||
});
|
||||
|
||||
var el_menu_logo = $("menu-logo");
|
||||
if (el_menu_logo) {
|
||||
tools.setOnClick(el_menu_logo, () => window.history.back());
|
||||
if ($("menu-logo")) {
|
||||
tools.setOnClick($("menu-logo"), () => window.history.back());
|
||||
}
|
||||
|
||||
window.onmouseup = __globalMouseButtonHandler;
|
||||
@ -126,10 +125,12 @@ function Ui() {
|
||||
if (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
|
||||
var view = self.getViewGeometry();
|
||||
var rect = el_window.getBoundingClientRect();
|
||||
|
||||
el_window.style.top = Math.max($("menu").clientHeight, 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", "");
|
||||
}
|
||||
|
||||
el_window.style.visibility = "visible";
|
||||
if (activate) {
|
||||
__activateWindow(el_window);
|
||||
@ -213,9 +214,11 @@ function Ui() {
|
||||
|
||||
var __organizeWindowsOnResize = function(orientation) {
|
||||
var view = self.getViewGeometry();
|
||||
|
||||
Array.prototype.forEach.call($$("window"), function(el_window) {
|
||||
if (el_window.style.visibility === "visible" && (orientation || el_window.hasAttribute("data-centered"))) {
|
||||
var rect = el_window.getBoundingClientRect();
|
||||
|
||||
el_window.style.top = Math.max($("menu").clientHeight, 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", "");
|
||||
@ -331,9 +334,8 @@ function Ui() {
|
||||
el_to_focus.classList.add("window-active");
|
||||
|
||||
if (el_window.className !== "modal" && parseInt(el_window.style.zIndex) !== __top_z_index) {
|
||||
var z_index = __top_z_index + 1;
|
||||
el_window.style.zIndex = z_index;
|
||||
__top_z_index = z_index;
|
||||
__top_z_index += 1;
|
||||
el_window.style.zIndex = __top_z_index;
|
||||
tools.debug("UI: activated window:", el_window);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user