From 9f0b255f32dfa81bffe75f89335a78a659b4ce6a Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Tue, 27 Nov 2018 12:16:33 +0100
Subject: Reworked the code, but currently unable to test, so bugs are bound to
 be in there

Will test it sometime later. There also might still be stuff, that has yet to be reworked.
---
 .../src/js/modules/ui/components/backdrop.js       | 65 ++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js

(limited to 'WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js')

diff --git a/WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js b/WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js
new file mode 100644
index 0000000..82ca64f
--- /dev/null
+++ b/WebInterface/NodeJSServer/src/js/modules/ui/components/backdrop.js
@@ -0,0 +1,65 @@
+/**
+ * Class for adding functionality to backdrop elements
+ */
+export default class Backdrop {
+  /**
+   * Registers all important elements in the backdrop
+   * @param {string} backdropMenu ID of Backdrop Menu
+   * @param {string} frontLayer ID of Front Layer
+   * @param {string} menuButton ID of Show / Hide Menu Button
+   */
+  constructor(backdropMenu, frontLayer, menuButton) {
+    this.ids = {backdropMenu, frontLayer, menuButton};
+  }
+
+  /**
+   * Initializes the components from the ids defined in the constructor
+   */
+  initialize() {
+    this.open = false;
+    this.backdrop = document.getElementById(this.ids.backdropMenu);
+    this.frontLayer = document.getElementById(this.ids.frontLayer);
+    this.menuButton = document.getElementById(this.ids.menuButton);
+
+    this.registerEvents();
+  }
+
+  /**
+   * Registers all neccessary events
+   */
+  registerEvents() {
+    this.registerButtonEvent();
+    this.registerFrontLayerEvent();
+  }
+
+  /**
+   * Registers showing / hiding through menu button
+   */
+  registerButtonEvent() {
+    this.menuButton.addEventListener('click', () => {
+      // Change open state
+      this.open = !this.open;
+
+      // Hide / Unhide Backdrop Menu
+      this.open ? this.backdrop.classList.remove('hidden') :
+          this.backdrop.classList.add('hidden');
+
+      // Set open state for menu button
+      this.open ? this.menuButton.classList.add('open') :
+          this.menuButton.classList.remove('open');
+    });
+  }
+
+  /**
+   * Registers hiding upon front layer interaction
+   */
+  registerFrontLayerEvent() {
+    this.frontLayer.addEventListener('click', () => {
+      if (!this.open) return; // It's already closed
+
+      this.open = false;
+      this.backdrop.classList.add('hidden');
+      this.menuButton.classList.remove('open');
+    });
+  }
+}
-- 
cgit v1.2.3-70-g09d2