Implemented iframe logic for modals

app/static/js/iframe.js

@@ -1,84 +1,70 @@
-// 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 => {
+    if (!mainElement.style.height) {
-        const newLink = link.cloneNode(true); // Clones the element without its event listeners
+        mainElement.style.height = `${mainElement.clientHeight}px`;
-        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
+    // Replace the container class with container-fluid if not already applied
-    const mainElement = document.querySelector("main");
+    if (container && !container.classList.contains("container-fluid")) {
-    if (originalMainContent === null) {
+        container.classList.replace("container", "container-fluid");
-        originalMainContent = mainElement.innerHTML;
-        originalMainStyle = mainElement.getAttribute("style");
     }
 
-    // Get the container element and the custom scrollbar element
+    // Hide the custom scrollbar
-    const container = document.querySelector(".container");
+    if (customScrollbar) {
-    const customScrollbar = document.getElementById("custom-scrollbar");
+        customScrollbar.style.display = "none";
+    }
 
-    // Re-select the links (now without previous event listeners) and add new event listeners
+    // Check if an iframe already exists in the main element
-    const newLinks = document.querySelectorAll(".iframe-link");
+    let iframe = mainElement.querySelector("iframe");
-    newLinks.forEach(link => {
+    if (!iframe) {
+        // Create a new iframe element
+        iframe = document.createElement("iframe");
+        iframe.width = "100%";
+        iframe.style.border = "none";
+        iframe.style.height = mainElement.style.height; // Apply fixed height
+        iframe.style.overflow = "auto"; // Enable internal scrollbar
+        iframe.scrolling = "auto"; // Ensure scrollability
+
+        // Clear the main content before appending the iframe
+        mainElement.innerHTML = "";
+        mainElement.appendChild(iframe);
+    }
+
+    // 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);
-            // Fix the original height of the main element if not already set
-            if (!mainElement.style.height) {
-                mainElement.style.height = `${mainElement.clientHeight}px`;
-            }
-
-            // Replace the container class with container-fluid if not already applied
-            if (container && !container.classList.contains("container-fluid")) {
-                container.classList.replace("container", "container-fluid");
-            }
-
-            // Hide the custom scrollbar
-            if (customScrollbar) {
-                customScrollbar.style.display = "none";
-            }
-
-            // Check if an iframe already exists in the main element
-            let iframe = mainElement.querySelector("iframe");
-            if (!iframe) {
-                // Create a new iframe element
-                iframe = document.createElement("iframe");
-                iframe.width = "100%";
-                iframe.style.border = "none";
-                iframe.style.height = mainElement.style.height; // Apply fixed height
-                iframe.style.overflow = "auto"; // Enable internal scrollbar
-                iframe.scrolling = "auto"; // Ensure scrollability
-
-                // Clear the main content before appending the iframe
-                mainElement.innerHTML = "";
-                mainElement.appendChild(iframe);
-            }
-
-            // Set the URL of the iframe
-            iframe.src = 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 = '#';