From 25dbc3f3319371f09e7e93735245a404502d7d6a Mon Sep 17 00:00:00 2001 From: Kevin Veen-Birkenbach Date: Sat, 5 Jul 2025 13:17:38 +0200 Subject: [PATCH] Added correct iframe size loading --- app/static/js/iframe.js | 96 ++++++++++++++++++++--------------------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/app/static/js/iframe.js b/app/static/js/iframe.js index f83f13f..06e8ab3 100644 --- a/app/static/js/iframe.js +++ b/app/static/js/iframe.js @@ -43,6 +43,39 @@ function openIframe(url) { window.history.pushState({ iframe: url }, '', newUrl.toString()); } +// Function to restore the original main content and style +function restoreOriginal() { + // 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"); + } + + // Revert the container class back to "container" if needed + if (container && container.classList.contains("container-fluid")) { + container.classList.replace("container-fluid", "container"); + } + + // Show the custom scrollbar again + if (customScrollbar) { + customScrollbar.style.display = ""; + } + + // Adjust scroll container height if that function exists + if (typeof adjustScrollContainerHeight === "function") { + adjustScrollContainerHeight(); + } + + // Update the URL to remove the iframe param + const newUrl = new URL(window.location); + newUrl.searchParams.delete("iframe"); + window.history.pushState({}, '', newUrl.toString()); +} + document.addEventListener("DOMContentLoaded", function () { // Initialize global variables mainElement = document.querySelector("main"); @@ -52,56 +85,22 @@ document.addEventListener("DOMContentLoaded", function () { 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 => { + // Set up click handlers for iframe links + document.querySelectorAll(".iframe-link").forEach(link => { link.addEventListener("click", function (event) { event.preventDefault(); // Prevent default link behavior - const url = this.getAttribute("href"); - openIframe(url); + openIframe(this.href); }); }); - // Add click event listener to header h1 to restore the original main content and style + // Set up click handler on header h1 to restore original state const headerH1 = document.querySelector("header h1"); if (headerH1) { headerH1.style.cursor = "pointer"; - 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 = ""; - } - - // Adjust scroll container height if that function exists - if (typeof adjustScrollContainerHeight === "function") { - adjustScrollContainerHeight(); - } - - // Also update the URL to remove the iframe param - const newUrl = new URL(window.location); - newUrl.searchParams.delete("iframe"); - window.history.pushState({}, '', newUrl.toString()); - }); + headerH1.addEventListener("click", restoreOriginal); } - // Adjust iframe height on window resize (optional, to keep it responsive) + // Responsive resize: adjust iframe height when window resizes window.addEventListener("resize", function () { const iframe = mainElement.querySelector("iframe"); if (iframe) { @@ -109,23 +108,24 @@ document.addEventListener("DOMContentLoaded", function () { } }); - // On initial load: check if URL has iframe parameter - const initialParams = new URLSearchParams(window.location.search); - const iframeUrl = initialParams.get('iframe'); - if (iframeUrl) { - openIframe(iframeUrl); - } + // Wait until all resources are loaded before doing the initial iframe check + window.addEventListener("load", function () { + const initialParams = new URLSearchParams(window.location.search); + const iframeUrl = initialParams.get('iframe'); + if (iframeUrl) { + openIframe(iframeUrl); + } + }); }); // Handle browser back/forward navigation -window.addEventListener('popstate', function(event) { +window.addEventListener('popstate', function (event) { const url = new URL(window.location); const iframeUrl = url.searchParams.get('iframe'); if (iframeUrl) { openIframe(iframeUrl); } else { - // Simulate click on H1 to restore original state const headerH1 = document.querySelector("header h1"); if (headerH1) headerH1.click(); }