about summary refs log tree commit diff stats
path: root/pages
diff options
context:
space:
mode:
authorSimonBrazell <simon@brazell.com.au>2020-04-26 00:43:43 +1000
committerSimonBrazell <simon@brazell.com.au>2020-04-26 00:43:43 +1000
commit236712d4f6475a633f9eeb7dfb954009b1eab436 (patch)
treed57dffa6e87c934d530fac7c1ed445f277d97b4f /pages
parentAdd tabs UI to options page (diff)
downloadlibredirect-236712d4f6475a633f9eeb7dfb954009b1eab436.zip
Closes #27 - added ability to whitelist sites
Diffstat (limited to 'pages')
-rw-r--r--pages/options/options.html40


-rw-r--r--pages/options/options.js53


-rw-r--r--pages/popup/popup.html21


-rw-r--r--pages/styles.css54


4 files changed, 145 insertions, 23 deletions
diff --git a/pages/options/options.html b/pages/options/options.html
index f638fcf3..321babe8 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -12,15 +12,9 @@
 <body>
 
   <div class="tab">
-    <button class="tablinks" id="generalTab">
-      General
-    </button>
-    <button class="tablinks" id="advancedTab">
-      Advanced
-    </button>
-    <button class="tablinks" id="whitelistTab">
-      Whitelist
-    </button>
+    <button class="tablinks" id="general-tab">General</button>
+    <button class="tablinks" id="advanced-tab">Advanced</button>
+    <button class="tablinks" id="whitelist-tab">Whitelist</button>
   </div>
 
   <div id="general" class="tabcontent">
@@ -70,6 +64,14 @@
         <option value="https://nitter.nixnet.xyz">
         <option value="https://nitter.13ad.de">
         <option value="https://tw.openalgeria.org">
+        <option value="https://nitter.pussthecat.org">
+        <option value="https://nitter.mastodont.cat">
+        <option value="https://nitter.dark.fail">
+        <option value="https://nitter.tedomum.net">
+        <option value="https://t.maisputain.ovh">
+        <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
+        <option value="http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion">
+        <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
       </datalist>
       <h1>Invidious Instance</h1>
       <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
@@ -78,9 +80,16 @@
         <option value="https://invidious.snopyta.org">
         <option value="https://invidiou.sh">
         <option value="https://yewtu.be">
-        <option value="https://invidious.zapashcanon.fr">
+        <option value="https://yt.maisputain.ovh">
         <option value="https://invidious.toot.koeln">
         <option value="https://invidious.ggc-project.de">
+        <option value="https://invidious.toot.koeln">
+        <option value="http://kgg2m7yk5aybusll.onion">
+        <option value="http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion">
+        <option value="http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion">
+        <option value="http://qklhadlycap4cnod.onion">
+        <option value="http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion">
+        <option value="http://mfqczy4mysscub2s.onion">
       </datalist>
       <h1>Bibliogram Instance</h1>
       <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
@@ -88,6 +97,8 @@
         <option value="https://bibliogram.art">
         <option value="https://bibliogram.snopyta.org">
         <option value="https://bibliogram.pussthecat.org">
+        <option value="https://insta.maisputain.ovh">
+        <option value="https://bibliogram.nixnet.services">
       </datalist>
       <h1>OpenStreetMap Instance</h1>
       <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
@@ -137,7 +148,14 @@
   </div>
 
   <div id="whitelist" class="tabcontent">
-
+    <section class="options settings_block">
+      <h1>Whitelisted Sites</h1>
+      <div class="whitelist">
+        <input id="new-whitelist-item" type="text" placeholder="URL (RegExp accepted)">
+        <button id="add-to-whitelist">Add to Whitelist</button>
+      </div>
+    </section>
+    <ul id="whitelist-items"></ul>
   </div>
 
   <script src="./options.js"></script>
diff --git a/pages/options/options.js b/pages/options/options.js
index d702eb83..821d6ed4 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -12,9 +12,26 @@ let alwaysProxy = document.getElementById('always-proxy');
 let onlyEmbeddedVideo = document.getElementById('only-embed');
 let videoQuality = document.getElementById('video-quality');
 let removeTwitterSW = document.getElementById('remove-twitter-sw');
+let whitelist;
 
 window.browser = window.browser || window.chrome;
 
