GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-01-31 18:11:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Maxim Devaev
2021-07-29 02:11:44 +03:00
parent 33c34bd4ef
commit 02335734ce
13 changed files with 308 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/share/js/index/main.js
View File

@@ -86,7 +86,7 @@ function __loadKvmdInfo() {
} }
$("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.el.setOnClick($("logout-button"), __logout);
if (info.meta !== null && info.meta.server && info.meta.server.host) { if (info.meta !== null && info.meta.server && info.meta.server.host) {
$("kvmd-meta-server-host").innerHTML = info.meta.server.host; $("kvmd-meta-server-host").innerHTML = info.meta.server.host;

6
web/share/js/keypad.js
View File

@@ -45,8 +45,8 @@ export function Keypad(keys_parent, key_callback) {
tools.setDefault(__merged, code, []); tools.setDefault(__merged, code, []);
__merged[code].push(el_key); __merged[code].push(el_key);
tools.setOnDown(el_key, () => __clickHandler(el_key, true)); tools.el.setOnDown(el_key, () => __clickHandler(el_key, true));
tools.setOnUp(el_key, () => __clickHandler(el_key, false)); tools.el.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);
@@ -63,7 +63,7 @@ export function Keypad(keys_parent, key_callback) {
tools.setDefault(__merged, code, []); tools.setDefault(__merged, code, []);
__merged[code].push(el_key); __merged[code].push(el_key);
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key)); tools.el.setOnDown(el_key, () => __toggleModifierHandler(el_key));
} }
}; };

6
web/share/js/kvm/atx.js
View File

