-
Notifications
You must be signed in to change notification settings - Fork 2
/
app.js
44 lines (40 loc) · 1.36 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const nav = document.querySelector(".nav");
const btnMenu = document.querySelector(".btn-menu");
const menu = document.querySelector(".menu");
function handleButtonClick(event) {
if (event.type === "touchstart") event.preventDefault();
event.stopPropagation();
nav.classList.toggle("active");
handleClickOutside(menu, () => {
nav.classList.remove("active");
setAria();
});
setAria();
}
function handleClickOutside(targetElement, callback) {
const html = document.documentElement;
function handleHTMLClick(event) {
if (!targetElement.contains(event.target)) {
targetElement.removeAttribute("data-target");
html.removeEventListener("click", handleHTMLClick);
html.removeEventListener("touchstart", handleHTMLClick);
callback();
}
}
if (!targetElement.hasAttribute("data-target")) {
html.addEventListener("click", handleHTMLClick);
html.addEventListener("touchstart", handleHTMLClick);
targetElement.setAttribute("data-target", "");
}
}
function setAria() {
const isActive = nav.classList.contains("active");
btnMenu.setAttribute("aria-expanded", isActive);
if (isActive) {
btnMenu.setAttribute("aria-label", "Fechar Menu");
} else {
btnMenu.setAttribute("aria-label", "Abrir Menu");
}
}
btnMenu.addEventListener("click", handleButtonClick);
btnMenu.addEventListener("touchstart", handleButtonClick);