Implemented iframe logic for modals

app/static/js/iframe.js

@@ -1,41 +1,9 @@
-// Global variables to store the original main content and style (only once)
+// Global variables to store elements and original state
-let originalMainContent = null;
+let mainElement, originalContent, originalMainStyle, container, customScrollbar;
-let originalMainStyle = null;
 
-function initializeIframeSetup() {
+// Function to open a URL in an iframe using global variables
-    // Remove existing event handlers from .iframe-link elements by replacing them with clones
+function openIframe(url) {
-    const iframeLinks = document.querySelectorAll(".iframe-link");
+    // Set a fixed height for the main element if not already set
-    iframeLinks.forEach(link => {
-        const newLink = link.cloneNode(true); // Clones the element without its event listeners
-        link.parentNode.replaceChild(newLink, link);
-    });
-
-    // Similarly, remove event handlers from header h1 by cloning it
-    const headerH1 = document.querySelector("header h1");
-    if (headerH1) {
-        const newHeaderH1 = headerH1.cloneNode(true);
-        headerH1.parentNode.replaceChild(newHeaderH1, headerH1);
-    }
-
-    // Now, select the main element and store its original content and inline style if not already stored
-    const mainElement = document.querySelector("main");
-    if (originalMainContent === null) {
-        originalMainContent = mainElement.innerHTML;
-        originalMainStyle = mainElement.getAttribute("style");
-    }
-
-    // Get the container element and the custom scrollbar element
-    const container = document.querySelector(".container");
-    const customScrollbar = document.getElementById("custom-scrollbar");
-
-    // Re-select the links (now without previous event listeners) and add new event listeners
-    const newLinks = document.querySelectorAll(".iframe-link");
-    newLinks.forEach(link => {
-        link.addEventListener("click", function (event) {
-            event.preventDefault(); // Prevent default link behavior
-            const url = this.getAttribute("href");
-
-            // Fix the original height of the main element if not already set
     if (!mainElement.style.height) {
         mainElement.style.height = `${mainElement.clientHeight}px`;
     }
@@ -68,17 +36,35 @@ function initializeIframeSetup() {
 
     // Set the URL of the iframe
     iframe.src = url;
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Initialize global variables
+    mainElement = document.querySelector("main");
+    originalContent = mainElement.innerHTML;
+    originalMainStyle = mainElement.getAttribute("style"); // might be null if no inline style exists
+
+    container = document.querySelector(".container");
+    customScrollbar = document.getElementById("custom-scrollbar");
+
+    // Get all links that should open in an iframe
+    const links = document.querySelectorAll(".iframe-link");
+
+    // Add click event listener to each iframe link
+    links.forEach(link => {
+        link.addEventListener("click", function (event) {
+            event.preventDefault(); // Prevent default link behavior
+            const url = this.getAttribute("href");
+            openIframe(url);
         });
     });
 
-    // Re-select header h1 and add its event listener to restore the original main content and style
+    // Add click event listener to header h1 to restore the original main content and style
-    const newHeaderH1 = document.querySelector("header h1");
+    const headerH1 = document.querySelector("header h1");
-    if (newHeaderH1) {
+    if (headerH1) {
-        // Change the cursor to pointer to indicate clickability
+        headerH1.addEventListener("click", function () {
-        newHeaderH1.style.cursor = "pointer";
-        newHeaderH1.addEventListener("click", function () {
             // Restore the original content of the main element (removing the iframe)
-            mainElement.innerHTML = originalMainContent;
+            mainElement.innerHTML = originalContent;
 
             // Restore the original inline style of the main element
             if (originalMainStyle !== null) {
@@ -96,19 +82,19 @@ function initializeIframeSetup() {
             if (customScrollbar) {
                 customScrollbar.style.display = "";
             }
+
+            // Adjust scroll container height if that function exists
+            if (typeof adjustScrollContainerHeight === "function") {
+                adjustScrollContainerHeight();
+            }
         });
     }
 
-    // Add a window resize event listener to adjust the iframe height (if any)
+    // Adjust iframe height on window resize (optional, to keep it responsive)
     window.addEventListener("resize", function () {
         const iframe = mainElement.querySelector("iframe");
         if (iframe) {
             iframe.style.height = mainElement.style.height;
         }
     });
-}
-
-// Example: manually trigger initialization after DOM is loaded
-document.addEventListener("DOMContentLoaded", function () {
-    initializeIframeSetup();
 });

app/static/js/modal.js

@@ -45,6 +45,16 @@ function openDynamicPopup(subitem) {
     linkBox.classList.remove('d-none');
     linkHref.href = subitem.url;
     linkHref.innerText = subitem.description || "Open Link";
+    if (subitem.iframe) {
+      linkHref.classList.add('iframe');
+      // Attach an event listener that prevents the default behavior and
+      // opens the URL in an iframe when clicked.
+      linkHref.addEventListener('click', function(event) {
+        event.preventDefault();
+        openIframe(subitem.url);
+        closeAllModals()
+      });
+    }
   } else {
     linkBox.classList.add('d-none');
     linkHref.href = '#';