diff --git a/app/static/js/iframe.js b/app/static/js/iframe.js index a1675c4..2f87178 100644 --- a/app/static/js/iframe.js +++ b/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");