cyp/app/js/settings.js
Ondrej Zara 82d1d1a78a volume
2019-04-09 16:08:09 +02:00

63 lines
1.4 KiB
JavaScript

import * as mpd from "./lib/mpd.js";
let node;
let inputs = {};
const prefix = "cyp";
function loadFromStorage(key, def) {
return localStorage.getItem(`${prefix}-${key}`) || def;
}
function saveToStorage(key, value) {
return localStorage.setItem(`${prefix}-${key}`, value);
}
function load() {
let theme = loadFromStorage("theme", "dark");
inputs.theme.value = theme;
setTheme(theme);
let color = loadFromStorage("color", "dodgerblue");
inputs.color.forEach(input => {
input.checked = (input.value == color);
input.parentNode.style.color = input.value;
});
setColor(color);
}
function setTheme(theme) {
saveToStorage("theme", theme);
document.documentElement.dataset.theme = theme;
}
function setColor(color) {
saveToStorage("color", color);
document.documentElement.dataset.color = color;
}
async function setVolume(volume) {
mpd.command(`setvol ${volume}`);
}
export async function notifyVolume(volume) {
inputs.volume.value = volume;
}
export async function activate() {}
export function init(n) {
node = n;
inputs.theme = n.querySelector("[name=theme]");
inputs.color = Array.from(n.querySelectorAll("[name=color]"));
inputs.volume = n.querySelector("[name=volume]");
load();
inputs.theme.addEventListener("change", e => setTheme(e.target.value));
inputs.color.forEach(input => {
input.addEventListener("click", e => setColor(e.target.value));
});
inputs.volume.addEventListener("input", e => setVolume(e.target.valueAsNumber));
}