From 3b4dc298f88fec8c8071ec55605ae46b067e988f Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Wed, 19 Mar 2025 16:53:49 +0100
Subject: [PATCH] Rafactored iframe.js

---
 app/static/js/iframe.js | 58 +++++++++++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/app/static/js/iframe.js b/app/static/js/iframe.js
index 5db6f27..68e9dc8 100644
--- a/app/static/js/iframe.js
+++ b/app/static/js/iframe.js
@@ -1,21 +1,38 @@
-document.addEventListener("DOMContentLoaded", function () {
-    // 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
+// Global variables to store the original main content and style (only once)
+let originalMainContent = null;
+let originalMainStyle = null;
 
-    // Get all links that should open in an iframe
-    const links = document.querySelectorAll(".iframe-link");
+function initializeIframeSetup() {
+    // Remove existing event handlers from .iframe-link elements by replacing them with clones
+    const iframeLinks = document.querySelectorAll(".iframe-link");
+    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");
 
-    // Add click event listener to each iframe link
-    links.forEach(link => {
+    // 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
@@ -35,7 +52,6 @@ document.addEventListener("DOMContentLoaded", function () {
 
             // 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");
@@ -55,15 +71,14 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     });
 
-    // Add click event listener to header h1 to restore the original main content and style
-    const headerH1 = document.querySelector("header h1");
-    if (headerH1) {
+    // Re-select header h1 and add its event listener to restore the original main content and style
+    const newHeaderH1 = document.querySelector("header h1");
+    if (newHeaderH1) {
         // Change the cursor to pointer to indicate clickability
-        headerH1.style.cursor = "pointer";
-
-        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 = originalContent;
+            mainElement.innerHTML = originalMainContent;
 
             // Restore the original inline style of the main element
             if (originalMainStyle !== null) {
@@ -84,11 +99,16 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     }
 
-    // Adjust iframe height on window resize (optional, to keep it responsive)
+    // Add a window resize event listener to adjust the iframe height (if any)
     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();
 });