Added proxiTok settings #197

3 files changed, 103 insertions, 49 deletions

diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 9fb5589a..91160ecf 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -47,7 +47,6 @@ document.addEventListener("change", async () => {
 
 
 window.onblur = () => {
-    console.log('initting cookies')
     redditHelper.initLibredditCookies();
     redditHelper.initTedditCookies();
 }
diff --git a/src/pages/options/tiktok/tiktok.html b/src/pages/options/tiktok/tiktok.html
index 67fc2488..9aff1e47 100644
--- a/src/pages/options/tiktok/tiktok.html
+++ b/src/pages/options/tiktok/tiktok.html
@@ -69,8 +69,34 @@
         <option value="tor" data-localise="__MSG_tor__">Tor</option>
       </select>
     </div>
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_enableCustomSettings__">Enable Custom Settings (will use cookies)</h4>
+      <input id="enable-custom-settings" type="checkbox">
+    </div>
     <div id="proxiTok">
       <hr>
+      <div class="custom-settings">
+        <div class="some-block option-block">
+          <h2>General</h2>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_theme__">Theme</h4>
+          <select class="theme">
+            <option value="default">Default</option>
+            <option value="card">Card</option>
+          </select>
+        </div>
+        <div class="some-block option-block">
+          <h2>Api</h2>
+        </div>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_legacyMode__">Legacy mode</h4>
+          <select class="api-legacy">
+            <option value="on">On</option>
+            <option value="off">Off</option>
+          </select>
+        </div>
+      </div>
       <div class="normal">
                 <div class="some-block option-block">
                   <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
diff --git a/src/pages/options/tiktok/tiktok.js b/src/pages/options/tiktok/tiktok.js
index 35cc6685..299664db 100644
--- a/src/pages/options/tiktok/tiktok.js
+++ b/src/pages/options/tiktok/tiktok.js
@@ -1,64 +1,93 @@
 import tiktokHelper from "../../../assets/javascripts/helpers/tiktok.js";
 import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
-let disableTiktokElement = document.getElementById("disable-tiktok");
-disableTiktokElement.addEventListener("change",
-    event => tiktokHelper.setDisable(!event.target.checked)
-);
+let disable = document.getElementById("disable-tiktok");
+let protocol = document.getElementById("protocol")
 
-let protocolElement = document.getElementById("protocol")
-protocolElement.addEventListener("change",
-    event => {
-        let protocol = event.target.options[protocolElement.selectedIndex].value
-        tiktokHelper.setProtocol(protocol);
-        changeProtocolSettings(protocol);
-    }
-);
+let enableCustomSettings = document.getElementById("enable-custom-settings");
+let customSettingsDiv = document.getElementsByClassName("custom-settings")[0];
 
-function changeProtocolSettings(protocol) {
-    let normalDiv = document.getElementsByClassName("normal")[0];
-    let torDiv = document.getElementsByClassName("tor")[0];
-    if (protocol == 'normal') {
-        normalDiv.style.display = 'block';
-        torDiv.style.display = 'none';
-    }
-    else if (protocol == 'tor') {
-        normalDiv.style.display = 'none';
-        torDiv.style.display = 'block';
-    }
-}
+let theme = document.getElementById('proxiTok').getElementsByClassName('theme')[0];
+let api_legacy = document.getElementById('proxiTok').getElementsByClassName('api-legacy')[0];
+
+document.addEventListener("change", async () => {
+    await browser.storage.local.set({
+        disableTiktok: !disable.checked,
+        tiktokProtocol: protocol.value,
+
+        enableTiktokCustomSettings: enableCustomSettings.checked,
+
+        proxiTokTheme: theme.value,
+        proxiTokApiLegacy: api_legacy.value,
+
+    });
+    init();
+})
+
+window.onblur = tiktokHelper.initProxiTokCookies;
+
+function init() {
+    tiktokHelper.init().then(() => {
+        browser.storage.local.get(
+            [
+                "disableTiktok",
+                "tiktokProtocol",
+
+                "enableTiktokCustomSettings",
 
-tiktokHelper.init().then(() => {
-    disableTiktokElement.checked = !tiktokHelper.getDisable();
+                "proxiTokTheme",
+                "proxiTokApiLegacy",
+            ],
+            r => {
+                disable.checked = !r.disableTiktok;
+                protocol.value = r.tiktokProtocol;
+                let normalDiv = document.getElementsByClassName("normal")[0];
+                let torDiv = document.getElementsByClassName("tor")[0];
+                if (r.tiktokProtocol == 'normal') {
+                    normalDiv.style.display = 'block';
+                    torDiv.style.display = 'none';
+                }
+                else if (r.tiktokProtocol == 'tor') {
+                    normalDiv.style.display = 'none';
+                    torDiv.style.display = 'block';
+                }
 
-    let protocol = tiktokHelper.getProtocol();
-    protocolElement.value = protocol;
-    changeProtocolSettings(protocol);
+                enableCustomSettings.checked = r.enableTiktokCustomSettings;
+                if (r.enableTiktokCustomSettings)
+                    customSettingsDiv.style.display = 'block';
+                else
+                    customSettingsDiv.style.display = 'none';
 
-    browser.storage.local.get("proxiTokLatency").then(r => {
+                theme.value = r.proxiTokTheme;
+                api_legacy.value = r.proxiTokApiLegacy
+            }
+        )
+        browser.storage.local.get("proxiTokLatency").then(r => {
+            commonHelper.processDefaultCustomInstances(
+                'proxiTok',
+                'normal',
+                tiktokHelper,
+                document,
+                tiktokHelper.getProxiTokNormalRedirectsChecks,
+                tiktokHelper.setProxiTokNormalRedirectsChecks,
+                tiktokHelper.getProxiTokNormalCustomRedirects,
+                tiktokHelper.setProxiTokNormalCustomRedirects,
+                r.proxiTokLatency,
+            );
+        })
         commonHelper.processDefaultCustomInstances(
             'proxiTok',
-            'normal',
+            'tor',
             tiktokHelper,
             document,
-            tiktokHelper.getProxiTokNormalRedirectsChecks,
-            tiktokHelper.setProxiTokNormalRedirectsChecks,
-            tiktokHelper.getProxiTokNormalCustomRedirects,
-            tiktokHelper.setProxiTokNormalCustomRedirects,
-            r.proxiTokLatency,
-        );
+            tiktokHelper.getProxiTokTorRedirectsChecks,
+            tiktokHelper.setProxiTokTorRedirectsChecks,
+            tiktokHelper.getProxiTokTorCustomRedirects,
+            tiktokHelper.setProxiTokTorCustomRedirects
+        )
     })
-    commonHelper.processDefaultCustomInstances(
-        'proxiTok',
-        'tor',
-        tiktokHelper,
-        document,
-        tiktokHelper.getProxiTokTorRedirectsChecks,
-        tiktokHelper.setProxiTokTorRedirectsChecks,
-        tiktokHelper.getProxiTokTorCustomRedirects,
-        tiktokHelper.setProxiTokTorCustomRedirects
-    )
-})
+}
+init();
 
 let latencyElement = document.getElementById("latency");
 let latencyLabel = document.getElementById("latency-label");