mirrors/bookwyrm
1
0
Fork 1
mirror of https://github.com/bookwyrm-social/bookwyrm.git synced 2024-11-23 01:51:08 +00:00
Code Issues Projects Releases Wiki Activity

Prettify tabs file

Browse source
This commit is contained in:
Mouse Reeve 2022-02-25 12:52:35 -08:00
parent cec7625e1e
commit 65bd3945e7
1 changed files with 34 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
bookwyrm/static/js/tabs.js
View file

@ -1,11 +1,11 @@
/* exported TabGroup */ /* exported TabGroup */
/* /*
* The content below is licensed according to the W3C Software License at * The content below is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
* Heavily modified to web component by Zach Leatherman * Heavily modified to web component by Zach Leatherman
* Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman * Modified back to vanilla JavaScript with support for Bulma markup and nested tabs by Ned Zimmerman
*/ */
class TabGroup { class TabGroup {
constructor(container) { constructor(container) {
this.container = container; this.container = container;
@ -15,7 +15,7 @@ class TabGroup {
this.panels = this.container.querySelectorAll(':scope > [role="tabpanel"]'); this.panels = this.container.querySelectorAll(':scope > [role="tabpanel"]');
this.delay = this.determineDelay(); this.delay = this.determineDelay();
if(!this.tablist || !this.tabs.length || !this.panels.length) { if (!this.tablist || !this.tabs.length || !this.panels.length) {
return; return;
} }
@ -32,7 +32,7 @@ class TabGroup {
left: 37, left: 37,
up: 38, up: 38,
right: 39, right: 39,
down: 40 down: 40,
}; };
} }
@ -42,19 +42,19 @@ class TabGroup {
37: -1, 37: -1,
38: -1, 38: -1,
39: 1, 39: 1,
40: 1 40: 1,
}; };
} }
initTabs() { initTabs() {
let count = 0; let count = 0;
for(let tab of this.tabs) { for (let tab of this.tabs) {
let isSelected = tab.getAttribute("aria-selected") === "true"; let isSelected = tab.getAttribute("aria-selected") === "true";
tab.setAttribute("tabindex", isSelected ? "0" : "-1"); tab.setAttribute("tabindex", isSelected ? "0" : "-1");
tab.addEventListener('click', this.clickEventListener.bind(this)); tab.addEventListener("click", this.clickEventListener.bind(this));
tab.addEventListener('keydown', this.keydownEventListener.bind(this)); tab.addEventListener("keydown", this.keydownEventListener.bind(this));
tab.addEventListener('keyup', this.keyupEventListener.bind(this)); tab.addEventListener("keyup", this.keyupEventListener.bind(this));
tab.index = count++; tab.index = count++;
} }
@ -64,8 +64,8 @@ class TabGroup {
let selectedPanelId = this.tablist let selectedPanelId = this.tablist
.querySelector('[role="tab"][aria-selected="true"]') .querySelector('[role="tab"][aria-selected="true"]')
.getAttribute("aria-controls"); .getAttribute("aria-controls");
for(let panel of this.panels) { for (let panel of this.panels) {
if(panel.getAttribute("id") !== selectedPanelId) { if (panel.getAttribute("id") !== selectedPanelId) {
panel.setAttribute("hidden", ""); panel.setAttribute("hidden", "");
} }
panel.setAttribute("tabindex", "0"); panel.setAttribute("tabindex", "0");
@ -122,7 +122,7 @@ class TabGroup {
// In all other cases only left and right arrow function. // In all other cases only left and right arrow function.
determineOrientation(event) { determineOrientation(event) {
var key = event.keyCode; var key = event.keyCode;
var vertical = this.tablist.getAttribute('aria-orientation') == 'vertical'; var vertical = this.tablist.getAttribute("aria-orientation") == "vertical";
var proceed = false; var proceed = false;
if (vertical) { if (vertical) {
@ -130,8 +130,7 @@ class TabGroup {
event.preventDefault(); event.preventDefault();
proceed = true; proceed = true;
} }
} } else {
else {
if (key === this.keys.left || key === this.keys.right) { if (key === this.keys.left || key === this.keys.right) {
proceed = true; proceed = true;
} }
@ -148,7 +147,7 @@ class TabGroup {
var pressed = event.keyCode; var pressed = event.keyCode;
for (let tab of this.tabs) { for (let tab of this.tabs) {
tab.addEventListener('focus', this.focusEventHandler.bind(this)); tab.addEventListener("focus", this.focusEventHandler.bind(this));
} }
if (this.direction[pressed]) { if (this.direction[pressed]) {
@ -156,11 +155,9 @@ class TabGroup {
if (target.index !== undefined) { if (target.index !== undefined) {
if (this.tabs[target.index + this.direction[pressed]]) { if (this.tabs[target.index + this.direction[pressed]]) {
this.tabs[target.index + this.direction[pressed]].focus(); 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(); this.focusLastTab();
} } else if (pressed === this.keys.right || pressed == this.keys.down) {
else if (pressed === this.keys.right || pressed == this.keys.down) {
this.focusFirstTab(); this.focusFirstTab();
} }
} }
@ -168,8 +165,8 @@ class TabGroup {
} }
// Activates any given tab panel // Activates any given tab panel
activateTab (tab, setFocus) { activateTab(tab, setFocus) {
if(tab.getAttribute("role") !== "tab") { if (tab.getAttribute("role") !== "tab") {
tab = tab.closest('[role="tab"]'); tab = tab.closest('[role="tab"]');
} }
@ -179,19 +176,19 @@ class TabGroup {
this.deactivateTabs(); this.deactivateTabs();
// Remove tabindex attribute // Remove tabindex attribute
tab.removeAttribute('tabindex'); tab.removeAttribute("tabindex");
// Set the tab as selected // Set the tab as selected
tab.setAttribute('aria-selected', 'true'); tab.setAttribute("aria-selected", "true");
// Give the tab is-active class // 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) // 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 // Remove hidden attribute from tab panel to make it visible
document.getElementById(controls).removeAttribute('hidden'); document.getElementById(controls).removeAttribute("hidden");
// Set focus when required // Set focus when required
if (setFocus) { if (setFocus) {
@ -202,14 +199,14 @@ class TabGroup {
// Deactivate all tabs and tab panels // Deactivate all tabs and tab panels
deactivateTabs() { deactivateTabs() {
for (let tab of this.tabs) { for (let tab of this.tabs) {
tab.classList.remove('is-active'); tab.classList.remove("is-active");
tab.setAttribute('tabindex', '-1'); tab.setAttribute("tabindex", "-1");
tab.setAttribute('aria-selected', 'false'); tab.setAttribute("aria-selected", "false");
tab.removeEventListener('focus', this.focusEventHandler.bind(this)); tab.removeEventListener("focus", this.focusEventHandler.bind(this));
} }
for (let panel of this.panels) { 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 // Determine whether there should be a delay
// when user navigates with the arrow keys // when user navigates with the arrow keys
determineDelay() { determineDelay() {
var hasDelay = this.tablist.hasAttribute('data-delay'); var hasDelay = this.tablist.hasAttribute("data-delay");
var delay = 0; var delay = 0;
if (hasDelay) { if (hasDelay) {
var delayValue = this.tablist.getAttribute('data-delay'); var delayValue = this.tablist.getAttribute("data-delay");
if (delayValue) { if (delayValue) {
delay = delayValue; delay = delayValue;
} } else {
else {
// If no value is specified, default to 300ms // If no value is specified, default to 300ms
delay = 300; delay = 300;
} }