Added export and import settings #58

4 files changed, 42 insertions, 26 deletions

diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index 9cb247ef..7335d254 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -120,17 +120,23 @@
         <option value="dark-theme">Dark</option>
       </select>
     </div>
+
+
+
     <div class="buttons buttons-inline">
       <a class="button button-inline" id="update-instances">
-        <span>Update Instances</span>
+        Update Instances
       </a>
-    </div>
-
-    <!-- <div class="buttons buttons-inline">
+      &nbsp; &nbsp;
+      <label for="import-settings" class="button button-inline">
+        Import Settings
+        <input type="file" class="button button-inline" style="display:none;" id="import-settings">
+      </label>
+      &nbsp; &nbsp;
       <a class="button button-inline" id="export-settings">
-        <span>Export Settings</span>
+        Export Settings
       </a>
-    </div> -->
+    </div>
 
     <div class="some-block option-block">
       <h4>Exceptions</h4>
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 0a0d41c3..302f44d5 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -20,21 +20,34 @@ themeElement.addEventListener("change", (event) => {
   browser.storage.local.set({ theme: value });
 });
 
-document.querySelector("#update-instances").addEventListener("click", () => {
-  document.querySelector("#update-instances").innerHTML = '...';
+document.getElementById("update-instances").addEventListener("click", () => {
+  document.getElementById("update-instances").innerHTML = '...';
   if (commonHelper.updateInstances()) {
-    document.querySelector("#update-instances").innerHTML = 'Done!';
+    document.getElementById("update-instances").innerHTML = 'Done!';
     new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
-      () => document.querySelector("#update-instances").innerHTML = 'Update Instances'
+      () => document.getElementById("update-instances").innerHTML = 'Update Instances'
     )
   }
   else
-    document.querySelector("#update-instances").innerHTML = 'Failed Miserabely';
+    document.getElementById("update-instances").innerHTML = 'Failed Miserabely';
 });
 
-// document.querySelector("#export-settings").addEventListener("click", () => {
-//   browser.storage.local.get(null, result => console.log(result))
-// });
+let exportSettingsElement = document.getElementById("export-settings");
+browser.storage.local.get(null, result => {
+  let resultString = JSON.stringify(result, null, '  ');
+  exportSettingsElement.href = 'data:application/json;base64,' + btoa(resultString);
+  exportSettingsElement.download = 'libredirect-settings.json';
+});
+
+let importSettingsElement = document.getElementById("import-settings");
+importSettingsElement.addEventListener("change",
+  _ => {
+    let file = importSettingsElement.files[0];
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = () => browser.storage.local.set({ ...JSON.parse(reader.result) })
+    reader.onerror = error => reject(error);
+  })
 
 let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
 let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index e2aaf5ae..3fd398e0 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -77,7 +77,7 @@ themeElement.addEventListener("change",
 );
 
 let volumeElement = document.getElementById("invidious-volume");
-let volumeValueElement = document.querySelector("#volume-value");
+let volumeValueElement = document.getElementById("volume-value");
 volumeElement.addEventListener("input",
     () => {
         youtubeHelper.setVolume(volumeElement.value);
diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css
index ab300d4a..593661af 100644
--- a/src/pages/stylesheets/styles.css
+++ b/src/pages/stylesheets/styles.css
@@ -17,7 +17,7 @@ body {
   font-family: Sans-Serif;
   background-color: var(--bg-main);
   color: var(--text);
-  overflow-x:hidden
+  overflow-x: hidden
 }
 
 div.some-block input[type="checkbox"] {
@@ -61,17 +61,14 @@ select {
   border-radius: 3px;
 }
 
-/* a.button * {
-  vertical-align: middle;
-} */
 
-a.button:hover {
+.button:hover {
   background-color: var(--active);
   color: var(--text);
   stroke: var(--text);
 }
 
-a.button:active {
+.button:active {
   background-color: var(--active);
   box-shadow: 0 var(--space) var(--bg-main);
   transform: translateY(4px);
@@ -213,9 +210,10 @@ div.buttons {
   margin-top: 15px;
 }
 
-a.button {
+.button {
   stroke: var(--text);
   display: flex;
+  text-align: center;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
@@ -223,7 +221,6 @@ a.button {
   color: var(--text);
   font-size: 12px;
   font-weight: bold;
-  /* width: 180px; */
   margin: 8px 20px;
   padding: 10px;
   text-decoration: none;
@@ -237,18 +234,18 @@ div.buttons-inline {
   padding: 0 15px;
 }
 
-a.button-inline {
+.button-inline {
   display: inline-block;
   margin: 7.5px 0;
 }
 
-a.button:hover {
+.button:hover {
   background-color: var(--active);
   color: var(--text);
   stroke: var(--text);
 }
 
-a.button:active {
+.button:active {
   background-color: var(--active);
   box-shadow: 0 var(--space) var(--bg-main);
   transform: translateY(1px);