@@ -47,7 +47,7 @@ export function Atx() {
Warning! This could case data loss on the server. Warning! This could case data loss on the server.
`], `],
]) { ]) {
tools.setOnClick($(args[0]), () => __clickButton(args[1], args[2])); tools.el.setOnClick($(args[0]), () => __clickButton(args[1], args[2]));
} }
}; };
@@ -56,7 +56,7 @@ export function Atx() {
self.setState = function(state) { self.setState = function(state) {
let buttons_enabled = false; let buttons_enabled = false;
if (state) { if (state) {
tools.featureSetEnabled($("atx-dropdown"), state.enabled); tools.feature.setEnabled($("atx-dropdown"), state.enabled);
$("atx-power-led").className = (state.busy ? "led-yellow" : (state.leds.power ? "led-green" : "led-gray")); $("atx-power-led").className = (state.busy ? "led-yellow" : (state.leds.power ? "led-green" : "led-gray"));
$("atx-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray"); $("atx-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray");
buttons_enabled = !state.busy; buttons_enabled = !state.busy;
@@ -65,7 +65,7 @@ export function Atx() {
$("atx-hdd-led").className = "led-gray"; $("atx-hdd-led").className = "led-gray";
} }
for (let id of ["atx-power-button", "atx-power-button-long", "atx-reset-button"]) { for (let id of ["atx-power-button", "atx-power-button-long", "atx-reset-button"]) {
wm.setElementEnabled($(id), buttons_enabled); tools.el.setEnabled($(id), buttons_enabled);
} }
}; };

14
web/share/js/kvm/gpio.js
View File

@@ -48,7 +48,7 @@ export function Gpio() {
for (let type of ["switch", "button"]) { for (let type of ["switch", "button"]) {
let el = $(`gpio-${type}-${channel}`); let el = $(`gpio-${type}-${channel}`);
if (el) { if (el) {
wm.setElementEnabled(el, state.outputs[channel].online && !state.outputs[channel].busy); tools.el.setEnabled(el, state.outputs[channel].online && !state.outputs[channel].busy);
} }
} }
let el = $(`gpio-switch-${channel}`); let el = $(`gpio-switch-${channel}`);
@@ -62,7 +62,7 @@ export function Gpio() {
} }
for (let selector of [".gpio-switch", ".gpio-button"]) { for (let selector of [".gpio-switch", ".gpio-button"]) {
for (let el of $$$(selector)) { for (let el of $$$(selector)) {
wm.setElementEnabled(el, false); tools.el.setEnabled(el, false);
} }
} }
} }
@@ -70,7 +70,7 @@ export function Gpio() {
}; };
self.setModel = function(model) { self.setModel = function(model) {
tools.featureSetEnabled($("gpio-dropdown"), model.view.table.length); tools.feature.setEnabled($("gpio-dropdown"), model.view.table.length);
if (model.view.table.length) { if (model.view.table.length) {
$("gpio-menu-button").innerHTML = `${model.view.header.title}`; $("gpio-menu-button").innerHTML = `${model.view.header.title}`;
} }
@@ -96,16 +96,16 @@ export function Gpio() {
for (let channel in model.scheme.outputs) { for (let channel in model.scheme.outputs) {
let el = $(`gpio-switch-${channel}`); let el = $(`gpio-switch-${channel}`);
if (el) { if (el) {
tools.setOnClick(el, __createAction(el, __switchChannel)); tools.el.setOnClick(el, __createAction(el, __switchChannel));
} }
el = $(`gpio-button-${channel}`); el = $(`gpio-button-${channel}`);
if (el) { if (el) {
tools.setOnClick(el, __createAction(el, __pulseChannel)); tools.el.setOnClick(el, __createAction(el, __pulseChannel));
} }
} }
tools.featureSetEnabled($("v3-usb-breaker"), ("__v3_usb_breaker__" in model.scheme.outputs)); tools.feature.setEnabled($("v3-usb-breaker"), ("__v3_usb_breaker__" in model.scheme.outputs));
tools.featureSetEnabled($("wol"), ("__wol__" in model.scheme.outputs)); tools.feature.setEnabled($("wol"), ("__wol__" in model.scheme.outputs));
self.setState(__state); self.setState(__state);
}; };

60
web/share/js/kvm/hid.js
View File

@@ -75,7 +75,7 @@ export function Hid(__getResolution) {
window.addEventListener("blur", __releaseAll); window.addEventListener("blur", __releaseAll);
$("hid-pak-ask-switch").checked = parseInt(tools.storage.get("hid.pak.ask", "1")); $("hid-pak-ask-switch").checked = parseInt(tools.storage.get("hid.pak.ask", "1"));
tools.setOnClick($("hid-pak-ask-switch"), function() { tools.el.setOnClick($("hid-pak-ask-switch"), function() {
tools.storage.set("hid.pak.ask", ($("hid-pak-ask-switch").checked ? 1 : 0)); tools.storage.set("hid.pak.ask", ($("hid-pak-ask-switch").checked ? 1 : 0));
}, false); }, false);
@@ -83,21 +83,21 @@ export function Hid(__getResolution) {
tools.storage.set("hid.pak.keymap", $("hid-pak-keymap-selector").value); tools.storage.set("hid.pak.keymap", $("hid-pak-keymap-selector").value);
}); });
tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton); tools.el.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
tools.setOnClick($("hid-connect-switch"), __clickConnectSwitch); tools.el.setOnClick($("hid-connect-switch"), __clickConnectSwitch);
tools.setOnClick($("hid-reset-button"), __clickResetButton); tools.el.setOnClick($("hid-reset-button"), __clickResetButton);
for (let el_shortcut of $$$("[data-shortcut]")) { for (let el_shortcut of $$$("[data-shortcut]")) {
tools.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" "))); tools.el.setOnClick(el_shortcut, () => __emitShortcut(el_shortcut.getAttribute("data-shortcut").split(" ")));
} }
}; };
/************************************************************************/ /************************************************************************/
self.setSocket = function(ws) { self.setSocket = function(ws) {
wm.setElementEnabled($("hid-pak-text"), ws); tools.el.setEnabled($("hid-pak-text"), ws);
wm.setElementEnabled($("hid-pak-button"), ws); tools.el.setEnabled($("hid-pak-button"), ws);
wm.setElementEnabled($("hid-reset-button"), ws); tools.el.setEnabled($("hid-reset-button"), ws);
if (!ws) { if (!ws) {
self.setState(null); self.setState(null);
} }
@@ -121,14 +121,14 @@ export function Hid(__getResolution) {
["Off", "disabled"], ["Off", "disabled"],
]) { ]) {
if (keyboard_outputs.includes(args[1])) { if (keyboard_outputs.includes(args[1])) {
html += tools.radioMakeItem("hid-outputs-keyboard-radio", args[0], args[1]); html += tools.radio.makeItem("hid-outputs-keyboard-radio", args[0], args[1]);
} }
} }
$("hid-outputs-keyboard-box").innerHTML = html; $("hid-outputs-keyboard-box").innerHTML = html;
$("hid-outputs-keyboard-box").outputs = keyboard_outputs; $("hid-outputs-keyboard-box").outputs = keyboard_outputs;
tools.radioSetOnClick("hid-outputs-keyboard-radio", () => __clickOutputsRadio("keyboard")); tools.radio.setOnClick("hid-outputs-keyboard-radio", () => __clickOutputsRadio("keyboard"));
} }
tools.radioSetValue("hid-outputs-keyboard-radio", state.keyboard.outputs.active); tools.radio.setValue("hid-outputs-keyboard-radio", state.keyboard.outputs.active);
} }
let has_relative = false; let has_relative = false;
if (mouse_outputs.length) { if (mouse_outputs.length) {
@@ -141,32 +141,32 @@ export function Hid(__getResolution) {
["Off", "disabled"], ["Off", "disabled"],
]) { ]) {
if (mouse_outputs.includes(args[1])) { if (mouse_outputs.includes(args[1])) {
html += tools.radioMakeItem("hid-outputs-mouse-radio", args[0], args[1]); html += tools.radio.makeItem("hid-outputs-mouse-radio", args[0], args[1]);
has_relative = (has_relative || args[2]); has_relative = (has_relative || args[2]);
} }
} }
$("hid-outputs-mouse-box").innerHTML = html; $("hid-outputs-mouse-box").innerHTML = html;
$("hid-outputs-mouse-box").outputs = mouse_outputs; $("hid-outputs-mouse-box").outputs = mouse_outputs;
tools.radioSetOnClick("hid-outputs-mouse-radio", () => __clickOutputsRadio("mouse")); tools.radio.setOnClick("hid-outputs-mouse-radio", () => __clickOutputsRadio("mouse"));
} }
tools.radioSetValue("hid-outputs-mouse-radio", state.mouse.outputs.active); tools.radio.setValue("hid-outputs-mouse-radio", state.mouse.outputs.active);
has_relative_squash = ["usb_rel", "ps2"].includes(state.mouse.outputs.active); has_relative_squash = ["usb_rel", "ps2"].includes(state.mouse.outputs.active);
} else { } else {
has_relative = !state.mouse.absolute; has_relative = !state.mouse.absolute;
has_relative_squash = has_relative; has_relative_squash = has_relative;
} }
tools.featureSetEnabled($("hid-outputs"), (keyboard_outputs.length || mouse_outputs.length)); tools.feature.setEnabled($("hid-outputs"), (keyboard_outputs.length || mouse_outputs.length));
tools.featureSetEnabled($("hid-outputs-keyboard"), keyboard_outputs.length); tools.feature.setEnabled($("hid-outputs-keyboard"), keyboard_outputs.length);
tools.featureSetEnabled($("hid-outputs-mouse"), mouse_outputs.length); tools.feature.setEnabled($("hid-outputs-mouse"), mouse_outputs.length);
tools.featureSetEnabled($("hid-mouse-squash"), has_relative); tools.feature.setEnabled($("hid-mouse-squash"), has_relative);
tools.featureSetEnabled($("hid-connect"), (state.connected !== null)); tools.feature.setEnabled($("hid-connect"), (state.connected !== null));
$("hid-connect-switch").checked = !!state.connected; $("hid-connect-switch").checked = !!state.connected;
} }
wm.setRadioEnabled("hid-outputs-keyboard-radio", (state && state.online && !state.busy)); tools.radio.setEnabled("hid-outputs-keyboard-radio", (state && state.online && !state.busy));
wm.setRadioEnabled("hid-outputs-mouse-radio", (state && state.online && !state.busy)); tools.radio.setEnabled("hid-outputs-mouse-radio", (state && state.online && !state.busy));
wm.setElementEnabled($("hid-mouse-squash-switch"), (has_relative_squash && !state.busy)); tools.el.setEnabled($("hid-mouse-squash-switch"), (has_relative_squash && !state.busy));
wm.setElementEnabled($("hid-connect-switch"), (state && state.online && !state.busy)); tools.el.setEnabled($("hid-connect-switch"), (state && state.online && !state.busy));
if (state) { if (state) {
__keyboard.setState(state.keyboard, state.online, state.busy); __keyboard.setState(state.keyboard, state.online, state.busy);
@@ -218,9 +218,9 @@ export function Hid(__getResolution) {
let text = $("hid-pak-text").value; let text = $("hid-pak-text").value;
if (text) { if (text) {
let paste_as_keys = function() { let paste_as_keys = function() {
wm.setElementEnabled($("hid-pak-text"), false); tools.el.setEnabled($("hid-pak-text"), false);
wm.setElementEnabled($("hid-pak-button"), false); tools.el.setEnabled($("hid-pak-button"), false);
wm.setElementEnabled($("hid-pak-keymap-selector"), false); tools.el.setEnabled($("hid-pak-keymap-selector"), false);
let keymap = $("hid-pak-keymap-selector").value; let keymap = $("hid-pak-keymap-selector").value;
@@ -228,9 +228,9 @@ export function Hid(__getResolution) {
let http = tools.makeRequest("POST", `/api/hid/print?limit=0&keymap=${keymap}`, function() { let http = tools.makeRequest("POST", `/api/hid/print?limit=0&keymap=${keymap}`, function() {
if (http.readyState === 4) { if (http.readyState === 4) {
wm.setElementEnabled($("hid-pak-text"), true); tools.el.setEnabled($("hid-pak-text"), true);
wm.setElementEnabled($("hid-pak-button"), true); tools.el.setEnabled($("hid-pak-button"), true);
wm.setElementEnabled($("hid-pak-keymap-selector"), true); tools.el.setEnabled($("hid-pak-keymap-selector"), true);
$("hid-pak-text").value = ""; $("hid-pak-text").value = "";
if (http.status === 413) { if (http.status === 413) {
wm.error("Too many text for paste!"); wm.error("Too many text for paste!");
@@ -260,7 +260,7 @@ export function Hid(__getResolution) {
}; };
var __clickOutputsRadio = function(hid) { var __clickOutputsRadio = function(hid) {
let output = tools.radioGetValue(`hid-outputs-${hid}-radio`); let output = tools.radio.getValue(`hid-outputs-${hid}-radio`);
let http = tools.makeRequest("POST", `/api/hid/set_params?${hid}_output=${output}`, function() { let http = tools.makeRequest("POST", `/api/hid/set_params?${hid}_output=${output}`, function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status !== 200) { if (http.status !== 200) {

2
web/share/js/kvm/main.js
View File

@@ -40,7 +40,7 @@ export function main() {
initWindowManager(); initWindowManager();
tools.setOnClick($("open-log-button"), () => window.open("/api/log?seek=3600&follow=1", "_blank")); tools.el.setOnClick($("open-log-button"), () => window.open("/api/log?seek=3600&follow=1", "_blank"));
wm.showWindow($("stream-window")); wm.showWindow($("stream-window"));

78
web/share/js/kvm/msd.js
View File

@@ -40,20 +40,20 @@ export function Msd() {
$("msd-led").title = "Unknown state"; $("msd-led").title = "Unknown state";
$("msd-image-selector").onchange = __selectImage; $("msd-image-selector").onchange = __selectImage;
tools.setOnClick($("msd-remove-image"), __clickRemoveImageButton); tools.el.setOnClick($("msd-remove-image"), __clickRemoveImageButton);
tools.radioSetOnClick("msd-mode-radio", __clickModeRadio); tools.radio.setOnClick("msd-mode-radio", __clickModeRadio);
$("msd-select-new-image-file").onchange = __selectNewImageFile; $("msd-select-new-image-file").onchange = __selectNewImageFile;
tools.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click()); tools.el.setOnClick($("msd-select-new-image-button"), () => $("msd-select-new-image-file").click());
tools.setOnClick($("msd-upload-new-image-button"), __clickUploadNewImageButton); tools.el.setOnClick($("msd-upload-new-image-button"), __clickUploadNewImageButton);
tools.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton); tools.el.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton);
tools.setOnClick($("msd-connect-button"), () => __clickConnectButton(true)); tools.el.setOnClick($("msd-connect-button"), () => __clickConnectButton(true));
tools.setOnClick($("msd-disconnect-button"), () => __clickConnectButton(false)); tools.el.setOnClick($("msd-disconnect-button"), () => __clickConnectButton(false));
tools.setOnClick($("msd-reset-button"), __clickResetButton); tools.el.setOnClick($("msd-reset-button"), __clickResetButton);
}; };
/************************************************************************/ /************************************************************************/
@@ -64,8 +64,8 @@ export function Msd() {
}; };
var __selectImage = function() { var __selectImage = function() {
wm.setElementEnabled($("msd-image-selector"), false); tools.el.setEnabled($("msd-image-selector"), false);
wm.setElementEnabled($("msd-remove-image"), false); tools.el.setEnabled($("msd-remove-image"), false);
__sendParam("image", $("msd-image-selector").value); __sendParam("image", $("msd-image-selector").value);
}; };
@@ -85,7 +85,7 @@ export function Msd() {
}; };
var __clickModeRadio = function() { var __clickModeRadio = function() {
__sendParam("cdrom", tools.radioGetValue("msd-mode-radio")); __sendParam("cdrom", tools.radio.getValue("msd-mode-radio"));
}; };
var __sendParam = function(name, value) { var __sendParam = function(name, value) {
@@ -122,7 +122,7 @@ export function Msd() {
__upload_http.onreadystatechange = null; __upload_http.onreadystatechange = null;
__upload_http.abort(); __upload_http.abort();
__upload_http = null; __upload_http = null;
tools.progressSetValue($("msd-uploading-progress"), "Aborted", 0); tools.progress.setValue($("msd-uploading-progress"), "Aborted", 0);
}; };
var __clickConnectButton = function(connected) { var __clickConnectButton = function(connected) {
@@ -135,7 +135,7 @@ export function Msd() {
__applyState(); __applyState();
}); });
__applyState(); __applyState();
wm.setElementEnabled($(`msd-${connected ? "connect" : "disconnect"}-button`), false); tools.el.setEnabled($(`msd-${connected ? "connect" : "disconnect"}-button`), false);
}; };
var __selectNewImageFile = function() { var __selectNewImageFile = function() {
@@ -180,42 +180,42 @@ export function Msd() {
let used = s.storage.size - s.storage.free; let used = s.storage.size - s.storage.free;
let used_str = tools.formatSize(used); let used_str = tools.formatSize(used);
$("msd-storage-size").innerHTML = size_str; $("msd-storage-size").innerHTML = size_str;
tools.progressSetValue($("msd-storage-progress"), `Storage: ${used_str} of ${size_str}`, used / s.storage.size * 100); tools.progress.setValue($("msd-storage-progress"), `Storage: ${used_str} of ${size_str}`, used / s.storage.size * 100);
} else { } else {
$("msd-storage-size").innerHTML = "Unavailable"; $("msd-storage-size").innerHTML = "Unavailable";
tools.progressSetValue($("msd-storage-progress"), "Storage: unavailable", 0); tools.progress.setValue($("msd-storage-progress"), "Storage: unavailable", 0);
} }
wm.setElementEnabled($("msd-image-selector"), (online && s.features.multi && !s.drive.connected && !s.busy)); tools.el.setEnabled($("msd-image-selector"), (online && s.features.multi && !s.drive.connected && !s.busy));
__applyStateImageSelector(); __applyStateImageSelector();
wm.setElementEnabled($("msd-remove-image"), (online && s.features.multi && s.drive.image && !s.drive.connected && !s.busy)); tools.el.setEnabled($("msd-remove-image"), (online && s.features.multi && s.drive.image && !s.drive.connected && !s.busy));
wm.setRadioEnabled("msd-mode-radio", (online && s.features.cdrom && !s.drive.connected && !s.busy)); tools.radio.setEnabled("msd-mode-radio", (online && s.features.cdrom && !s.drive.connected && !s.busy));
tools.radioSetValue("msd-mode-radio", `${Number(online && s.features.cdrom && s.drive.cdrom)}`); tools.radio.setValue("msd-mode-radio", `${Number(online && s.features.cdrom && s.drive.cdrom)}`);
wm.setElementEnabled($("msd-connect-button"), (online && (!s.features.multi || s.drive.image) && !s.drive.connected && !s.busy)); tools.el.setEnabled($("msd-connect-button"), (online && (!s.features.multi || s.drive.image) && !s.drive.connected && !s.busy));
wm.setElementEnabled($("msd-disconnect-button"), (online && s.drive.connected && !s.busy)); tools.el.setEnabled($("msd-disconnect-button"), (online && s.drive.connected && !s.busy));
wm.setElementEnabled($("msd-select-new-image-button"), (online && !s.drive.connected && !__upload_http && !s.busy)); tools.el.setEnabled($("msd-select-new-image-button"), (online && !s.drive.connected && !__upload_http && !s.busy));
wm.setElementEnabled($("msd-upload-new-image-button"), (online && !s.drive.connected && __image_file && !s.busy)); tools.el.setEnabled($("msd-upload-new-image-button"), (online && !s.drive.connected && __image_file && !s.busy));
wm.setElementEnabled($("msd-abort-uploading-button"), (online && __upload_http)); tools.el.setEnabled($("msd-abort-uploading-button"), (online && __upload_http));
wm.setElementEnabled($("msd-reset-button"), (s && s.enabled && !s.busy)); tools.el.setEnabled($("msd-reset-button"), (s && s.enabled && !s.busy));
let uploading = (online ? (s.storage.uploading || __image_file) : null); let uploading = (online ? (s.storage.uploading || __image_file) : null);
tools.hiddenSetVisible($("msd-submenu-new-image"), uploading); tools.hidden.setVisible($("msd-submenu-new-image"), uploading);
$("msd-new-image-name").innerHTML = (uploading ? uploading.name : ""); $("msd-new-image-name").innerHTML = (uploading ? uploading.name : "");
$("msd-new-image-size").innerHTML = (uploading ? tools.formatSize(uploading.size) : ""); $("msd-new-image-size").innerHTML = (uploading ? tools.formatSize(uploading.size) : "");
if (online) { if (online) {
if (s.storage.uploading) { if (s.storage.uploading) {
let percent = Math.round(s.storage.uploading.written * 100 / s.storage.uploading.size); let percent = Math.round(s.storage.uploading.written * 100 / s.storage.uploading.size);
tools.progressSetValue($("msd-uploading-progress"), `${percent}%`, percent); tools.progress.setValue($("msd-uploading-progress"), `${percent}%`, percent);
} else if (!__upload_http) { } else if (!__upload_http) {
tools.progressSetValue($("msd-uploading-progress"), "Waiting for upload (press UPLOAD button) ...", 0); tools.progress.setValue($("msd-uploading-progress"), "Waiting for upload (press UPLOAD button) ...", 0);
} }
} else { } else {
$("msd-select-new-image-file").value = ""; $("msd-select-new-image-file").value = "";
tools.progressSetValue($("msd-uploading-progress"), "", 0); tools.progress.setValue($("msd-uploading-progress"), "", 0);
} }
}; };
@@ -224,27 +224,27 @@ export function Msd() {
let online = (s && s.online); let online = (s && s.online);
if (s) { if (s) {
tools.featureSetEnabled($("msd-dropdown"), s.enabled); tools.feature.setEnabled($("msd-dropdown"), s.enabled);
tools.featureSetEnabled($("msd-reset-button"), s.enabled); tools.feature.setEnabled($("msd-reset-button"), s.enabled);
for (let el of $$$(".msd-single-storage")) { for (let el of $$$(".msd-single-storage")) {
tools.featureSetEnabled(el, !s.features.multi); tools.feature.setEnabled(el, !s.features.multi);
} }
for (let el of $$$(".msd-multi-storage")) { for (let el of $$$(".msd-multi-storage")) {
tools.featureSetEnabled(el, s.features.multi); tools.feature.setEnabled(el, s.features.multi);
} }
for (let el of $$$(".msd-cdrom-emulation")) { for (let el of $$$(".msd-cdrom-emulation")) {
tools.featureSetEnabled(el, s.features.cdrom); tools.feature.setEnabled(el, s.features.cdrom);
} }
} }
tools.hiddenSetVisible($("msd-message-offline"), (s && !s.online)); tools.hidden.setVisible($("msd-message-offline"), (s && !s.online));
tools.hiddenSetVisible($("msd-message-image-broken"), tools.hidden.setVisible($("msd-message-image-broken"),
(online && s.drive.image && !s.drive.image.complete && !s.storage.uploading)); (online && s.drive.image && !s.drive.image.complete && !s.storage.uploading));
tools.hiddenSetVisible($("msd-message-too-big-for-cdrom"), tools.hidden.setVisible($("msd-message-too-big-for-cdrom"),
(online && s.features.cdrom && s.drive.cdrom && s.drive.image && s.drive.image.size >= 2359296000)); (online && s.features.cdrom && s.drive.cdrom && s.drive.image && s.drive.image.size >= 2359296000));
tools.hiddenSetVisible($("msd-message-out-of-storage"), tools.hidden.setVisible($("msd-message-out-of-storage"),
(online && s.features.multi && s.drive.image && !s.drive.image.in_storage)); (online && s.features.multi && s.drive.image && !s.drive.image.in_storage));
tools.hiddenSetVisible($("msd-message-another-user-uploads"), tools.hidden.setVisible($("msd-message-another-user-uploads"),
(online && s.storage.uploading && !__upload_http)); (online && s.storage.uploading && !__upload_http));
}; };

26
web/share/js/kvm/recorder.js
View File

@@ -41,14 +41,14 @@ export function Recorder() {
var __last_event_ts = 0; var __last_event_ts = 0;
var __init__ = function() { var __init__ = function() {
tools.setOnClick($("hid-recorder-record"), __startRecord); tools.el.setOnClick($("hid-recorder-record"), __startRecord);
tools.setOnClick($("hid-recorder-stop"), __stopProcess); tools.el.setOnClick($("hid-recorder-stop"), __stopProcess);
tools.setOnClick($("hid-recorder-play"), __playRecord); tools.el.setOnClick($("hid-recorder-play"), __playRecord);
tools.setOnClick($("hid-recorder-clear"), __clearRecord); tools.el.setOnClick($("hid-recorder-clear"), __clearRecord);
$("hid-recorder-new-script-file").onchange = __uploadScript; $("hid-recorder-new-script-file").onchange = __uploadScript;
tools.setOnClick($("hid-recorder-upload"), () => $("hid-recorder-new-script-file").click()); tools.el.setOnClick($("hid-recorder-upload"), () => $("hid-recorder-new-script-file").click());
tools.setOnClick($("hid-recorder-download"), __downloadScript); tools.el.setOnClick($("hid-recorder-download"), __downloadScript);
}; };
/************************************************************************/ /************************************************************************/
@@ -241,14 +241,14 @@ export function Recorder() {
$("hid-recorder-led").title = ""; $("hid-recorder-led").title = "";
} }
wm.setElementEnabled($("hid-recorder-record"), (__ws && !__play_timer && !__recording)); tools.el.setEnabled($("hid-recorder-record"), (__ws && !__play_timer && !__recording));
wm.setElementEnabled($("hid-recorder-stop"), (__ws && (__play_timer || __recording))); tools.el.setEnabled($("hid-recorder-stop"), (__ws && (__play_timer || __recording)));
wm.setElementEnabled($("hid-recorder-play"), (__ws && !__recording && __events.length)); tools.el.setEnabled($("hid-recorder-play"), (__ws && !__recording && __events.length));
wm.setElementEnabled($("hid-recorder-clear"), (!__play_timer && !__recording && __events.length)); tools.el.setEnabled($("hid-recorder-clear"), (!__play_timer && !__recording && __events.length));
wm.setElementEnabled($("hid-recorder-loop-switch"), (__ws && !__recording)); tools.el.setEnabled($("hid-recorder-loop-switch"), (__ws && !__recording));
wm.setElementEnabled($("hid-recorder-upload"), (!__play_timer && !__recording)); tools.el.setEnabled($("hid-recorder-upload"), (!__play_timer && !__recording));
wm.setElementEnabled($("hid-recorder-download"), (!__play_timer && !__recording && __events.length)); tools.el.setEnabled($("hid-recorder-download"), (!__play_timer && !__recording && __events.length));
__setCounters(__events.length, __events_time); __setCounters(__events.length, __events_time);
}; };

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

@@ -97,11 +97,11 @@ export function Session() {
let undervoltage = (flags.undervoltage.now || flags.undervoltage.past); let undervoltage = (flags.undervoltage.now || flags.undervoltage.past);
let freq_capped = (flags.freq_capped.now || flags.freq_capped.past); let freq_capped = (flags.freq_capped.now || flags.freq_capped.past);
tools.hiddenSetVisible($("hw-health-dropdown"), (undervoltage || freq_capped)); tools.hidden.setVisible($("hw-health-dropdown"), (undervoltage || freq_capped));
$("hw-health-undervoltage-led").className = (undervoltage ? (flags.undervoltage.now ? "led-red" : "led-yellow") : "hidden"); $("hw-health-undervoltage-led").className = (undervoltage ? (flags.undervoltage.now ? "led-red" : "led-yellow") : "hidden");
$("hw-health-overheating-led").className = (freq_capped ? (flags.freq_capped.now ? "led-red" : "led-yellow") : "hidden"); $("hw-health-overheating-led").className = (freq_capped ? (flags.freq_capped.now ? "led-red" : "led-yellow") : "hidden");
tools.hiddenSetVisible($("hw-health-message-undervoltage"), undervoltage); tools.hidden.setVisible($("hw-health-message-undervoltage"), undervoltage);
tools.hiddenSetVisible($("hw-health-message-overheating"), freq_capped); tools.hidden.setVisible($("hw-health-message-overheating"), freq_capped);
} }
}; };
@@ -120,7 +120,7 @@ export function Session() {
$("webterm-iframe").src = ""; $("webterm-iframe").src = "";
}; };
} }
tools.featureSetEnabled($("webterm"), has_webterm); tools.feature.setEnabled($("webterm"), has_webterm);
$("webterm-window").show_hook = show_hook; $("webterm-window").show_hook = show_hook;
$("webterm-window").close_hook = close_hook; $("webterm-window").close_hook = close_hook;
@@ -206,7 +206,7 @@ export function Session() {
let http = tools.makeRequest("GET", "/api/auth/check", function() { let http = tools.makeRequest("GET", "/api/auth/check", function() {
if (http.readyState === 4) { if (http.readyState === 4) {
if (http.status === 200) { if (http.status === 200) {
__ws = new WebSocket(`${tools.https ? "wss" : "ws"}://${location.host}/api/ws`); __ws = new WebSocket(`${tools.is_https ? "wss" : "ws"}://${location.host}/api/ws`);
__ws.onopen = __wsOpenHandler; __ws.onopen = __wsOpenHandler;
__ws.onmessage = __wsMessageHandler; __ws.onmessage = __wsMessageHandler;
__ws.onerror = __wsErrorHandler; __ws.onerror = __wsErrorHandler;

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

@@ -76,7 +76,7 @@ function _JanusStreamer(__setActive, __setInactive, __setInfo) {
__ensuring = true; __ensuring = true;
__logInfo("Starting Janus ..."); __logInfo("Starting Janus ...");
__janus = new _Janus({ __janus = new _Janus({
server: `${tools.https ? "wss" : "ws"}://${location.host}/janus/ws`, server: `${tools.is_https ? "wss" : "ws"}://${location.host}/janus/ws`,
ipv6: true, ipv6: true,
destroyOnUnload: false, destroyOnUnload: false,
success: __attachJanus, success: __attachJanus,
@@ -371,7 +371,7 @@ function _MjpegStreamer(__setActive, __setInactive, __setInfo) {
}; };
var __findId = function() { var __findId = function() {
let stream_client = tools.getCookie("stream_client"); let stream_client = tools.cookies.get("stream_client");
if (__id.length === 0 && stream_client && stream_client.startsWith(__key + "/")) { if (__id.length === 0 && stream_client && stream_client.startsWith(__key + "/")) {
__logInfo("Found acceptable stream_client cookie:", stream_client); __logInfo("Found acceptable stream_client cookie:", stream_client);
__id = stream_client.slice(stream_client.indexOf("/") + 1); __id = stream_client.slice(stream_client.indexOf("/") + 1);
@@ -427,21 +427,21 @@ export function Streamer() {
$("stream-led").title = "Stream inactive"; $("stream-led").title = "Stream inactive";
tools.sliderSetParams($("stream-quality-slider"), 5, 100, 5, 80); tools.slider.setParams($("stream-quality-slider"), 5, 100, 5, 80);
tools.sliderSetOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value)); tools.slider.setOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
tools.sliderSetParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000); tools.slider.setParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000);
tools.sliderSetOnUp($("stream-h264-bitrate-slider"), 1000, __updateH264BitrateValue, (value) => __sendParam("h264_bitrate", value)); tools.slider.setOnUp($("stream-h264-bitrate-slider"), 1000, __updateH264BitrateValue, (value) => __sendParam("h264_bitrate", value));
tools.sliderSetParams($("stream-desired-fps-slider"), 0, 120, 1, 0); tools.slider.setParams($("stream-desired-fps-slider"), 0, 120, 1, 0);
tools.sliderSetOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value)); tools.slider.setOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
$("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value)); $("stream-resolution-selector").onchange = (() => __sendParam("resolution", $("stream-resolution-selector").value));
tools.radioSetOnClick("stream-mode-radio", __clickModeRadio, false); tools.radio.setOnClick("stream-mode-radio", __clickModeRadio, false);
tools.setOnClick($("stream-screenshot-button"), __clickScreenshotButton); tools.el.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
tools.setOnClick($("stream-reset-button"), __clickResetButton); tools.el.setOnClick($("stream-reset-button"), __clickResetButton);
$("stream-window").show_hook = () => __applyState(__state); $("stream-window").show_hook = () => __applyState(__state);
$("stream-window").close_hook = () => __applyState(null); $("stream-window").close_hook = () => __applyState(null);
@@ -457,9 +457,9 @@ export function Streamer() {
let supported = !!window.RTCPeerConnection; let supported = !!window.RTCPeerConnection;
let set_enabled = function() { let set_enabled = function() {
__janus_enabled = (enabled && supported && _Janus !== null); __janus_enabled = (enabled && supported && _Janus !== null);
tools.featureSetEnabled($("stream-mode"), __janus_enabled); tools.feature.setEnabled($("stream-mode"), __janus_enabled);
tools.info(`Stream: Janus WebRTC state: enabled=${enabled}, supported=${supported}, imported=${!!_Janus}`); tools.info(`Stream: Janus WebRTC state: enabled=${enabled}, supported=${supported}, imported=${!!_Janus}`);
tools.radioClickValue("stream-mode-radio", tools.storage.get("stream.mode", "mjpeg")); tools.radio.clickValue("stream-mode-radio", tools.storage.get("stream.mode", "mjpeg"));
self.setState(__state); self.setState(__state);
}; };
if (enabled && supported) { if (enabled && supported) {
@@ -493,22 +493,22 @@ export function Streamer() {
var __applyState = function(state) { var __applyState = function(state) {
if (state) { if (state) {
tools.featureSetEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0)); tools.feature.setEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
tools.featureSetEnabled($("stream-h264-bitrate"), state.features.h264 && __janus_enabled); tools.feature.setEnabled($("stream-h264-bitrate"), state.features.h264 && __janus_enabled);
tools.featureSetEnabled($("stream-resolution"), state.features.resolution); tools.feature.setEnabled($("stream-resolution"), state.features.resolution);
if (state.streamer) { if (state.streamer) {
wm.setElementEnabled($("stream-quality-slider"), true); tools.el.setEnabled($("stream-quality-slider"), true);
__setIfChanged($("stream-quality-slider"), state.streamer.encoder.quality, __updateQualityValue); __setIfChanged($("stream-quality-slider"), state.streamer.encoder.quality, __updateQualityValue);
if (state.features.h264 && __janus_enabled) { if (state.features.h264 && __janus_enabled) {
__setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate); __setMinMax($("stream-h264-bitrate-slider"), state.limits.h264_bitrate);
wm.setElementEnabled($("stream-h264-bitrate-slider"), true); tools.el.setEnabled($("stream-h264-bitrate-slider"), true);
__setIfChanged($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, __updateH264BitrateValue); __setIfChanged($("stream-h264-bitrate-slider"), state.streamer.h264.bitrate, __updateH264BitrateValue);
} }
__setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps); __setMinMax($("stream-desired-fps-slider"), state.limits.desired_fps);
wm.setElementEnabled($("stream-desired-fps-slider"), true); tools.el.setEnabled($("stream-desired-fps-slider"), true);
__setIfChanged($("stream-desired-fps-slider"), state.streamer.source.desired_fps, __updateDesiredFpsValue); __setIfChanged($("stream-desired-fps-slider"), state.streamer.source.desired_fps, __updateDesiredFpsValue);
let resolution_str = __makeStringResolution(state.streamer.source.resolution); let resolution_str = __makeStringResolution(state.streamer.source.resolution);
@@ -529,14 +529,14 @@ export function Streamer() {
$("stream-resolution-selector").resolutions = state.limits.available_resolutions; $("stream-resolution-selector").resolutions = state.limits.available_resolutions;
} }
document.querySelector(`#stream-resolution-selector [value="${resolution_str}"]`).selected = true; document.querySelector(`#stream-resolution-selector [value="${resolution_str}"]`).selected = true;
wm.setElementEnabled($("stream-resolution-selector"), true); tools.el.setEnabled($("stream-resolution-selector"), true);
} }
} else { } else {
wm.setElementEnabled($("stream-quality-slider"), false); tools.el.setEnabled($("stream-quality-slider"), false);
wm.setElementEnabled($("stream-h264-bitrate-slider"), false); tools.el.setEnabled($("stream-h264-bitrate-slider"), false);
wm.setElementEnabled($("stream-desired-fps-slider"), false); tools.el.setEnabled($("stream-desired-fps-slider"), false);
wm.setElementEnabled($("stream-resolution-selector"), false); tools.el.setEnabled($("stream-resolution-selector"), false);
} }
__streamer.ensureStream(state.streamer); __streamer.ensureStream(state.streamer);
@@ -549,15 +549,15 @@ export function Streamer() {
var __setActive = function() { var __setActive = function() {
$("stream-led").className = "led-green"; $("stream-led").className = "led-green";
$("stream-led").title = "Stream is active"; $("stream-led").title = "Stream is active";
wm.setElementEnabled($("stream-screenshot-button"), true); tools.el.setEnabled($("stream-screenshot-button"), true);
wm.setElementEnabled($("stream-reset-button"), true); tools.el.setEnabled($("stream-reset-button"), true);
}; };
var __setInactive = function() { var __setInactive = function() {
$("stream-led").className = "led-gray"; $("stream-led").className = "led-gray";
$("stream-led").title = "Stream inactive"; $("stream-led").title = "Stream inactive";
wm.setElementEnabled($("stream-screenshot-button"), false); tools.el.setEnabled($("stream-screenshot-button"), false);
wm.setElementEnabled($("stream-reset-button"), false); tools.el.setEnabled($("stream-reset-button"), false);
}; };
var __setInfo = function(is_active, online, text) { var __setInfo = function(is_active, online, text) {
@@ -609,11 +609,11 @@ export function Streamer() {
var __clickModeRadio = function() { var __clickModeRadio = function() {
if (_Janus !== null) { if (_Janus !== null) {
let mode = tools.radioGetValue("stream-mode-radio"); let mode = tools.radio.getValue("stream-mode-radio");
tools.storage.set("stream.mode", mode); tools.storage.set("stream.mode", mode);
if (mode !== __streamer.getMode()) { if (mode !== __streamer.getMode()) {
tools.hiddenSetVisible($("stream-image"), (mode !== "janus")); tools.hidden.setVisible($("stream-image"), (mode !== "janus"));
tools.hiddenSetVisible($("stream-video"), (mode === "janus")); tools.hidden.setVisible($("stream-video"), (mode === "janus"));
if (mode === "janus") { if (mode === "janus") {
__streamer.stopStream(); __streamer.stopStream();
__streamer = new _JanusStreamer(__setActive, __setInactive, __setInfo); __streamer = new _JanusStreamer(__setActive, __setInactive, __setInfo);

8
web/share/js/login/main.js
View File

@@ -32,7 +32,7 @@ export function main() {
if (checkBrowser()) { if (checkBrowser()) {
initWindowManager(); initWindowManager();
tools.setOnClick($("login-button"), __login); tools.el.setOnClick($("login-button"), __login);
$("user-input").onkeyup = $("passwd-input").onkeyup = function(event) { $("user-input").onkeyup = $("passwd-input").onkeyup = function(event) {
if (event.code === "Enter") { if (event.code === "Enter") {
event.preventDefault(); event.preventDefault();
@@ -75,9 +75,9 @@ function __login() {
} }
function __setEnabled(enabled) { function __setEnabled(enabled) {
wm.setElementEnabled($("user-input"), enabled); tools.el.setEnabled($("user-input"), enabled);
wm.setElementEnabled($("passwd-input"), enabled); tools.el.setEnabled($("passwd-input"), enabled);
wm.setElementEnabled($("login-button"), enabled); tools.el.setEnabled($("login-button"), enabled);
} }
function __tryAgain() { function __tryAgain() {

277
web/share/js/tools.js
View File

@@ -24,7 +24,11 @@
export var tools = new function() { export var tools = new function() {
this.setDefault = function(dict, key, value) { var self = this;
/************************************************************************/
self.setDefault = function(dict, key, value) {
if (!(key in dict)) { if (!(key in dict)) {
dict[key] = value; dict[key] = value;
} }
@@ -32,7 +36,7 @@ export var tools = new function() {
/************************************************************************/ /************************************************************************/
this.makeRequest = function(method, url, callback, body=null, content_type=null) { self.makeRequest = function(method, url, callback, body=null, content_type=null) {
let http = new XMLHttpRequest(); let http = new XMLHttpRequest();
http.open(method, url, true); http.open(method, url, true);
if (content_type) { if (content_type) {
@@ -46,11 +50,11 @@ export var tools = new function() {
/************************************************************************/ /************************************************************************/
this.upperFirst = function(text) { self.upperFirst = function(text) {
return text[0].toUpperCase() + text.slice(1); return text[0].toUpperCase() + text.slice(1);
}; };
this.makeId = function() { self.makeId = function() {
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let id = ""; let id = "";
for (let count = 0; count < 16; ++count) { for (let count = 0; count < 16; ++count) {
@@ -59,7 +63,7 @@ export var tools = new function() {
return id; return id;
}; };
this.formatSize = function(size) { self.formatSize = function(size) {
if (size > 0) { if (size > 0) {
let 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", "KiB", "MiB", "GiB", "TiB"][index]; return (size / Math.pow(1024, index)).toFixed(2) * 1 + " " + ["B", "KiB", "MiB", "GiB", "TiB"][index];
@@ -68,7 +72,7 @@ export var tools = new function() {
} }
}; };
this.formatDuration = function(duration) { self.formatDuration = function(duration) {
let millis = parseInt((duration % 1000) / 100); let millis = parseInt((duration % 1000) / 100);
let secs = Math.floor((duration / 1000) % 60); let secs = Math.floor((duration / 1000) % 60);
let mins = Math.floor((duration / (1000 * 60)) % 60); let mins = Math.floor((duration / (1000 * 60)) % 60);
@@ -81,125 +85,159 @@ export var tools = new function() {
/************************************************************************/ /************************************************************************/
this.getCookie = function(name) { self.el = new function() {
let matches = document.cookie.match(new RegExp( return {
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape "setOnClick": function(el, callback, prevent_default=true) {
)); el.onclick = el.ontouchend = function(event) {
return (matches ? decodeURIComponent(matches[1]) : ""); if (prevent_default) {
}; event.preventDefault();
}
this.setOnClick = function(el, callback, prevent_default=true) { callback();
el.onclick = el.ontouchend = function(event) { };
if (prevent_default) { },
event.preventDefault(); "setOnDown": function(el, callback, prevent_default=true) {
} el.onmousedown = el.ontouchstart = function(event) {
callback(); if (prevent_default) {
}; event.preventDefault();
}; }
this.setOnDown = function(el, callback, prevent_default=true) { callback();
el.onmousedown = el.ontouchstart = function(event) { };
if (prevent_default) { },
event.preventDefault(); "setOnUp": function(el, callback, prevent_default=true) {
} el.onmouseup = el.ontouchend = function(event) {
callback(); if (prevent_default) {
}; event.preventDefault();
}; }
this.setOnUp = function(el, callback, prevent_default=true) { callback();
el.onmouseup = el.ontouchend = function(event) { };
if (prevent_default) { },
event.preventDefault(); "setEnabled": function(el, enabled) {
} if (!enabled && document.activeElement === el) {
callback(); let el_to_focus = (
el.closest(".modal-window")
|| el.closest(".window")
|| el.closest(".menu")
);
if (el_to_focus) {
el_to_focus.focus();
}
}
el.disabled = !enabled;
},
}; };
}; };
this.sliderSetOnUp = function(el, delay, display_callback, execute_callback) { self.slider = new function() {
el.execution_timer = null; return {
el.activated = false; "setOnUp": function(el, delay, display_callback, execute_callback) {
let clear_timer = function() {
if (el.execution_timer) {
clearTimeout(el.execution_timer);
el.execution_timer = null; el.execution_timer = null;
} el.activated = false;
};
el.oninput = el.onchange = () => display_callback(el.value); let clear_timer = function() {
if (el.execution_timer) {
clearTimeout(el.execution_timer);
el.execution_timer = null;
}
};
el.onmousedown = el.ontouchstart = function() { el.oninput = el.onchange = () => display_callback(el.value);
clear_timer();
el.activated = true;
};
el.onmouseup = el.ontouchend = function(event) { el.onmousedown = el.ontouchstart = function() {
let value = el.value; clear_timer();
event.preventDefault(); el.activated = true;
clear_timer(); };
el.execution_timer = setTimeout(function() {
execute_callback(value); el.onmouseup = el.ontouchend = function(event) {
}, delay); let value = el.value;
event.preventDefault();
clear_timer();
el.execution_timer = setTimeout(function() {
execute_callback(value);
}, delay);
};
},
"setParams": function(el, min, max, step, value) {
el.min = min;
el.max = max;
el.step = step;
el.value = value;
},
}; };
}; };
this.sliderSetParams = function(el, min, max, step, value) {
el.min = min; self.radio = new function() {
el.max = max; return {
el.step = step; "makeItem": function(name, title, value) {
el.value = value; return `
<input type="radio" id="${name}-${value}" name="${name}" value="${value}" />
<label for="${name}-${value}">${title}</label>
`;
},
"setOnClick": function(name, callback, prevent_default=true) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
self.el.setOnClick(el, callback, prevent_default);
}
},
"getValue": function(name) {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`).value;
},
"setValue": function(name, value) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
el.checked = (el.value === value);
}
},
"clickValue": function(name, value) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
if (el.value === value) {
el.click();
return;
}
}
},
"setEnabled": function(name, enabled) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
self.el.setEnabled(el, enabled);
}
},
};
}; };
this.radioMakeItem = function(name, title, value) { self.progress = new function() {
return ` return {
<input type="radio" id="${name}-${value}" name="${name}" value="${value}" /> "setValue": function(el, title, percent) {
<label for="${name}-${value}">${title}</label> el.setAttribute("data-label", title);
`; $(`${el.id}-value`).style.width = `${percent}%`;
}; },
this.radioSetOnClick = function(name, callback, prevent_default=true) { };
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
this.setOnClick(el, callback, prevent_default);
}
};
this.radioGetValue = function(name) {
return document.querySelector(`input[type="radio"][name="${name}"]:checked`).value;
};
this.radioSetValue = function(name, value) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
el.checked = (el.value === value);
}
};
this.radioClickValue = function(name, value) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
if (el.value === value) {
el.click();
return;
}
}
};
this.progressSetValue = function(el, title, percent) {
el.setAttribute("data-label", title);
$(`${el.id}-value`).style.width = `${percent}%`;
}; };
this.hiddenSetVisible = function(el, visible) { self.hidden = new function() {
el.classList.toggle("hidden", !visible); return {
"setVisible": function(el, visible) {
el.classList.toggle("hidden", !visible);
},
};
}; };
this.featureSetEnabled = function(el, enabled) { self.feature = new function() {
el.classList.toggle("feature-disabled", !enabled); return {
"setEnabled": function(el, enabled) {
el.classList.toggle("feature-disabled", !enabled);
},
};
}; };
/************************************************************************/ /************************************************************************/
let __debug = (new URL(window.location.href)).searchParams.get("debug"); let __debug = (new URL(window.location.href)).searchParams.get("debug");
this.debug = function(...args) { self.debug = function(...args) {
if (__debug) { if (__debug) {
__log("DEBUG", ...args); __log("DEBUG", ...args);
} }
}; };
this.info = (...args) => __log("INFO", ...args); self.info = (...args) => __log("INFO", ...args);
this.error = (...args) => __log("ERROR", ...args); self.error = (...args) => __log("ERROR", ...args);
let __log = function(label, ...args) { let __log = function(label, ...args) {
let now = (new Date()).toISOString().split("T")[1].replace("Z", ""); let now = (new Date()).toISOString().split("T")[1].replace("Z", "");
@@ -208,7 +246,30 @@ export var tools = new function() {
/************************************************************************/ /************************************************************************/
this.browser = new function() { self.is_https = (location.protocol === "https:");
self.cookies = new function() {
return {
"get": function(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
));
return (matches ? decodeURIComponent(matches[1]) : "");
},
};
};
self.storage = new function() {
return {
"get": function(key, default_value) {
let value = window.localStorage.getItem(key);
return (value !== null ? value : default_value);
},
"set": (key, value) => window.localStorage.setItem(key, value),
};
};
self.browser = 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+
@@ -254,19 +315,7 @@ export var tools = new function() {
"is_mac": is_mac, "is_mac": is_mac,
}; };
}; };
this.info("Browser:", this.browser); self.info("Browser:", self.browser);
this.https = (location.protocol === "https:");
this.storage = new function() {
return {
"get": function(key, default_value) {
let value = window.localStorage.getItem(key);
return (value !== null ? value : default_value);
},
"set": (key, value) => window.localStorage.setItem(key, value),
};
};
}; };
export var $ = (id) => document.getElementById(id); export var $ = (id) => document.getElementById(id);

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

@@ -50,7 +50,7 @@ function __WindowManager() {
for (let el_button of $$("menu-button")) { for (let el_button of $$("menu-button")) {
el_button.parentElement.querySelector(".menu").setAttribute("tabindex", "-1"); el_button.parentElement.querySelector(".menu").setAttribute("tabindex", "-1");
tools.setOnDown(el_button, () => __toggleMenu(el_button)); tools.el.setOnDown(el_button, () => __toggleMenu(el_button));
__menu_buttons.push(el_button); __menu_buttons.push(el_button);
} }
@@ -84,7 +84,7 @@ function __WindowManager() {
let el_close_button = el_window.querySelector(".window-header .window-button-close"); let el_close_button = el_window.querySelector(".window-header .window-button-close");
if (el_close_button) { if (el_close_button) {
el_close_button.title = "Close window"; el_close_button.title = "Close window";
tools.setOnClick(el_close_button, function() { tools.el.setOnClick(el_close_button, function() {
__closeWindow(el_window); __closeWindow(el_window);
__activateLastWindow(el_window); __activateLastWindow(el_window);
}); });
@@ -93,7 +93,7 @@ function __WindowManager() {
let el_maximize_button = el_window.querySelector(".window-header .window-button-maximize"); let el_maximize_button = el_window.querySelector(".window-header .window-button-maximize");
if (el_maximize_button) { if (el_maximize_button) {
el_maximize_button.title = "Maximize window"; el_maximize_button.title = "Maximize window";
tools.setOnClick(el_maximize_button, function() { tools.el.setOnClick(el_maximize_button, function() {
__maximizeWindow(el_window); __maximizeWindow(el_window);
__activateLastWindow(el_window); __activateLastWindow(el_window);
}); });
@@ -102,7 +102,7 @@ function __WindowManager() {
let el_orig_button = el_window.querySelector(".window-header .window-button-original"); let el_orig_button = el_window.querySelector(".window-header .window-button-original");
if (el_orig_button) { if (el_orig_button) {
el_orig_button.title = "Reduce window to its original size and center it"; el_orig_button.title = "Reduce window to its original size and center it";
tools.setOnClick(el_orig_button, function() { tools.el.setOnClick(el_orig_button, function() {
el_window.style.width = ""; el_window.style.width = "";
el_window.style.height = ""; el_window.style.height = "";
__centerWindow(el_window); __centerWindow(el_window);
@@ -113,7 +113,7 @@ function __WindowManager() {
let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen"); let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen");
if (el_full_screen_button && __getFullScreenFunction(el_window)) { if (el_full_screen_button && __getFullScreenFunction(el_window)) {
el_full_screen_button.title = "Go to full-screen mode"; el_full_screen_button.title = "Go to full-screen mode";
tools.setOnClick(el_full_screen_button, function() { tools.el.setOnClick(el_full_screen_button, function() {
__fullScreenWindow(el_window); __fullScreenWindow(el_window);
__activateLastWindow(el_window); __activateLastWindow(el_window);
}); });
@@ -121,7 +121,7 @@ function __WindowManager() {
} }
for (let el_button of $$$("button[data-show-window]")) { for (let el_button of $$$("button[data-show-window]")) {
tools.setOnClick(el_button, () => self.showWindow($(el_button.getAttribute("data-show-window")))); tools.el.setOnClick(el_button, () => self.showWindow($(el_button.getAttribute("data-show-window"))));
} }
window.onmouseup = __globalMouseButtonHandler; window.onmouseup = __globalMouseButtonHandler;
@@ -188,13 +188,13 @@ function __WindowManager() {
if (cancel) { if (cancel) {
var el_cancel_button = document.createElement("button"); var el_cancel_button = document.createElement("button");
el_cancel_button.innerHTML = "Cancel"; el_cancel_button.innerHTML = "Cancel";
tools.setOnClick(el_cancel_button, () => close(false)); tools.el.setOnClick(el_cancel_button, () => close(false));
el_buttons.appendChild(el_cancel_button); el_buttons.appendChild(el_cancel_button);
} }
if (ok) { if (ok) {
var el_ok_button = document.createElement("button"); var el_ok_button = document.createElement("button");
el_ok_button.innerHTML = "OK"; el_ok_button.innerHTML = "OK";
tools.setOnClick(el_ok_button, () => close(true)); tools.el.setOnClick(el_ok_button, () => close(true));
el_buttons.appendChild(el_ok_button); el_buttons.appendChild(el_ok_button);
} }
if (ok && cancel) { if (ok && cancel) {
@@ -220,26 +220,6 @@ function __WindowManager() {
return promise; return promise;
}; };
self.setElementEnabled = function(el, enabled) {
if (!enabled && document.activeElement === el) {
let el_to_focus = (
el.closest(".modal-window")
|| el.closest(".window")
|| el.closest(".menu")
);
if (el_to_focus) {
el_to_focus.focus();
}
}
el.disabled = !enabled;
};
self.setRadioEnabled = function(name, enabled) {
for (let el of $$$(`input[type="radio"][name="${name}"]`)) {
self.setElementEnabled(el, enabled);
}
};
self.showWindow = function(el_window, activate=true, center=false) { self.showWindow = function(el_window, activate=true, center=false) {
let showed = false; let showed = false;
if (!self.isWindowVisible(el_window)) { if (!self.isWindowVisible(el_window)) {