Restructure code with helper modules, add search engine settings, & advanced settings collapsibles.

author: SimonBrazell <simon@brazell.com.au> 2021-01-10 22:04:03 +1100
committer: SimonBrazell <simon@brazell.com.au> 2021-01-10 22:04:03 +1100
commit: 944f2e6ef09a1534bac061acca2e3b3a4c13b13a (patch)
tree: 86bbd36f9896db47b6938d098658192bd31db01e /pages
parent: Merge pull request #153 from somoso/patch-1 (diff)
download: libredirect-944f2e6ef09a1534bac061acca2e3b3a4c13b13a.zip
5 files changed, 136 insertions, 674 deletions
diff --git a/pages/options/options.html b/pages/options/options.html
deleted file mode 100644
index bd7cee7e..00000000
--- a/pages/options/options.html
+++ /dev/null
@@ -1,569 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title></title>
-    <link href="../styles.css" rel="stylesheet" />
-    <title>Privacy Redirect Options</title>
-  </head>
-
-  <body>
-    <div class="tab">
-      <button
-        class="tablinks"
-        id="general-tab"
-        data-localise="__MSG_generalTab__"
-      >
-        General
-      </button>
-      <button
-        class="tablinks"
-        id="advanced-tab"
-        data-localise="__MSG_advancedTab__"
-      >
-        Advanced
-      </button>
-      <button
-        class="tablinks"
-        id="exceptions-tab"
-        data-localise="__MSG_exceptionsTab__"
-      >
-        Exceptions
-      </button>
-    </div>
-
-    <div id="general" class="tabcontent">
-      <section class="settings-block">
-        <table class="option" aria-label="Toggle Nitter redirects">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_disableNitter__">Nitter Redirects</h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="disable-nitter"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="disable-nitter" class="checkbox-label"></label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table class="option" aria-label="Toggle Invidious redirects">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_disableInvidious__">
-                  Invidious Redirects
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="disable-invidious"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="disable-invidious" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table class="option" aria-label="Toggle Bibliogram redirects">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_disableBibliogram__">
-                  Bibliogram Redirects
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="disable-bibliogram"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="disable-bibliogram" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table class="option" aria-label="Toggle OpenStreetMap redirects">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_disableOsm__">
-                  OpenStreetMap Redirects
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="disable-osm"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="disable-osm" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table class="option" aria-label="Toggle old Reddit redirects">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_disableOldReddit__">
-                  Old Reddit Redirects
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="disable-old-reddit"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="disable-old-reddit" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-       <section class="settings-block">
-        <table class="option" aria-label="Toggle Search Engine redirects">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_disableSearchEngine__">
-                  Search Engine Redirects
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="disable-searchEngine"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="disable-searchEngine" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_nitterInstance__">Nitter Instance</h1>
-        <div class="autocomplete">
-          <input
-            id="nitter-instance"
-            type="url"
-            name="nitter-instance"
-            placeholder="Random instance (none selected)"
-          />
-        </div>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousInstance__">Invidious Instance</h1>
-        <div class="autocomplete">
-          <input
-            id="invidious-instance"
-            type="url"
-            placeholder="Random instance (none selected)"
-          />
-        </div>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
-        <div class="autocomplete">
-          <input
-            id="bibliogram-instance"
-            type="url"
-            placeholder="Random instance (none selected)"
-          />
-        </div>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_osmInstance__">OpenStreetMap Instance</h1>
-        <div class="autocomplete">
-          <input
-            id="osm-instance"
-            type="url"
-            placeholder="https://openstreetmap.org"
-          />
-        </div>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_oldRedditView__">Old Reddit View (Desktop or Mobile)</h1>
-        <div class="autocomplete">
-          <input
-            id="old-reddit-view"
-            type="url"
-            placeholder="https://old.reddit.com"
-          />
-        </div>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_theme__">Theme</h1>
-        <select id="theme">
-          <option value="">System</option>
-          <option value="light-theme">Light</option>
-          <option value="dark-theme">Dark</option>
-        </select>
-      </section>
-    </div>
-
-    <div id="advanced" class="tabcontent">
-      <div class="subheading">
-        <h1>Invidious</h1>
-        <hr>
-      </div>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousRandomPool__">
-          Invidious random instance pool (comma-separated)
-        </h1>
-        <input
-          id="invidious-random-pool"
-          name="invidious-random-pool"
-          type="text"
-        />
-      </section>
-      <section class="settings-block">
-        <table
-          class="option"
-          aria-label="Redirect YouTube to FreeTube where possible"
-        >
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_useFreeTube__">
-                  Use FreeTube over Invidious when possible
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="use-freetube"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="use-freetube" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table
-          class="option"
-          aria-label="Always proxy videos through Invidious"
-        >
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_alwaysProxy__">
-                  Always proxy videos through Invidious
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="always-proxy"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="always-proxy" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table
-          class="option"
-          aria-label="Only redirect embedded video to Invidious"
-        >
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_onlyEmbeddedVideo__">
-                  Only redirect embedded video to Invidious
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="only-embed"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="only-embed" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_videoQuality__">Invidious Video Quality</h1>
-        <select id="video-quality">
-          <option value="">Default</option>
-          <option value="hd720">720p</option>
-          <option value="medium">480p</option>
-          <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
-          </option>
-        </select>
-      </section>
-      <section class="settings-block">
-        <table class="option" aria-label="Invidious dark mode aways on">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_invidiousDarkMode__">
-                  Invidious dark mode always on
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="invidious-dark-mode"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="invidious-dark-mode" class="checkbox-label">
-                </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousVolume__">
-          Invidious Volume
-        </h1>
-        <input
-          id="invidious-volume"
-          name="invidious-volume"
-          type="range"
-          min="0"
-          max="100"
-          step="1"
-        /><span id="volume-value"></span>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousPlayerStyle__">
-          Invidious Player Style
-        </h1>
-        <select id="invidious-player-style">
-          <option value="">Invidious</option>
-          <option value="youtube">YouTube</option>
-        </select>
-      </section>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_invidiousSubtitles__">
-          Invidious Subtitles - language codes (comma-separated)
-        </h1>
-        <input
-          id="invidious-subtitles"
-          name="invidious-subtitles"
-          type="text"
-        />
-      </section>
-      <section class="settings-block">
-        <table
-          class="option"
-          aria-label="Invidious automatically play video on load"
-        >
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_invidiousAutoplay__">
-                  Invidious automatically play video on load
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="invidious-autoplay"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="invidious-autoplay" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <section class="settings-block">
-        <table class="option" aria-label="Persist Invidious preferences">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_persistInvidiousPrefs__">
-                  Persist Invidious preferences (as cookie)
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="persist-invidious-prefs"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="persist-invidious-prefs" class="checkbox-label">
-                </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <div class="subheading">
-        <h1>Nitter</h1>
-        <hr>
-      </div>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_nitterRandomPool__">
-          Nitter random instance pool (comma-separated)
-        </h1>
-        <input
-          id="nitter-random-pool"
-          name="nitter-random-pool"
-          type="text"
-        />
-      </section>
-      <section class="settings-block">
-        <table
-          class="option"
-          aria-label="Proactively remove Twitter service worker"
-        >
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_removeTwitterSW__">
-                  Proactively remove Twitter service worker
-                </h1>
-              </td>
-              <td>
-                <input
-                  aria-hidden="true"
-                  id="remove-twitter-sw"
-                  type="checkbox"
-                  checked
-                />&nbsp;
-                <label for="remove-twitter-sw" class="checkbox-label"> </label>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <div class="subheading">
-        <h1>Bibliogram</h1>
-        <hr>
-      </div>
-      <section class="settings-block">
-        <h1 data-localise="__MSG_bibliogramRandomPool__">
-          Bibliogram random instance pool (comma-separated)
-        </h1>
-        <input
-          id="bibliogram-random-pool"
-          name="bibliogram-random-pool"
-          type="text"
-        />
-      </section>
-    </div>
-
-    <div id="exceptions" class="tabcontent">
-      <section class="settings-block">
-        <p data-localise="__MSG_exceptionsDescriptionP1__">
-          Enter a URL or Regular Expression to be excluded from redirects.
-        </p>
-        <p data-localise="__MSG_exceptionsDescriptionP2__">
-          All requests for or initiating from a URL that matches your exception
-          will be excluded from redirects.
-        </p>
-        <p data-localise="__MSG_exceptionsDescriptionP3__">
-          Note - Supports JavaScript regular expressions, excluding the
-          enclosing forward slashes.
-        </p>
-      </section>
-      <section class="settings-block">
-        <table class="exceptions option">
-          <tbody>
-            <tr>
-              <td>
-                <h1 data-localise="__MSG_addException__">Add Exception</h1>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <input
-                  id="new-exceptions-item"
-                  type="text"
-                  placeholder="URL or RegExp"
-                />
-              </td>
-              <td>
-                <input type="radio" id="url" name="type" value="URL" checked />
-                <label class="radio" for="url">URL</label>
-                <input type="radio" id="regExp" name="type" value="RegExp" />
-                <label class="radio" for="regExp">RegExp</label>
-              </td>
-              <td>
-                <button id="add-to-exceptions">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="512"
-                    height="512"
-                    viewBox="0 0 512 512"
-                  >
-                    <line
-                      x1="256"
-                      y1="112"
-                      x2="256"
-                      y2="400"
-                      style="
-                        fill: none;
-                        stroke: #fff;
-                        stroke-linecap: round;
-                        stroke-linejoin: round;
-                        stroke-width: 32px;
-                      "
-                    />
-                    <line
-                      x1="400"
-                      y1="256"
-                      x2="112"
-                      y2="256"
-                      style="
-                        fill: none;
-                        stroke: #fff;
-                        stroke-linecap: round;
-                        stroke-linejoin: round;
-                        stroke-width: 32px;
-                      "
-                    />
-                  </svg>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-      <ul id="exceptions-items"></ul>
-    </div>
-
-    <script src="./options.js"></script>
-    <script src="../../assets/javascript/localise.js"></script>
-  </body>
-</html>
diff --git a/pages/styles.css b/src/assets/stylesheets/styles.css
index 022b96bd..e11f313b 100644
--- a/pages/styles.css
+++ b/src/assets/stylesheets/styles.css
@@ -23,7 +23,7 @@ body.light-theme {
 
 body {
   margin: 0;
-  max-width: 400px;
+  width: 400px;
   margin: auto;
   min-height: 572px;
   font-family: Sans-Serif;
@@ -334,7 +334,7 @@ li {
 }
 
 .autocomplete input {
-  background: url(../assets/images/chevron-down.svg) right no-repeat;
+  background: url(../images/chevron-down.svg) right no-repeat;
 }
 
 .autocomplete-items {
@@ -466,16 +466,51 @@ input[type="range"]::-moz-range-thumb {
   float: right;
 }
 
-.subheading {
-  padding: 0 10px;
+.collapsible {
+  background-color: var(--bg-main);
+  cursor: pointer;
+  color: var(--active);
+  padding: 18px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  font-size: 15px;
+  border-bottom: solid var(--active);
+  font-weight: bold;
 }
 
-.subheading h1 {
+.collapsible:after {
+  content: "\002B";
   color: var(--active);
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+
+.collapsible-active,
+.collapsible:hover,
+.collapsible:hover::after {
+  background-color: var(--active);
+  color: var(--text-secondary);
+}
+
+.collapsible-active:after {
+  content: "\002D";
+  color: var(--text-secondary);
+  font-weight: bold;
+  float: right;
+  margin-left: 5px;
+}
+
+.collapsible-content {
+  padding: 0 18px;
+  display: none;
+  overflow: hidden;
 }
 
-.subheading hr {
-  height: 1px;
+hr {
+  height: 2px;
   background-color: var(--active);
   border: none;
 }
diff --git a/pages/options/options.js b/src/pages/options/options.js
index 2530a328..e6bd224a 100644
--- a/pages/options/options.js
+++ b/src/pages/options/options.js
@@ -1,77 +1,43 @@
 "use strict";
 
-const nitterInstances = [
-  "https://nitter.net",
-  "https://nitter.snopyta.org",
-  "https://nitter.42l.fr",
-  "https://nitter.nixnet.services",
-  "https://nitter.13ad.de",
-  "https://nitter.pussthecat.org",
-  "https://nitter.mastodont.cat",
-  "https://nitter.dark.fail",
-  "https://nitter.tedomum.net",
-  "https://nitter.cattube.org",
-  "https://nitter.fdn.fr",
-  "https://nitter.1d4.us",
-  "https://nitter.kavin.rocks",
-  "https://tweet.lambda.dance",
-  "https://nitter.cc",
-  "https://nitter.weaponizedhumiliation.com",
-  "https://nitter.vxempire.xyz",
-  "https://nitter.unixfox.eu",
-  "http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion",
-  "http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion",
-  "http://nitterlgj3n5fgwesu3vxc5h67ruku33nqaoeoocae2mvlzhsu6k7fqd.onion",
-  "http://npf37k3mtzwxreiw52ccs5ay4e6qt2fkcs2ndieurdyn2cuzzsfyfvid.onion",
-];
-const invidiousInstances = [
-  "https://invidious.snopyta.org",
-  "https://invidious.xyz",
-  "https://invidious.kavin.rocks",
-  "https://tube.connect.cafe",
-  "https://invidious.zapashcanon.fr",
-  "https://invidiou.site",
-  "https://vid.mint.lgbt",
-  "https://invidious.site",
-  "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
-  "http://qklhadlycap4cnod.onion",
-  "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
-  "http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion",
-];
-const bibliogramInstances = [
-  "https://bibliogram.art",
-  "https://bibliogram.snopyta.org",
-  "https://bibliogram.pussthecat.org",
-  "https://bibliogram.nixnet.services",
-  "https://bg.endl.site",
-  "https://bibliogram.13ad.de",
-  "https://bibliogram.pixelfed.uno",
-  "https://bibliogram.ethibox.fr",
-  "https://bibliogram.hamster.dance",
-  "https://bibliogram.kavin.rocks",
-  "https://bibliogram.ggc-project.de",
-];
-const osmInstances = ["https://openstreetmap.org"];
-const oldRedditViews = ["https://old.reddit.com", "https://i.reddit.com"];
+import commonHelper from "../../assets/javascripts/helpers/common.js";
+import twitterHelper from "../../assets/javascripts/helpers/twitter.js";
+import youtubeHelper from "../../assets/javascripts/helpers/youtube.js";
+import instagramHelper from "../../assets/javascripts/helpers/instagram.js";
+import mapsHelper from "../../assets/javascripts/helpers/google-maps.js";
+import redditHelper from "../../assets/javascripts/helpers/reddit.js";
+import searchHelper from "../../assets/javascripts/helpers/google-search.js";
+
+const nitterInstances = twitterHelper.redirects;
+const invidiousInstances = youtubeHelper.redirects;
+const bibliogramInstances = instagramHelper.redirects;
+const osmInstances = mapsHelper.redirects;
+const redditInstances = redditHelper.redirects;
+const searchEngineInstances = searchHelper.redirects;
 const autocompletes = [
   { id: "nitter-instance", instances: nitterInstances },
   { id: "invidious-instance", instances: invidiousInstances },
   { id: "bibliogram-instance", instances: bibliogramInstances },
   { id: "osm-instance", instances: osmInstances },
-  { id: "old-reddit-view", instances: oldRedditViews },
+  { id: "reddit-instance", instances: redditInstances },
+  {
+    id: "search-engine-instance",
+    instances: searchEngineInstances.map((instance) => instance.link),
+  },
 ];
 
 let nitterInstance = document.getElementById("nitter-instance");
 let invidiousInstance = document.getElementById("invidious-instance");
 let bibliogramInstance = document.getElementById("bibliogram-instance");
 let osmInstance = document.getElementById("osm-instance");
-let oldRedditView = document.getElementById("old-reddit-view");
+let redditInstance = document.getElementById("reddit-instance");
+let searchEngineInstance = document.getElementById("search-engine-instance");
 let disableNitter = document.getElementById("disable-nitter");
 let disableInvidious = document.getElementById("disable-invidious");
 let disableBibliogram = document.getElementById("disable-bibliogram");
 let disableOsm = document.getElementById("disable-osm");
-let disableOldReddit = document.getElementById("disable-old-reddit");
-let disableSearchEngine = document.getElementById("disable-searchEngine");
+let disableReddit = document.getElementById("disable-reddit");
+let disableSearchEngine = document.getElementById("disable-search-engine");
 let alwaysProxy = document.getElementById("always-proxy");
 let onlyEmbeddedVideo = document.getElementById("only-embed");
 let videoQuality = document.getElementById("video-quality");
@@ -113,22 +79,19 @@ function prependExceptionsItem(item, index) {
   });
 }
 
-function filterInstances(instances) {
-  return instances.filter((instance) => !instance.includes(".onion")).join();
-}
-
 browser.storage.sync.get(
   [
     "nitterInstance",
     "invidiousInstance",
     "bibliogramInstance",
     "osmInstance",
-    "oldRedditView",
+    "redditInstance",
+    "searchEngineInstance",
     "disableNitter",
     "disableInvidious",
     "disableBibliogram",
     "disableOsm",
-    "disableOldReddit",
+    "disableReddit",
     "disableSearchEngine",
     "alwaysProxy",
     "onlyEmbeddedVideo",
@@ -154,12 +117,14 @@ browser.storage.sync.get(
     invidiousInstance.value = result.invidiousInstance || "";
     bibliogramInstance.value = result.bibliogramInstance || "";
     osmInstance.value = result.osmInstance || "";
-    oldRedditView.value = result.oldRedditView || "";
+    redditInstance.value = result.redditInstance || "";
+    searchEngineInstance.value =
+      (result.searchEngineInstance && result.searchEngineInstance.link) || "";
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
-    disableOldReddit.checked = !result.disableOldReddit;
+    disableReddit.checked = !result.disableReddit;
     disableSearchEngine.checked = !result.disableSearchEngine;
     alwaysProxy.checked = result.alwaysProxy;
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
@@ -178,11 +143,13 @@ browser.storage.sync.get(
     invidiousAutoplay.checked = result.invidiousAutoplay;
     useFreeTube.checked = result.useFreeTube;
     nitterRandomPool.value =
-      result.nitterRandomPool || filterInstances(nitterInstances);
+      result.nitterRandomPool || commonHelper.filterInstances(nitterInstances);
     invidiousRandomPool.value =
-      result.invidiousRandomPool || filterInstances(invidiousInstances);
+      result.invidiousRandomPool ||
+      commonHelper.filterInstances(invidiousInstances);
     bibliogramRandomPool.value =
-      result.bibliogramRandomPool || filterInstances(bibliogramInstances);
+      result.bibliogramRandomPool ||
+      commonHelper.filterInstances(bibliogramInstances);
   }
 );
 
@@ -274,7 +241,7 @@ function parseURL(urlString) {
   }
 }
 
-let nitterInstanceChange = debounce(() => {
+const nitterInstanceChange = debounce(() => {
   if (nitterInstance.checkValidity()) {
     browser.storage.sync.set({
       nitterInstance: parseURL(nitterInstance.value),
@@ -283,7 +250,7 @@ let nitterInstanceChange = debounce(() => {
 }, 500);
 nitterInstance.addEventListener("input", nitterInstanceChange);
 
-let invidiousInstanceChange = debounce(() => {
+const invidiousInstanceChange = debounce(() => {
   if (invidiousInstance.checkValidity()) {
     browser.storage.sync.set({
       invidiousInstance: parseURL(invidiousInstance.value),
@@ -292,7 +259,7 @@ let invidiousInstanceChange = debounce(() => {
 }, 500);
 invidiousInstance.addEventListener("input", invidiousInstanceChange);
 
-let bibliogramInstanceChange = debounce(() => {
+const bibliogramInstanceChange = debounce(() => {
   if (bibliogramInstance.checkValidity()) {
     browser.storage.sync.set({
       bibliogramInstance: parseURL(bibliogramInstance.value),
@@ -301,7 +268,7 @@ let bibliogramInstanceChange = debounce(() => {
 }, 500);
 bibliogramInstance.addEventListener("input", bibliogramInstanceChange);
 
-let osmInstanceChange = debounce(() => {
+const osmInstanceChange = debounce(() => {
   if (osmInstance.checkValidity()) {
     browser.storage.sync.set({
       osmInstance: parseURL(osmInstance.value),
@@ -310,14 +277,28 @@ let osmInstanceChange = debounce(() => {
 }, 500);
 osmInstance.addEventListener("input", osmInstanceChange);
 
-let oldRedditViewChange = debounce(() => {
-  if (oldRedditView.checkValidity()) {
+const redditInstanceChange = debounce(() => {
+  if (redditInstance.checkValidity()) {
     browser.storage.sync.set({
-      oldRedditView: parseURL(oldRedditView.value),
+      redditInstance: parseURL(redditInstance.value),
     });
   }
 }, 500);
-oldRedditView.addEventListener("input", oldRedditViewChange);
+redditInstance.addEventListener("input", redditInstanceChange);
+
+const searchEngineInstanceChange = debounce(() => {
+  const instance = searchEngineInstances.find(
+    (instance) => instance.link === searchEngineInstance.value
+  );
+  if (instance || !searchEngineInstance.value) {
+    browser.storage.sync.set({
+      searchEngineInstance: instance || searchEngineInstance.value,
+    });
+  } else {
+    searchEngineInstance.setCustomValidity("Must be an instance from the list");
+  }
+}, 500);
+searchEngineInstance.addEventListener("input", searchEngineInstanceChange);
 
 disableNitter.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableNitter: !event.target.checked });
@@ -335,8 +316,8 @@ disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
-disableOldReddit.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableOldReddit: !event.target.checked });
+disableReddit.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableReddit: !event.target.checked });
 });
 
 disableSearchEngine.addEventListener("change", (event) => {
@@ -373,7 +354,7 @@ useFreeTube.addEventListener("change", (event) => {
   browser.storage.sync.set({ useFreeTube: event.target.checked });
 });
 
-let invidiousVolumeChange = debounce(() => {
+const invidiousVolumeChange = debounce(() => {
   document.querySelector(
     "#volume-value"
   ).textContent = `${invidiousVolume.value}%`;
@@ -390,7 +371,7 @@ invidiousPlayerStyle.addEventListener("change", (event) => {
   });
 });
 
-let invidiousSubtitlesChange = debounce(() => {
+const invidiousSubtitlesChange = debounce(() => {
   browser.storage.sync.set({ invidiousSubtitles: invidiousSubtitles.value });
 }, 500);
 invidiousSubtitles.addEventListener("input", invidiousSubtitlesChange);
@@ -399,17 +380,17 @@ invidiousAutoplay.addEventListener("change", (event) => {
   browser.storage.sync.set({ invidiousAutoplay: event.target.checked });
 });
 
-let nitterRandomPoolChange = debounce(() => {
+const nitterRandomPoolChange = debounce(() => {
   browser.storage.sync.set({ nitterRandomPool: nitterRandomPool.value });
 }, 500);
 nitterRandomPool.addEventListener("input", nitterRandomPoolChange);
 
-let invidiousRandomPoolChange = debounce(() => {
+const invidiousRandomPoolChange = debounce(() => {
   browser.storage.sync.set({ invidiousRandomPool: invidiousRandomPool.value });
 }, 500);
 invidiousRandomPool.addEventListener("input", invidiousRandomPoolChange);
 
-let bibliogramRandomPoolChange = debounce(() => {
+const bibliogramRandomPoolChange = debounce(() => {
   browser.storage.sync.set({
     bibliogramRandomPool: bibliogramRandomPool.value,
   });
@@ -524,3 +505,18 @@ function autocomplete(input, list) {
 autocompletes.forEach((value) => {
   autocomplete(document.getElementById(value.id), value.instances);
 });
+
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function () {
+    this.classList.toggle("collapsible-active");
+    var content = this.nextElementSibling;
+    if (content.style.display === "block") {
+      content.style.display = "none";
+    } else {
+      content.style.display = "block";
+    }
+  });
+}
diff --git a/pages/popup/popup.html b/src/pages/popup/popup.html
index af44b23e..43a4a1a8 100644
--- a/pages/popup/popup.html
+++ b/src/pages/popup/popup.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title></title>
-    <link href="../styles.css" rel="stylesheet" />
+    <link href="../../assets/stylesheets/styles.css" rel="stylesheet" />
   </head>
 
   <body class="popup">
@@ -121,30 +121,30 @@
         <tbody>
           <tr>
             <td>
-              <h1 data-localise="__MSG_disableOldReddit__">
-                Old Reddit Redirects
-              </h1>
+              <h1 data-localise="__MSG_disableReddit__">Reddit Redirects</h1>
             </td>
             <td>
               <input
                 aria-hidden="true"
-                id="disable-old-reddit"
+                id="disable-reddit"
                 type="checkbox"
                 checked
               />&nbsp;
-              <label for="disable-old-reddit" class="checkbox-label"> </label>
+              <label for="disable-reddit" class="checkbox-label"> </label>
             </td>
           </tr>
         </tbody>
       </table>
     </section>
-    
+
     <section class="settings-block">
       <table class="option" aria-label="Toggle Search Engine redirects">
         <tbody>
           <tr>
             <td>
-              <h1 data-localise="__MSG_disableSearchEngine__">Search Engine Redirects</h1>
+              <h1 data-localise="__MSG_disableSearchEngine__">
+                Search Engine Redirects
+              </h1>
             </td>
             <td>
               <input
@@ -208,7 +208,7 @@
       </a>
     </footer>
 
-    <script src="./popup.js"></script>
-    <script src="../../assets/javascript/localise.js"></script>
+    <script type="module" src="./popup.js"></script>
+    <script src="../../assets/javascripts/localise.js"></script>
   </body>
 </html>
diff --git a/pages/popup/popup.js b/src/pages/popup/popup.js
index 6d4c3ff7..0afb2f97 100644
--- a/pages/popup/popup.js
+++ b/src/pages/popup/popup.js
@@ -4,7 +4,7 @@ let disableNitter = document.querySelector("#disable-nitter");
 let disableInvidious = document.querySelector("#disable-invidious");
 let disableBibliogram = document.querySelector("#disable-bibliogram");
 let disableOsm = document.querySelector("#disable-osm");
-let disableOldReddit = document.querySelector("#disable-old-reddit");
+let disableReddit = document.querySelector("#disable-reddit");
 let disableSearchEngine = document.querySelector("#disable-searchEngine");
 let version = document.querySelector("#version");
 
@@ -16,7 +16,7 @@ browser.storage.sync.get(
     "disableInvidious",
     "disableBibliogram",
     "disableOsm",
-    "disableOldReddit",
+    "disableReddit",
     "disableSearchEngine",
     "theme",
   ],
@@ -26,7 +26,7 @@ browser.storage.sync.get(
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
     disableOsm.checked = !result.disableOsm;
-    disableOldReddit.checked = !result.disableOldReddit;
+    disableReddit.checked = !result.disableReddit;
     disableSearchEngine.checked = !result.disableSearchEngine;
   }
 );
@@ -49,8 +49,8 @@ disableOsm.addEventListener("change", (event) => {
   browser.storage.sync.set({ disableOsm: !event.target.checked });
 });
 
-disableOldReddit.addEventListener("change", (event) => {
-  browser.storage.sync.set({ disableOldReddit: !event.target.checked });
+disableReddit.addEventListener("change", (event) => {
+  browser.storage.sync.set({ disableReddit: !event.target.checked });
 });
 
 disableSearchEngine.addEventListener("change", (event) => {
author	SimonBrazell <simon@brazell.com.au>	2021-01-10 22:04:03 +1100
committer	SimonBrazell <simon@brazell.com.au>	2021-01-10 22:04:03 +1100
commit	944f2e6ef09a1534bac061acca2e3b3a4c13b13a (patch)
tree	86bbd36f9896db47b6938d098658192bd31db01e /pages
parent	Merge pull request #153 from somoso/patch-1 (diff)
download	libredirect-944f2e6ef09a1534bac061acca2e3b3a4c13b13a.zip