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 a1f979f000ea3fef8a608fe12e44c5d3eed00b9d..c6fbbe33307fd50f0d5fccfa37f4bbf69fae09e9 100644 (file)
--- 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
  *