Skip to content
Snippets Groups Projects
Verified Commit 997a90b9 authored by Janne Mareike Koschinski's avatar Janne Mareike Koschinski
Browse files

Make it easier to create themes

parent 32f309db
No related branches found
No related tags found
No related merge requests found
Pipeline #2599 passed
......@@ -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>
......
......@@ -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", () => {
data.addEventListener("keyup", () => {
try {
load(JSON.parse(data.value));
} catch (_) {
// ignore
}
});
buttonSave.addEventListener("click", () => {
data.addEventListener("blur", () => {
try {
load(JSON.parse(data.value));
data.value = JSON.stringify(save());
} catch (_) {
// ignore
}
});
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());
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment