devol
/
libredirect
mirror of https://codeberg.org/LibRedirect/libredirect.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add tabs UI to options page

This commit is contained in:
SimonBrazell 2020-04-25 18:31:27 +10:00
parent 7d1b0be167
commit 269739347f
4 changed files with 202 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
manifest.json
View File

@ -1,7 +1,7 @@
{ {
"name": "Privacy Redirect", "name": "Privacy Redirect",
"description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.", "description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
"version": "1.1.21", "version": "1.1.22",
"manifest_version": 2, "manifest_version": 2,
"background": { "background": {
"scripts": [ "scripts": [

220
pages/options/options.html
View File

@ -11,114 +11,134 @@
<body> <body>
<section class="options settings_block"> <div class="tab">
<div class="onoffswitch switch" aria-label="Toggle Nitter redirects"> <button class="tablinks" id="generalTab">
<h1>Nitter Redirects</h1> General
<input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp; </button>
<label for="disable-nitter" class="checkbox-label"> <button class="tablinks" id="advancedTab">
</label> Advanced
</div> </button>
</section> <button class="tablinks" id="whitelistTab">
Whitelist
</button>
</div>
<section class="options settings_block"> <div id="general" class="tabcontent">
<div class="onoffswitch switch" aria-label="Toggle Invidious redirects"> <section class="options settings_block">
<h1>Invidious Redirects</h1> <div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
<input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp; <h1>Nitter Redirects</h1>
<label for="disable-invidious" class="checkbox-label"> <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
</label> <label for="disable-nitter" class="checkbox-label">
</div> </label>
</section> </div>
</section>
<section class="options settings_block"> <section class="options settings_block">
<div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects"> <div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
<h1>Bibliogram Redirects</h1> <h1>Invidious Redirects</h1>
<input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp; <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
<label for="disable-bibliogram" class="checkbox-label"> <label for="disable-invidious" class="checkbox-label">
</label> </label>
</div> </div>
</section> </section>
<section class="options settings_block"> <section class="options settings_block">
<div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects"> <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects">
<h1>OpenStreetMap Redirects</h1> <h1>Bibliogram Redirects</h1>
<input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp; <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
<label for="disable-osm" class="checkbox-label"> <label for="disable-bibliogram" class="checkbox-label">
</label> </label>
</div> </div>
</section> </section>
<section class="options settings_block"> <section class="options settings_block">
<h1>Nitter Instance</h1> <div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects">
<input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net"> <h1>OpenStreetMap Redirects</h1>
<datalist id="nitter-instance-list"> <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
<option value="https://nitter.net"> <label for="disable-osm" class="checkbox-label">
<option value="https://nitter.snopyta.org"> </label>
<option value="https://nitter.42l.fr"> </div>
<option value="https://nitter.nixnet.xyz"> </section>
<option value="https://nitter.13ad.de">
<option value="https://tw.openalgeria.org">
</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://invidious.zapashcanon.fr">
<option value="https://invidious.toot.koeln">
<option value="https://invidious.ggc-project.de">
</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">
</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>
<section class="options settings_block"> <section class="options settings_block">
<div class="onoffswitch switch" aria-label="Always proxy videos through Invidious"> <h1>Nitter Instance</h1>
<h1>Always proxy videos through Invidious?</h1> <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
<input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp; <datalist id="nitter-instance-list">
<label for="always-proxy" class="checkbox-label"> <option value="https://nitter.net">
</label> <option value="https://nitter.snopyta.org">
</div> <option value="https://nitter.42l.fr">
</section> <option value="https://nitter.nixnet.xyz">
<option value="https://nitter.13ad.de">
<option value="https://tw.openalgeria.org">
</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://invidious.zapashcanon.fr">
<option value="https://invidious.toot.koeln">
<option value="https://invidious.ggc-project.de">
</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">
</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>
</div>
<section class="options settings_block"> <div id="advanced" class="tabcontent">
<div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious"> <section class="options settings_block">
<h1>Only redirect embedded video to Invidious?</h1> <div class="onoffswitch switch" aria-label="Always proxy videos through Invidious">
<input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp; <h1>Always proxy videos through Invidious</h1>
<label for="only-embed" class="checkbox-label"> <input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp;
</label> <label for="always-proxy" class="checkbox-label">
</div> </label>
</section> </div>
</section>
<section class="options settings_block"> <section class="options settings_block">
<h1>Invidious Video Quality</h1> <div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
<select id="video-quality"> <h1>Only redirect embedded video to Invidious</h1>
<option value="">Default</option> <input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp;
<option value="hd720">720p</option> <label for="only-embed" class="checkbox-label">
<option value="medium">480p</option> </label>
<option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> </div>
</select> </section>
</section>
<section class="options settings_block"> <section class="options settings_block">
<div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker"> <h1>Invidious Video Quality</h1>
<h1>Proactively remove Twitter service worker</h1> <select id="video-quality">
<input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp; <option value="">Default</option>
<label for="remove-twitter-sw" class="checkbox-label"> <option value="hd720">720p</option>
</label> <option value="medium">480p</option>
</div> <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
</section> </select>
</section>
<section class="options settings_block">
<div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
<h1>Proactively remove Twitter service worker</h1>
<input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
<label for="remove-twitter-sw" class="checkbox-label">
</label>
</div>
</section>
</div>
<div id="whitelist" class="tabcontent">
</div>
<script src="./options.js"></script> <script src="./options.js"></script>

50
pages/options/options.js
View File

@ -1,17 +1,17 @@
'use strict'; 'use strict';
let nitterInstance = document.querySelector('#nitter-instance'); let nitterInstance = document.getElementById('nitter-instance');
let invidiousInstance = document.querySelector('#invidious-instance'); let invidiousInstance = document.getElementById('invidious-instance');
let bibliogramInstance = document.querySelector('#bibliogram-instance'); let bibliogramInstance = document.getElementById('bibliogram-instance');
let osmInstance = document.querySelector('#osm-instance'); let osmInstance = document.getElementById('osm-instance');
let disableNitter = document.querySelector('#disable-nitter'); let disableNitter = document.getElementById('disable-nitter');
let disableInvidious = document.querySelector('#disable-invidious'); let disableInvidious = document.getElementById('disable-invidious');
let disableBibliogram = document.querySelector('#disable-bibliogram'); let disableBibliogram = document.getElementById('disable-bibliogram');
let disableOsm = document.querySelector('#disable-osm'); let disableOsm = document.getElementById('disable-osm');
let alwaysProxy = document.querySelector('#always-proxy'); let alwaysProxy = document.getElementById('always-proxy');
let onlyEmbeddedVideo = document.querySelector('#only-embed'); let onlyEmbeddedVideo = document.getElementById('only-embed');
let videoQuality = document.querySelector('#video-quality'); let videoQuality = document.getElementById('video-quality');
let removeTwitterSW = document.querySelector('#remove-twitter-sw'); let removeTwitterSW = document.getElementById('remove-twitter-sw');
window.browser = window.browser || window.chrome; window.browser = window.browser || window.chrome;
@ -46,6 +46,32 @@ browser.storage.sync.get(
} }
); );
function openTab(tab, event) {
let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName('tabcontent');
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none';
}
tablinks = document.getElementsByClassName('tablinks');
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' active', '');
}
document.getElementById(tab).style.display = 'block';
event.currentTarget.className += ' active';
}
document.getElementById('generalTab').addEventListener(
'click', openTab.bind(null, 'general')
);
document.getElementById('advancedTab').addEventListener(
'click', openTab.bind(null, 'advanced')
);
document.getElementById('whitelistTab').addEventListener(
'click', openTab.bind(null, 'whitelist')
);
document.getElementById('generalTab').click();
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
let timeout; let timeout;
return () => { return () => {

47
pages/styles.css
View File

@ -2,6 +2,7 @@
--text-main: #FFF; --text-main: #FFF;
--text-secondary: #000; --text-secondary: #000;
--dark-grey: #3C4043; --dark-grey: #3C4043;
--darker-grey: #292A2D;
--white: #FFF; --white: #FFF;
--active: #FF5B56; --active: #FF5B56;
--space: 5px; --space: 5px;
@ -12,16 +13,17 @@
body { body {
color: var(--text-secondary); color: var(--text-secondary);
margin: 0; margin: 0;
background-color: var(--dark-grey); background-color: var(--darker-grey);
max-width: 400px; max-width: 400px;
margin: auto; margin: auto;
min-height: 460px;
} }
.popup { .popup {
min-width: 300px; width: 300px;
height: auto;
overflow: hidden; overflow: hidden;
background-color: var(--dark-grey);
} }
input { input {
@ -190,3 +192,40 @@ input[type="url"]:invalid {
.margin-bottom { .margin-bottom {
margin-bottom: 20px; margin-bottom: 20px;
} }
.tab {
overflow: hidden;
background-color: var(--darker-grey);
}
.tab button {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: var(--text-main);
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
border: solid 1px var(--dark-grey);
width: 33.333%;
font-size: 14px;
}
.tab button:hover {
background-color: var(--active);
}
.tab button.active {
background-color: var(--dark-grey);
}
.tabcontent {
padding-top: 10px;
display: none;
border: solid 1px var(--dark-grey);
background-color: var(--dark-grey);
min-height: 403px;
}