81 lines
2.3 KiB
JavaScript
81 lines
2.3 KiB
JavaScript
(function () {
|
|
function initSupportFab() {
|
|
const root = document.querySelector('[data-support-fab]');
|
|
if (!root || root.dataset.initialized === 'true') {
|
|
return;
|
|
}
|
|
|
|
const toggle = root.querySelector('[data-support-fab-toggle]');
|
|
const menu = root.querySelector('[data-support-fab-menu]');
|
|
const focusableSelectors = 'a[href], button:not([disabled])';
|
|
|
|
if (!toggle || !menu) {
|
|
return;
|
|
}
|
|
|
|
root.dataset.initialized = 'true';
|
|
|
|
function openMenu() {
|
|
root.classList.add('is-open');
|
|
menu.hidden = false;
|
|
toggle.setAttribute('aria-expanded', 'true');
|
|
|
|
const firstItem = menu.querySelector(focusableSelectors);
|
|
if (firstItem) {
|
|
firstItem.focus();
|
|
}
|
|
}
|
|
|
|
function closeMenu() {
|
|
if (!root.classList.contains('is-open')) {
|
|
return;
|
|
}
|
|
|
|
root.classList.remove('is-open');
|
|
menu.hidden = true;
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
toggle.focus();
|
|
}
|
|
|
|
toggle.addEventListener('click', function () {
|
|
if (root.classList.contains('is-open')) {
|
|
closeMenu();
|
|
} else {
|
|
openMenu();
|
|
}
|
|
});
|
|
|
|
toggle.addEventListener('keydown', function (event) {
|
|
if (event.key === 'ArrowDown') {
|
|
event.preventDefault();
|
|
openMenu();
|
|
}
|
|
});
|
|
|
|
menu.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
menu.querySelectorAll(focusableSelectors).forEach(function (item) {
|
|
item.addEventListener('click', closeMenu);
|
|
});
|
|
|
|
document.addEventListener('click', function (event) {
|
|
if (!root.contains(event.target)) {
|
|
closeMenu();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Escape') {
|
|
closeMenu();
|
|
}
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initSupportFab);
|
|
})();
|