Adding more settings and combining theme in the general page #80

5 files changed, 55 insertions, 61 deletions

diff --git a/src/pages/options/general/general.html b/src/pages/options/general/general.html
index ddfa931d..cf9615e7 100644
--- a/src/pages/options/general/general.html
+++ b/src/pages/options/general/general.html
@@ -90,13 +90,18 @@
     <div class="some-block option-block">
       <h4>Theme</h4>
       <select id="theme">
-        <option value="">System</option>
-        <option value="light-theme">Light</option>
-        <option value="dark-theme">Dark</option>
+        <option value="DEFAULT">System</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
       </select>
     </div>
 
     <div class="some-block option-block">
+      <h4>Apply Theme to sites</h4>
+      <input id="apply-theme-to-sites" type="checkbox" checked />
+    </div>
+
+    <div class="some-block option-block">
       <h4>Always use Preferred Instances</h4>
       <input id="always-use-preferred" type="checkbox" checked />
     </div>
diff --git a/src/pages/options/general/general.js b/src/pages/options/general/general.js
index 344af4aa..22c88143 100644
--- a/src/pages/options/general/general.js
+++ b/src/pages/options/general/general.js
@@ -4,43 +4,33 @@ window.browser = window.browser || window.chrome;
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 import generalHelper from "../../../assets/javascripts/helpers/general.js";
 
-let themeElement = document.getElementById("theme");
-
 
-browser.storage.local.get(
-  ["theme"],
-  (result) => {
-    themeElement.value = result.theme || "";
-
-  }
-);
-
-themeElement.addEventListener("change", (event) => {
-  const value = event.target.options[theme.selectedIndex].value;
-  browser.storage.local.set({ theme: value });
-});
 
-document.getElementById("update-instances").addEventListener("click", () => {
-  let oldHtml = document.getElementById("update-instances").innerHTML
-  document.getElementById("update-instances").innerHTML = '...';
+let updateInstancesElement = document.getElementById("update-instances");
+updateInstancesElement.addEventListener("click", () => {
+  let oldHtml = updateInstancesElement.innerHTML
+  updateInstancesElement.innerHTML = '...';
   if (commonHelper.updateInstances()) {
-    document.getElementById("update-instances").innerHTML = 'Done!';
+    updateInstancesElement.innerHTML = 'Done!';
     new Promise(resolve => setTimeout(resolve, 1500)).then( // sleep 1500ms
-      () => document.getElementById("update-instances").innerHTML = oldHtml
+      () => updateInstancesElement.innerHTML = oldHtml
     )
   }
   else
-    document.getElementById("update-instances").innerHTML = 'Failed Miserabely';
+    updateInstancesElement.innerHTML = 'Failed Miserabely';
 });
 
 let exportSettingsElement = document.getElementById("export-settings");
 
 function exportSettings() {
-  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';
-  });
+  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';
+    }
+  );
 }
 exportSettings();
 
@@ -59,7 +49,6 @@ importSettingsElement.addEventListener("change",
 );
 
 let resetSettingsElement = document.getElementById("reset-settings");
-
 resetSettingsElement.addEventListener("click",
   () => {
     console.log("reset");
@@ -73,12 +62,24 @@ alwaysUsePreferredElement.addEventListener("change",
   event => generalHelper.setAlwaysUsePreferred(event.target.checked)
 );
 
+let applyThemeToSitesElement = document.getElementById("apply-theme-to-sites")
+applyThemeToSitesElement.addEventListener("change",
+  event => generalHelper.setApplyThemeToSites(event.target.checked)
+);
+let themeElement = document.getElementById("theme");
+themeElement.addEventListener("change", event => {
+  const value = event.target.options[theme.selectedIndex].value;
+  generalHelper.setTheme(value);
+})
+
 let nameCustomInstanceInput = document.getElementById("exceptions-custom-instance");
 let instanceTypeElement = document.getElementById("exceptions-custom-instance-type");
 let instanceType = "url"
 
 generalHelper.init().then(() => {
   alwaysUsePreferredElement.checked = generalHelper.getAlwaysUsePreferred();
+  themeElement.value = generalHelper.getTheme();
+  applyThemeToSitesElement.checked = generalHelper.getApplyThemeToSites();
   console.log("generalHelper.getAlwaysUsePreferred()");
   instanceTypeElement.addEventListener("change",
     (event) => {
diff --git a/src/pages/options/init.js b/src/pages/options/init.js
index 6b196bfa..60958682 100644
--- a/src/pages/options/init.js
+++ b/src/pages/options/init.js
@@ -1,27 +1,30 @@
 window.browser = window.browser || window.chrome;
 
 function changeTheme() {
-    browser.storage.local.get("theme", (result) => {
-        switch (result.theme) {
-            case "dark-theme":
-                document.body.classList.add("dark-theme");
-                document.body.classList.remove("light-theme");
-                break;
-            case "light-theme":
-                document.body.classList.add("light-theme");
-                document.body.classList.remove("dark-theme");
-                break;
-            default:
-                if (matchMedia("(prefers-color-scheme: light)").matches) {
-                    document.body.classList.add("light-theme");
-                    document.body.classList.remove("dark-theme");
-                } else {
+    browser.storage.local.get(
+        "theme",
+        result => {
+            switch (result.theme) {
+                case "dark":
                     document.body.classList.add("dark-theme");
                     document.body.classList.remove("light-theme");
-                }
+                    break;
+                case "light":
+                    document.body.classList.add("light-theme");
+                    document.body.classList.remove("dark-theme");
+                    break;
+                default:
+                    if (matchMedia("(prefers-color-scheme: light)").matches) {
+                        document.body.classList.add("light-theme");
+                        document.body.classList.remove("dark-theme");
+                    } else {
+                        document.body.classList.add("dark-theme");
+                        document.body.classList.remove("light-theme");
+                    }
 
+            }
         }
-    })
+    )
 }
 
 changeTheme()
diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 27c0ceff..347e9221 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -156,15 +156,6 @@
       </div>
 
       <div class="some-block option-block">
-        <h4>Theme</h4>
-        <select id="invidious-theme">
-          <option value="DEFAULT">Default</option>
-          <option value="dark">Dark</option>
-          <option value="light">Light</option>
-        </select>
-      </div>
-
-      <div class="some-block option-block">
         <h4>Autoplay Video</h4>
         <select id="invidious-autoplay">
           <option value="DEFAULT">Default</option>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index 61c02e98..e480814a 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -86,11 +86,6 @@ disableYoutubeElement.addEventListener("change",
     event => youtubeHelper.setDisable(!event.target.checked)
 );
 
-let themeElement = document.getElementById("invidious-theme");
-themeElement.addEventListener("change",
-    event => youtubeHelper.setTheme(event.target.options[themeElement.selectedIndex].value)
-);
-
 let volumeElement = document.getElementById("invidious-volume");
 let volumeValueElement = document.getElementById("volume-value");
 volumeElement.addEventListener("input",
@@ -166,7 +161,6 @@ function changeProtocolSettings(protocol) {
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisable();
-    themeElement.value = youtubeHelper.getTheme();
     volumeElement.value = youtubeHelper.getVolume();
     volumeValueElement.textContent = `${youtubeHelper.getVolume()}%`;
     OnlyEmbeddedVideoElement.value = youtubeHelper.getOnlyEmbeddedVideo();