From 19f47a82faf8ce0fae7446836aa18d53b6c31d0d Mon Sep 17 00:00:00 2001 From: Kevin Veen-Birkenbach Date: Wed, 19 Mar 2025 17:16:44 +0100 Subject: [PATCH] Implemented iframe logic for modals --- app/static/js/iframe.js | 134 ++++++++++++++++++---------------------- app/static/js/modal.js | 10 +++ 2 files changed, 70 insertions(+), 74 deletions(-) diff --git a/app/static/js/iframe.js b/app/static/js/iframe.js index 68e9dc8..c8ca97e 100644 --- a/app/static/js/iframe.js +++ b/app/static/js/iframe.js @@ -1,84 +1,70 @@ -// Global variables to store the original main content and style (only once) -let originalMainContent = null; -let originalMainStyle = null; +// Global variables to store elements and original state +let mainElement, originalContent, originalMainStyle, container, customScrollbar; -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); +// Function to open a URL in an iframe using global variables +function openIframe(url) { + // Set a fixed height for the main element if not already set + if (!mainElement.style.height) { + mainElement.style.height = `${mainElement.clientHeight}px`; } - // 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"); + // Replace the container class with container-fluid if not already applied + if (container && !container.classList.contains("container-fluid")) { + container.classList.replace("container", "container-fluid"); } - // Get the container element and the custom scrollbar element - const container = document.querySelector(".container"); - const customScrollbar = document.getElementById("custom-scrollbar"); + // Hide the custom scrollbar + if (customScrollbar) { + customScrollbar.style.display = "none"; + } - // Re-select the links (now without previous event listeners) and add new event listeners - const newLinks = document.querySelectorAll(".iframe-link"); - newLinks.forEach(link => { + // 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; +} + +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"); - - // 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; + openIframe(url); }); }); - // 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 - newHeaderH1.style.cursor = "pointer"; - newHeaderH1.addEventListener("click", function () { + // 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 = 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(); }); diff --git a/app/static/js/modal.js b/app/static/js/modal.js index 7f1aab1..9109f45 100644 --- a/app/static/js/modal.js +++ b/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 = '#';