From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 19 Oct 2022 16:59:23 +0000 (+0000)
Subject: JS: Make dropdowns work
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=df5641ea38cf2790bbd476c3d430b9e12505b312;p=pbs.git

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 45d60137..ab8df4e7 100644
--- 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();
+	}
+});