From 269739347f40e50148617e48b786ab3c8144bf4b Mon Sep 17 00:00:00 2001 From: SimonBrazell Date: Sat, 25 Apr 2020 18:31:27 +1000 Subject: Add tabs UI to options page --- pages/options/options.html | 236 ++++++++++++++++++++++++--------------------- pages/options/options.js | 50 +++++++--- 2 files changed, 166 insertions(+), 120 deletions(-) (limited to 'pages/options') diff --git a/pages/options/options.html b/pages/options/options.html index 60545874..f638fcf3 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -11,114 +11,134 @@ -

Nitter Redirects

- - - -

- -

Invidious Redirects

- - - -

- -

Bibliogram Redirects

- - - -

- -

OpenStreetMap Redirects

- - - -

- -

Nitter Instance

- - - -

Invidious Instance

- - - -

Bibliogram Instance

- - - -

+ + + +

Bibliogram Instance

+ + + +

OpenStreetMap Instance

+ + + +

+ +

Always proxy videos through Invidious

+ + + +

+ +

Only redirect embedded video to Invidious

+ + + +

+ +

Invidious Video Quality

+ +

Proactively remove Twitter service worker

+ + + +

+ +

diff --git a/pages/options/options.js b/pages/options/options.js index 3b850384..d702eb83 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -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 () => { -- cgit 1.4.1