mirror of
https://github.com/bookwyrm-social/bookwyrm.git
synced 2024-09-08 12:56:45 +00:00
Merge pull request #730 from mouse-reeve/js-style
JS linting and whitespace fixes
This commit is contained in:
Mouse Reeve
GitHub
commit
efcb552f9a
1 changed files with 203 additions and 203 deletions
|
|
@ -209,249 +209,249 @@ function removeClass(el, className) {
|
||||||
*/
|
*/
|
||||||
class TabGroup {
|
class TabGroup {
|
||||||
constructor(container) {
|
constructor(container) {
|
||||||
this.container = container;
|
this.container = container;
|
||||||
|
|
||||||
this.tablist = this.container.querySelector('[role="tablist"]');
|
this.tablist = this.container.querySelector('[role="tablist"]');
|
||||||
this.buttons = this.tablist.querySelectorAll('[role="tab"]');
|
this.buttons = this.tablist.querySelectorAll('[role="tab"]');
|
||||||
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.buttons.length || !this.panels.length) {
|
if(!this.tablist || !this.buttons.length || !this.panels.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.keys = this.keys();
|
this.keys = this.keys();
|
||||||
this.direction = this.direction();
|
this.direction = this.direction();
|
||||||
this.initButtons();
|
this.initButtons();
|
||||||
this.initPanels();
|
this.initPanels();
|
||||||
}
|
}
|
||||||
|
|
||||||
keys() {
|
keys() {
|
||||||
return {
|
return {
|
||||||
end: 35,
|
end: 35,
|
||||||
home: 36,
|
home: 36,
|
||||||
left: 37,
|
left: 37,
|
||||||
up: 38,
|
up: 38,
|
||||||
right: 39,
|
right: 39,
|
||||||
down: 40
|
down: 40
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add or substract depending on key pressed
|
// Add or substract depending on key pressed
|
||||||
direction() {
|
direction() {
|
||||||
return {
|
return {
|
||||||
37: -1,
|
37: -1,
|
||||||
38: -1,
|
38: -1,
|
||||||
39: 1,
|
39: 1,
|
||||||
40: 1
|
40: 1
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
initButtons() {
|
initButtons() {
|
||||||
let count = 0;
|
let count = 0;
|
||||||
for(let button of this.buttons) {
|
for(let button of this.buttons) {
|
||||||
let isSelected = button.getAttribute("aria-selected") === "true";
|
let isSelected = button.getAttribute("aria-selected") === "true";
|
||||||
button.setAttribute("tabindex", isSelected ? "0" : "-1");
|
button.setAttribute("tabindex", isSelected ? "0" : "-1");
|
||||||
|
|
||||||
button.addEventListener('click', this.clickEventListener.bind(this));
|
button.addEventListener('click', this.clickEventListener.bind(this));
|
||||||
button.addEventListener('keydown', this.keydownEventListener.bind(this));
|
button.addEventListener('keydown', this.keydownEventListener.bind(this));
|
||||||
button.addEventListener('keyup', this.keyupEventListener.bind(this));
|
button.addEventListener('keyup', this.keyupEventListener.bind(this));
|
||||||
|
|
||||||
button.index = count++;
|
button.index = count++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initPanels() {
|
initPanels() {
|
||||||
let selectedPanelId = this.tablist.querySelector('[role="tab"][aria-selected="true"]').getAttribute("aria-controls");
|
let selectedPanelId = this.tablist.querySelector('[role="tab"][aria-selected="true"]').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");
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
clickEventListener(event) {
|
clickEventListener(event) {
|
||||||
let button = event.target.closest('a');
|
let button = event.target.closest('a');
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
this.activateTab(button, false);
|
this.activateTab(button, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle keydown on tabs
|
// Handle keydown on tabs
|
||||||
keydownEventListener(event) {
|
keydownEventListener(event) {
|
||||||
var key = event.keyCode;
|
var key = event.keyCode;
|
||||||
|
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case this.keys.end:
|
case this.keys.end:
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
// Activate last tab
|
// Activate last tab
|
||||||
this.activateTab(this.buttons[this.buttons.length - 1]);
|
this.activateTab(this.buttons[this.buttons.length - 1]);
|
||||||
break;
|
break;
|
||||||
case this.keys.home:
|
case this.keys.home:
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
// Activate first tab
|
// Activate first tab
|
||||||
this.activateTab(this.buttons[0]);
|
this.activateTab(this.buttons[0]);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
// Up and down are in keydown
|
// Up and down are in keydown
|
||||||
// because we need to prevent page scroll >:)
|
// because we need to prevent page scroll >:)
|
||||||
case this.keys.up:
|
case this.keys.up:
|
||||||
case this.keys.down:
|
case this.keys.down:
|
||||||
this.determineOrientation(event);
|
this.determineOrientation(event);
|
||||||
break;
|
break;
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle keyup on tabs
|
// Handle keyup on tabs
|
||||||
keyupEventListener(event) {
|
keyupEventListener(event) {
|
||||||
var key = event.keyCode;
|
var key = event.keyCode;
|
||||||
|
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case this.keys.left:
|
case this.keys.left:
|
||||||
case this.keys.right:
|
case this.keys.right:
|
||||||
this.determineOrientation(event);
|
this.determineOrientation(event);
|
||||||
break;
|
break;
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// When a tablist’s aria-orientation is set to vertical,
|
// When a tablist’s aria-orientation is set to vertical,
|
||||||
// only up and down arrow should function.
|
// only up and down arrow should function.
|
||||||
// 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) {
|
||||||
if (key === this.keys.up || key === this.keys.down) {
|
if (key === this.keys.up || key === this.keys.down) {
|
||||||
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;
|
||||||
};
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
if (proceed) {
|
if (proceed) {
|
||||||
this.switchTabOnArrowPress(event);
|
this.switchTabOnArrowPress(event);
|
||||||
};
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Either focus the next, previous, first, or last tab
|
// Either focus the next, previous, first, or last tab
|
||||||
// depending on key pressed
|
// depending on key pressed
|
||||||
switchTabOnArrowPress(event) {
|
switchTabOnArrowPress(event) {
|
||||||
var pressed = event.keyCode;
|
var pressed = event.keyCode;
|
||||||
|
|
||||||
for (let button of this.buttons) {
|
for (let button of this.buttons) {
|
||||||
button.addEventListener('focus', this.focusEventHandler.bind(this));
|
button.addEventListener('focus', this.focusEventHandler.bind(this));
|
||||||
};
|
}
|
||||||
|
|
||||||
if (this.direction[pressed]) {
|
if (this.direction[pressed]) {
|
||||||
var target = event.target;
|
var target = event.target;
|
||||||
if (target.index !== undefined) {
|
if (target.index !== undefined) {
|
||||||
if (this.buttons[target.index + this.direction[pressed]]) {
|
if (this.buttons[target.index + this.direction[pressed]]) {
|
||||||
this.buttons[target.index + this.direction[pressed]].focus();
|
this.buttons[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();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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"]');
|
||||||
}
|
}
|
||||||
|
|
||||||
setFocus = setFocus || true;
|
setFocus = setFocus || true;
|
||||||
|
|
||||||
// Deactivate all other tabs
|
// Deactivate all other tabs
|
||||||
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 parent an is-active class
|
// Give the tab parent an is-active class
|
||||||
tab.parentNode.classList.add('is-active');
|
tab.parentNode.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) {
|
||||||
tab.focus();
|
tab.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Deactivate all tabs and tab panels
|
// Deactivate all tabs and tab panels
|
||||||
deactivateTabs() {
|
deactivateTabs() {
|
||||||
for (let button of this.buttons) {
|
for (let button of this.buttons) {
|
||||||
button.parentNode.classList.remove('is-active');
|
button.parentNode.classList.remove('is-active');
|
||||||
button.setAttribute('tabindex', '-1');
|
button.setAttribute('tabindex', '-1');
|
||||||
button.setAttribute('aria-selected', 'false');
|
button.setAttribute('aria-selected', 'false');
|
||||||
button.removeEventListener('focus', this.focusEventHandler.bind(this));
|
button.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');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
focusFirstTab() {
|
focusFirstTab() {
|
||||||
this.buttons[0].focus();
|
this.buttons[0].focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
focusLastTab() {
|
focusLastTab() {
|
||||||
this.buttons[this.buttons.length - 1].focus();
|
this.buttons[this.buttons.length - 1].focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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 {
|
||||||
|
// If no value is specified, default to 300ms
|
||||||
|
delay = 300;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
// If no value is specified, default to 300ms
|
|
||||||
delay = 300;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
return delay;
|
return delay;
|
||||||
}
|
}
|
||||||
|
|
||||||
focusEventHandler(event) {
|
focusEventHandler(event) {
|
||||||
var target = event.target;
|
var target = event.target;
|
||||||
|
|
||||||
setTimeout(this.checkTabFocus.bind(this), this.delay, target);
|
setTimeout(this.checkTabFocus.bind(this), this.delay, target);
|
||||||
};
|
}
|
||||||
|
|
||||||
// Only activate tab on focus if it still has focus after the delay
|
// Only activate tab on focus if it still has focus after the delay
|
||||||
checkTabFocus(target) {
|
checkTabFocus(target) {
|
||||||
let focused = document.activeElement;
|
let focused = document.activeElement;
|
||||||
|
|
||||||
if (target === focused) {
|
if (target === focused) {
|
||||||
this.activateTab(target, false);
|
this.activateTab(target, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue