From 97ca48b1fe121e9311189e2fbfa5c737c8ca337a Mon Sep 17 00:00:00 2001
From: SimonBrazell <simon@brazell.com.au>
Date: Sun, 23 Feb 2020 16:19:32 +1100
Subject: OSM redirects (experimental)

---
 pages/popup/popup.html | 14 ++++++++++++++
 pages/popup/popup.js   | 21 ++++++++++++++++++++-
 pages/styles.css       |  4 ++--
 3 files changed, 36 insertions(+), 3 deletions(-)

(limited to 'pages')

diff --git a/pages/popup/popup.html b/pages/popup/popup.html
index f0c4b3d6..40cf3e7f 100644
--- a/pages/popup/popup.html
+++ b/pages/popup/popup.html
@@ -45,6 +45,15 @@
     </div>
   </section>
 
+  <section class="options settings_block">
+    <div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects">
+      <h1>OpenStreetMap Redirects</h1>
+      <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
+      <label for="disable-osm" class="checkbox-label">
+      </label>
+    </div>
+  </section>
+
   <section class="options settings_block">
     <h1>Nitter Instance</h1>
     <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
@@ -74,6 +83,11 @@
       <option value="https://bibliogram.snopyta.org">
       <option value="https://bibliogram.dsrev.ru">
     </datalist>
+    <h1>OpenStreetMap Instance</h1>
+    <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
+    <datalist id="osm-instance-list">
+      <option value="https://openstreetmap.org">
+    </datalist>
   </section>
 
   <script src="./popup.js"></script>
diff --git a/pages/popup/popup.js b/pages/popup/popup.js
index 4eb15baf..16d58268 100644
--- a/pages/popup/popup.js
+++ b/pages/popup/popup.js
@@ -3,9 +3,11 @@
 let nitterInstance = document.querySelector('#nitter-instance');
 let invidiousInstance = document.querySelector('#invidious-instance');
 let bibliogramInstance = document.querySelector('#bibliogram-instance');
+let osmInstance = document.querySelector('#osm-instance');
 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 version = document.querySelector('#version');
 
 chrome.storage.sync.get(
@@ -13,17 +15,21 @@ chrome.storage.sync.get(
     'nitterInstance',
     'invidiousInstance',
     'bibliogramInstance',
+    'osmInstance',
     'disableNitter',
     'disableInvidious',
-    'disableBibliogram'
+    'disableBibliogram',
+    'disableOsm'
   ],
   result => {
     nitterInstance.value = result.nitterInstance || '';
     invidiousInstance.value = result.invidiousInstance || '';
     bibliogramInstance.value = result.bibliogramInstance || '';
+    osmInstance.value = result.osmInstance || '';
     disableNitter.checked = !result.disableNitter;
     disableInvidious.checked = !result.disableInvidious;
     disableBibliogram.checked = !result.disableBibliogram;
+    disableOsm.checked = !result.disableOsm;
   }
 );
 
@@ -71,6 +77,15 @@ let bibliogramInstanceChange = debounce(() => {
 }, 500);
 bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
 
+let osmInstanceChange = debounce(() => {
+  if (osmInstance.checkValidity()) {
+    chrome.storage.sync.set({
+      osmInstance: osmInstance.value ? new URL(osmInstance.value).origin : ''
+    });
+  }
+}, 500);
+osmInstance.addEventListener('input', osmInstanceChange);
+
 disableNitter.addEventListener('change', event => {
   chrome.storage.sync.set({ disableNitter: !event.target.checked });
 });
@@ -82,3 +97,7 @@ disableInvidious.addEventListener('change', event => {
 disableBibliogram.addEventListener('change', event => {
   chrome.storage.sync.set({ disableBibliogram: !event.target.checked });
 });
+
+disableOsm.addEventListener('change', event => {
+  chrome.storage.sync.set({ disableOsm: !event.target.checked });
+});
diff --git a/pages/styles.css b/pages/styles.css
index 20453a11..89ae5a83 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -13,8 +13,8 @@ body {
   color: var(--text-secondary);
   margin: 0;
   max-width: 400px;
-  min-width: 240px;
-  background-color: var(--dark-grey)
+  min-width: 300px;
+  background-color: var(--dark-grey);
 }
 
 header {
-- 
cgit 1.4.1