Add tabs UI to options page
This commit is contained in:
SimonBrazell
parent
7d1b0be167
commit
269739347f
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "Privacy Redirect",
|
||||
"description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
|
||||
"version": "1.1.21",
|
||||
"version": "1.1.22",
|
||||
"manifest_version": 2,
|
||||
"background": {
|
||||
"scripts": [
|
||||
|
|
|
|||
|
|
@ -11,114 +11,134 @@
|
|||
|
||||
<body>
|
||||
|
||||
<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>
|
||||
<div class="tab">
|
||||
<button class="tablinks" id="generalTab">
|
||||
General
|
||||
</button>
|
||||
<button class="tablinks" id="advancedTab">
|
||||
Advanced
|
||||
</button>
|
||||
<button class="tablinks" id="whitelistTab">
|
||||
Whitelist
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<div id="general" class="tabcontent">
|
||||
<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="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="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="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="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="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">
|
||||
</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">
|
||||
<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="options settings_block">
|
||||
<div class="onoffswitch switch" aria-label="Always proxy videos through Invidious">
|
||||
<h1>Always proxy videos through Invidious?</h1>
|
||||
<input aria-hidden="true" id="always-proxy" type="checkbox" checked>
|
||||
<label for="always-proxy" 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">
|
||||
<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">
|
||||
</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 class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
|
||||
<h1>Only redirect embedded video to Invidious?</h1>
|
||||
<input aria-hidden="true" id="only-embed" type="checkbox" checked>
|
||||
<label for="only-embed" class="checkbox-label">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<div id="advanced" class="tabcontent">
|
||||
<section class="options settings_block">
|
||||
<div class="onoffswitch switch" aria-label="Always proxy videos through Invidious">
|
||||
<h1>Always proxy videos through Invidious</h1>
|
||||
<input aria-hidden="true" id="always-proxy" type="checkbox" checked>
|
||||
<label for="always-proxy" class="checkbox-label">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="options settings_block">
|
||||
<h1>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>
|
||||
</select>
|
||||
</section>
|
||||
<section class="options settings_block">
|
||||
<div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
|
||||
<h1>Only redirect embedded video to Invidious</h1>
|
||||
<input aria-hidden="true" id="only-embed" type="checkbox" checked>
|
||||
<label for="only-embed" class="checkbox-label">
|
||||
</label>
|
||||
</div>
|
||||
</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>
|
||||
<label for="remove-twitter-sw" class="checkbox-label">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section class="options settings_block">
|
||||
<h1>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>
|
||||
</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>
|
||||
<label for="remove-twitter-sw" class="checkbox-label">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="whitelist" class="tabcontent">
|
||||
|
||||
</div>
|
||||
|
||||
<script src="./options.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
'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 alwaysProxy = document.querySelector('#always-proxy');
|
||||
let onlyEmbeddedVideo = document.querySelector('#only-embed');
|
||||
let videoQuality = document.querySelector('#video-quality');
|
||||
let removeTwitterSW = document.querySelector('#remove-twitter-sw');
|
||||
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 disableNitter = document.getElementById('disable-nitter');
|
||||
let disableInvidious = document.getElementById('disable-invidious');
|
||||
let disableBibliogram = document.getElementById('disable-bibliogram');
|
||||
let disableOsm = document.getElementById('disable-osm');
|
||||
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');
|
||||
|
||||
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) {
|
||||
let timeout;
|
||||
return () => {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
--text-main: #FFF;
|
||||
--text-secondary: #000;
|
||||
--dark-grey: #3C4043;
|
||||
--darker-grey: #292A2D;
|
||||
--white: #FFF;
|
||||
--active: #FF5B56;
|
||||
--space: 5px;
|
||||
|
|
@ -12,16 +13,17 @@
|
|||
body {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
background-color: var(--dark-grey);
|
||||
background-color: var(--darker-grey);
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
min-height: 460px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.popup {
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -190,3 +192,40 @@ input[type="url"]:invalid {
|
|||
.margin-bottom {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue