blob: 243bbb3eedf6d13209f3b80da4d81e4517a33fc6 (
plain)
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
|
// Showing / Hiding the backdrop menu
export default class Backdrop {
constructor(backdropMenu, frontLayer, menuButton) {
this.backdrop = document.getElementById(backdropMenu);
this.frontLayer = document.getElementById(frontLayer);
this.menuButton = document.getElementById(menuButton);
}
register() {
this.registerButtonEvent();
this.registerFrontLayerEvent();
}
registerButtonEvent() {
this.menuButton.addEventListener('click', () => {
// Hide / Unhide Backdrop Menu
if (this.backdrop.classList.contains('hidden')) {
this.backdrop.classList.remove('hidden');
} else {
this.backdrop.classList.add('hidden');
}
// Set open state for menu button
if (this.menuButton.classList.contains('open')) {
this.menuButton.classList.remove('open');
} else {
this.menuButton.classList.add('open');
}
});
}
registerFrontLayerEvent() {
// Hide menu when interacting with front layer
this.frontLayer.addEventListener('click', () => {
this.backdrop.classList.add('hidden');
this.menuButton.classList.remove('open');
});
}
}
|
