Reorganized pug files. Added Unify settings to libreddit #234

3 files changed, 86 insertions, 141 deletions

diff --git a/src/pages/options/reddit/reddit.html b/src/pages/options/reddit/reddit.html
index 6fa9090d..e3fc40d9 100644
--- a/src/pages/options/reddit/reddit.html
+++ b/src/pages/options/reddit/reddit.html
@@ -78,92 +78,22 @@
       <input id="bypass-watch-on-reddit" type="checkbox">
     </div>
     <div id="libreddit">
+      <hr>
       <div class="some-block option-block">
-        <h4 data-localise="__MSG_enableCustomSettings__">Enable Custom Settings (will use cookies)</h4>
-        <input id="enable-libreddit-custom-settings" type="checkbox">
+        <h4>Unify cookies across selected instances</h4>
       </div>
-      <hr>
-      <div class="custom-settings"> 
-        <div class="some-block option-block">
-          <h2>Appearance</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_theme__">Theme</h4>
-          <select class="theme">
-            <option value="system">System</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-            <option value="black">Black</option>
-            <option value="dracula">Dracula</option>
-            <option value="nord">Nord</option>
-            <option value="laserwave">Laserwave</option>
-            <option value="violet">Violet</option>
-            <option value="gold">Gold</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h2>Interface</h2>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_frontPage__">Front page</h4>
-          <select class="front_page">
-            <option value="default">Default</option>
-            <option value="popular">Popular</option>
-            <option value="all">All</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_frontLayout__">Front Layout</h4>
-          <select class="layout">
-            <option value="card">Card</option>
-            <option value="clean">Clean</option>
-            <option value="compact">Compact</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_wideUI__">Wide UI</h4>
-          <input class="wide" type="checkbox">
-        </div>
+      <form>
         <div class="some-block option-block">
-          <h2>Content</h2>
+          <input type="url" placeholder="https://libreddit.com">
+          <button class="add" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+              <rect fill="none" height="24" width="24"></rect>
+              <path d="M18,2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M18,16H9V4h9V16z M3,15v-2h2v2H3z M3,9.5h2v2H3V9.5z M10,20h2v2h-2V20z M3,18.5v-2h2v2H3z M5,22c-1.1,0-2-0.9-2-2h2V22z M8.5,22h-2v-2h2V22z M13.5,22L13.5,22l0-2h2 v0C15.5,21.1,14.6,22,13.5,22z M5,6L5,6l0,2H3v0C3,6.9,3.9,6,5,6z"></path>
+            </svg>
+          </button>
         </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_defaultSubredditPostSort__">Default subreddit post sort</h4>
-          <select class="post_sort">
-            <option value="hot">Hot</option>
-            <option value="new">New</option>
-            <option value="top">Top</option>
-            <option value="rising">Rising</option>
-            <option value="controversial">Controversial</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_defaultCommentSort__">Default comment sort</h4>
-          <select class="comment_sort">
-            <option value="confidence">Confidence</option>
-            <option value="top">Top</option>
-            <option value="new">New</option>
-            <option value="controversial">Controversial</option>
-            <option value="old">Old</option>
-          </select>
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_showNsfwPosts__">Show NSFW posts</h4>
-          <input class="show_nsfw" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_autoplayVideos__">Autoplay videos</h4>
-          <input class="autoplay_videos" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_useHlsForVideos__">Use HLS for videos</h4>
-          <input class="use_hls" type="checkbox">
-        </div>
-        <div class="some-block option-block">
-          <h4 data-localise="__MSG_hideNotificationAboutPossibleHlsUsage__">Hide notification about possible HLS usage</h4>
-          <input class="hide_hls_notification" type="checkbox">
-        </div>
-      </div>
+      </form>
+      <hr>
       <div class="normal">
                 <div class="some-block option-block">
                   <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 475f8b61..65ad284c 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -3,49 +3,31 @@ import commonHelper from "../../../assets/javascripts/helpers/common.js";
 
 let libredditDivElement = document.getElementById("libreddit")
 let tedditDivElement = document.getElementById("teddit")
