mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-01-29 00:51:53 +08:00
refactoring
This commit is contained in:
Maxim Devaev
@@ -86,7 +86,7 @@ function __loadKvmdInfo() {
|
||||
}
|
||||
|
||||
$("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) {
|
||||
$("kvmd-meta-server-host").innerHTML = info.meta.server.host;
|
||||
|
||||
@@ -45,8 +45,8 @@ export function Keypad(keys_parent, key_callback) {
|
||||
tools.setDefault(__merged, code, []);
|
||||
__merged[code].push(el_key);
|
||||
|
||||
tools.setOnDown(el_key, () => __clickHandler(el_key, true));
|
||||
tools.setOnUp(el_key, () => __clickHandler(el_key, false));
|
||||
tools.el.setOnDown(el_key, () => __clickHandler(el_key, true));
|
||||
tools.el.setOnUp(el_key, () => __clickHandler(el_key, false));
|
||||
el_key.onmouseout = function() {
|
||||
if (__isPressed(el_key)) {
|
||||
__clickHandler(el_key, false);
|
||||
@@ -63,7 +63,7 @@ export function Keypad(keys_parent, key_callback) {
|
||||
tools.setDefault(__merged, code, []);
|
||||
__merged[code].push(el_key);
|
||||
|
||||
tools.setOnDown(el_key, () => __toggleModifierHandler(el_key));
|
||||
tools.el.setOnDown(el_key, () => __toggleModifierHandler(el_key));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -47,7 +47,7 @@ export function Atx() {
|
||||
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) {
|
||||
let buttons_enabled = false;
|
||||
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-hdd-led").className = (state.leds.hdd ? "led-red" : "led-gray");
|
||||
buttons_enabled = !state.busy;
|
||||
@@ -65,7 +65,7 @@ export function Atx() {
|
||||
$("atx-hdd-led").className = "led-gray";
|
||||
}
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ export function Gpio() {
|
||||
for (let type of ["switch", "button"]) {
|
||||
let el = $(`gpio-${type}-${channel}`);
|
||||
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}`);
|
||||
@@ -62,7 +62,7 @@ export function Gpio() {
|
||||
}
|
||||
for (let selector of [".gpio-switch", ".gpio-button"]) {
|
||||
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) {
|
||||
tools.featureSetEnabled($("gpio-dropdown"), model.view.table.length);
|
||||
tools.feature.setEnabled($("gpio-dropdown"), model.view.table.length);
|
||||
if (model.view.table.length) {
|
||||
$("gpio-menu-button").innerHTML = `${model.view.header.title}`;
|
||||
}
|
||||
@@ -96,16 +96,16 @@ export function Gpio() {
|
||||
for (let channel in model.scheme.outputs) {
|
||||
let el = $(`gpio-switch-${channel}`);
|
||||
if (el) {
|
||||
tools.setOnClick(el, __createAction(el, __switchChannel));
|
||||
tools.el.setOnClick(el, __createAction(el, __switchChannel));
|
||||
}
|
||||
el = $(`gpio-button-${channel}`);
|
||||
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.featureSetEnabled($("wol"), ("__wol__" in model.scheme.outputs));
|
||||
tools.feature.setEnabled($("v3-usb-breaker"), ("__v3_usb_breaker__" in model.scheme.outputs));
|
||||
tools.feature.setEnabled($("wol"), ("__wol__" in model.scheme.outputs));
|
||||
|
||||
self.setState(__state);
|
||||
};
|
||||
|
||||
@@ -75,7 +75,7 @@ export function Hid(__getResolution) {
|
||||
window.addEventListener("blur", __releaseAll);
|
||||
|
||||
$("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));
|
||||
}, false);
|
||||
|
||||
@@ -83,21 +83,21 @@ export function Hid(__getResolution) {
|
||||
tools.storage.set("hid.pak.keymap", $("hid-pak-keymap-selector").value);
|
||||
});
|
||||
|
||||
tools.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
|
||||
tools.setOnClick($("hid-connect-switch"), __clickConnectSwitch);
|
||||
tools.setOnClick($("hid-reset-button"), __clickResetButton);
|
||||
tools.el.setOnClick($("hid-pak-button"), __clickPasteAsKeysButton);
|
||||
tools.el.setOnClick($("hid-connect-switch"), __clickConnectSwitch);
|
||||
tools.el.setOnClick($("hid-reset-button"), __clickResetButton);
|
||||
|
||||
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) {
|
||||
wm.setElementEnabled($("hid-pak-text"), ws);
|
||||
wm.setElementEnabled($("hid-pak-button"), ws);
|
||||
wm.setElementEnabled($("hid-reset-button"), ws);
|
||||
tools.el.setEnabled($("hid-pak-text"), ws);
|
||||
tools.el.setEnabled($("hid-pak-button"), ws);
|
||||
tools.el.setEnabled($("hid-reset-button"), ws);
|
||||
if (!ws) {
|
||||
self.setState(null);
|
||||
}
|
||||
@@ -121,14 +121,14 @@ export function Hid(__getResolution) {
|
||||
["Off", "disabled"],
|
||||
]) {
|
||||
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").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;
|
||||
if (mouse_outputs.length) {
|
||||
@@ -141,32 +141,32 @@ export function Hid(__getResolution) {
|
||||
["Off", "disabled"],
|
||||
]) {
|
||||
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]);
|
||||
}
|
||||
}
|
||||
$("hid-outputs-mouse-box").innerHTML = html;
|
||||
$("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);
|
||||
} else {
|
||||
has_relative = !state.mouse.absolute;
|
||||
has_relative_squash = has_relative;
|
||||
}
|
||||
tools.featureSetEnabled($("hid-outputs"), (keyboard_outputs.length || mouse_outputs.length));
|
||||
tools.featureSetEnabled($("hid-outputs-keyboard"), keyboard_outputs.length);
|
||||
tools.featureSetEnabled($("hid-outputs-mouse"), mouse_outputs.length);
|
||||
tools.featureSetEnabled($("hid-mouse-squash"), has_relative);
|
||||
tools.featureSetEnabled($("hid-connect"), (state.connected !== null));
|
||||
tools.feature.setEnabled($("hid-outputs"), (keyboard_outputs.length || mouse_outputs.length));
|
||||
tools.feature.setEnabled($("hid-outputs-keyboard"), keyboard_outputs.length);
|
||||
tools.feature.setEnabled($("hid-outputs-mouse"), mouse_outputs.length);
|
||||
tools.feature.setEnabled($("hid-mouse-squash"), has_relative);
|
||||
tools.feature.setEnabled($("hid-connect"), (state.connected !== null));
|
||||
$("hid-connect-switch").checked = !!state.connected;
|
||||
}
|
||||
|
||||
wm.setRadioEnabled("hid-outputs-keyboard-radio", (state && state.online && !state.busy));
|
||||
wm.setRadioEnabled("hid-outputs-mouse-radio", (state && state.online && !state.busy));
|
||||
wm.setElementEnabled($("hid-mouse-squash-switch"), (has_relative_squash && !state.busy));
|
||||
wm.setElementEnabled($("hid-connect-switch"), (state && state.online && !state.busy));
|
||||
tools.radio.setEnabled("hid-outputs-keyboard-radio", (state && state.online && !state.busy));
|
||||
tools.radio.setEnabled("hid-outputs-mouse-radio", (state && state.online && !state.busy));
|
||||
tools.el.setEnabled($("hid-mouse-squash-switch"), (has_relative_squash && !state.busy));
|
||||
tools.el.setEnabled($("hid-connect-switch"), (state && state.online && !state.busy));
|
||||
|
||||
if (state) {
|
||||
__keyboard.setState(state.keyboard, state.online, state.busy);
|
||||
@@ -218,9 +218,9 @@ export function Hid(__getResolution) {
|
||||
let text = $("hid-pak-text").value;
|
||||
if (text) {
|
||||
let paste_as_keys = function() {
|
||||
wm.setElementEnabled($("hid-pak-text"), false);
|
||||
wm.setElementEnabled($("hid-pak-button"), false);
|
||||
wm.setElementEnabled($("hid-pak-keymap-selector"), false);
|
||||
tools.el.setEnabled($("hid-pak-text"), false);
|
||||
tools.el.setEnabled($("hid-pak-button"), false);
|
||||
tools.el.setEnabled($("hid-pak-keymap-selector"), false);
|
||||
|
||||
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() {
|
||||
if (http.readyState === 4) {
|
||||
wm.setElementEnabled($("hid-pak-text"), true);
|
||||
wm.setElementEnabled($("hid-pak-button"), true);
|
||||
wm.setElementEnabled($("hid-pak-keymap-selector"), true);
|
||||
tools.el.setEnabled($("hid-pak-text"), true);
|
||||
tools.el.setEnabled($("hid-pak-button"), true);
|
||||
tools.el.setEnabled($("hid-pak-keymap-selector"), true);
|
||||
$("hid-pak-text").value = "";
|
||||
if (http.status === 413) {
|
||||
wm.error("Too many text for paste!");
|
||||
@@ -260,7 +260,7 @@ export function Hid(__getResolution) {
|
||||
};
|
||||
|
||||
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() {
|
||||
if (http.readyState === 4) {
|
||||
if (http.status !== 200) {
|
||||
|
||||
@@ -40,7 +40,7 @@ export function main() {
|
||||
|
||||
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"));
|
||||
|
||||
|
||||
@@ -40,20 +40,20 @@ export function Msd() {
|
||||
$("msd-led").title = "Unknown state";
|
||||
|
||||
$("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;
|
||||
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.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton);
|
||||
tools.el.setOnClick($("msd-upload-new-image-button"), __clickUploadNewImageButton);
|
||||
tools.el.setOnClick($("msd-abort-uploading-button"), __clickAbortUploadingButton);
|
||||
|
||||
tools.setOnClick($("msd-connect-button"), () => __clickConnectButton(true));
|
||||
tools.setOnClick($("msd-disconnect-button"), () => __clickConnectButton(false));
|
||||
tools.el.setOnClick($("msd-connect-button"), () => __clickConnectButton(true));
|
||||
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() {
|
||||
wm.setElementEnabled($("msd-image-selector"), false);
|
||||
wm.setElementEnabled($("msd-remove-image"), false);
|
||||
tools.el.setEnabled($("msd-image-selector"), false);
|
||||
tools.el.setEnabled($("msd-remove-image"), false);
|
||||
__sendParam("image", $("msd-image-selector").value);
|
||||
};
|
||||
|
||||
@@ -85,7 +85,7 @@ export function Msd() {
|
||||
};
|
||||
|
||||
var __clickModeRadio = function() {
|
||||
__sendParam("cdrom", tools.radioGetValue("msd-mode-radio"));
|
||||
__sendParam("cdrom", tools.radio.getValue("msd-mode-radio"));
|
||||
};
|
||||
|
||||
var __sendParam = function(name, value) {
|
||||
@@ -122,7 +122,7 @@ export function Msd() {
|
||||
__upload_http.onreadystatechange = null;
|
||||
__upload_http.abort();
|
||||
__upload_http = null;
|
||||
tools.progressSetValue($("msd-uploading-progress"), "Aborted", 0);
|
||||
tools.progress.setValue($("msd-uploading-progress"), "Aborted", 0);
|
||||
};
|
||||
|
||||
var __clickConnectButton = function(connected) {
|
||||
@@ -135,7 +135,7 @@ export function Msd() {
|
||||
__applyState();
|
||||
});
|
||||
__applyState();
|
||||
wm.setElementEnabled($(`msd-${connected ? "connect" : "disconnect"}-button`), false);
|
||||
tools.el.setEnabled($(`msd-${connected ? "connect" : "disconnect"}-button`), false);
|
||||
};
|
||||
|
||||
var __selectNewImageFile = function() {
|
||||
@@ -180,42 +180,42 @@ export function Msd() {
|
||||
let used = s.storage.size - s.storage.free;
|
||||
let used_str = tools.formatSize(used);
|
||||
$("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 {
|
||||
$("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();
|
||||
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.radioSetValue("msd-mode-radio", `${Number(online && s.features.cdrom && s.drive.cdrom)}`);
|
||||
tools.radio.setEnabled("msd-mode-radio", (online && s.features.cdrom && !s.drive.connected && !s.busy));
|
||||
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));
|
||||
wm.setElementEnabled($("msd-disconnect-button"), (online && s.drive.connected && !s.busy));
|
||||
tools.el.setEnabled($("msd-connect-button"), (online && (!s.features.multi || s.drive.image) && !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));
|
||||
wm.setElementEnabled($("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-select-new-image-button"), (online && !s.drive.connected && !__upload_http && !s.busy));
|
||||
tools.el.setEnabled($("msd-upload-new-image-button"), (online && !s.drive.connected && __image_file && !s.busy));
|
||||
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);
|
||||
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-size").innerHTML = (uploading ? tools.formatSize(uploading.size) : "");
|
||||
if (online) {
|
||||
if (s.storage.uploading) {
|
||||
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) {
|
||||
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 {
|
||||
$("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);
|
||||
|
||||
if (s) {
|
||||
tools.featureSetEnabled($("msd-dropdown"), s.enabled);
|
||||
tools.featureSetEnabled($("msd-reset-button"), s.enabled);
|
||||
tools.feature.setEnabled($("msd-dropdown"), s.enabled);
|
||||
tools.feature.setEnabled($("msd-reset-button"), s.enabled);
|
||||
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")) {
|
||||
tools.featureSetEnabled(el, s.features.multi);
|
||||
tools.feature.setEnabled(el, s.features.multi);
|
||||
}
|
||||
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.hiddenSetVisible($("msd-message-image-broken"),
|
||||
tools.hidden.setVisible($("msd-message-offline"), (s && !s.online));
|
||||
tools.hidden.setVisible($("msd-message-image-broken"),
|
||||
(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));
|
||||
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));
|
||||
tools.hiddenSetVisible($("msd-message-another-user-uploads"),
|
||||
tools.hidden.setVisible($("msd-message-another-user-uploads"),
|
||||
(online && s.storage.uploading && !__upload_http));
|
||||
};
|
||||
|
||||
|
||||
@@ -41,14 +41,14 @@ export function Recorder() {
|
||||
var __last_event_ts = 0;
|
||||
|
||||
var __init__ = function() {
|
||||
tools.setOnClick($("hid-recorder-record"), __startRecord);
|
||||
tools.setOnClick($("hid-recorder-stop"), __stopProcess);
|
||||
tools.setOnClick($("hid-recorder-play"), __playRecord);
|
||||
tools.setOnClick($("hid-recorder-clear"), __clearRecord);
|
||||
tools.el.setOnClick($("hid-recorder-record"), __startRecord);
|
||||
tools.el.setOnClick($("hid-recorder-stop"), __stopProcess);
|
||||
tools.el.setOnClick($("hid-recorder-play"), __playRecord);
|
||||
tools.el.setOnClick($("hid-recorder-clear"), __clearRecord);
|
||||
|
||||
$("hid-recorder-new-script-file").onchange = __uploadScript;
|
||||
tools.setOnClick($("hid-recorder-upload"), () => $("hid-recorder-new-script-file").click());
|
||||
tools.setOnClick($("hid-recorder-download"), __downloadScript);
|
||||
tools.el.setOnClick($("hid-recorder-upload"), () => $("hid-recorder-new-script-file").click());
|
||||
tools.el.setOnClick($("hid-recorder-download"), __downloadScript);
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
@@ -241,14 +241,14 @@ export function Recorder() {
|
||||
$("hid-recorder-led").title = "";
|
||||
}
|
||||
|
||||
wm.setElementEnabled($("hid-recorder-record"), (__ws && !__play_timer && !__recording));
|
||||
wm.setElementEnabled($("hid-recorder-stop"), (__ws && (__play_timer || __recording)));
|
||||
wm.setElementEnabled($("hid-recorder-play"), (__ws && !__recording && __events.length));
|
||||
wm.setElementEnabled($("hid-recorder-clear"), (!__play_timer && !__recording && __events.length));
|
||||
wm.setElementEnabled($("hid-recorder-loop-switch"), (__ws && !__recording));
|
||||
tools.el.setEnabled($("hid-recorder-record"), (__ws && !__play_timer && !__recording));
|
||||
tools.el.setEnabled($("hid-recorder-stop"), (__ws && (__play_timer || __recording)));
|
||||
tools.el.setEnabled($("hid-recorder-play"), (__ws && !__recording && __events.length));
|
||||
tools.el.setEnabled($("hid-recorder-clear"), (!__play_timer && !__recording && __events.length));
|
||||
tools.el.setEnabled($("hid-recorder-loop-switch"), (__ws && !__recording));
|
||||
|
||||
wm.setElementEnabled($("hid-recorder-upload"), (!__play_timer && !__recording));
|
||||
wm.setElementEnabled($("hid-recorder-download"), (!__play_timer && !__recording && __events.length));
|
||||
tools.el.setEnabled($("hid-recorder-upload"), (!__play_timer && !__recording));
|
||||
tools.el.setEnabled($("hid-recorder-download"), (!__play_timer && !__recording && __events.length));
|
||||
|
||||
__setCounters(__events.length, __events_time);
|
||||
};
|
||||
|
||||
@@ -97,11 +97,11 @@ export function Session() {
|
||||
let undervoltage = (flags.undervoltage.now || flags.undervoltage.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-overheating-led").className = (freq_capped ? (flags.freq_capped.now ? "led-red" : "led-yellow") : "hidden");
|
||||
tools.hiddenSetVisible($("hw-health-message-undervoltage"), undervoltage);
|
||||
tools.hiddenSetVisible($("hw-health-message-overheating"), freq_capped);
|
||||
tools.hidden.setVisible($("hw-health-message-undervoltage"), undervoltage);
|
||||
tools.hidden.setVisible($("hw-health-message-overheating"), freq_capped);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -120,7 +120,7 @@ export function Session() {
|
||||
$("webterm-iframe").src = "";
|
||||
};
|
||||
}
|
||||
tools.featureSetEnabled($("webterm"), has_webterm);
|
||||
tools.feature.setEnabled($("webterm"), has_webterm);
|
||||
$("webterm-window").show_hook = show_hook;
|
||||
$("webterm-window").close_hook = close_hook;
|
||||
|
||||
@@ -206,7 +206,7 @@ export function Session() {
|
||||
let http = tools.makeRequest("GET", "/api/auth/check", function() {
|
||||
if (http.readyState === 4) {
|
||||
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.onmessage = __wsMessageHandler;
|
||||
__ws.onerror = __wsErrorHandler;
|
||||
|
||||
@@ -76,7 +76,7 @@ function _JanusStreamer(__setActive, __setInactive, __setInfo) {
|
||||
__ensuring = true;
|
||||
__logInfo("Starting 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,
|
||||
destroyOnUnload: false,
|
||||
success: __attachJanus,
|
||||
@@ -371,7 +371,7 @@ function _MjpegStreamer(__setActive, __setInactive, __setInfo) {
|
||||
};
|
||||
|
||||
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 + "/")) {
|
||||
__logInfo("Found acceptable stream_client cookie:", stream_client);
|
||||
__id = stream_client.slice(stream_client.indexOf("/") + 1);
|
||||
@@ -427,21 +427,21 @@ export function Streamer() {
|
||||
|
||||
$("stream-led").title = "Stream inactive";
|
||||
|
||||
tools.sliderSetParams($("stream-quality-slider"), 5, 100, 5, 80);
|
||||
tools.sliderSetOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
|
||||
tools.slider.setParams($("stream-quality-slider"), 5, 100, 5, 80);
|
||||
tools.slider.setOnUp($("stream-quality-slider"), 1000, __updateQualityValue, (value) => __sendParam("quality", value));
|
||||
|
||||
tools.sliderSetParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000);
|
||||
tools.sliderSetOnUp($("stream-h264-bitrate-slider"), 1000, __updateH264BitrateValue, (value) => __sendParam("h264_bitrate", value));
|
||||
tools.slider.setParams($("stream-h264-bitrate-slider"), 100, 16000, 100, 5000);
|
||||
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.sliderSetOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", value));
|
||||
tools.slider.setParams($("stream-desired-fps-slider"), 0, 120, 1, 0);
|
||||
tools.slider.setOnUp($("stream-desired-fps-slider"), 1000, __updateDesiredFpsValue, (value) => __sendParam("desired_fps", 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.setOnClick($("stream-reset-button"), __clickResetButton);
|
||||
tools.el.setOnClick($("stream-screenshot-button"), __clickScreenshotButton);
|
||||
tools.el.setOnClick($("stream-reset-button"), __clickResetButton);
|
||||
|
||||
$("stream-window").show_hook = () => __applyState(__state);
|
||||
$("stream-window").close_hook = () => __applyState(null);
|
||||
@@ -457,9 +457,9 @@ export function Streamer() {
|
||||
let supported = !!window.RTCPeerConnection;
|
||||
let set_enabled = function() {
|
||||
__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.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);
|
||||
};
|
||||
if (enabled && supported) {
|
||||
@@ -493,22 +493,22 @@ export function Streamer() {
|
||||
|
||||
var __applyState = function(state) {
|
||||
if (state) {
|
||||
tools.featureSetEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
|
||||
tools.featureSetEnabled($("stream-h264-bitrate"), state.features.h264 && __janus_enabled);
|
||||
tools.featureSetEnabled($("stream-resolution"), state.features.resolution);
|
||||
tools.feature.setEnabled($("stream-quality"), state.features.quality && (state.streamer === null || state.streamer.encoder.quality > 0));
|
||||
tools.feature.setEnabled($("stream-h264-bitrate"), state.features.h264 && __janus_enabled);
|
||||
tools.feature.setEnabled($("stream-resolution"), state.features.resolution);
|
||||
|
||||
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);
|
||||
|
||||
if (state.features.h264 && __janus_enabled) {
|
||||
__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);
|
||||
}
|
||||
|
||||
__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);
|
||||
|
||||
let resolution_str = __makeStringResolution(state.streamer.source.resolution);
|
||||
@@ -529,14 +529,14 @@ export function Streamer() {
|
||||
$("stream-resolution-selector").resolutions = state.limits.available_resolutions;
|
||||
}
|
||||
document.querySelector(`#stream-resolution-selector [value="${resolution_str}"]`).selected = true;
|
||||
wm.setElementEnabled($("stream-resolution-selector"), true);
|
||||
tools.el.setEnabled($("stream-resolution-selector"), true);
|
||||
}
|
||||
|
||||
} else {
|
||||
wm.setElementEnabled($("stream-quality-slider"), false);
|
||||
wm.setElementEnabled($("stream-h264-bitrate-slider"), false);
|
||||
wm.setElementEnabled($("stream-desired-fps-slider"), false);
|
||||
wm.setElementEnabled($("stream-resolution-selector"), false);
|
||||
tools.el.setEnabled($("stream-quality-slider"), false);
|
||||
tools.el.setEnabled($("stream-h264-bitrate-slider"), false);
|
||||
tools.el.setEnabled($("stream-desired-fps-slider"), false);
|
||||
tools.el.setEnabled($("stream-resolution-selector"), false);
|
||||
}
|
||||
|
||||
__streamer.ensureStream(state.streamer);
|
||||
@@ -549,15 +549,15 @@ export function Streamer() {
|
||||
var __setActive = function() {
|
||||
$("stream-led").className = "led-green";
|
||||
$("stream-led").title = "Stream is active";
|
||||
wm.setElementEnabled($("stream-screenshot-button"), true);
|
||||
wm.setElementEnabled($("stream-reset-button"), true);
|
||||
tools.el.setEnabled($("stream-screenshot-button"), true);
|
||||
tools.el.setEnabled($("stream-reset-button"), true);
|
||||
};
|
||||
|
||||
var __setInactive = function() {
|
||||
$("stream-led").className = "led-gray";
|
||||
$("stream-led").title = "Stream inactive";
|
||||
wm.setElementEnabled($("stream-screenshot-button"), false);
|
||||
wm.setElementEnabled($("stream-reset-button"), false);
|
||||
tools.el.setEnabled($("stream-screenshot-button"), false);
|
||||
tools.el.setEnabled($("stream-reset-button"), false);
|
||||
};
|
||||
|
||||
var __setInfo = function(is_active, online, text) {
|
||||
@@ -609,11 +609,11 @@ export function Streamer() {
|
||||
|
||||
var __clickModeRadio = function() {
|
||||
if (_Janus !== null) {
|
||||
let mode = tools.radioGetValue("stream-mode-radio");
|
||||
let mode = tools.radio.getValue("stream-mode-radio");
|
||||
tools.storage.set("stream.mode", mode);
|
||||
if (mode !== __streamer.getMode()) {
|
||||
tools.hiddenSetVisible($("stream-image"), (mode !== "janus"));
|
||||
tools.hiddenSetVisible($("stream-video"), (mode === "janus"));
|
||||
tools.hidden.setVisible($("stream-image"), (mode !== "janus"));
|
||||
tools.hidden.setVisible($("stream-video"), (mode === "janus"));
|
||||
if (mode === "janus") {
|
||||
__streamer.stopStream();
|
||||
__streamer = new _JanusStreamer(__setActive, __setInactive, __setInfo);
|
||||
|
||||
@@ -32,7 +32,7 @@ export function main() {
|
||||
if (checkBrowser()) {
|
||||
initWindowManager();
|
||||
|
||||
tools.setOnClick($("login-button"), __login);
|
||||
tools.el.setOnClick($("login-button"), __login);
|
||||
$("user-input").onkeyup = $("passwd-input").onkeyup = function(event) {
|
||||
if (event.code === "Enter") {
|
||||
event.preventDefault();
|
||||
@@ -75,9 +75,9 @@ function __login() {
|
||||
}
|
||||
|
||||
function __setEnabled(enabled) {
|
||||
wm.setElementEnabled($("user-input"), enabled);
|
||||
wm.setElementEnabled($("passwd-input"), enabled);
|
||||
wm.setElementEnabled($("login-button"), enabled);
|
||||
tools.el.setEnabled($("user-input"), enabled);
|
||||
tools.el.setEnabled($("passwd-input"), enabled);
|
||||
tools.el.setEnabled($("login-button"), enabled);
|
||||
}
|
||||
|
||||
function __tryAgain() {
|
||||
|
||||
@@ -24,7 +24,11 @@
|
||||
|
||||
|
||||
export var tools = new function() {
|
||||
this.setDefault = function(dict, key, value) {
|
||||
var self = this;
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
self.setDefault = function(dict, key, value) {
|
||||
if (!(key in dict)) {
|
||||
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();
|
||||
http.open(method, url, true);
|
||||
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);
|
||||
};
|
||||
|
||||
this.makeId = function() {
|
||||
self.makeId = function() {
|
||||
let chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let id = "";
|
||||
for (let count = 0; count < 16; ++count) {
|
||||
@@ -59,7 +63,7 @@ export var tools = new function() {
|
||||
return id;
|
||||
};
|
||||
|
||||
this.formatSize = function(size) {
|
||||
self.formatSize = function(size) {
|
||||
if (size > 0) {
|
||||
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];
|
||||
@@ -68,7 +72,7 @@ export var tools = new function() {
|
||||
}
|
||||
};
|
||||
|
||||
this.formatDuration = function(duration) {
|
||||
self.formatDuration = function(duration) {
|
||||
let millis = parseInt((duration % 1000) / 100);
|
||||
let secs = Math.floor((duration / 1000) % 60);
|
||||
let mins = Math.floor((duration / (1000 * 60)) % 60);
|
||||
@@ -81,125 +85,159 @@ export var tools = new function() {
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
this.getCookie = function(name) {
|
||||
let matches = document.cookie.match(new RegExp(
|
||||
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") + "=([^;]*)" // eslint-disable-line no-useless-escape
|
||||
));
|
||||
return (matches ? decodeURIComponent(matches[1]) : "");
|
||||
};
|
||||
|
||||
this.setOnClick = function(el, callback, prevent_default=true) {
|
||||
el.onclick = el.ontouchend = function(event) {
|
||||
if (prevent_default) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback();
|
||||
};
|
||||
};
|
||||
this.setOnDown = function(el, callback, prevent_default=true) {
|
||||
el.onmousedown = el.ontouchstart = function(event) {
|
||||
if (prevent_default) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback();
|
||||
};
|
||||
};
|
||||
this.setOnUp = function(el, callback, prevent_default=true) {
|
||||
el.onmouseup = el.ontouchend = function(event) {
|
||||
if (prevent_default) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback();
|
||||
self.el = new function() {
|
||||
return {
|
||||
"setOnClick": function(el, callback, prevent_default=true) {
|
||||
el.onclick = el.ontouchend = function(event) {
|
||||
if (prevent_default) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback();
|
||||
};
|
||||
},
|
||||
"setOnDown": function(el, callback, prevent_default=true) {
|
||||
el.onmousedown = el.ontouchstart = function(event) {
|
||||
if (prevent_default) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback();
|
||||
};
|
||||
},
|
||||
"setOnUp": function(el, callback, prevent_default=true) {
|
||||
el.onmouseup = el.ontouchend = function(event) {
|
||||
if (prevent_default) {
|
||||
event.preventDefault();
|
||||
}
|
||||
callback();
|
||||
};
|
||||
},
|
||||
"setEnabled": 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;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
this.sliderSetOnUp = function(el, delay, display_callback, execute_callback) {
|
||||
el.execution_timer = null;
|
||||
el.activated = false;
|
||||
|
||||
let clear_timer = function() {
|
||||
if (el.execution_timer) {
|
||||
clearTimeout(el.execution_timer);
|
||||
self.slider = new function() {
|
||||
return {
|
||||
"setOnUp": function(el, delay, display_callback, execute_callback) {
|
||||
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() {
|
||||
clear_timer();
|
||||
el.activated = true;
|
||||
};
|
||||
el.oninput = el.onchange = () => display_callback(el.value);
|
||||
|
||||
el.onmouseup = el.ontouchend = function(event) {
|
||||
let value = el.value;
|
||||
event.preventDefault();
|
||||
clear_timer();
|
||||
el.execution_timer = setTimeout(function() {
|
||||
execute_callback(value);
|
||||
}, delay);
|
||||
el.onmousedown = el.ontouchstart = function() {
|
||||
clear_timer();
|
||||
el.activated = true;
|
||||
};
|
||||
|
||||
el.onmouseup = el.ontouchend = function(event) {
|
||||
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;
|
||||
el.max = max;
|
||||
el.step = step;
|
||||
el.value = value;
|
||||
|
||||
self.radio = new function() {
|
||||
return {
|
||||
"makeItem": function(name, title, 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) {
|
||||
return `
|
||||
<input type="radio" id="${name}-${value}" name="${name}" value="${value}" />
|
||||
<label for="${name}-${value}">${title}</label>
|
||||
`;
|
||||
};
|
||||
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}%`;
|
||||
self.progress = new function() {
|
||||
return {
|
||||
"setValue": function(el, title, percent) {
|
||||
el.setAttribute("data-label", title);
|
||||
$(`${el.id}-value`).style.width = `${percent}%`;
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
this.hiddenSetVisible = function(el, visible) {
|
||||
el.classList.toggle("hidden", !visible);
|
||||
self.hidden = new function() {
|
||||
return {
|
||||
"setVisible": function(el, visible) {
|
||||
el.classList.toggle("hidden", !visible);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
this.featureSetEnabled = function(el, enabled) {
|
||||
el.classList.toggle("feature-disabled", !enabled);
|
||||
self.feature = new function() {
|
||||
return {
|
||||
"setEnabled": function(el, enabled) {
|
||||
el.classList.toggle("feature-disabled", !enabled);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
/************************************************************************/
|
||||
|
||||
let __debug = (new URL(window.location.href)).searchParams.get("debug");
|
||||
|
||||
this.debug = function(...args) {
|
||||
self.debug = function(...args) {
|
||||
if (__debug) {
|
||||
__log("DEBUG", ...args);
|
||||
}
|
||||
};
|
||||
this.info = (...args) => __log("INFO", ...args);
|
||||
this.error = (...args) => __log("ERROR", ...args);
|
||||
self.info = (...args) => __log("INFO", ...args);
|
||||
self.error = (...args) => __log("ERROR", ...args);
|
||||
|
||||
let __log = function(label, ...args) {
|
||||
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
|
||||
|
||||
// Opera 8.0+
|
||||
@@ -254,19 +315,7 @@ export var tools = new function() {
|
||||
"is_mac": is_mac,
|
||||
};
|
||||
};
|
||||
this.info("Browser:", this.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),
|
||||
};
|
||||
};
|
||||
self.info("Browser:", self.browser);
|
||||
};
|
||||
|
||||
export var $ = (id) => document.getElementById(id);
|
||||
|
||||
@@ -50,7 +50,7 @@ function __WindowManager() {
|
||||
|
||||
for (let el_button of $$("menu-button")) {
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -84,7 +84,7 @@ function __WindowManager() {
|
||||
let el_close_button = el_window.querySelector(".window-header .window-button-close");
|
||||
if (el_close_button) {
|
||||
el_close_button.title = "Close window";
|
||||
tools.setOnClick(el_close_button, function() {
|
||||
tools.el.setOnClick(el_close_button, function() {
|
||||
__closeWindow(el_window);
|
||||
__activateLastWindow(el_window);
|
||||
});
|
||||
@@ -93,7 +93,7 @@ function __WindowManager() {
|
||||
let el_maximize_button = el_window.querySelector(".window-header .window-button-maximize");
|
||||
if (el_maximize_button) {
|
||||
el_maximize_button.title = "Maximize window";
|
||||
tools.setOnClick(el_maximize_button, function() {
|
||||
tools.el.setOnClick(el_maximize_button, function() {
|
||||
__maximizeWindow(el_window);
|
||||
__activateLastWindow(el_window);
|
||||
});
|
||||
@@ -102,7 +102,7 @@ function __WindowManager() {
|
||||
let el_orig_button = el_window.querySelector(".window-header .window-button-original");
|
||||
if (el_orig_button) {
|
||||
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.height = "";
|
||||
__centerWindow(el_window);
|
||||
@@ -113,7 +113,7 @@ function __WindowManager() {
|
||||
let el_full_screen_button = el_window.querySelector(".window-header .window-button-full-screen");
|
||||
if (el_full_screen_button && __getFullScreenFunction(el_window)) {
|
||||
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);
|
||||
__activateLastWindow(el_window);
|
||||
});
|
||||
@@ -121,7 +121,7 @@ function __WindowManager() {
|
||||
}
|
||||
|
||||
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;
|
||||
@@ -188,13 +188,13 @@ function __WindowManager() {
|
||||
if (cancel) {
|
||||
var el_cancel_button = document.createElement("button");
|
||||
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);
|
||||
}
|
||||
if (ok) {
|
||||
var el_ok_button = document.createElement("button");
|
||||
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);
|
||||
}
|
||||
if (ok && cancel) {
|
||||
@@ -220,26 +220,6 @@ function __WindowManager() {
|
||||
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) {
|
||||
let showed = false;
|
||||
if (!self.isWindowVisible(el_window)) {
|
||||
|
||||
Reference in New Issue
Block a user