diff options
Diffstat (limited to 'pages/popup')
| -rw-r--r-- | pages/popup/open.svg | 5 | ||||
| -rw-r--r-- | pages/popup/popup.html | 274 | ||||
| -rw-r--r-- | pages/popup/popup.js | 115 |
3 files changed, 179 insertions, 215 deletions
diff --git a/pages/popup/open.svg b/pages/popup/open.svg deleted file mode 100644 index 04f56c15..00000000 --- a/pages/popup/open.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'> - <path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/> - <polyline points='336 64 448 64 448 176' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/> - <line x1='224' y1='288' x2='440' y2='72' style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/> -</svg> \ No newline at end of file diff --git a/pages/popup/popup.html b/pages/popup/popup.html index 2e0fd680..e06159a5 100644 --- a/pages/popup/popup.html +++ b/pages/popup/popup.html @@ -1,122 +1,170 @@ -<!doctype html> +<!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" /> + </head> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title></title> - <link href="../styles.css" rel="stylesheet"> -</head> + <body class="popup"> + <header class="popup"> + <div class="logo-container"> + <img + src="../../assets/images/icon128.png" + alt="Privacy Redirect logo" + /> + <h1> + <span data-localise="__MSG_privacy__" class="privacy">Privacy</span + ><br /><span data-localise="__MSG_redirect__">Redirect</span> + </h1> + </div> + <div class="version"> + <span data-localise="__MSG_version__">Version</span>: <span + id="version" + ></span> + </div> + </header> -<body class="popup"> - <header> - <div class="logo-container"> - <img src="../../images/icon128.png" alt="Privacy Redirect logo"> - <h1><span class="privacy">Privacy</span><br>Redirect</h1> - </div> - <div class="version"> - <span>Version: <span id="version"></span></span> - </div> - </header> + <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 + /> + <label for="disable-nitter" class="checkbox-label"></label> + </td> + </tr> + </tbody> + </table> + </section> - <section class="options settings_block"> - <div class="onoffswitch switch" aria-label="Toggle Nitter redirects"> - <h1>Nitter Redirects</h1> - <input aria-hidden="true" id="disable-nitter" type="checkbox" checked> - <label for="disable-nitter" class="checkbox-label"> - </label> - </div> - </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 + /> + <label for="disable-invidious" class="checkbox-label"> </label> + </td> + </tr> + </tbody> + </table> + </section> - <section class="options settings_block"> - <div class="onoffswitch switch" aria-label="Toggle Invidious redirects"> - <h1>Invidious Redirects</h1> - <input aria-hidden="true" id="disable-invidious" type="checkbox" checked> - <label for="disable-invidious" class="checkbox-label"> - </label> - </div> - </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 + /> + <label for="disable-bibliogram" class="checkbox-label"> </label> + </td> + </tr> + </tbody> + </table> + </section> - <section class="options settings_block"> - <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects"> - <h1>Bibliogram Redirects</h1> - <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked> - <label for="disable-bibliogram" class="checkbox-label"> - </label> - </div> - </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 + /> + <label for="disable-osm" class="checkbox-label"> </label> + </td> + </tr> + </tbody> + </table> + </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> - <label for="disable-osm" class="checkbox-label"> - </label> - </div> - </section> + <section class="settings-block"></section> - <section class="options settings_block"> - <h1>Nitter Instance</h1> - <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net"> - <datalist id="nitter-instance-list"> - <option value="https://nitter.net"> - <option value="https://nitter.snopyta.org"> - <option value="https://nitter.42l.fr"> - <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"> - <datalist id="invidious-instances-list"> - <option value="https://invidio.us"> - <option value="https://invidious.snopyta.org"> - <option value="https://invidiou.sh"> - <option value="https://yewtu.be"> - <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.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"> - <datalist id="osm-instance-list"> - <option value="https://openstreetmap.org"> - </datalist> - </section> + <footer> + <a class="button" id="more-options"> + <span data-localise="__MSG_moreOptions__">More Options </span> + <svg + xmlns="http://www.w3.org/2000/svg" + width="512" + height="512" + viewBox="0 0 512 512" + > + <path + d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48" + style=" + fill: none; + stroke: inherit; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " + /> + <polyline + points="336 64 448 64 448 176" + style=" + fill: none; + stroke: inherit; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " + /> + <line + x1="224" + y1="288" + x2="440" + y2="72" + style=" + fill: none; + stroke: inherit; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " + /> + </svg> + </a> + </footer> - <footer> - <a class="button" id="more-options"> - <span>More Options </span> - <img height="18px" src="open.svg" alt="more-options" /> - </a> - </footer> - - <script src="./popup.js"></script> - -</body> - -</html> \ No newline at end of file + <script src="./popup.js"></script> + <script src="../../assets/javascript/localise.js"></script> + </body> +</html> diff --git a/pages/popup/popup.js b/pages/popup/popup.js index 66842c75..54eae408 100644 --- a/pages/popup/popup.js +++ b/pages/popup/popup.js @@ -1,33 +1,23 @@ -'use strict'; +"use strict"; -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'); +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"); window.browser = window.browser || window.chrome; browser.storage.sync.get( [ - 'nitterInstance', - 'invidiousInstance', - 'bibliogramInstance', - 'osmInstance', - 'disableNitter', - 'disableInvidious', - 'disableBibliogram', - 'disableOsm' + "disableNitter", + "disableInvidious", + "disableBibliogram", + "disableOsm", + "theme", ], - result => { - nitterInstance.value = result.nitterInstance || ''; - invidiousInstance.value = result.invidiousInstance || ''; - bibliogramInstance.value = result.bibliogramInstance || ''; - osmInstance.value = result.osmInstance || ''; + (result) => { + if (result.theme) document.body.classList.add(result.theme); disableNitter.checked = !result.disableNitter; disableInvidious.checked = !result.disableInvidious; disableBibliogram.checked = !result.disableBibliogram; @@ -37,91 +27,22 @@ browser.storage.sync.get( version.textContent = browser.runtime.getManifest().version; -function debounce(func, wait, immediate) { - let timeout; - return () => { - let context = this, args = arguments; - let later = () => { - timeout = null; - if (!immediate) func.apply(context, args); - }; - let callNow = immediate && !timeout; - clearTimeout(timeout); - timeout = setTimeout(later, wait); - if (callNow) func.apply(context, args); - }; -}; - -function parseURL(urlString) { - if (urlString) { - try { - const url = new URL(urlString); - if (url.username && url.password) { - return `${url.protocol}//${url.username}:${url.password}@${url.host}` - } else { - return url.origin; - } - } catch (error) { - console.log(error); - return ''; - } - } else { - return ''; - } -} - -let nitterInstanceChange = debounce(() => { - if (nitterInstance.checkValidity()) { - browser.storage.sync.set({ - nitterInstance: parseURL(nitterInstance.value) - }); - } -}, 500); -nitterInstance.addEventListener('input', nitterInstanceChange); - -let invidiousInstanceChange = debounce(() => { - if (invidiousInstance.checkValidity()) { - browser.storage.sync.set({ - invidiousInstance: parseURL(invidiousInstance.value) - }); - } -}, 500); -invidiousInstance.addEventListener('input', invidiousInstanceChange); - -let bibliogramInstanceChange = debounce(() => { - if (bibliogramInstance.checkValidity()) { - browser.storage.sync.set({ - bibliogramInstance: parseURL(bibliogramInstance.value) - }); - } -}, 500); -bibliogramInstance.addEventListener('input', bibliogramInstanceChange); - -let osmInstanceChange = debounce(() => { - if (osmInstance.checkValidity()) { - browser.storage.sync.set({ - osmInstance: parseURL(osmInstance.value) - }); - } -}, 500); -osmInstance.addEventListener('input', osmInstanceChange); - -disableNitter.addEventListener('change', event => { +disableNitter.addEventListener("change", (event) => { browser.storage.sync.set({ disableNitter: !event.target.checked }); }); -disableInvidious.addEventListener('change', event => { +disableInvidious.addEventListener("change", (event) => { browser.storage.sync.set({ disableInvidious: !event.target.checked }); }); -disableBibliogram.addEventListener('change', event => { +disableBibliogram.addEventListener("change", (event) => { browser.storage.sync.set({ disableBibliogram: !event.target.checked }); }); -disableOsm.addEventListener('change', event => { +disableOsm.addEventListener("change", (event) => { browser.storage.sync.set({ disableOsm: !event.target.checked }); }); -document.querySelector('#more-options').addEventListener('click', () => { +document.querySelector("#more-options").addEventListener("click", () => { browser.runtime.openOptionsPage(); }); |
