JS: Make dropdowns work

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/static/js/pbs.js b/src/static/js/pbs.js
index 45d6013781c720a780c386dad16b877e9abc4c85..ab8df4e7fbb8f7f466e07a775e79f6d453059dfe 100644 (file)
--- a/src/static/js/pbs.js
+++ b/src/static/js/pbs.js
@@ -8,3 +8,45 @@ $(document).ready(function() {
        // Activate Google Prettify for pretty-printing code.
        window.prettyPrint && prettyPrint()
 });
+
+/*
+
+       Dropdowns
+
+*/
+
+// Get all dropdowns on the page that aren't hoverable
+const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
+
+if (dropdowns.length > 0) {
+       // For each dropdown, add event handler to open on click.
+       dropdowns.forEach(function(el) {
+               el.addEventListener('click', function(e) {
+                       closeDropdowns();
+                       e.stopPropagation();
+                       el.classList.toggle('is-active');
+               });
+       });
+
+       // If user clicks outside dropdown, close it.
+       document.addEventListener('click', function(e) {
+               closeDropdowns();
+       });
+}
+
+/*
+ * Close dropdowns by removing the "is-active" class
+ */
+function closeDropdowns() {
+       dropdowns.forEach(function(el) {
+               el.classList.remove('is-active');
+       });
+}
+
+// Close dropdowns if ESC pressed
+document.addEventListener('keydown', function(e) {
+       let event = e || window.event;
+       if (event.key === 'Esc' || event.key === 'Escape') {
+               closeDropdowns();
+       }
+});