-
Notifications
You must be signed in to change notification settings - Fork 0
/
interaction.js
47 lines (42 loc) · 1.43 KB
/
interaction.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
45
46
47
const nav = document.querySelector(".nav");
const btnMenu = document.querySelector(".btn-menu");
const menu = document.querySelector(".menu");
function botaoDentro(event){
if(event.type === "touchstart"){
event.preventDefault();
}
event.stopPropagation();
nav.classList.toggle("active");
botaoFora(menu, () => {
nav.classList.remove("active");
mudarAria();
});
mudarAria();
}
function botaoFora(targetElement, callback){
const html = document.documentElement;
function clickHTML(event){
if(!targetElement.contains(event.target)){
targetElement.removeAttribute("data-target");
html.removeEventListener("click", clickHTML);
html.removeEventListener("touchstart", clickHTML);
callback();
}
}
if(!targetElement.hasAttribute("data-target")){
html.addEventListener("click", clickHTML);
html.addEventListener("touchstart", clickHTML);
targetElement.setAttribute("data-target", "");
}
}
function mudarAria(){
const ativo = nav.classList.contains("active");
btnMenu.setAttribute("aria-expanded", ativo);
if(ativo){
btnMenu.setAttribute("aria-label", "Fechar Menu");
}else{
btnMenu.setAttribute("aria-label", "Abrir Menu");
}
}
btnMenu.addEventListener("click", botaoDentro);
btnMenu.addEventListener("touchstart", botaoDentro);