[#56] Add settings export

cpiber · Dec 26, 2023 · 43b8ab6 · 43b8ab6
1 parent b7b7761
commit 43b8ab6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 3 deletions.
diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
@@ -323,6 +323,14 @@
     "message": "Speichern",
     "description": "'save' button."
   },
+  "buttonExport": {
+    "message": "Einstellungen exportieren",
+    "description": "'export' button."
+  },
+  "buttonImport": {
+    "message": "Einstellungen importieren",
+    "description": "'import' button."
+  },
   "playerSpeed": {
     "message": "Geschwindigkeit",
     "description": "'Speed' text im scroll dial Tooltip."

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
@@ -323,6 +323,14 @@
     "message": "Save",
     "description": "Common 'save' button."
   },
+  "buttonExport": {
+    "message": "Export options",
+    "description": "Common 'export' button."
+  },
+  "buttonImport": {
+    "message": "Import options",
+    "description": "Common 'import' button."
+  },
   "playerSpeed": {
     "message": "Speed",
     "description": "'Speed' text in scroll dial tooltip."

diff --git a/src/options.html b/src/options.html
@@ -234,7 +234,11 @@ <h3 class="enhancer-field-title i18n">__MSG_optionsHideVideosTitle__</h3>
       </main>
 
       <footer>
-        <p><button type="submit" class="i18n enhancer-button">__MSG_buttonSave__</button></p>
+        <p>
+          <button type="submit" class="i18n enhancer-button">__MSG_buttonSave__</button>
+          <a href="#save" class="i18n small-text">__MSG_buttonExport__</a>
+          <a href="#load" class="i18n small-text">__MSG_buttonImport__</a>
+        </p>
         <span class="hint i18n">__MSG_optionsButtonSaveNote__</span>
         <p class="hint i18n">__MSG_credits__</p>
       </footer>

diff --git a/src/scripts/options.ts b/src/scripts/options.ts
@@ -80,6 +80,25 @@ load(true)
   .then(hChange)
   .then(vidChange);
 
+document.querySelector('[href="#save"]').addEventListener('click', async e => {
+  e.preventDefault();
+  const opt = await getFromStorage<Record<string, any>>();
+  delete opt['lastVersion'];
+  delete opt['lastpurged'];
+  const blob = new Blob([JSON.stringify(opt)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const elem = document.createElement('a');
+  try {
+    elem.href = url;
+    elem.download = 'settings.json';
+    document.body.appendChild(elem);
+    elem.click();
+  } finally {
+    document.body.removeChild(elem);
+    URL.revokeObjectURL(url);
+  }
+});
+
 // changelog
 (async () => {
   standalone(document.body.classList.contains('standalone'));

diff --git a/src/styles/options.scss b/src/styles/options.scss
@@ -65,13 +65,21 @@ form {
   margin-top: 24px;
 }
 
-.hint {
-  display: block;
+.hint,
+.small-text {
   font-size: 12px;
   opacity: 0.6;
   margin: 8px 0 0;
 }
 
+.small-text[href="#save"] {
+  margin-left: 20px;
+}
+
+.small-text[href="#load"] {
+  margin-left: 5px;
+}
+
 label + .enhancer-control,
 .hint + .enhancer-control {
   margin-top: 8px;