From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 11 Feb 2025 17:08:20 +0000 (+0000)
Subject: JS: Add code for modals
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=6868b8d5cf8006b4f2c25361bedb05cf9583a683;p=pbs.git

JS: Add code for modals

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

diff --git a/src/static/js/pbs.js b/src/static/js/pbs.js
index a1f979f0..c6fbbe33 100644
--- a/src/static/js/pbs.js
+++ b/src/static/js/pbs.js
@@ -66,6 +66,52 @@ document.addEventListener('keydown', function(e) {
 	}
 });
 
+/*
+ * Modals
+ */
+document.addEventListener("DOMContentLoaded", () => {
+	// Functions to open and close a modal
+	function openModal($el) {
+		$el.classList.add("is-active");
+	}
+
+	function closeModal($el) {
+		$el.classList.remove("is-active");
+	}
+
+	function closeAllModals() {
+		(document.querySelectorAll(".modal") || []).forEach(($modal) => {
+			closeModal($modal);
+		});
+	}
+
+	// Add a click event on buttons to open a specific modal
+	(document.querySelectorAll(".modal-toggle") || []).forEach(($trigger) => {
+		const modal = $trigger.dataset.target;
+		const $target = document.getElementById(modal);
+
+		$trigger.addEventListener("click", () => {
+			openModal($target);
+		});
+	});
+
+	// Add a click event on various child elements to close the parent modal
+	(document.querySelectorAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button") || []).forEach(($close) => {
+		const $target = $close.closest(".modal");
+
+		$close.addEventListener("click", () => {
+			closeModal($target);
+		});
+	});
+
+	// Add a keyboard event to close all modals
+	document.addEventListener("keydown", (event) => {
+		if (event.key === "Escape") {
+			closeAllModals();
+		}
+	});
+});
+
 /*
  * Push Subscriptions
  *