diff options
author | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-09-26 20:30:15 +0200 |
---|---|---|
committer | TrueKuehli <rctcoaster2000@hotmail.de> | 2018-09-26 20:30:15 +0200 |
commit | a0fbb2bd6db8702ad9729823b91176861b2098c9 (patch) | |
tree | db87afcfe173bc6d4896b248bebff96a92097964 /WebInterface/NodeJSServer/src/modules/ui | |
parent | 0d8ae32d2f974ad6139a55e6e0d97d785fb13489 (diff) |
Grundimplementierung des Servers und der Webseite
Diffstat (limited to 'WebInterface/NodeJSServer/src/modules/ui')
-rw-r--r-- | WebInterface/NodeJSServer/src/modules/ui/backdrop.js | 41 |
1 files changed, 41 insertions, 0 deletions
diff --git a/WebInterface/NodeJSServer/src/modules/ui/backdrop.js b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js new file mode 100644 index 0000000..243bbb3 --- /dev/null +++ b/WebInterface/NodeJSServer/src/modules/ui/backdrop.js @@ -0,0 +1,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'); + }); + } +} |