Added options menu items, implimented darkmode, thank goodnes

This commit is contained in:
2025-08-18 19:54:13 -06:00
parent 7b3aa42ef8
commit b179df140c
2 changed files with 80 additions and 4 deletions

23
main.js
View File

@@ -51,6 +51,15 @@ function systemMsg (message,level=0) { // abstraction?
// but later we will also have it push an error toast in the ui.
}
function toggleDarkmode () {
var html = document.documentElement;
if (html.classList.contains("darkmode")) {
html.classList.remove("darkmode");
} else {
html.classList.add("darkmode");
}
}
function inRange(target,min,max) {
if (isNaN(target) || isNaN(min) || isNaN(max)) { return false; }
return (min <= target && target <= max);
@@ -180,11 +189,11 @@ app.gui.view.id = "view";
app.gui.main.appendChild(app.gui.view);
// Library popup
app.gui.library = new auxillery_dialog("Library");
app.gui.library.body.classList.add("dialog_body");
app.gui.library.body.classList.add("library_body");
app.gui.main.append(app.gui.library.root);
// Options popup
app.gui.options = new auxillery_dialog("Options");
app.gui.options.body.classList.add("dialog_body");
app.gui.options.body.classList.add("options_body");
app.gui.main.append(app.gui.options.root);
app.gui.optionsButton.addEventListener("click", ()=>{ app.gui.options.root.classList.add("focused") });
// pre-populate grid with emptys
@@ -222,15 +231,23 @@ app.options = {};
app.options.darkmode = false; // should always be an option
app.options.audioFeedback = false; // read word aloude
app.options.feedbackFloodLimit = 3;
app.options.feedbackTimeout = 60000; // 60 seconds
app.options.feedbackTimeout = 60; // 60 seconds
// overload defaults with options stored in localstorage
// build Options UI
app.gui.options_darkmode = document.createElement("div");
app.gui.options.body.appendChild(app.gui.options_darkmode);
app.gui.options_darkmode.innerHTML = '<label for="darkmode-checkbox">Darkmode</label> <input id="darkmode-checkbox" type="checkbox" class="dm-indicator" />';
app.gui.options_darkmode.addEventListener("change", toggleDarkmode);
app.gui.options_audioFeedback = document.createElement("div");
app.gui.options.body.appendChild(app.gui.options_audioFeedback);
app.gui.options_audioFeedback.innerHTML = '<label for="audio-feedback-toggle">Read Allowed</label> <input id="audio-feedback-toggle" type="checkbox" class="toggle-switch" />';
app.gui.options_feedbackFloodLimit = document.createElement("div");
app.gui.options.body.appendChild(app.gui.options_feedbackFloodLimit);
app.gui.options_feedbackFloodLimit.innerHTML = '<label for="flood-limit">Audio Flood Limit</label> <input id="flood-limit" type="number" min=1 step=2 max=10 />';
app.gui.options_feedbackTimeout = document.createElement("div");
app.gui.options.body.appendChild(app.gui.options_feedbackTimeout);
app.gui.options_feedbackTimeout.innerHTML = '<label for="flood-timeout">Audio Flood Timeout</label> <input id="flood-timeout" type="number" min=0 step=10 />';