From 997a90b9cc3179574011cfc8768cf66e017c1728 Mon Sep 17 00:00:00 2001 From: Janne Mareike Koschinski <janne@kuschku.de> Date: Sun, 14 Nov 2021 16:41:59 +0100 Subject: [PATCH] Make it easier to create themes --- src/index.html | 3 +-- src/script.js | 44 +++++++++++++++++++++++++++++++------------- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/src/index.html b/src/index.html index 12bbb9d..16866d3 100644 --- a/src/index.html +++ b/src/index.html @@ -307,9 +307,8 @@ <div class="container control"> <div class="controls"> <div class="io"> - <button id="load">Load</button> - <button id="save">Save</button> <input id="data" /> + <button id="copy">Copy</button> </div> <div class="io"> <button id="loadMaterialLight">Load Material Light</button> diff --git a/src/script.js b/src/script.js index 736d26d..080e0a4 100644 --- a/src/script.js +++ b/src/script.js @@ -45,15 +45,19 @@ colors.forEach((id) => { inputColor.addEventListener("change", change); inputOpacity.addEventListener("change", change); inputOpacity.addEventListener("mousemove", change); + updateColor(id, true); }); -function updateColor(id) { +function updateColor(id, skipSave) { const inputColor = document.getElementById(id+"-color"); const inputOpacity = document.getElementById(id+"-opacity"); const color = inputColor.value; const opacity = inputOpacity.value / 255.0; cssRoot.style.setProperty("--"+id, hexToRgba(color, opacity)); + if (skipSave !== true) { + data.value = JSON.stringify(save()); + } } function normalizeColor(value) { @@ -88,7 +92,7 @@ function load(json) { inputColor.value = data.color; inputOpacity.value = data.opacity; - updateColor(id); + updateColor(id, true); }); } @@ -112,18 +116,30 @@ function save() { } const data = document.getElementById("data"); -const buttonSave = document.getElementById("save"); -const buttonLoad = document.getElementById("load"); +const buttonCopy = document.getElementById("copy"); -buttonLoad.addEventListener("click", () => { - load(JSON.parse(data.value)); +data.addEventListener("keyup", () => { + try { + load(JSON.parse(data.value)); + } catch (_) { + // ignore + } }); -buttonSave.addEventListener("click", () => { - data.value = JSON.stringify(save()); +data.addEventListener("blur", () => { + try { + load(JSON.parse(data.value)); + data.value = JSON.stringify(save()); + } catch (_) { + // ignore + } }); -data.value = JSON.stringify(save()); +buttonCopy.addEventListener("click", () => { + data.value = JSON.stringify(save()); + data.select(); + document.execCommand("copy"); +}); themes.forEach((theme) => { const button = document.getElementById("load"+theme); @@ -133,13 +149,16 @@ themes.forEach((theme) => { }); }); -function updateOption(option) { +function updateOption(option, skipSave) { const input = document.getElementById(option); if (input.checked) { cssRoot.dataset[option] = undefined; } else { delete cssRoot.dataset[option]; } + if (skipSave !== true) { + data.value = JSON.stringify(save()); + } } options.forEach((option) => { @@ -147,7 +166,6 @@ options.forEach((option) => { input.addEventListener("change", () => { updateOption(option); }); - updateOption(option); + updateOption(option, true); }); - -load(JSON.parse(data.value)); +data.value = JSON.stringify(save()); -- GitLab