[assets] Refactor toggleAction and toggleMenu a bit.

This commit is contained in:
Fabien Basmaison 2021-04-06 17:48:56 +02:00
parent a21f954fb1
commit 9d95f54aa2

View file

@ -9,25 +9,29 @@ let BookWyrm = new class {
}
initEventListeners() {
// buttons that display or hide content
document.querySelectorAll('[data-controls]')
.forEach(button => button.addEventListener('click', this.toggleAction.bind(this)));
.forEach(button => button.addEventListener(
'click',
this.toggleAction.bind(this))
);
// javascript interactions (boost/fav)
document.querySelectorAll('.interaction')
.forEach(button => button.addEventListener('submit', this.interact.bind(this)));
.forEach(button => button.addEventListener(
'submit',
this.interact.bind(this))
);
// handle aria settings on menus
document.querySelectorAll('.pulldown-menu')
.forEach(button => button.addEventListener('click', this.toggleMenu.bind(this)));
// hidden submit button in a form
document.querySelectorAll('.hidden-form input')
.forEach(button => button.addEventListener('change', this.revealForm.bind(this)));
.forEach(button => button.addEventListener(
'change',
this.revealForm.bind(this))
);
// browser back behavior
document.querySelectorAll('[data-back]')
.forEach(button => button.addEventListener('click', this.back));
.forEach(button => button.addEventListener(
'click',
this.back)
);
}
/**
@ -125,45 +129,48 @@ let BookWyrm = new class {
*/
toggleAction(event) {
let trigger = event.currentTarget;
let pressed = trigger.getAttribute('aria-pressed') == 'false';
let pressed = trigger.getAttribute('aria-pressed') === 'false';
let targetId = trigger.dataset.controls;
// Unpress all triggers controlling the same target.
// Toggle pressed status on all triggers controlling the same target.
document.querySelectorAll('[data-controls="' + targetId + '"]')
.forEach(triggers => triggers.setAttribute(
.forEach(otherTrigger => otherTrigger.setAttribute(
'aria-pressed',
(triggers.getAttribute('aria-pressed') == 'false'))
);
otherTrigger.getAttribute('aria-pressed') === 'false'
));
if (targetId) {
// @todo Find a better way to handle the exception.
if (targetId && ! trigger.classList.contains('pulldown-menu')) {
let target = document.getElementById(targetId);
this.addRemoveClass(target, 'hidden', !pressed);
this.addRemoveClass(target, 'is-active', pressed);
}
// Show/hide pulldown-menus.
if (trigger.classList.contains('pulldown-menu')) {
this.toggleMenu(trigger, targetId);
}
// Show/hide container.
let container = document.getElementById('hide-' + targetId);
if (container) {
this.addRemoveClass(container, 'hidden', pressed);
this.toggleContainer(container, pressed);
}
// Check checkbox, if appropriate.
let checkbox = trigger.dataset['controls-checkbox'];
if (checkbox) {
document.getElementById(checkbox).checked = !!pressed;
this.toggleCheckbox(checkbox, pressed);
}
// Set focus, if appropriate.
let focus = trigger.dataset['focus-target'];
if (focus) {
let focusEl = document.getElementById(focus);
focusEl.focus();
setTimeout(function() { focusEl.selectionStart = focusEl.selectionEnd = 10000; }, 0);
this.toggleFocus(focus);
}
}
@ -192,7 +199,7 @@ let BookWyrm = new class {
}
/**
* Handle ARIA states on toggled menus.
* Show or hide menus.
*
* @note This function seems to be redundant and conflicts with toggleAction.
*
@ -200,10 +207,8 @@ let BookWyrm = new class {
*
* @return {undefined}
*/
toggleMenu(event) {
let trigger = event.currentTarget;
toggleMenu(trigger, targetId) {
let expanded = trigger.getAttribute('aria-expanded') == 'false';
let targetId = trigger.dataset.controls;
trigger.setAttribute('aria-expanded', expanded);
@ -214,6 +219,47 @@ let BookWyrm = new class {
}
}
/**
* Show or hide generic containers.
*
* @param {object} container - DOM node
* @param {boolean} pressed - Is the trigger pressed?
*
* @return {undefined}
*/
toggleContainer(container, pressed) {
this.addRemoveClass(container, 'hidden', pressed);
}
/**
* Check or uncheck a checbox.
*
* @param {object} checkbox - DOM node
* @param {boolean} pressed - Is the trigger pressed?
*
* @return {undefined}
*/
toggleCheckbox(checkbox, pressed) {
document.getElementById(checkbox).checked = !!pressed;
}
/**
* Give the focus to an element.
*
* @param {string} nodeId - ID of the DOM node to focus (button, link)
*
* @return {undefined}
*/
toggleFocus(nodeId) {
let node = document.getElementById(nodeId);
node.focus();
setTimeout(function() {
node.selectionStart = node.selectionEnd = 10000;
}, 0);
}
/**
* Submit a form using POST.
*