From 5d4efd457a9ac404334948bd1e271b5e26f07486 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 25 Feb 2022 12:39:44 -0800 Subject: [PATCH 1/4] Removes scrollIntoView script behavior for tabs --- bookwyrm/static/js/vendor/tabs.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/bookwyrm/static/js/vendor/tabs.js b/bookwyrm/static/js/vendor/tabs.js index 0535cc869..884fb08f6 100644 --- a/bookwyrm/static/js/vendor/tabs.js +++ b/bookwyrm/static/js/vendor/tabs.js @@ -56,10 +56,6 @@ class TabGroup { tab.addEventListener('keydown', this.keydownEventListener.bind(this)); tab.addEventListener('keyup', this.keyupEventListener.bind(this)); - if (isSelected) { - tab.scrollIntoView(); - } - tab.index = count++; } } From cec7625e1eed97ab3259735a6dcd8c354f69ac0a Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 25 Feb 2022 12:47:46 -0800 Subject: [PATCH 2/4] Moves tabs script to main scripts directory It's our own custom script at this point --- bookwyrm/static/js/{vendor => }/tabs.js | 0 bookwyrm/templates/book/book.html | 2 +- bookwyrm/templates/feed/layout.html | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename bookwyrm/static/js/{vendor => }/tabs.js (100%) diff --git a/bookwyrm/static/js/vendor/tabs.js b/bookwyrm/static/js/tabs.js similarity index 100% rename from bookwyrm/static/js/vendor/tabs.js rename to bookwyrm/static/js/tabs.js diff --git a/bookwyrm/templates/book/book.html b/bookwyrm/templates/book/book.html index e15b656cf..60e3d4fd8 100644 --- a/bookwyrm/templates/book/book.html +++ b/bookwyrm/templates/book/book.html @@ -386,6 +386,6 @@ {% endblock %} {% block scripts %} - + {% endblock %} diff --git a/bookwyrm/templates/feed/layout.html b/bookwyrm/templates/feed/layout.html index 5697f2669..5083c0ab8 100644 --- a/bookwyrm/templates/feed/layout.html +++ b/bookwyrm/templates/feed/layout.html @@ -31,5 +31,5 @@ {% endblock %} {% block scripts %} - + {% endblock %} From 65bd3945e70db3224ce953e4b0acea6db0f288e5 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 25 Feb 2022 12:52:35 -0800 Subject: [PATCH 3/4] Prettify tabs file --- bookwyrm/static/js/tabs.js | 72 ++++++++++++++++++-------------------- 1 file changed, 34 insertions(+), 38 deletions(-) diff --git a/bookwyrm/static/js/tabs.js b/bookwyrm/static/js/tabs.js index 884fb08f6..f284e5484 100644 --- a/bookwyrm/static/js/tabs.js +++ b/bookwyrm/static/js/tabs.js @@ -1,11 +1,11 @@ /* exported TabGroup */ /* -* The content below is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* Heavily modified to web component by Zach Leatherman -* Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman -*/ + * The content below is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * Heavily modified to web component by Zach Leatherman + * Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman + */ class TabGroup { constructor(container) { this.container = container; @@ -15,7 +15,7 @@ class TabGroup { this.panels = this.container.querySelectorAll(':scope > [role="tabpanel"]'); this.delay = this.determineDelay(); - if(!this.tablist || !this.tabs.length || !this.panels.length) { + if (!this.tablist || !this.tabs.length || !this.panels.length) { return; } @@ -32,7 +32,7 @@ class TabGroup { left: 37, up: 38, right: 39, - down: 40 + down: 40, }; } @@ -42,19 +42,19 @@ class TabGroup { 37: -1, 38: -1, 39: 1, - 40: 1 + 40: 1, }; } initTabs() { let count = 0; - for(let tab of this.tabs) { + for (let tab of this.tabs) { let isSelected = tab.getAttribute("aria-selected") === "true"; tab.setAttribute("tabindex", isSelected ? "0" : "-1"); - tab.addEventListener('click', this.clickEventListener.bind(this)); - tab.addEventListener('keydown', this.keydownEventListener.bind(this)); - tab.addEventListener('keyup', this.keyupEventListener.bind(this)); + tab.addEventListener("click", this.clickEventListener.bind(this)); + tab.addEventListener("keydown", this.keydownEventListener.bind(this)); + tab.addEventListener("keyup", this.keyupEventListener.bind(this)); tab.index = count++; } @@ -64,8 +64,8 @@ class TabGroup { let selectedPanelId = this.tablist .querySelector('[role="tab"][aria-selected="true"]') .getAttribute("aria-controls"); - for(let panel of this.panels) { - if(panel.getAttribute("id") !== selectedPanelId) { + for (let panel of this.panels) { + if (panel.getAttribute("id") !== selectedPanelId) { panel.setAttribute("hidden", ""); } panel.setAttribute("tabindex", "0"); @@ -122,7 +122,7 @@ class TabGroup { // In all other cases only left and right arrow function. determineOrientation(event) { var key = event.keyCode; - var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical'; + var vertical = this.tablist.getAttribute("aria-orientation") == "vertical"; var proceed = false; if (vertical) { @@ -130,8 +130,7 @@ class TabGroup { event.preventDefault(); proceed = true; } - } - else { + } else { if (key === this.keys.left || key === this.keys.right) { proceed = true; } @@ -148,7 +147,7 @@ class TabGroup { var pressed = event.keyCode; for (let tab of this.tabs) { - tab.addEventListener('focus', this.focusEventHandler.bind(this)); + tab.addEventListener("focus", this.focusEventHandler.bind(this)); } if (this.direction[pressed]) { @@ -156,11 +155,9 @@ class TabGroup { if (target.index !== undefined) { if (this.tabs[target.index + this.direction[pressed]]) { this.tabs[target.index + this.direction[pressed]].focus(); - } - else if (pressed === this.keys.left || pressed === this.keys.up) { + } else if (pressed === this.keys.left || pressed === this.keys.up) { this.focusLastTab(); - } - else if (pressed === this.keys.right || pressed == this.keys.down) { + } else if (pressed === this.keys.right || pressed == this.keys.down) { this.focusFirstTab(); } } @@ -168,8 +165,8 @@ class TabGroup { } // Activates any given tab panel - activateTab (tab, setFocus) { - if(tab.getAttribute("role") !== "tab") { + activateTab(tab, setFocus) { + if (tab.getAttribute("role") !== "tab") { tab = tab.closest('[role="tab"]'); } @@ -179,19 +176,19 @@ class TabGroup { this.deactivateTabs(); // Remove tabindex attribute - tab.removeAttribute('tabindex'); + tab.removeAttribute("tabindex"); // Set the tab as selected - tab.setAttribute('aria-selected', 'true'); + tab.setAttribute("aria-selected", "true"); // Give the tab is-active class - tab.classList.add('is-active'); + tab.classList.add("is-active"); // Get the value of aria-controls (which is an ID) - var controls = tab.getAttribute('aria-controls'); + var controls = tab.getAttribute("aria-controls"); // Remove hidden attribute from tab panel to make it visible - document.getElementById(controls).removeAttribute('hidden'); + document.getElementById(controls).removeAttribute("hidden"); // Set focus when required if (setFocus) { @@ -202,14 +199,14 @@ class TabGroup { // Deactivate all tabs and tab panels deactivateTabs() { for (let tab of this.tabs) { - tab.classList.remove('is-active'); - tab.setAttribute('tabindex', '-1'); - tab.setAttribute('aria-selected', 'false'); - tab.removeEventListener('focus', this.focusEventHandler.bind(this)); + tab.classList.remove("is-active"); + tab.setAttribute("tabindex", "-1"); + tab.setAttribute("aria-selected", "false"); + tab.removeEventListener("focus", this.focusEventHandler.bind(this)); } for (let panel of this.panels) { - panel.setAttribute('hidden', 'hidden'); + panel.setAttribute("hidden", "hidden"); } } @@ -224,15 +221,14 @@ class TabGroup { // Determine whether there should be a delay // when user navigates with the arrow keys determineDelay() { - var hasDelay = this.tablist.hasAttribute('data-delay'); + var hasDelay = this.tablist.hasAttribute("data-delay"); var delay = 0; if (hasDelay) { - var delayValue = this.tablist.getAttribute('data-delay'); + var delayValue = this.tablist.getAttribute("data-delay"); if (delayValue) { delay = delayValue; - } - else { + } else { // If no value is specified, default to 300ms delay = 300; } From 02808f88e6888230704f193f3238648dbee072f2 Mon Sep 17 00:00:00 2001 From: Mouse Reeve Date: Fri, 25 Feb 2022 12:59:49 -0800 Subject: [PATCH 4/4] eslint fixes --- bookwyrm/settings.py | 2 +- bookwyrm/static/js/tabs.js | 31 +++++++++++++++++++------------ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/bookwyrm/settings.py b/bookwyrm/settings.py index 7a37499ef..0fbe3b731 100644 --- a/bookwyrm/settings.py +++ b/bookwyrm/settings.py @@ -21,7 +21,7 @@ RELEASE_API = env( PAGE_LENGTH = env("PAGE_LENGTH", 15) DEFAULT_LANGUAGE = env("DEFAULT_LANGUAGE", "English") -JS_CACHE = "a60e5a55" +JS_CACHE = "c7144efb" # email EMAIL_BACKEND = env("EMAIL_BACKEND", "django.core.mail.backends.smtp.EmailBackend") diff --git a/bookwyrm/static/js/tabs.js b/bookwyrm/static/js/tabs.js index f284e5484..1dcb0cace 100644 --- a/bookwyrm/static/js/tabs.js +++ b/bookwyrm/static/js/tabs.js @@ -48,8 +48,10 @@ class TabGroup { initTabs() { let count = 0; + for (let tab of this.tabs) { let isSelected = tab.getAttribute("aria-selected") === "true"; + tab.setAttribute("tabindex", isSelected ? "0" : "-1"); tab.addEventListener("click", this.clickEventListener.bind(this)); @@ -64,6 +66,7 @@ class TabGroup { let selectedPanelId = this.tablist .querySelector('[role="tab"][aria-selected="true"]') .getAttribute("aria-controls"); + for (let panel of this.panels) { if (panel.getAttribute("id") !== selectedPanelId) { panel.setAttribute("hidden", ""); @@ -82,16 +85,18 @@ class TabGroup { // Handle keydown on tabs keydownEventListener(event) { - var key = event.keyCode; + const key = event.keyCode; switch (key) { case this.keys.end: event.preventDefault(); + // Activate last tab this.activateTab(this.tabs[this.tabs.length - 1]); break; case this.keys.home: event.preventDefault(); + // Activate first tab this.activateTab(this.tabs[0]); break; @@ -107,7 +112,7 @@ class TabGroup { // Handle keyup on tabs keyupEventListener(event) { - var key = event.keyCode; + const key = event.keyCode; switch (key) { case this.keys.left: @@ -121,9 +126,9 @@ class TabGroup { // only up and down arrow should function. // In all other cases only left and right arrow function. determineOrientation(event) { - var key = event.keyCode; - var vertical = this.tablist.getAttribute("aria-orientation") == "vertical"; - var proceed = false; + const key = event.keyCode; + const vertical = this.tablist.getAttribute("aria-orientation") == "vertical"; + let proceed = false; if (vertical) { if (key === this.keys.up || key === this.keys.down) { @@ -144,14 +149,15 @@ class TabGroup { // Either focus the next, previous, first, or last tab // depending on key pressed switchTabOnArrowPress(event) { - var pressed = event.keyCode; + const pressed = event.keyCode; for (let tab of this.tabs) { tab.addEventListener("focus", this.focusEventHandler.bind(this)); } if (this.direction[pressed]) { - var target = event.target; + const target = event.target; + if (target.index !== undefined) { if (this.tabs[target.index + this.direction[pressed]]) { this.tabs[target.index + this.direction[pressed]].focus(); @@ -185,7 +191,7 @@ class TabGroup { tab.classList.add("is-active"); // Get the value of aria-controls (which is an ID) - var controls = tab.getAttribute("aria-controls"); + const controls = tab.getAttribute("aria-controls"); // Remove hidden attribute from tab panel to make it visible document.getElementById(controls).removeAttribute("hidden"); @@ -221,11 +227,12 @@ class TabGroup { // Determine whether there should be a delay // when user navigates with the arrow keys determineDelay() { - var hasDelay = this.tablist.hasAttribute("data-delay"); - var delay = 0; + const hasDelay = this.tablist.hasAttribute("data-delay"); + let delay = 0; if (hasDelay) { - var delayValue = this.tablist.getAttribute("data-delay"); + const delayValue = this.tablist.getAttribute("data-delay"); + if (delayValue) { delay = delayValue; } else { @@ -238,7 +245,7 @@ class TabGroup { } focusEventHandler(event) { - var target = event.target; + const target = event.target; setTimeout(this.checkTabFocus.bind(this), this.delay, target); }