From 82bc5ada8b640afed177bae73ca1767a00f4d4dc Mon Sep 17 00:00:00 2001
From: Janne Mareike Koschinski <janne@kuschku.de>
Date: Sun, 14 Nov 2021 17:02:39 +0100
Subject: [PATCH] feat: simplify theme creation through file-based save/load
---
src/index.html | 4 ++--
src/script.js | 46 ++++++++++++++++++----------------------------
src/style.css | 4 ++++
3 files changed, 24 insertions(+), 30 deletions(-)
diff --git a/src/index.html b/src/index.html
index 16866d3..975b313 100644
--- a/src/index.html
+++ b/src/index.html
@@ -307,8 +307,8 @@
<div class="container control">
<div class="controls">
<div class="io">
- <input id="data" />
- <button id="copy">Copy</button>
+ <button id="save">Save Theme</button><button><label for="load">Load Theme</label></button>
+ <input id="load" type="file" accept=".json,application/json"/>
</div>
<div class="io">
<button id="loadMaterialLight">Load Material Light</button>
diff --git a/src/script.js b/src/script.js
index 080e0a4..4d4696f 100644
--- a/src/script.js
+++ b/src/script.js
@@ -55,9 +55,6 @@ function updateColor(id, skipSave) {
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) {
@@ -115,37 +112,34 @@ function save() {
return json;
}
+function download(filename, content) {
+ const element = document.createElement("a");
+ const data = new Blob([content], {type : 'application/json'});
+ element.setAttribute("href", URL.createObjectURL(data));
+ element.setAttribute("download", filename);
+ element.style.display = "none";
+ document.body.appendChild(element);
+ element.click();
+ document.body.removeChild(element);
+}
+
const data = document.getElementById("data");
-const buttonCopy = document.getElementById("copy");
+const buttonSave = document.getElementById("save");
+const inputLoad = document.getElementById("load");
-data.addEventListener("keyup", () => {
- try {
- load(JSON.parse(data.value));
- } catch (_) {
- // ignore
- }
+buttonSave.addEventListener("click", () => {
+ download("quasseldroid-theme.json", JSON.stringify(save()));
});
-
-data.addEventListener("blur", () => {
- try {
- load(JSON.parse(data.value));
- data.value = JSON.stringify(save());
- } catch (_) {
- // ignore
+inputLoad.addEventListener("change", () => {
+ if (inputLoad.files) {
+ inputLoad.files[0].text().then(raw => load(JSON.parse(raw)));
}
});
-buttonCopy.addEventListener("click", () => {
- data.value = JSON.stringify(save());
- data.select();
- document.execCommand("copy");
-});
-
themes.forEach((theme) => {
const button = document.getElementById("load"+theme);
button.addEventListener("click", () => {
load(themeData[theme]);
- data.value = JSON.stringify(save());
});
});
@@ -156,9 +150,6 @@ function updateOption(option, skipSave) {
} else {
delete cssRoot.dataset[option];
}
- if (skipSave !== true) {
- data.value = JSON.stringify(save());
- }
}
options.forEach((option) => {
@@ -168,4 +159,3 @@ options.forEach((option) => {
});
updateOption(option, true);
});
-data.value = JSON.stringify(save());
diff --git a/src/style.css b/src/style.css
index f352ddc..30546a2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -11,6 +11,10 @@ body {
align-items: center;
}
+input#load {
+ display: none;
+}
+
.column {
display: flex;
flex-direction: column;
--
GitLab