mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-02-01 02:21:53 +08:00
refactoring
This commit is contained in:
@@ -27,7 +27,7 @@ function checkBrowser() {
|
|||||||
|| window.navigator.userAgent.indexOf("Trident/") > 0
|
|| window.navigator.userAgent.indexOf("Trident/") > 0
|
||||||
|| window.navigator.userAgent.indexOf("Edge/") > 0
|
|| window.navigator.userAgent.indexOf("Edge/") > 0
|
||||||
) {
|
) {
|
||||||
var el_modal = document.createElement("div");
|
let el_modal = document.createElement("div");
|
||||||
el_modal.className = "modal";
|
el_modal.className = "modal";
|
||||||
el_modal.style.visibility = "visible";
|
el_modal.style.visibility = "visible";
|
||||||
el_modal.innerHTML = `
|
el_modal.innerHTML = `
|
||||||
|
|||||||
@@ -45,15 +45,15 @@ function __setAppText() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function __loadKvmdInfo() {
|
function __loadKvmdInfo() {
|
||||||
var http = tools.makeRequest("GET", "/kvmd/info", function() {
|
let http = tools.makeRequest("GET", "/kvmd/info", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 200) {
|
if (http.status === 200) {
|
||||||
var info = JSON.parse(http.responseText).result;
|
let info = JSON.parse(http.responseText).result;
|
||||||
|
|
||||||
var apps = Object.values(info.extras).sort(function(a, b) {
|
let apps = Object.values(info.extras).sort(function(a, b) {
|
||||||
if (a["place"] < b["place"]) {
|
if (a.place < b.place) {
|
||||||
return -1;
|
return -1;
|
||||||
} else if (a["place"] > b["place"]) {
|
} else if (a.place > b.place) {
|
||||||
return 1;
|
return 1;
|
||||||
} else {
|
} else {
|
||||||
return 0;
|
return 0;
|
||||||
@@ -64,9 +64,9 @@ function __loadKvmdInfo() {
|
|||||||
|
|
||||||
$("apps").innerHTML += __makeApp(null, "kvm", "share/svg/kvm.svg", "KVM");
|
$("apps").innerHTML += __makeApp(null, "kvm", "share/svg/kvm.svg", "KVM");
|
||||||
|
|
||||||
apps.forEach(function(app) {
|
for (let app of apps) {
|
||||||
$("apps").innerHTML += __makeApp(null, app.path, app.icon, app.name);
|
$("apps").innerHTML += __makeApp(null, app.path, app.icon, app.name);
|
||||||
});
|
}
|
||||||
|
|
||||||
$("apps").innerHTML += __makeApp("logout-button", "#", "share/svg/logout.svg", "Logout");
|
$("apps").innerHTML += __makeApp("logout-button", "#", "share/svg/logout.svg", "Logout");
|
||||||
tools.setOnClick($("logout-button"), __logout);
|
tools.setOnClick($("logout-button"), __logout);
|
||||||
@@ -101,7 +101,7 @@ function __makeApp(id, path, icon, name) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function __logout() {
|
function __logout() {
|
||||||
var http = tools.makeRequest("POST", "/kvmd/auth/logout", function() {
|
let http = tools.makeRequest("POST", "/kvmd/auth/logout", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 200 || http.status === 401 || http.status === 403) {
|
if (http.status === 200 || http.status === 401 || http.status === 403) {
|
||||||
document.location.href = "/login";
|
document.location.href = "/login";
|
||||||
|
|||||||
@@ -30,11 +30,8 @@ function Keypad(keys_parent, key_callback) {
|
|||||||
var __modifiers = {};
|
var __modifiers = {};
|
||||||
|
|
||||||
var __init__ = function() {
|
var __init__ = function() {
|
||||||
var code;
|
for (let el_key of $$$(keys_parent + " div.key")) {
|
||||||
var el_key;
|
let code = el_key.getAttribute("data-code");
|
||||||
|
|
||||||
for (el_key of $$$(keys_parent + " div.key")) {
|
|
||||||
code = el_key.getAttribute("data-code");
|
|
||||||
|
|
||||||
tools.setDefault(__keys, code, []);
|
tools.setDefault(__keys, code, []);
|
||||||
__keys[code].push(el_key);
|
__keys[code].push(el_key);
|
||||||
@@ -42,19 +39,17 @@ function Keypad(keys_parent, key_callback) {
|
|||||||
tools.setDefault(__merged, code, []);
|
tools.setDefault(__merged, code, []);
|
||||||
__merged[code].push(el_key);
|
__merged[code].push(el_key);
|
||||||
|
|
||||||
(function(el_key) {
|
tools.setOnDown(el_key, () => __clickHandler(el_key, true));
|
||||||
tools.setOnDown(el_key, () => __clickHandler(el_key, true));
|
tools.setOnUp(el_key, () => __clickHandler(el_key, false));
|
||||||
tools.setOnUp(el_key, () => __clickHandler(el_key, false));
|
el_key.onmouseout = function() {
|
||||||
el_key.onmouseout = function() {
|
if (__isPressed(el_key)) {
|
||||||
if (__isPressed(el_key)) {
|
__clickHandler(el_key, false);
|
||||||
__clickHandler(el_key, false);
|
}
|
||||||
}
|
};
|
||||||
};
|
|
||||||
})(el_key);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
for (el_key of $$$(keys_parent + " div.modifier")) {
|
for (let el_key of $$$(keys_parent + " div.modifier")) {
|
||||||
code = el_key.getAttribute("data-code");
|
let code = el_key.getAttribute("data-code");
|
||||||
|
|
||||||
tools.setDefault(__modifiers, code, []);
|
tools.setDefault(__modifiers, code, []);
|
||||||
__modifiers[code].push(el_key);
|
__modifiers[code].push(el_key);
|
||||||
@@ -62,17 +57,15 @@ function Keypad(keys_parent, key_callback) {
|
|||||||
tools.setDefault(__merged, code, []);
|
tools.setDefault(__merged, code, []);
|
||||||
__merged[code].push(el_key);
|
__merged[code].push(el_key);
|
||||||
|
|
||||||
(function(el_key) {
|
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
|
||||||
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
|
|
||||||
})(el_key);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/************************************************************************/
|
/************************************************************************/
|
||||||
|
|
||||||
self.releaseAll = function(release_hook=false) {
|
self.releaseAll = function(release_hook=false) {
|
||||||
for (var dict of [__keys, __modifiers]) {
|
for (let dict of [__keys, __modifiers]) {
|
||||||
for (var code in dict) {
|
for (let code in dict) {
|
||||||
if (__isActive(dict[code][0])) {
|
if (__isActive(dict[code][0])) {
|
||||||
self.emit(code, false, release_hook);
|
self.emit(code, false, release_hook);
|
||||||
}
|
}
|
||||||
@@ -84,7 +77,7 @@ function Keypad(keys_parent, key_callback) {
|
|||||||
if (code in __merged) {
|
if (code in __merged) {
|
||||||
__commonHandler(__merged[code][0], state, false);
|
__commonHandler(__merged[code][0], state, false);
|
||||||
if (release_hook) {
|
if (release_hook) {
|
||||||
for (code in __keys) {
|
for (let code in __keys) {
|
||||||
if (__isActive(__keys[code][0])) {
|
if (__isActive(__keys[code][0])) {
|
||||||
self.emit(code, false);
|
self.emit(code, false);
|
||||||
}
|
}
|
||||||
@@ -115,8 +108,8 @@ function Keypad(keys_parent, key_callback) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __unholdModifiers = function() {
|
var __unholdModifiers = function() {
|
||||||
for (var code in __modifiers) {
|
for (let code in __modifiers) {
|
||||||
var el_key = __modifiers[code][0];
|
let el_key = __modifiers[code][0];
|
||||||
if (__isHolded(el_key)) {
|
if (__isHolded(el_key)) {
|
||||||
__deactivate(el_key);
|
__deactivate(el_key);
|
||||||
__process(el_key, false);
|
__process(el_key, false);
|
||||||
@@ -125,49 +118,54 @@ function Keypad(keys_parent, key_callback) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __isPressed = function(el_key) {
|
var __isPressed = function(el_key) {
|
||||||
var is_pressed = false;
|
let is_pressed = false;
|
||||||
for (el_key of __resolveKeys(el_key)) {
|
let el_keys = __resolveKeys(el_key);
|
||||||
|
for (let el_key of el_keys) {
|
||||||
is_pressed = (is_pressed || el_key.classList.contains("pressed"));
|
is_pressed = (is_pressed || el_key.classList.contains("pressed"));
|
||||||
}
|
}
|
||||||
return is_pressed;
|
return is_pressed;
|
||||||
};
|
};
|
||||||
|
|
||||||
var __isHolded = function(el_key) {
|
var __isHolded = function(el_key) {
|
||||||
var is_holded = false;
|
let is_holded = false;
|
||||||
for (el_key of __resolveKeys(el_key)) {
|
let el_keys = __resolveKeys(el_key);
|
||||||
|
for (let el_key of el_keys) {
|
||||||
is_holded = (is_holded || el_key.classList.contains("holded"));
|
is_holded = (is_holded || el_key.classList.contains("holded"));
|
||||||
}
|
}
|
||||||
return is_holded;
|
return is_holded;
|
||||||
};
|
};
|
||||||
|
|
||||||
var __isActive = function(el_key) {
|
var __isActive = function(el_key) {
|
||||||
var is_active = false;
|
let is_active = false;
|
||||||
for (el_key of __resolveKeys(el_key)) {
|
let el_keys = __resolveKeys(el_key);
|
||||||
|
for (let el_key of el_keys) {
|
||||||
is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
|
is_active = (is_active || el_key.classList.contains("pressed") || el_key.classList.contains("holded"));
|
||||||
}
|
}
|
||||||
return is_active;
|
return is_active;
|
||||||
};
|
};
|
||||||
|
|
||||||
var __activate = function(el_key, cls) {
|
var __activate = function(el_key, cls) {
|
||||||
for (el_key of __resolveKeys(el_key)) {
|
let el_keys = __resolveKeys(el_key);
|
||||||
|
for (let el_key of el_keys) {
|
||||||
el_key.classList.add(cls);
|
el_key.classList.add(cls);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var __deactivate = function(el_key) {
|
var __deactivate = function(el_key) {
|
||||||
for (el_key of __resolveKeys(el_key)) {
|
let el_keys = __resolveKeys(el_key);
|
||||||
|
for (let el_key of el_keys) {
|
||||||
el_key.classList.remove("pressed");
|
el_key.classList.remove("pressed");
|
||||||
el_key.classList.remove("holded");
|
el_key.classList.remove("holded");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var __resolveKeys = function(el_key) {
|
var __resolveKeys = function(el_key) {
|
||||||
var code = el_key.getAttribute("data-code");
|
let code = el_key.getAttribute("data-code");
|
||||||
return __merged[code];
|
return __merged[code];
|
||||||
};
|
};
|
||||||
|
|
||||||
var __process = function(el_key, state) {
|
var __process = function(el_key, state) {
|
||||||
var code = el_key.getAttribute("data-code");
|
let code = el_key.getAttribute("data-code");
|
||||||
key_callback(code, state);
|
key_callback(code, state);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -56,7 +56,7 @@ function Atx() {
|
|||||||
var __clickButton = function(button, confirm_msg) {
|
var __clickButton = function(button, confirm_msg) {
|
||||||
wm.confirm(confirm_msg).then(function(ok) {
|
wm.confirm(confirm_msg).then(function(ok) {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
var http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
|
let http = tools.makeRequest("POST", "/kvmd/atx/click?button=" + button, function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 409) {
|
if (http.status === 409) {
|
||||||
wm.error("Performing another ATX operation for other client.<br>Please try again later");
|
wm.error("Performing another ATX operation for other client.<br>Please try again later");
|
||||||
|
|||||||
@@ -34,25 +34,25 @@ function Hid() {
|
|||||||
var __mouse = new Mouse();
|
var __mouse = new Mouse();
|
||||||
|
|
||||||
var __init__ = function() {
|
var __init__ = function() {
|
||||||
var __hidden_attr = null;
|
let hidden_attr = null;
|
||||||
var __visibility_change_attr = null;
|
let visibility_change_attr = null;
|
||||||
|
|
||||||
if (typeof document.hidden !== "undefined") {
|
if (typeof document.hidden !== "undefined") {
|
||||||
__hidden_attr = "hidden";
|
hidden_attr = "hidden";
|
||||||
__visibility_change_attr = "visibilitychange";
|
visibility_change_attr = "visibilitychange";
|
||||||
} else if (typeof document.webkitHidden !== "undefined") {
|
} else if (typeof document.webkitHidden !== "undefined") {
|
||||||
__hidden_attr = "webkitHidden";
|
hidden_attr = "webkitHidden";
|
||||||
__visibility_change_attr = "webkitvisibilitychange";
|
visibility_change_attr = "webkitvisibilitychange";
|
||||||
} else if (typeof document.mozHidden !== "undefined") {
|
} else if (typeof document.mozHidden !== "undefined") {
|
||||||
__hidden_attr = "mozHidden";
|
hidden_attr = "mozHidden";
|
||||||
__visibility_change_attr = "mozvisibilitychange";
|
visibility_change_attr = "mozvisibilitychange";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (__visibility_change_attr) {
|
if (visibility_change_attr) {
|
||||||
document.addEventListener(
|
document.addEventListener(
|
||||||
__visibility_change_attr,
|
visibility_change_attr,
|
||||||
function() {
|
function() {
|
||||||
if (document[__hidden_attr]) {
|
if (document[hidden_attr]) {
|
||||||
__releaseAll();
|
__releaseAll();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -68,9 +68,9 @@ function Hid() {
|
|||||||
tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
|
tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
|
||||||
tools.setOnClick($("hid-reset-button"), __clickResetButton);
|
tools.setOnClick($("hid-reset-button"), __clickResetButton);
|
||||||
|
|
||||||
tools.forEach($$$("[data-shortcut]"), function(el_shortcut) {
|
for (let el_shortcut of $$$("[data-shortcut]")) {
|
||||||
tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
|
tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
|
||||||
});
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/************************************************************************/
|
/************************************************************************/
|
||||||
@@ -98,16 +98,16 @@ function Hid() {
|
|||||||
return new Promise(function(resolve) {
|
return new Promise(function(resolve) {
|
||||||
tools.debug("HID: emitting keys:", codes);
|
tools.debug("HID: emitting keys:", codes);
|
||||||
|
|
||||||
var raw_events = [];
|
let raw_events = [];
|
||||||
[[codes, true], [codes.slice().reverse(), false]].forEach(function(op) {
|
[[codes, true], [codes.slice().reverse(), false]].forEach(function(op) {
|
||||||
var [op_codes, state] = op;
|
let [op_codes, state] = op;
|
||||||
op_codes.forEach(function(code) {
|
for (let code of op_codes) {
|
||||||
raw_events.push({code: code, state: state});
|
raw_events.push({code: code, state: state});
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
var index = 0;
|
let index = 0;
|
||||||
var iterate = () => setTimeout(function() {
|
let iterate = () => setTimeout(function() {
|
||||||
__keyboard.emit(raw_events[index].code, raw_events[index].state);
|
__keyboard.emit(raw_events[index].code, raw_events[index].state);
|
||||||
++index;
|
++index;
|
||||||
if (index < raw_events.length) {
|
if (index < raw_events.length) {
|
||||||
@@ -121,7 +121,7 @@ function Hid() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __buildCharsToCodes = function() {
|
var __buildCharsToCodes = function() {
|
||||||
var chars_to_codes = {
|
let chars_to_codes = {
|
||||||
"\n": ["Enter"],
|
"\n": ["Enter"],
|
||||||
"\t": ["Tab"],
|
"\t": ["Tab"],
|
||||||
" ": ["Space"],
|
" ": ["Space"],
|
||||||
@@ -148,10 +148,10 @@ function Hid() {
|
|||||||
"=": ["Equal"], "+": ["ShiftLeft", "Equal"],
|
"=": ["Equal"], "+": ["ShiftLeft", "Equal"],
|
||||||
};
|
};
|
||||||
|
|
||||||
for (var ch = "a".charCodeAt(0); ch <= "z".charCodeAt(0); ++ch) {
|
for (let ch = "a".charCodeAt(0); ch <= "z".charCodeAt(0); ++ch) {
|
||||||
var low = String.fromCharCode(ch);
|
let low = String.fromCharCode(ch);
|
||||||
var up = low.toUpperCase();
|
let up = low.toUpperCase();
|
||||||
var code = "Key" + up;
|
let code = "Key" + up;
|
||||||
chars_to_codes[low] = [code];
|
chars_to_codes[low] = [code];
|
||||||
chars_to_codes[up] = ["ShiftLeft", code];
|
chars_to_codes[up] = ["ShiftLeft", code];
|
||||||
}
|
}
|
||||||
@@ -160,20 +160,20 @@ function Hid() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __clickPasteAsKeysButton = function() {
|
var __clickPasteAsKeysButton = function() {
|
||||||
var text = $("hid-pak-text").value.replace(/[^\x00-\x7F]/g, ""); // eslint-disable-line no-control-regex
|
let text = $("hid-pak-text").value.replace(/[^\x00-\x7F]/g, ""); // eslint-disable-line no-control-regex
|
||||||
if (text) {
|
if (text) {
|
||||||
var clipboard_codes = [];
|
let clipboard_codes = [];
|
||||||
var codes_count = 0;
|
let codes_count = 0;
|
||||||
[...text].forEach(function(ch) {
|
for (let ch of text) {
|
||||||
var codes = __chars_to_codes[ch];
|
let codes = __chars_to_codes[ch];
|
||||||
if (codes) {
|
if (codes) {
|
||||||
codes_count += codes.length;
|
codes_count += codes.length;
|
||||||
clipboard_codes.push(codes);
|
clipboard_codes.push(codes);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
var time = __codes_delay * codes_count * 2 / 1000;
|
let time = __codes_delay * codes_count * 2 / 1000;
|
||||||
|
|
||||||
var confirm_msg = `
|
let confirm_msg = `
|
||||||
You are going to automatically type ${codes_count} characters from the system clipboard.
|
You are going to automatically type ${codes_count} characters from the system clipboard.
|
||||||
It will take ${time} seconds.<br>
|
It will take ${time} seconds.<br>
|
||||||
<br>
|
<br>
|
||||||
@@ -189,8 +189,8 @@ function Hid() {
|
|||||||
|
|
||||||
tools.debug("HID: paste-as-keys:", text);
|
tools.debug("HID: paste-as-keys:", text);
|
||||||
|
|
||||||
var index = 0;
|
let index = 0;
|
||||||
var iterate = function() {
|
let iterate = function() {
|
||||||
__emitShortcut(clipboard_codes[index]).then(function() {
|
__emitShortcut(clipboard_codes[index]).then(function() {
|
||||||
++index;
|
++index;
|
||||||
if (index < clipboard_codes.length && __ws) {
|
if (index < clipboard_codes.length && __ws) {
|
||||||
@@ -215,7 +215,7 @@ function Hid() {
|
|||||||
var __clickResetButton = function() {
|
var __clickResetButton = function() {
|
||||||
wm.confirm("Are you sure you want to reset HID (keyboard & mouse)?").then(function(ok) {
|
wm.confirm("Are you sure you want to reset HID (keyboard & mouse)?").then(function(ok) {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
var http = tools.makeRequest("POST", "/kvmd/hid/reset", function() {
|
let http = tools.makeRequest("POST", "/kvmd/hid/reset", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status !== 200) {
|
if (http.status !== 200) {
|
||||||
wm.error("HID reset error:<br>", http.responseText);
|
wm.error("HID reset error:<br>", http.responseText);
|
||||||
|
|||||||
@@ -81,12 +81,12 @@ function Keyboard() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __updateLeds = function() {
|
var __updateLeds = function() {
|
||||||
var is_captured = (
|
let is_captured = (
|
||||||
$("stream-window").classList.contains("window-active")
|
$("stream-window").classList.contains("window-active")
|
||||||
|| $("keyboard-window").classList.contains("window-active")
|
|| $("keyboard-window").classList.contains("window-active")
|
||||||
);
|
);
|
||||||
var led = "led-gray";
|
let led = "led-gray";
|
||||||
var title = "Keyboard free";
|
let title = "Keyboard free";
|
||||||
|
|
||||||
if (__ws) {
|
if (__ws) {
|
||||||
if (__online) {
|
if (__online) {
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ var wm;
|
|||||||
function main() {
|
function main() {
|
||||||
if (checkBrowser()) {
|
if (checkBrowser()) {
|
||||||
window.onbeforeunload = function(event) {
|
window.onbeforeunload = function(event) {
|
||||||
var text = "Are you sure you want to close Pi-KVM session?";
|
let text = "Are you sure you want to close Pi-KVM session?";
|
||||||
event.returnValue = text;
|
event.returnValue = text;
|
||||||
return text;
|
return text;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -85,9 +85,9 @@ function Mouse() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __updateLeds = function() {
|
var __updateLeds = function() {
|
||||||
var is_captured = (__stream_hovered || tools.browser.is_ios);
|
let is_captured = (__stream_hovered || tools.browser.is_ios);
|
||||||
var led = "led-gray";
|
let led = "led-gray";
|
||||||
var title = "Mouse free";
|
let title = "Mouse free";
|
||||||
|
|
||||||
if (__ws) {
|
if (__ws) {
|
||||||
if (__online) {
|
if (__online) {
|
||||||
@@ -120,7 +120,7 @@ function Mouse() {
|
|||||||
var __streamTouchMoveHandler = function(event) {
|
var __streamTouchMoveHandler = function(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
|
if (event.touches[0].target && event.touches[0].target.getBoundingClientRect) {
|
||||||
var rect = event.touches[0].target.getBoundingClientRect();
|
let rect = event.touches[0].target.getBoundingClientRect();
|
||||||
__current_pos = {
|
__current_pos = {
|
||||||
x: Math.round(event.touches[0].clientX - rect.left),
|
x: Math.round(event.touches[0].clientX - rect.left),
|
||||||
y: Math.round(event.touches[0].clientY - rect.top),
|
y: Math.round(event.touches[0].clientY - rect.top),
|
||||||
@@ -130,7 +130,7 @@ function Mouse() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __streamMoveHandler = function(event) {
|
var __streamMoveHandler = function(event) {
|
||||||
var rect = event.target.getBoundingClientRect();
|
let rect = event.target.getBoundingClientRect();
|
||||||
__current_pos = {
|
__current_pos = {
|
||||||
x: Math.round(event.clientX - rect.left),
|
x: Math.round(event.clientX - rect.left),
|
||||||
y: Math.round(event.clientY - rect.top),
|
y: Math.round(event.clientY - rect.top),
|
||||||
@@ -151,10 +151,10 @@ function Mouse() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __sendMove = function() {
|
var __sendMove = function() {
|
||||||
var pos = __current_pos;
|
let pos = __current_pos;
|
||||||
if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
|
if (pos.x !== __sent_pos.x || pos.y !== __sent_pos.y) {
|
||||||
var el_stream_image = $("stream-image");
|
let el_stream_image = $("stream-image");
|
||||||
var to = {
|
let to = {
|
||||||
x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
|
x: __translate(pos.x, 0, el_stream_image.clientWidth, -32768, 32767),
|
||||||
y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
|
y: __translate(pos.y, 0, el_stream_image.clientHeight, -32768, 32767),
|
||||||
};
|
};
|
||||||
@@ -180,7 +180,7 @@ function Mouse() {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
var delta = {x: 0, y: 0};
|
let delta = {x: 0, y: 0};
|
||||||
|
|
||||||
__wheel_delta.y += event.deltaY;
|
__wheel_delta.y += event.deltaY;
|
||||||
if (Math.abs(__wheel_delta.y) >= 100) {
|
if (Math.abs(__wheel_delta.y) >= 100) {
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ function Msd() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __clickUploadNewImageButton = function() {
|
var __clickUploadNewImageButton = function() {
|
||||||
var form_data = new FormData();
|
let form_data = new FormData();
|
||||||
form_data.append("image_name", __image_file.name);
|
form_data.append("image_name", __image_file.name);
|
||||||
form_data.append("image_data", __image_file);
|
form_data.append("image_data", __image_file);
|
||||||
|
|
||||||
@@ -74,7 +74,7 @@ function Msd() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __clickSwitchButton = function(to) {
|
var __clickSwitchButton = function(to) {
|
||||||
var http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
|
let http = tools.makeRequest("POST", "/kvmd/msd/connect?to=" + to, function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status !== 200) {
|
if (http.status !== 200) {
|
||||||
wm.error("Switch error:<br>", http.responseText);
|
wm.error("Switch error:<br>", http.responseText);
|
||||||
@@ -87,8 +87,8 @@ function Msd() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __selectNewImageFile = function() {
|
var __selectNewImageFile = function() {
|
||||||
var el_input = $("msd-select-new-image-file");
|
let el_input = $("msd-select-new-image-file");
|
||||||
var image_file = (el_input.files.length ? el_input.files[0] : null);
|
let image_file = (el_input.files.length ? el_input.files[0] : null);
|
||||||
if (image_file && image_file.size > __state.info.size) {
|
if (image_file && image_file.size > __state.info.size) {
|
||||||
wm.error("New image is too big for your Mass Storage Device.<br>Maximum:", __formatSize(__state.info.size));
|
wm.error("New image is too big for your Mass Storage Device.<br>Maximum:", __formatSize(__state.info.size));
|
||||||
el_input.value = "";
|
el_input.value = "";
|
||||||
@@ -101,7 +101,7 @@ function Msd() {
|
|||||||
var __clickResetButton = function() {
|
var __clickResetButton = function() {
|
||||||
wm.confirm("Are you sure you want to reset Mass Storage Device?").then(function(ok) {
|
wm.confirm("Are you sure you want to reset Mass Storage Device?").then(function(ok) {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
var http = tools.makeRequest("POST", "/kvmd/msd/reset", function() {
|
let http = tools.makeRequest("POST", "/kvmd/msd/reset", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status !== 200) {
|
if (http.status !== 200) {
|
||||||
wm.error("MSD reset error:<br>", http.responseText);
|
wm.error("MSD reset error:<br>", http.responseText);
|
||||||
@@ -196,7 +196,7 @@ function Msd() {
|
|||||||
|
|
||||||
var __formatSize = function(size) {
|
var __formatSize = function(size) {
|
||||||
if (size > 0) {
|
if (size > 0) {
|
||||||
var index = Math.floor( Math.log(size) / Math.log(1024) );
|
let index = Math.floor( Math.log(size) / Math.log(1024) );
|
||||||
return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][index];
|
return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "kB", "MB", "GB", "TB"][index];
|
||||||
} else {
|
} else {
|
||||||
return 0;
|
return 0;
|
||||||
@@ -217,7 +217,7 @@ function Msd() {
|
|||||||
|
|
||||||
var __uploadProgress = function(event) {
|
var __uploadProgress = function(event) {
|
||||||
if(event.lengthComputable) {
|
if(event.lengthComputable) {
|
||||||
var percent = Math.round((event.loaded * 100) / event.total);
|
let percent = Math.round((event.loaded * 100) / event.total);
|
||||||
$("msd-progress").setAttribute("data-label", percent + "%");
|
$("msd-progress").setAttribute("data-label", percent + "%");
|
||||||
$("msd-progress-value").style.width = percent + "%";
|
$("msd-progress-value").style.width = percent + "%";
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ function Session() {
|
|||||||
|
|
||||||
var __setKvmdInfo = function(state) {
|
var __setKvmdInfo = function(state) {
|
||||||
if (state.meta) {
|
if (state.meta) {
|
||||||
var text = JSON.stringify(state.meta, undefined, 4).replace(/ /g, " ").replace(/\n/g, "<br>");
|
let text = JSON.stringify(state.meta, undefined, 4).replace(/ /g, " ").replace(/\n/g, "<br>");
|
||||||
$("about-meta").innerHTML = `
|
$("about-meta").innerHTML = `
|
||||||
<span class="code-comment">// The Pi-KVM metadata.<br>
|
<span class="code-comment">// The Pi-KVM metadata.<br>
|
||||||
// You can get this json using handle <a target="_blank" href="/kvmd/info">/kvmd/info</a>.<br>
|
// You can get this json using handle <a target="_blank" href="/kvmd/info">/kvmd/info</a>.<br>
|
||||||
@@ -69,10 +69,10 @@ function Session() {
|
|||||||
$("link-led").className = "led-yellow";
|
$("link-led").className = "led-yellow";
|
||||||
$("link-led").title = "Connecting...";
|
$("link-led").title = "Connecting...";
|
||||||
|
|
||||||
var http = tools.makeRequest("GET", "/kvmd/auth/check", function() {
|
let http = tools.makeRequest("GET", "/kvmd/auth/check", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 200) {
|
if (http.status === 200) {
|
||||||
var proto = (location.protocol === "https:" ? "wss" : "ws");
|
let proto = (location.protocol === "https:" ? "wss" : "ws");
|
||||||
__ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`);
|
__ws = new WebSocket(`${proto}://${location.host}/kvmd/ws`);
|
||||||
__ws.onopen = __wsOpenHandler;
|
__ws.onopen = __wsOpenHandler;
|
||||||
__ws.onmessage = __wsMessageHandler;
|
__ws.onmessage = __wsMessageHandler;
|
||||||
|
|||||||
@@ -62,9 +62,9 @@ function Streamer() {
|
|||||||
|
|
||||||
self.setState = function(state) {
|
self.setState = function(state) {
|
||||||
if (state && state.state) {
|
if (state && state.state) {
|
||||||
var encoder = state.state.encoder;
|
let encoder = state.state.encoder;
|
||||||
var source = state.state.source;
|
let source = state.state.source;
|
||||||
var stream = state.state.stream;
|
let stream = state.state.stream;
|
||||||
|
|
||||||
if (!__prev) {
|
if (!__prev) {
|
||||||
$("stream-quality-slider").activated = false;
|
$("stream-quality-slider").activated = false;
|
||||||
@@ -96,7 +96,7 @@ function Streamer() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var stream_client = tools.getCookie("stream_client");
|
let stream_client = tools.getCookie("stream_client");
|
||||||
if (!__client_id && stream_client && stream_client.startsWith(__client_key + "/")) {
|
if (!__client_id && stream_client && stream_client.startsWith(__client_key + "/")) {
|
||||||
tools.info("Stream: found acceptable stream_client cookie:", stream_client);
|
tools.info("Stream: found acceptable stream_client cookie:", stream_client);
|
||||||
__client_id = stream_client.slice(stream_client.indexOf("/") + 1);
|
__client_id = stream_client.slice(stream_client.indexOf("/") + 1);
|
||||||
@@ -109,7 +109,7 @@ function Streamer() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!__prev) {
|
if (!__prev) {
|
||||||
var path = "/streamer/stream?key=" + __client_key;
|
let path = "/streamer/stream?key=" + __client_key;
|
||||||
if (tools.browser.is_safari || tools.browser.is_ios) {
|
if (tools.browser.is_safari || tools.browser.is_ios) {
|
||||||
// uStreamer fix for WebKit
|
// uStreamer fix for WebKit
|
||||||
tools.info("Stream: using dual_final_frames=1 to fix WebKit MJPG bugs");
|
tools.info("Stream: using dual_final_frames=1 to fix WebKit MJPG bugs");
|
||||||
@@ -165,10 +165,10 @@ function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __updateStreamHeader = function(online) {
|
var __updateStreamHeader = function(online) {
|
||||||
var el_grab = document.querySelector("#stream-window-header .window-grab");
|
let el_grab = document.querySelector("#stream-window-header .window-grab");
|
||||||
var el_info = $("stream-info");
|
let el_info = $("stream-info");
|
||||||
if (online) {
|
if (online) {
|
||||||
var fps_suffix = (__client_fps >= 0 ? ` / ${__client_fps} fps` : "");
|
let fps_suffix = (__client_fps >= 0 ? ` / ${__client_fps} fps` : "");
|
||||||
el_grab.innerHTML = el_info.innerHTML = `Stream – ${__resolution.width}x${__resolution.height}${fps_suffix}`;
|
el_grab.innerHTML = el_info.innerHTML = `Stream – ${__resolution.width}x${__resolution.height}${fps_suffix}`;
|
||||||
} else {
|
} else {
|
||||||
el_grab.innerHTML = el_info.innerHTML = "Stream – offline";
|
el_grab.innerHTML = el_info.innerHTML = "Stream – offline";
|
||||||
@@ -176,7 +176,7 @@ function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __clickScreenshotButton = function() {
|
var __clickScreenshotButton = function() {
|
||||||
var el_a = document.createElement("a");
|
let el_a = document.createElement("a");
|
||||||
el_a.href = "/streamer/snapshot";
|
el_a.href = "/streamer/snapshot";
|
||||||
el_a.target = "_blank";
|
el_a.target = "_blank";
|
||||||
document.body.appendChild(el_a);
|
document.body.appendChild(el_a);
|
||||||
@@ -187,7 +187,7 @@ function Streamer() {
|
|||||||
var __clickResetButton = function() {
|
var __clickResetButton = function() {
|
||||||
wm.confirm("Are you sure you want to reset stream?").then(function (ok) {
|
wm.confirm("Are you sure you want to reset stream?").then(function (ok) {
|
||||||
if (ok) {
|
if (ok) {
|
||||||
var http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
|
let http = tools.makeRequest("POST", "/kvmd/streamer/reset", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status !== 200) {
|
if (http.status !== 200) {
|
||||||
wm.error("Can't reset stream:<br>", http.responseText);
|
wm.error("Can't reset stream:<br>", http.responseText);
|
||||||
@@ -199,7 +199,7 @@ function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __sendParam = function(name, value) {
|
var __sendParam = function(name, value) {
|
||||||
var http = tools.makeRequest("POST", `/kvmd/streamer/set_params?${name}=${value}`, function() {
|
let http = tools.makeRequest("POST", `/kvmd/streamer/set_params?${name}=${value}`, function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status !== 200) {
|
if (http.status !== 200) {
|
||||||
wm.error("Can't configure stream:<br>", http.responseText);
|
wm.error("Can't configure stream:<br>", http.responseText);
|
||||||
@@ -209,23 +209,23 @@ function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __resize = function(center=false) {
|
var __resize = function(center=false) {
|
||||||
var 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(center);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __adjustSizeFactor = function() {
|
var __adjustSizeFactor = function() {
|
||||||
var el_window = $("stream-window");
|
let el_window = $("stream-window");
|
||||||
var el_slider = $("stream-size-slider");
|
let el_slider = $("stream-size-slider");
|
||||||
var view = wm.getViewGeometry();
|
let view = wm.getViewGeometry();
|
||||||
|
|
||||||
for (var 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(true);
|
||||||
|
|
||||||
var rect = el_window.getBoundingClientRect();
|
let rect = el_window.getBoundingClientRect();
|
||||||
if (
|
if (
|
||||||
rect.bottom <= view.bottom
|
rect.bottom <= view.bottom
|
||||||
&& rect.top >= view.top
|
&& rect.top >= view.top
|
||||||
@@ -238,7 +238,7 @@ function Streamer() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __applySizeFactor = function(center=false) {
|
var __applySizeFactor = function(center=false) {
|
||||||
var 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, center);
|
||||||
|
|||||||
@@ -39,13 +39,13 @@ function main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function __login() {
|
function __login() {
|
||||||
var user = $("user-input").value;
|
let user = $("user-input").value;
|
||||||
if (user.length === 0) {
|
if (user.length === 0) {
|
||||||
$("user-input").focus();
|
$("user-input").focus();
|
||||||
} else {
|
} else {
|
||||||
var passwd = $("passwd-input").value;
|
let passwd = $("passwd-input").value;
|
||||||
var body = `user=${encodeURIComponent(user)}&passwd=${encodeURIComponent(passwd)}`;
|
let body = `user=${encodeURIComponent(user)}&passwd=${encodeURIComponent(passwd)}`;
|
||||||
var http = tools.makeRequest("POST", "/kvmd/auth/login", function() {
|
let http = tools.makeRequest("POST", "/kvmd/auth/login", function() {
|
||||||
if (http.readyState === 4) {
|
if (http.readyState === 4) {
|
||||||
if (http.status === 200) {
|
if (http.status === 200) {
|
||||||
document.location.href = "/";
|
document.location.href = "/";
|
||||||
|
|||||||
@@ -21,9 +21,7 @@
|
|||||||
|
|
||||||
|
|
||||||
var tools = new function() {
|
var tools = new function() {
|
||||||
var __debug = (new URL(window.location.href)).searchParams.get("debug");
|
let __debug = (new URL(window.location.href)).searchParams.get("debug");
|
||||||
|
|
||||||
this.forEach = (...args) => Array.prototype.forEach.call(...args);
|
|
||||||
|
|
||||||
this.setDefault = function(dict, key, value) {
|
this.setDefault = function(dict, key, value) {
|
||||||
if (!(key in dict)) {
|
if (!(key in dict)) {
|
||||||
@@ -32,7 +30,7 @@ var tools = new function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.makeRequest = function(method, url, callback, body=null, content_type=null) {
|
this.makeRequest = function(method, url, callback, body=null, content_type=null) {
|
||||||
var http = new XMLHttpRequest();
|
let http = new XMLHttpRequest();
|
||||||
http.open(method, url, true);
|
http.open(method, url, true);
|
||||||
if (content_type) {
|
if (content_type) {
|
||||||
http.setRequestHeader("Content-Type", content_type);
|
http.setRequestHeader("Content-Type", content_type);
|
||||||
@@ -44,16 +42,16 @@ var tools = new function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
this.makeId = function() {
|
this.makeId = function() {
|
||||||
var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||||
var id = "";
|
let id = "";
|
||||||
for (var count = 0; count < 16; ++count) {
|
for (let count = 0; count < 16; ++count) {
|
||||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||||
}
|
}
|
||||||
return id;
|
return id;
|
||||||
};
|
};
|
||||||
|
|
||||||
this.getCookie = function(name) {
|
this.getCookie = function(name) {
|
||||||
var matches = document.cookie.match(new RegExp(
|
let matches = document.cookie.match(new RegExp(
|
||||||
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
|
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
|
||||||
));
|
));
|
||||||
return (matches ? decodeURIComponent(matches[1]) : "");
|
return (matches ? decodeURIComponent(matches[1]) : "");
|
||||||
@@ -82,7 +80,7 @@ var tools = new function() {
|
|||||||
el.execution_timer = null;
|
el.execution_timer = null;
|
||||||
el.activated = false;
|
el.activated = false;
|
||||||
|
|
||||||
var clear_timer = function() {
|
let clear_timer = function() {
|
||||||
if (el.execution_timer) {
|
if (el.execution_timer) {
|
||||||
clearTimeout(el.execution_timer);
|
clearTimeout(el.execution_timer);
|
||||||
el.execution_timer = null;
|
el.execution_timer = null;
|
||||||
@@ -117,32 +115,32 @@ var tools = new function() {
|
|||||||
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
|
// https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser/9851769
|
||||||
|
|
||||||
// Opera 8.0+
|
// Opera 8.0+
|
||||||
var is_opera = (
|
let is_opera = (
|
||||||
(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
|
(!!window.opr && !!opr.addons) // eslint-disable-line no-undef
|
||||||
|| !!window.opera
|
|| !!window.opera
|
||||||
|| (navigator.userAgent.indexOf(" OPR/") >= 0)
|
|| (navigator.userAgent.indexOf(" OPR/") >= 0)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Firefox 1.0+
|
// Firefox 1.0+
|
||||||
var is_firefox = (typeof InstallTrigger !== "undefined");
|
let is_firefox = (typeof InstallTrigger !== "undefined");
|
||||||
|
|
||||||
// Safari 3.0+ "[object HTMLElementConstructor]"
|
// Safari 3.0+ "[object HTMLElementConstructor]"
|
||||||
var is_safari = (/constructor/i.test(window.HTMLElement) || (function (p) {
|
let is_safari = (/constructor/i.test(window.HTMLElement) || (function (p) {
|
||||||
return p.toString() === "[object SafariRemoteNotification]";
|
return p.toString() === "[object SafariRemoteNotification]";
|
||||||
})(!window["safari"] || (typeof safari !== "undefined" && safari.pushNotification))); // eslint-disable-line no-undef
|
})(!window["safari"] || (typeof safari !== "undefined" && safari.pushNotification))); // eslint-disable-line no-undef
|
||||||
|
|
||||||
// Chrome 1+
|
// Chrome 1+
|
||||||
var is_chrome = !!window.chrome;
|
let is_chrome = !!window.chrome;
|
||||||
|
|
||||||
// Blink engine detection
|
// Blink engine detection
|
||||||
var is_blink = ((is_chrome || is_opera) && !!window.CSS);
|
let is_blink = ((is_chrome || is_opera) && !!window.CSS);
|
||||||
|
|
||||||
// iOS browsers
|
// iOS browsers
|
||||||
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
|
// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios
|
||||||
var is_ios = (!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform));
|
let is_ios = (!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform));
|
||||||
|
|
||||||
// Any browser on Mac
|
// Any browser on Mac
|
||||||
var is_mac = ((
|
let is_mac = ((
|
||||||
window.navigator.oscpu
|
window.navigator.oscpu
|
||||||
|| window.navigator.platform
|
|| window.navigator.platform
|
||||||
|| window.navigator.appVersion
|
|| window.navigator.appVersion
|
||||||
|
|||||||
@@ -30,31 +30,31 @@ function WindowManager() {
|
|||||||
var __menu_items = [];
|
var __menu_items = [];
|
||||||
|
|
||||||
var __init__ = function() {
|
var __init__ = function() {
|
||||||
tools.forEach($$$("button"), function(el_button) {
|
for (let el_button of $$$("button")) {
|
||||||
// XXX: Workaround for iOS Safari:
|
// XXX: Workaround for iOS Safari:
|
||||||
// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
|
// https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
|
||||||
el_button.ontouchstart = function() {};
|
el_button.ontouchstart = function() {};
|
||||||
});
|
}
|
||||||
|
|
||||||
tools.forEach($$("menu-item"), function(el_item) {
|
for (let el_item of $$("menu-item")) {
|
||||||
el_item.parentElement.querySelector(".menu-item-content").setAttribute("tabindex", "-1");
|
el_item.parentElement.querySelector(".menu-item-content").setAttribute("tabindex", "-1");
|
||||||
tools.setOnDown(el_item, () => __toggleMenu(el_item));
|
tools.setOnDown(el_item, () => __toggleMenu(el_item));
|
||||||
__menu_items.push(el_item);
|
__menu_items.push(el_item);
|
||||||
});
|
}
|
||||||
|
|
||||||
tools.forEach($$("window"), function(el_window) {
|
for (let el_window of $$("window")) {
|
||||||
el_window.setAttribute("tabindex", "-1");
|
el_window.setAttribute("tabindex", "-1");
|
||||||
__makeWindowMovable(el_window);
|
__makeWindowMovable(el_window);
|
||||||
__windows.push(el_window);
|
__windows.push(el_window);
|
||||||
|
|
||||||
var el_button = el_window.querySelector(".window-header .window-button-close");
|
let el_button = el_window.querySelector(".window-header .window-button-close");
|
||||||
if (el_button) {
|
if (el_button) {
|
||||||
tools.setOnClick(el_button, function() {
|
tools.setOnClick(el_button, function() {
|
||||||
el_window.style.visibility = "hidden";
|
el_window.style.visibility = "hidden";
|
||||||
__activateLastWindow(el_window);
|
__activateLastWindow(el_window);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
window.onmouseup = __globalMouseButtonHandler;
|
window.onmouseup = __globalMouseButtonHandler;
|
||||||
window.ontouchend = __globalMouseButtonHandler;
|
window.ontouchend = __globalMouseButtonHandler;
|
||||||
@@ -72,36 +72,36 @@ function WindowManager() {
|
|||||||
self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
|
self.confirm = (...args) => __modalDialog("Question", args.join(" "), true, true);
|
||||||
|
|
||||||
var __modalDialog = function(header, text, ok, cancel) {
|
var __modalDialog = function(header, text, ok, cancel) {
|
||||||
var el_modal = document.createElement("div");
|
let el_modal = document.createElement("div");
|
||||||
el_modal.className = "modal";
|
el_modal.className = "modal";
|
||||||
el_modal.style.visibility = "visible";
|
el_modal.style.visibility = "visible";
|
||||||
|
|
||||||
var el_window = document.createElement("div");
|
let el_window = document.createElement("div");
|
||||||
el_window.className = "modal-window";
|
el_window.className = "modal-window";
|
||||||
el_window.setAttribute("tabindex", "-1");
|
el_window.setAttribute("tabindex", "-1");
|
||||||
el_modal.appendChild(el_window);
|
el_modal.appendChild(el_window);
|
||||||
|
|
||||||
var el_header = document.createElement("div");
|
let el_header = document.createElement("div");
|
||||||
el_header.className = "modal-header";
|
el_header.className = "modal-header";
|
||||||
el_header.innerHTML = header;
|
el_header.innerHTML = header;
|
||||||
el_window.appendChild(el_header);
|
el_window.appendChild(el_header);
|
||||||
|
|
||||||
var el_content = document.createElement("div");
|
let el_content = document.createElement("div");
|
||||||
el_content.className = "modal-content";
|
el_content.className = "modal-content";
|
||||||
el_content.innerHTML = text;
|
el_content.innerHTML = text;
|
||||||
el_window.appendChild(el_content);
|
el_window.appendChild(el_content);
|
||||||
|
|
||||||
var promise = null;
|
let promise = null;
|
||||||
if (ok || cancel) {
|
if (ok || cancel) {
|
||||||
promise = new Promise(function(resolve) {
|
promise = new Promise(function(resolve) {
|
||||||
var el_buttons = document.createElement("div");
|
let el_buttons = document.createElement("div");
|
||||||
el_buttons.className = "modal-buttons";
|
el_buttons.className = "modal-buttons";
|
||||||
el_window.appendChild(el_buttons);
|
el_window.appendChild(el_buttons);
|
||||||
|
|
||||||
function close(retval) {
|
function close(retval) {
|
||||||
el_window.style.visibility = "hidden";
|
el_window.style.visibility = "hidden";
|
||||||
el_modal.outerHTML = "";
|
el_modal.outerHTML = "";
|
||||||
var index = __windows.indexOf(el_modal);
|
let index = __windows.indexOf(el_modal);
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
__windows.splice(index, 1);
|
__windows.splice(index, 1);
|
||||||
}
|
}
|
||||||
@@ -146,7 +146,7 @@ function WindowManager() {
|
|||||||
|
|
||||||
self.switchDisabled = function(el, disabled) {
|
self.switchDisabled = function(el, disabled) {
|
||||||
if (disabled && document.activeElement === el) {
|
if (disabled && document.activeElement === el) {
|
||||||
var el_to_focus = (
|
let el_to_focus = (
|
||||||
el.closest(".modal-window")
|
el.closest(".modal-window")
|
||||||
|| el.closest(".window")
|
|| el.closest(".window")
|
||||||
|| el.closest(".menu-item-content")
|
|| el.closest(".menu-item-content")
|
||||||
@@ -160,8 +160,8 @@ 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 (!__isWindowOnPage(el_window) || el_window.hasAttribute("data-centered") || center) {
|
||||||
var view = self.getViewGeometry();
|
let view = self.getViewGeometry();
|
||||||
var rect = el_window.getBoundingClientRect();
|
let rect = el_window.getBoundingClientRect();
|
||||||
|
|
||||||
el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px";
|
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.style.left = Math.round((view.right - rect.width) / 2) + "px";
|
||||||
@@ -184,13 +184,13 @@ function WindowManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __getMenuHeight = function() {
|
var __getMenuHeight = function() {
|
||||||
var el_menu = $("menu");
|
let el_menu = $("menu");
|
||||||
return (el_menu ? el_menu.clientHeight : 0);
|
return (el_menu ? el_menu.clientHeight : 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
var __isWindowOnPage = function(el_window) {
|
var __isWindowOnPage = function(el_window) {
|
||||||
var view = self.getViewGeometry();
|
let view = self.getViewGeometry();
|
||||||
var rect = el_window.getBoundingClientRect();
|
let rect = el_window.getBoundingClientRect();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
(rect.bottom - el_window.clientHeight / 1.5) <= view.bottom
|
(rect.bottom - el_window.clientHeight / 1.5) <= view.bottom
|
||||||
@@ -201,10 +201,10 @@ function WindowManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __toggleMenu = function(el_a) {
|
var __toggleMenu = function(el_a) {
|
||||||
var all_hidden = true;
|
let all_hidden = true;
|
||||||
|
|
||||||
__menu_items.forEach(function(el_item) {
|
for (let el_item of __menu_items) {
|
||||||
var el_menu = el_item.parentElement.querySelector(".menu-item-content");
|
let el_menu = el_item.parentElement.querySelector(".menu-item-content");
|
||||||
if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
|
if (el_item === el_a && window.getComputedStyle(el_menu, null).visibility === "hidden") {
|
||||||
el_item.classList.add("menu-item-selected");
|
el_item.classList.add("menu-item-selected");
|
||||||
el_menu.style.visibility = "visible";
|
el_menu.style.visibility = "visible";
|
||||||
@@ -214,7 +214,7 @@ function WindowManager() {
|
|||||||
el_item.classList.remove("menu-item-selected");
|
el_item.classList.remove("menu-item-selected");
|
||||||
el_menu.style.visibility = "hidden";
|
el_menu.style.visibility = "hidden";
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
if (all_hidden) {
|
if (all_hidden) {
|
||||||
document.onkeyup = null;
|
document.onkeyup = null;
|
||||||
@@ -232,15 +232,15 @@ function WindowManager() {
|
|||||||
|
|
||||||
var __closeAllMenues = function() {
|
var __closeAllMenues = function() {
|
||||||
document.onkeyup = null;
|
document.onkeyup = null;
|
||||||
__menu_items.forEach(function(el_item) {
|
for (let el_item of __menu_items) {
|
||||||
var el_menu = el_item.parentElement.querySelector(".menu-item-content");
|
let el_menu = el_item.parentElement.querySelector(".menu-item-content");
|
||||||
el_item.classList.remove("menu-item-selected");
|
el_item.classList.remove("menu-item-selected");
|
||||||
el_menu.style.visibility = "hidden";
|
el_menu.style.visibility = "hidden";
|
||||||
});
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var __focusIn = function(event) {
|
var __focusIn = function(event) {
|
||||||
var el_parent;
|
let el_parent;
|
||||||
if ((el_parent = event.target.closest(".modal-window")) !== null) {
|
if ((el_parent = event.target.closest(".modal-window")) !== null) {
|
||||||
el_parent.classList.add("window-active");
|
el_parent.classList.add("window-active");
|
||||||
} else if ((el_parent = event.target.closest(".window")) !== null) {
|
} else if ((el_parent = event.target.closest(".window")) !== null) {
|
||||||
@@ -252,7 +252,7 @@ function WindowManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __focusOut = function(event) {
|
var __focusOut = function(event) {
|
||||||
var el_parent;
|
let el_parent;
|
||||||
if ((el_parent = event.target.closest(".modal-window")) !== null) {
|
if ((el_parent = event.target.closest(".modal-window")) !== null) {
|
||||||
el_parent.classList.remove("window-active");
|
el_parent.classList.remove("window-active");
|
||||||
} else if ((el_parent = event.target.closest(".window")) !== null) {
|
} else if ((el_parent = event.target.closest(".window")) !== null) {
|
||||||
@@ -265,7 +265,7 @@ function WindowManager() {
|
|||||||
|
|
||||||
var __globalMouseButtonHandler = function(event) {
|
var __globalMouseButtonHandler = function(event) {
|
||||||
if (!event.target.matches(".menu-item")) {
|
if (!event.target.matches(".menu-item")) {
|
||||||
for (var el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
|
for (let el_item = event.target; el_item && el_item !== document; el_item = el_item.parentNode) {
|
||||||
if (el_item.hasAttribute("data-force-hide-menu")) {
|
if (el_item.hasAttribute("data-force-hide-menu")) {
|
||||||
break;
|
break;
|
||||||
} else if (el_item.hasAttribute("data-dont-hide-menu")) {
|
} else if (el_item.hasAttribute("data-dont-hide-menu")) {
|
||||||
@@ -278,38 +278,38 @@ function WindowManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __organizeWindowsOnResize = function(orientation) {
|
var __organizeWindowsOnResize = function(orientation) {
|
||||||
var view = self.getViewGeometry();
|
let view = self.getViewGeometry();
|
||||||
|
|
||||||
tools.forEach($$("window"), function(el_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" && (orientation || el_window.hasAttribute("data-centered"))) {
|
||||||
var rect = el_window.getBoundingClientRect();
|
let rect = el_window.getBoundingClientRect();
|
||||||
|
|
||||||
el_window.style.top = Math.max(__getMenuHeight(), Math.round((view.bottom - rect.height) / 2)) + "px";
|
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.style.left = Math.round((view.right - rect.width) / 2) + "px";
|
||||||
el_window.setAttribute("data-centered", "");
|
el_window.setAttribute("data-centered", "");
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var __activateLastWindow = function(el_except_window=null) {
|
var __activateLastWindow = function(el_except_window=null) {
|
||||||
var el_last_window = null;
|
let el_last_window = null;
|
||||||
|
|
||||||
if (document.activeElement) {
|
if (document.activeElement) {
|
||||||
el_last_window = (document.activeElement.closest(".modal-window") || document.activeElement.closest(".window"));
|
el_last_window = (document.activeElement.closest(".modal-window") || document.activeElement.closest(".window"));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!el_last_window || el_last_window === el_except_window) {
|
if (!el_last_window || el_last_window === el_except_window) {
|
||||||
var max_z_index = 0;
|
let max_z_index = 0;
|
||||||
|
|
||||||
__windows.forEach(function(el_window) {
|
for (let el_window of __windows) {
|
||||||
var z_index = parseInt(window.getComputedStyle(el_window, null).zIndex) || 0;
|
let z_index = parseInt(window.getComputedStyle(el_window, null).zIndex) || 0;
|
||||||
var visibility = window.getComputedStyle(el_window, null).visibility;
|
let visibility = window.getComputedStyle(el_window, null).visibility;
|
||||||
|
|
||||||
if (max_z_index < z_index && visibility !== "hidden" && el_window !== el_except_window) {
|
if (max_z_index < z_index && visibility !== "hidden" && el_window !== el_except_window) {
|
||||||
el_last_window = el_window;
|
el_last_window = el_window;
|
||||||
max_z_index = z_index;
|
max_z_index = z_index;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (el_last_window) {
|
if (el_last_window) {
|
||||||
@@ -320,8 +320,8 @@ function WindowManager() {
|
|||||||
|
|
||||||
var __activateWindow = function(el_window) {
|
var __activateWindow = function(el_window) {
|
||||||
if (window.getComputedStyle(el_window, null).visibility !== "hidden") {
|
if (window.getComputedStyle(el_window, null).visibility !== "hidden") {
|
||||||
var el_to_focus;
|
let el_to_focus;
|
||||||
var el_window_contains_focus;
|
let el_window_contains_focus;
|
||||||
|
|
||||||
if (el_window.className === "modal") {
|
if (el_window.className === "modal") {
|
||||||
el_to_focus = el_window.querySelector(".modal-window");
|
el_to_focus = el_window.querySelector(".modal-window");
|
||||||
@@ -345,10 +345,10 @@ function WindowManager() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
var __makeWindowMovable = function(el_window) {
|
var __makeWindowMovable = function(el_window) {
|
||||||
var el_header = el_window.querySelector(".window-header");
|
let el_header = el_window.querySelector(".window-header");
|
||||||
var el_grab = el_window.querySelector(".window-header .window-grab");
|
let el_grab = el_window.querySelector(".window-header .window-grab");
|
||||||
|
|
||||||
var prev_pos = {x: 0, y: 0};
|
let prev_pos = {x: 0, y: 0};
|
||||||
|
|
||||||
function startMoving(event) {
|
function startMoving(event) {
|
||||||
__closeAllMenues();
|
__closeAllMenues();
|
||||||
@@ -375,9 +375,9 @@ function WindowManager() {
|
|||||||
event = (event || window.event);
|
event = (event || window.event);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var event_pos = getEventPosition(event);
|
let event_pos = getEventPosition(event);
|
||||||
var x = prev_pos.x - event_pos.x;
|
let x = prev_pos.x - event_pos.x;
|
||||||
var y = prev_pos.y - event_pos.y;
|
let y = prev_pos.y - event_pos.y;
|
||||||
|
|
||||||
el_window.style.top = (el_window.offsetTop - y) + "px";
|
el_window.style.top = (el_window.offsetTop - y) + "px";
|
||||||
el_window.style.left = (el_window.offsetLeft - x) + "px";
|
el_window.style.left = (el_window.offsetLeft - x) + "px";
|
||||||
|
|||||||
Reference in New Issue
Block a user