From 9b7125103fc133b6684d00f740ac0b54b83d2d8f Mon Sep 17 00:00:00 2001 From: Lawrence Hook Date: Fri, 14 Oct 2022 02:25:39 -0400 Subject: [PATCH] Add a sidebar to navigate the various sections. Pre-selected based on current URL --- src/css/options/body.css | 62 ++++++++++++++++++++++----- src/css/options/footer.css | 4 +- src/css/options/general.css | 6 ++- src/css/options/options.css | 8 +--- src/js/background/events.js | 3 -- src/js/background/main.js | 10 +++++ src/js/options/main.js | 85 ++++++++++++++++++++++++++++++++++--- src/options.html | 31 +++++++++----- 8 files changed, 166 insertions(+), 43 deletions(-) diff --git a/src/css/options/body.css b/src/css/options/body.css index 457313b..78ab0aa 100644 --- a/src/css/options/body.css +++ b/src/css/options/body.css @@ -46,29 +46,69 @@ gap: 15vh; } -#primary_options { +#main_container { + display: flex; + flex-direction: row; +} + +#sidebar { height: var(--body-height); + width: 150px; + /*margin-top: 11px;*/ + /*margin-bottom: 10px;*/ + padding: 10px 3px; + overflow: scroll; + overflow-x: hidden; + + box-sizing: border-box; + user-select: none; + + border-radius: 3px; + box-shadow: 0px 0px 1px 0.5px var(--box-shadow-color); + + display: flex; + flex-direction: column; + gap: 0px; +} +#sidebar .sidebar_section { + padding: 7px; + border-radius: 3px; + box-sizing: border-box; + + /*font-size: 16px;*/ + /*font-weight: bold;*/ +} +#sidebar .sidebar_section:hover { +} +#sidebar .sidebar_section[selected] { + background-color: var(--label-color); + color: var(--body-background-color); +} + +#primary_options { + height: var(--body-height); + width: 100%; overflow: scroll; overflow-x: hidden; - -webkit-transition: box-shadow 0.1s; - -moz-transition: box-shadow 0.1s; - -o-transition: box-shadow 0.1s; - transition: box-shadow 0.1s; padding: 1px; - padding-top: 6px; + /*padding-top: 6px;*/ + + display: flex; + flex-direction: column; + gap: 15px; } #primary_options .section_container { - margin-bottom: 10px; + /*margin-bottom: 10px;*/ } #primary_options .section_container:not(:last-child) { - margin-bottom: 20px; + /*margin-bottom: 20px;*/ } -.section_container { - margin: 5px; +#primary_options .section_container { + margin: 0px 5px; padding: 10px; box-sizing: border-box; @@ -77,7 +117,7 @@ box-shadow: 0px 0px 3px 0.5px var(--box-shadow-color); } -.section_label { +#primary_options .section_label { margin-bottom: 5px; font-size: 18px; diff --git a/src/css/options/footer.css b/src/css/options/footer.css index 87a20c4..47bb614 100644 --- a/src/css/options/footer.css +++ b/src/css/options/footer.css @@ -12,11 +12,11 @@ html[dark_mode='true'] #donate_button .footer-path { text-align: center; height: 1px; - width: 90%; + width: 99%; margin: auto; border-width: 0; - background-color: gray; + background-color: var(--box-shadow-color); } #footer { diff --git a/src/css/options/general.css b/src/css/options/general.css index 9c2b96a..e300fd2 100644 --- a/src/css/options/general.css +++ b/src/css/options/general.css @@ -5,6 +5,8 @@ --footer-height: 25px; --border-radius: 3px; + + --blue-color: #0006FB; } html:not([loaded]), html:not([loaded]) body { @@ -34,7 +36,7 @@ html[global_enable="false"] #timer_container, html[global_enable="true"][menu_timer="false"] #timer_container, html[global_enable="true"][menu_timer="true"]:not([menu_timer_counting_down]) #timer_container, html[global_enable="true"] #disabled_message_container, -html[global_enable="false"] #primary_options, +html[global_enable="false"] #main_container, html[global_enable="false"] #search_bar { display: none; } @@ -52,7 +54,7 @@ a { } body { - width: 450px; + width: 600px; height: fit-content; /* top, right, bottom, left */ diff --git a/src/css/options/options.css b/src/css/options/options.css index 3146eca..661616e 100644 --- a/src/css/options/options.css +++ b/src/css/options/options.css @@ -31,11 +31,5 @@ div.option { } .noselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Old versions of Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently - supported by Chrome, Edge, Opera and Firefox */ + user-select: none; } diff --git a/src/js/background/events.js b/src/js/background/events.js index daf5417..a683a83 100644 --- a/src/js/background/events.js +++ b/src/js/background/events.js @@ -35,9 +35,6 @@ browser.storage.onChanged.addListener((changes, area) => { if (changes[item].newValue === true) icons = activeIcons; browser.browserAction.setIcon(icons); - browser.tabs.query({ url: '*://*.youtube.com/*' }, tabs => { - tabs.forEach(tab => browser.pageAction.setIcon({ tabId: tab.id, ...icons })); - }); } } diff --git a/src/js/background/main.js b/src/js/background/main.js index 40fe623..c0eec36 100644 --- a/src/js/background/main.js +++ b/src/js/background/main.js @@ -1,6 +1,7 @@ const SECTIONS = [ { name: "Basic", + sidebarName: "Basic", options: [ { name: "Hide homepage suggestions", @@ -21,6 +22,7 @@ const SECTIONS = [ }, { name: "Homepage", + sidebarName: "Homepage", options: [ { name: "Hide the header", @@ -53,6 +55,7 @@ const SECTIONS = [ }, { name: "Left Navigation Bar", + sidebarName: "Left Navbar", options: [ { name: "Hide the entire left nav bar", @@ -88,6 +91,7 @@ const SECTIONS = [ }, { name: "Left Navigation Bar Sections", + sidebarName: "Left Navbar", options: [ { name: "Hide the quick links section", @@ -113,6 +117,7 @@ const SECTIONS = [ }, { name: "Video Player (dynamic)", + sidebarName: "Video Player", options: [ { name: "Skip and close ads", @@ -138,6 +143,7 @@ const SECTIONS = [ }, { name: "Video Player (static)", + sidebarName: "Video Player", options: [ { name: "Center contents (removes the sidebar)", @@ -183,6 +189,7 @@ const SECTIONS = [ }, { name: "Search Results", + sidebarName: "Search", options: [ { name: "Hide search bar suggestions", @@ -208,6 +215,7 @@ const SECTIONS = [ }, { name: "Subscriptions Page", + sidebarName: "Subscriptions", options: [ { name: "Hide shorts in subscriptions", @@ -228,6 +236,7 @@ const SECTIONS = [ }, { name: "Redirect the Homepage", + sidebarName: "Redirects", options: [ { name: "Redirect home to Subscriptions", @@ -284,6 +293,7 @@ const SECTIONS = [ }, { name: "Extension Settings", + sidebarName: "Settings", options: [ { name: "Enable menu timer - 10 seconds", diff --git a/src/js/options/main.js b/src/js/options/main.js index b5d03a5..3cb828e 100644 --- a/src/js/options/main.js +++ b/src/js/options/main.js @@ -5,13 +5,21 @@ if (typeof browser === 'undefined') { // Globals const HTML = document.documentElement; +const SIDEBAR = document.getElementById('sidebar'); +const TEMPLATE_SIDEBAR_SECTION = document.getElementById('template_sidebar_section'); const OPTIONS_LIST = document.getElementById('primary_options'); const TEMPLATE_FIELDSET = document.getElementById('template_fieldset'); const TEMPLATE_SECTION = document.getElementById('template_section'); const TEMPLATE_OPTION = document.getElementById('template_option'); - const TIMER_CONTAINER = document.getElementById('timer_container'); -let openedTime = Date.now() +let openedTime = Date.now(); +let currentUrl; + +const resultsPageRegex = new RegExp('.*://.*youtube\\.com/results.*', 'i'); +const videoPageRegex = new RegExp('.*://(www|m)\\.youtube\\.com/watch\\?v=.*', 'i'); +const homepageRegex = new RegExp('.*://(www|m)\\.youtube\\.com/$', 'i'); +const shortsRegex = new RegExp('.*://.*youtube\.com/shorts.*', 'i'); +const subsRegex = new RegExp(/\/feed\/subscriptions$/, 'i'); document.addEventListener("DOMContentLoaded", () => { browser.runtime.sendMessage({ getFieldsets: true }); @@ -26,8 +34,11 @@ browser.runtime.onMessage.addListener((data, sender) => { // Initial page load. if (SECTIONS) { - populateOptions(SECTIONS, headerSettings, settings); - HTML.setAttribute('loaded', true); + browser.tabs.query({ currentWindow: true, active:true }, ([{ url }]) => { + currentUrl = url; + populateOptions(SECTIONS, headerSettings, settings); + HTML.setAttribute('loaded', true); + }) } return true; @@ -40,17 +51,22 @@ browser.runtime.onMessage.addListener((data, sender) => { function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) { - // Clear the options list + // Clear the options list, and the sidebar OPTIONS_LIST.innerHTML = ''; + SIDEBAR.innerHTML = ''; + sidebarNames = []; // Add option nodes to the HTML. SECTIONS.forEach(section => { - const { name, options } = section; + const { name, sidebarName, options } = section; + + sidebarNames.push(sidebarName); // Create a new section const sectionNode = TEMPLATE_SECTION.cloneNode(true); sectionNode.id = name; sectionNode.classList.remove('removed'); + sectionNode.setAttribute('sidebarName', sidebarName); const label = sectionNode.querySelector('.section_label'); label.innerText = name; @@ -90,9 +106,35 @@ function populateOptions(SECTIONS, headerSettings, SETTING_VALUES) { OPTIONS_LIST.append(sectionNode); }); + // Add sections to the sidebar + const uniqueSidebarNames = Array.from(new Set(sidebarNames)); + uniqueSidebarNames.forEach(sidebarName => { + const sidebarSection = TEMPLATE_SIDEBAR_SECTION.cloneNode(true); + sidebarSection.removeAttribute('hidden'); + sidebarSection.removeAttribute('id'); + sidebarSection.setAttribute('sidebarName', sidebarName); + sidebarSection.innerText = sidebarName; + sidebarSection.addEventListener('click', sidebarSectionListener); + SIDEBAR.append(sidebarSection); + }); + + // Pre-select sidebar option based on current window. + if (resultsPageRegex.test(currentUrl)) { + console.log('matched resultsPageRegex'); + document.querySelector('.sidebar_section[sidebarname="Search"]').click(); + } + if (videoPageRegex.test(currentUrl)) { + console.log('matched videoPageRegex'); + document.querySelector('.sidebar_section[sidebarname="Video Player"]').click(); + } + if (subsRegex.test(currentUrl)) { + console.log('matched subsRegex'); + document.querySelector('.sidebar_section[sidebarname="Subscriptions"]').click(); + } + if (headerSettings) { Object.entries(headerSettings).forEach(([ id, value ]) => { - updateSetting(id, value); + HTML.setAttribute(id, value); const svg = document.querySelector(`div#${id} svg`); svg?.toggleAttribute('active', value); @@ -182,6 +224,35 @@ function onSearchInput(e) { } +function sidebarSectionListener(e) { + const sidebarSection = e.target; + const sidebarSections = Array.from(document.querySelectorAll('.sidebar_section')); + const selected = sidebarSection.toggleAttribute('selected'); + const sidebarName = sidebarSection.getAttribute('sidebarName'); + const sections = Array.from(document.querySelectorAll('.section_container:not(#template_section)')); + + // Reset + sections.forEach(section => { + section.classList.remove('removed'); + const options = Array.from(section.querySelectorAll('div.option')); + options.forEach(option => option.classList.remove('removed')); + }); + sidebarSections.forEach(sidebarSection => { + sidebarSection.removeAttribute('selected'); + }) + + sidebarSection.toggleAttribute('selected', selected); + if (!selected) return; + + sections.forEach(section => { + const sectionSidebarName = section.getAttribute('sidebarName'); + if (sidebarName !== sectionSidebarName) { + section.classList.add('removed'); + } + }); +} + + function handleEnter(e) { const keycode = e.keyCode || e.which; keycode === 13 && document.activeElement.click(); diff --git a/src/options.html b/src/options.html index a9ec5d0..65cf28f 100644 --- a/src/options.html +++ b/src/options.html @@ -93,21 +93,30 @@
Enable
-
+
-
-
+ -
- - - - -
-
-
+
+
+
+
+ +
+ + + + +
+
+
+ +