Added logic for reload via header

app/static/js/iframe.js

@@ -1,9 +1,17 @@
 document.addEventListener("DOMContentLoaded", function () {
-    const links = document.querySelectorAll(".iframe-link");
+    // Select the main element and store its original content and inline style
     const mainElement = document.querySelector("main");
+    const originalContent = mainElement.innerHTML;
+    const originalMainStyle = mainElement.getAttribute("style"); // might be null if no inline style exists
+
+    // Get all links that should open in an iframe
+    const links = document.querySelectorAll(".iframe-link");
+
+    // Get the container element and the custom scrollbar element
     const container = document.querySelector(".container");
     const customScrollbar = document.getElementById("custom-scrollbar");
 
+    // Add click event listener to each iframe link
     links.forEach(link => {
         link.addEventListener("click", function (event) {
             event.preventDefault(); // Prevent default link behavior
@@ -15,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 mainElement.style.height = `${mainElement.clientHeight}px`;
             }
 
-            // Replace the container class with container-fluid
+            // Replace the container class with container-fluid if not already applied
             if (container && !container.classList.contains("container-fluid")) {
                 container.classList.replace("container", "container-fluid");
             }
@@ -25,25 +33,55 @@ document.addEventListener("DOMContentLoaded", function () {
                 customScrollbar.style.display = "none";
             }
 
-            // Check if the iframe already exists
+            // Check if an iframe already exists in the main element
             let iframe = mainElement.querySelector("iframe");
 
             if (!iframe) {
-                // Create a new 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 scrollbar inside iframe
+                iframe.style.overflow = "auto"; // Enable internal scrollbar
                 iframe.scrolling = "auto"; // Ensure scrollability
-                mainElement.innerHTML = ""; // Clear main content
+
+                // Clear the main content before appending the iframe
+                mainElement.innerHTML = "";
                 mainElement.appendChild(iframe);
             }
 
-            iframe.src = url; // Load the URL into the iframe
+            // Set the URL of the iframe
+            iframe.src = url;
         });
     });
 
+    // Add click event listener to header h1 to restore the original main content and style
+    const headerH1 = document.querySelector("header h1");
+    if (headerH1) {
+        headerH1.addEventListener("click", function () {
+            // Restore the original content of the main element (removing the iframe)
+            mainElement.innerHTML = originalContent;
+
+            // Restore the original inline style of the main element
+            if (originalMainStyle !== null) {
+                mainElement.setAttribute("style", originalMainStyle);
+            } else {
+                mainElement.removeAttribute("style");
+            }
+
+            // Optionally revert the container class back to "container" if needed
+            if (container && container.classList.contains("container-fluid")) {
+                container.classList.replace("container-fluid", "container");
+            }
+
+            // Optionally show the custom scrollbar again
+            if (customScrollbar) {
+                customScrollbar.style.display = "";
+            }
+            adjustScrollContainerHeight()
+        });
+    }
+
     // Adjust iframe height on window resize (optional, to keep it responsive)
     window.addEventListener("resize", function () {
         const iframe = mainElement.querySelector("iframe");