-let enableLibredditSettingsElement = document.getElementById("enable-libreddit-custom-settings");
-let customSettingsDivElement = document.getElementsByClassName("custom-settings");
 
 let disableRedditElement = document.getElementById("disable-reddit");
 let redditFrontendElement = document.getElementById("reddit-frontend");
 let protocolElement = document.getElementById("protocol")
 let bypassWatchOnRedditElement = document.getElementById("bypass-watch-on-reddit")
 
-let theme = document.getElementById('libreddit').getElementsByClassName('theme')[0];
-let front_page = document.getElementById('libreddit').getElementsByClassName('front_page')[0];
-let layout = document.getElementById('libreddit').getElementsByClassName('layout')[0];
-let wide = document.getElementById('libreddit').getElementsByClassName('wide')[0];
-let post_sort = document.getElementById('libreddit').getElementsByClassName('post_sort')[0];
-let comment_sort = document.getElementById('libreddit').getElementsByClassName('comment_sort')[0];
-let show_nsfw = document.getElementById('libreddit').getElementsByClassName('show_nsfw')[0];
-let autoplay_videos = document.getElementById('libreddit').getElementsByClassName('autoplay_videos')[0];
-let use_hls = document.getElementById('libreddit').getElementsByClassName('use_hls')[0];
-let hide_hls_notification = document.getElementById('libreddit').getElementsByClassName('hide_hls_notification')[0];
-
 document.addEventListener("change", async () => {
     await browser.storage.local.set({
         disableReddit: !disableRedditElement.checked,
         bypassWatchOnReddit: bypassWatchOnRedditElement.checked,
         redditProtocol: protocolElement.value,
         redditFrontend: redditFrontendElement.value,
-
-        enableLibredditCustomSettings: enableLibredditSettingsElement.checked,
-
-        redditTheme: theme.value,
-        redditFrontPage: front_page.value,
-        redditLayout: layout.value,
-        redditWide: wide.checked,
-        redditPostSort: post_sort.value,
-        redditCommentSort: comment_sort.value,
-        redditShowNsfw: show_nsfw.checked,
-        redditAutoplayVideos: autoplay_videos.checked,
-        redditUseHls: use_hls.checked,
-        redditHideHlsNotification: hide_hls_notification.checked,
     });
     changeFrontendsSettings(redditFrontendElement.value);
     changeProtocolSettings(protocolElement.value);
 })
 
+const libredditForm = libredditDivElement.getElementsByTagName('form')[0];
+const libredditCookies = libredditForm.getElementsByTagName('input')[0];
+libredditForm.addEventListener('submit', async event => {
+    event.preventDefault();
+    const url = new URL(libredditCookies.value);
+    redditHelper.initLibredditCookies(url);
+})
+
 function changeProtocolSettings(protocol) {
     let normalLibredditDiv = libredditDivElement.getElementsByClassName("normal")[0];
     let torLibredditDiv = libredditDivElement.getElementsByClassName("tor")[0];
@@ -64,10 +46,6 @@ function changeProtocolSettings(protocol) {
         torTedditDiv.style.display = 'block';
         torLibredditDiv.style.display = 'block';
     }
-    if (enableLibredditSettingsElement.checked)
-        for (const item of customSettingsDivElement) item.style.display = 'block';
-    else
-        for (const item of customSettingsDivElement) item.style.display = 'none';
 }
 function changeFrontendsSettings(frontend) {
     let frontendElement = document.getElementById("frontend");
@@ -96,37 +74,14 @@ browser.storage.local.get(
         "redditFrontend",
 
         "enableLibredditCustomSettings",
-
-        "redditTheme",
-        "redditFrontPage",
-        "redditLayout",
-        "redditWide",
-        "redditPostSort",
-        "redditCommentSort",
-        "redditShowNsfw",
-        "redditAutoplayVideos",
-        "redditUseHls",
-        "redditHideHlsNotification",
     ],
     r => {
         disableRedditElement.checked = !r.disableReddit
         bypassWatchOnRedditElement.checked = r.bypassWatchOnReddit
         protocolElement.value = r.redditProtocol
         redditFrontendElement.value = r.redditFrontend
-        enableLibredditSettingsElement.checked = r.enableLibredditCustomSettings
         changeFrontendsSettings(r.redditFrontend);
         changeProtocolSettings(r.redditProtocol);
-
-        theme.value = r.redditTheme;
-        front_page.value = r.redditFrontPage;
-        layout.value = r.redditLayout;
-        wide.checked = r.redditWide;
-        post_sort.value = r.redditPostSort;
-        comment_sort.value = r.redditCommentSort;
-        show_nsfw.checked = r.redditShowNsfw;
-        autoplay_videos.checked = r.redditAutoplayVideos;
-        use_hls.checked = r.redditUseHls;
-        hide_hls_notification.checked = r.redditHideHlsNotification;
     }
 )
 
