class Navigation {
|
constructor() {
|
this.counter = 0;
|
this.initElements();
|
if (this.navs.size === 0) {
|
return;
|
}
|
|
this.openNav = null;
|
this.openSubmenu = null;
|
this.releaseFocusTrap = null;
|
this.clicked = new Set();
|
this.initListeners();
|
}
|
|
initElements() {
|
this.navs = new Map();
|
document.querySelectorAll('nav:has(.submenu), nav:has(.toggle)').forEach(nav => {
|
let navID = nav.id;
|
if (navID === '' || this.navs.has(navID)) {
|
navID = `nav-${this.counter}`;
|
nav.id = navID;
|
this.counter++;
|
}
|
if (nav.querySelector('.submenu')) {
|
nav.addEventListener('mouseenter', this.handleHoverOn.bind(this));
|
nav.addEventListener('mouseleave', this.handleHoverOff.bind(this));
|
}
|
|
let [
|
toggles,
|
submenus,
|
submenuToggles
|
] = [
|
nav.querySelectorAll('nav .toggle'),
|
nav.querySelectorAll('.has-submenu'),
|
nav.querySelectorAll('.toggle:not(.main)')
|
];
|
let elements = {
|
nav: nav,
|
toggles: toggles,
|
submenus: submenus,
|
submenuToggles: submenuToggles
|
}
|
this.counter++;
|
submenus.forEach(menu => {
|
menu.id = 'submenu-'+this.counter;
|
menu.addEventListener('mouseenter', this.handleHoverOn.bind(this));
|
menu.addEventListener('mouseleave', this.handleHoverOff.bind(this));
|
this.counter++;
|
});
|
this.navs.set(navID, elements);
|
});
|
}
|
|
initListeners() {
|
this.clickListener = this.handleClick.bind(this);
|
this.keysListener = this.handleKeys.bind(this);
|
this.hoverOnListener = this.handleHoverOn.bind(this);
|
this.hoverOffListener = this.handleHoverOff.bind(this);
|
|
document.addEventListener('click', this.clickListener);
|
}
|
handleClick(e) {
|
if (this.navs.size === 0) {
|
return;
|
}
|
|
let toggle = e.target.closest('.toggle.main');
|
if (toggle) {
|
let nav = toggle.closest('nav');
|
let isOpening = !this.clicked.has(nav);
|
let shouldToggle = nav.classList.contains('open') !== isOpening;
|
if (shouldToggle) {
|
this.toggleNav(isOpening, nav.id);
|
}
|
|
if (isOpening) {
|
this.clicked.add(nav);
|
} else {
|
this.clicked.delete(nav);
|
}
|
return;
|
}
|
|
let submenuToggle = e.target.closest('[data-action="toggle-submenu"], .has-submenu .a')
|
if (submenuToggle) {
|
let li = submenuToggle.closest('li');
|
let isOpening = !this.clicked.has(li);
|
let shouldToggle = li.classList.contains('open') !== isOpening;
|
|
if (isOpening) {
|
this.clicked.add(li);
|
} else {
|
this.clicked.delete(li);
|
}
|
if (shouldToggle) {
|
this.toggleSubmenu(isOpening, li);
|
}
|
return;
|
}
|
if (!this.openNav) {
|
return;
|
}
|
let close = true;
|
for (let [navID, elements] of this.navs) {
|
if (e.target.closest('#'+navID)) {
|
close = false;
|
break;
|
}
|
}
|
if (close) {
|
this.toggleNav(false, this.openNav);
|
}
|
}
|
|
handleHoverOn(e) {
|
let target = e.currentTarget;
|
if (this.clicked.has(target) || target.closest('nav.sidebar')) {
|
return;
|
}
|
if (target.classList.contains('has-submenu')) {
|
this.toggleSubmenu(true, target);
|
} else if (target.tagName === 'NAV') {
|
if (!target.classList.contains('mobile')) {
|
this.toggleNav(true, target.id);
|
}
|
}
|
}
|
|
handleHoverOff(e) {
|
let target = e.currentTarget;
|
if (this.clicked.has(target) || target.closest('nav.sidebar')) {
|
return;
|
}
|
|
if (target.classList.contains('has-submenu')) {
|
this.toggleSubmenu(false, target);
|
} else if (target.tagName === 'NAV') {
|
if (target.classList.contains('mobile')) {
|
return;
|
}
|
let nav = this.navs.get(target.id);
|
let shouldToggle = true;
|
for (let submenu of nav.submenus) {
|
if (this.clicked.has(submenu)) {
|
shouldToggle = false;
|
break;
|
}
|
}
|
if (shouldToggle) {
|
this.toggleNav(false, target.id);
|
}
|
|
}
|
}
|
|
handleKeys(e) {
|
if (!this.openNav) return;
|
|
switch (e.key) {
|
case 'Escape':
|
this.closeAll();
|
break;
|
|
case 'ArrowDown':
|
this.focusNextItem();
|
e.preventDefault();
|
break;
|
|
case 'ArrowUp':
|
this.focusPrevItem();
|
e.preventDefault();
|
break;
|
}
|
}
|
|
closeAll() {
|
let nav = this.navs.get(this.openNav);
|
|
if (nav && this.clicked.has(nav.nav)) {
|
this.clicked.delete(nav.nav);
|
}
|
this.toggleNav(false, this.openNav);
|
}
|
|
focusNextItem() {
|
const items = this.getFocusableItems();
|
const i = items.indexOf(document.activeElement);
|
const next = items[i + 1] || items[0];
|
next.focus();
|
}
|
|
focusPrevItem() {
|
const items = this.getFocusableItems();
|
const i = items.indexOf(document.activeElement);
|
const prev = items[i - 1] || items[items.length - 1];
|
prev.focus();
|
}
|
|
getFocusableItems() {
|
return Array.from(document.querySelectorAll(
|
'nav.open a, nav.open button'
|
)).filter(el => !el.disabled && !el.closest('[hidden]') && !el.closest('[inert]'));
|
}
|
|
toggleNav(on, id) {
|
let nav = this.navs.get(id);
|
if (!nav) {
|
return;
|
}
|
|
if (on && id !== this.openNav) {
|
this.toggleNav(false, this.openNav);
|
}
|
if (on) {
|
this.openNav = id;
|
document.addEventListener('keydown', this.keysListener);
|
if (nav.nav.classList.contains('mobile')) {
|
this.releaseFocusTrap = window.jvbA11y.trapFocus(nav.nav);
|
}
|
|
} else {
|
if (this.releaseFocusTrap) {
|
this.releaseFocusTrap();
|
this.releaseFocusTrap = null;
|
}
|
if (this.openNav === id) {
|
this.openNav = null;
|
}
|
document.removeEventListener('keydown', this.keysListener);
|
if (!nav.nav.classList.contains('sidebar')) {
|
Array.from(nav.submenus).forEach(submenu => {
|
if(submenu.classList.contains('open')) {
|
this.toggleSubmenu(false, submenu);
|
}
|
});
|
}
|
Array.from(nav.submenus).forEach(submenu => {
|
if (this.clicked.has(submenu)) {
|
this.clicked.delete(submenu);
|
}
|
});
|
}
|
|
nav.nav.classList.toggle('open', on);
|
|
if (nav.nav.classList.contains('mobile')) {
|
const content = nav.nav.querySelector(':scope > ul');
|
if (content) content.inert = !on;
|
}
|
|
nav.nav.setAttribute('aria-expanded', on);
|
if (on) {
|
nav.nav.querySelector('a:not(.skip-to-content)')?.focus();
|
}
|
|
}
|
|
toggleSubmenu(on, submenu) {
|
if (on && this.openSubmenu && this.openSubmenu !== submenu && !this.openSubmenu.contains(submenu)) {
|
this.toggleSubmenu(false, this.openSubmenu);
|
}
|
|
if (on) {
|
this.openSubmenu = submenu;
|
} else if (this.openSubmenu === submenu) {
|
this.openSubmenu = null;
|
this.clicked.delete(submenu);
|
}
|
|
|
|
|
let [
|
toggle,
|
firstLink
|
] = [
|
submenu.querySelector('.toggle'),
|
submenu.querySelector('a')
|
];
|
|
if (!on) {
|
toggle.focus();
|
}
|
const content = submenu.querySelector(':scope > ul');
|
if (content) content.inert = !on;
|
let label = toggle.getAttribute('aria-label');
|
window.jvbA11y.announce(on ? `${label} expanded` : `${label} collapsed`);
|
|
submenu.classList.toggle('open', on);
|
toggle.setAttribute('aria-expanded', on);
|
if (on && firstLink) {
|
firstLink.focus();
|
}
|
}
|
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.jvbNav = new Navigation();
|
});
|