+function prependWhitelistItem(item, index) {
+  const li = document.createElement('li');
+  li.appendChild(document.createTextNode(item.toString()));
+  const button = document.createElement('button');
+  button.appendChild(document.createTextNode('X'));
+  button.addEventListener('click', () => {
+    li.remove();
+    whitelist.splice(index, 1);
+    browser.storage.sync.set({
+      whitelist: whitelist
+    });
+  });
+  li.appendChild(button);
+  document.getElementById('whitelist-items').prepend(li);
+}
+
 browser.storage.sync.get(
   [
     'nitterInstance',
@@ -28,7 +45,8 @@ browser.storage.sync.get(
     'alwaysProxy',
     'onlyEmbeddedVideo',
     'videoQuality',
-    'removeTwitterSW'
+    'removeTwitterSW',
+    'whitelist'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
@@ -43,6 +61,8 @@ browser.storage.sync.get(
     onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
     videoQuality.value = result.videoQuality || '';
     removeTwitterSW.checked = !result.removeTwitterSW;
+    whitelist = result.whitelist || [];
+    whitelist.forEach(prependWhitelistItem);
   }
 );
 
@@ -60,17 +80,40 @@ function openTab(tab, event) {
   event.currentTarget.className += ' active';
 }
 
-document.getElementById('generalTab').addEventListener(
+document.getElementById('general-tab').addEventListener(
   'click', openTab.bind(null, 'general')
 );
-document.getElementById('advancedTab').addEventListener(
+document.getElementById('advanced-tab').addEventListener(
   'click', openTab.bind(null, 'advanced')
 );
-document.getElementById('whitelistTab').addEventListener(
+document.getElementById('whitelist-tab').addEventListener(
   'click', openTab.bind(null, 'whitelist')
 );
 
-document.getElementById('generalTab').click();
+document.getElementById('general-tab').click();
+
+function addToWhitelist() {
+  const input = document.getElementById('new-whitelist-item');
+  if (input.value) {
+    try {
+      new RegExp(input.value);
+      const index = whitelist.push(input.value);
+      prependWhitelistItem(input.value, index);
+      browser.storage.sync.set({
+        whitelist: whitelist
+      });
+      input.value = '';
+    } catch (error) {
+      input.setCustomValidity('Invalid RegExp');
+    }
+  } else {
+    input.setCustomValidity('Invalid RegExp');
+  }
+}
+
+document.getElementById('add-to-whitelist').addEventListener(
+  'click', addToWhitelist
+);
 
 function debounce(func, wait, immediate) {
   let timeout;
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index 2f05f87f..1afd0913 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -64,6 +64,14 @@
       <option value="https://nitter.nixnet.xyz">
       <option value="https://nitter.13ad.de">
       <option value="https://tw.openalgeria.org">
+      <option value="https://nitter.pussthecat.org">
+      <option value="https://nitter.mastodont.cat">
+      <option value="https://nitter.dark.fail">
+      <option value="https://nitter.tedomum.net">
+      <option value="https://t.maisputain.ovh">
+      <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
+      <option value="http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion">
+      <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion">
     </datalist>
     <h1>Invidious Instance</h1>
     <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
@@ -72,16 +80,25 @@
       <option value="https://invidious.snopyta.org">
       <option value="https://invidiou.sh">
       <option value="https://yewtu.be">
-      <option value="https://invidious.zapashcanon.fr">
+      <option value="https://yt.maisputain.ovh">
       <option value="https://invidious.toot.koeln">
       <option value="https://invidious.ggc-project.de">
+      <option value="https://invidious.toot.koeln">
+      <option value="http://kgg2m7yk5aybusll.onion">
+      <option value="http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion">
+      <option value="http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion">
+      <option value="http://qklhadlycap4cnod.onion">
+      <option value="http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion">
+      <option value="http://mfqczy4mysscub2s.onion">
     </datalist>
     <h1>Bibliogram Instance</h1>
     <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
     <datalist id="bibliogram-instance-list">
       <option value="https://bibliogram.art">
       <option value="https://bibliogram.snopyta.org">
-      <option value="https://bibliogram.dsrev.ru">
+      <option value="https://bibliogram.pussthecat.org">
+      <option value="https://insta.maisputain.ovh">
+      <option value="https://bibliogram.nixnet.services">
     </datalist>
     <h1>OpenStreetMap Instance</h1>
     <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
diff --git a/pages/styles.css b/pages/styles.css
index ca1c7814..0d5b5337 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -14,9 +14,9 @@ body {
   color: var(--text-secondary);
   margin: 0;
   background-color: var(--darker-grey);
-  max-width: 400px;
+  width: 400px;
   margin: auto;
-  min-height: 460px;
+  min-height: 572px;
 }
 
 .popup {
@@ -95,7 +95,7 @@ footer a.button {
 
 /* Elements */
 
-input[type=url], select {
+input[type=url], input[type=text], select {
   width: 100%;
   box-sizing: border-box;
   margin-bottom: 5px;
@@ -183,7 +183,7 @@ input:checked+label:after {
   transform: translateY(4px);
 }
 
-input[type="url"]:invalid {
+input:invalid {
   color: var(--danger);
   border-color: var(--danger);
   background-color: var(--danger-light);
@@ -227,5 +227,49 @@ input[type="url"]:invalid {
   display: none;
   border: solid 1px var(--dark-grey);
   background-color: var(--dark-grey);
-  min-height: 403px;
+  min-height: 510px;
+}
+
+div.whitelist {
+  clear: left;
+}
+
+div.whitelist > input {
+  width: 240px;
+  float: left;
+}
+
+#add-to-whitelist {
+  width: 120px;
+  float: right;
+  border: var(--active) solid 1px;
+  background-color: var(--active);
+  color: var(--text-main);
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 25px;
+}
+
+ul {
+  padding: 0;
+  list-style-type: none;
+  color: var(--text-main);
+  margin-right: 20px;
+  margin-left: 20px;
+}
+
+li {
+  border-bottom: solid 0.5px var(--darker-grey);
+  padding: 20px 0px 20px 20px;
+}
+
+#whitelist-items button {
+  float: right;
+  margin-right: -5px;
+  border: var(--active) solid 1px;
+  background-color: var(--active);
+  color: var(--text-main);
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 50%;
 }

 

generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-04-25 12:43:22 +0000