@@ -172,9 +127,4 @@ latencyTedditElement.addEventListener("click",
             latencyTedditElement.removeEventListener("click", reloadWindow);
         });
     }
-);
-
-window.onblur = () => {
-    redditHelper.initLibredditCookies();
-    redditHelper.initTedditCookies();
-}
\ No newline at end of file
+);
\ No newline at end of file
diff --git a/src/pages/options/reddit/reddit.pug b/src/pages/options/reddit/reddit.pug
new file mode 100644
index 00000000..7262a7f4
--- /dev/null
+++ b/src/pages/options/reddit/reddit.pug
@@ -0,0 +1,65 @@
+doctype html
+html(lang="en")
+    include ../../widgets/head.pug
+        title General
+script(type="module" src="../../../assets/javascripts/localise.js")
+body.option(dir="auto")
+    include ../../widgets/links.pug
+    +links('reddit')
+
+    section.option-block
+        .some-block.option-block
+            h4(data-localise="__MSG_enable__") Enable
+            input#disable-reddit(type="checkbox")
+
+        .some-block.option-block
+            h4#frontend(data-localise="__MSG_frontend__") Frontend
+            select#reddit-frontend
+                option(value="libreddit") Libreddit
+                option(value="teddit") Teddit
+
+        .some-block.option-block
+            h4(data-localise="__MSG_protocol__") Protocol
+            select#protocol
+                option(value="normal" data-localise="__MSG_normal__") Normal
+                option(value="tor" data-localise="__MSG_tor__") Tor
+
+        .some-block.option-block
+            h4(data-localise="__MSG_bypassReddit__") Bypass "Open in Reddit"
+            input#bypass-watch-on-reddit(type="checkbox")
+
+        #libreddit
+            hr
+            .some-block.option-block
+                h4 Unify cookies across selected instances
+            form
+                .some-block.option-block
+                    input(type="url" placeholder="https://libreddit.com")
+                    button.add(type="submit")
+                        svg(xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
+                            rect(fill="none" height="24" width="24")
+                            path(d="M18,2H9C7.9,2,7,2.9,7,4v12c0,1.1,0.9,2,2,2h9c1.1,0,2-0.9,2-2V4C20,2.9,19.1,2,18,2z M18,16H9V4h9V16z M3,15v-2h2v2H3z M3,9.5h2v2H3V9.5z M10,20h2v2h-2V20z M3,18.5v-2h2v2H3z M5,22c-1.1,0-2-0.9-2-2h2V22z M8.5,22h-2v-2h2V22z M13.5,22L13.5,22l0-2h2 v0C15.5,21.1,14.6,22,13.5,22z M5,6L5,6l0,2H3v0C3,6.9,3.9,6,5,6z")
+
+            hr
+
+            .normal
+                include ../../widgets/instances.pug
+                +instances('https://libreddit.com')
+                include ../../widgets/latency.pug
+                +latency('libreddit')
+            .tor
+                include ../../widgets/instances.pug
+                +instances('https://libreddit.onion')
+
+        #teddit
+            hr
+            .normal
+                include ../../widgets/instances.pug
+                +instances('https://teddit.com')
+                +latency('teddit')
+            .tor
+                include ../../widgets/instances.pug
+                +instances('https://teddit.onion')
+
+    script(type="module" src="../init.js")
+    script(type="module" src="./reddit.js")
\ No newline at end of file