79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
const STATES = {
|
|
open: "is-open",
|
|
};
|
|
|
|
export default class Navigation {
|
|
constructor(cfg = {}) {
|
|
if (!cfg.container) return false;
|
|
if (!cfg.menu) return false;
|
|
this.state = "hidden";
|
|
this.container = cfg.container;
|
|
this.menu = cfg.menu;
|
|
}
|
|
|
|
init() {
|
|
if (!this.state) return false;
|
|
this.container.setAttribute("aria-hidden", true);
|
|
this.attachClickEvents();
|
|
this.attachKeyEvents();
|
|
return true;
|
|
}
|
|
|
|
attachClickEvents() {
|
|
this.container.addEventListener("click", e => {
|
|
if (this.container === e.target) {
|
|
this.closeNav();
|
|
}
|
|
});
|
|
this.menu.container.addEventListener("click", () => {
|
|
this.openNav();
|
|
});
|
|
this.container
|
|
.querySelector(".nav__close")
|
|
.addEventListener("click", () => {
|
|
this.closeNav();
|
|
});
|
|
}
|
|
|
|
attachKeyEvents() {
|
|
const first = this.container.querySelector(".nav__link");
|
|
const last = this.container.querySelector(".nav__close");
|
|
this.container.addEventListener("keydown", e => {
|
|
if (e.keyCode === 27) {
|
|
this.closeNav();
|
|
}
|
|
});
|
|
first.addEventListener("keydown", e => {
|
|
if (e.shiftKey && e.keyCode === 9) {
|
|
e.preventDefault();
|
|
last.focus();
|
|
}
|
|
});
|
|
last.addEventListener("keydown", e => {
|
|
if (!e.shiftKey && e.keyCode === 9) {
|
|
e.preventDefault();
|
|
first.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
openNav() {
|
|
this.lastActiveElement = document.activeElement;
|
|
this.state = "visible";
|
|
this.menu.hideMenu();
|
|
this.container.classList.add(STATES.open);
|
|
this.container.setAttribute("aria-hidden", false);
|
|
this.container.querySelector(".nav__title-link").focus();
|
|
}
|
|
|
|
closeNav() {
|
|
this.state = "hidden";
|
|
this.menu.showMenu();
|
|
this.container.classList.remove(STATES.open);
|
|
this.container.setAttribute("aria-hidden", true);
|
|
if (this.lastActiveElement) {
|
|
this.lastActiveElement.focus();
|
|
}
|
|
}
|
|
}
|