diff options
author | TrueDoctor <d-kobert@web.de> | 2018-09-27 17:44:03 +0200 |
---|---|---|
committer | TrueDoctor <d-kobert@web.de> | 2018-09-27 17:44:03 +0200 |
commit | e8dc39bf293aa0c6f2eb27104d5023c5a56e1ba4 (patch) | |
tree | b938213388339b3fd3c2a367b2a55dd99861c426 /WebInterface/NodeJSServer/src/modules/ui | |
parent | f8018831b42fa9f534494babcd496f77e4709166 (diff) | |
parent | 48a4b8eaf531ed2eb14a053035e66b05ad36521e (diff) |
Merge branch 'WebApi' of https://github.com/TrueDoctor/DiscoBot into WebApi
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'); + }); + } +} |