mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-04-22 13:12:25 +02:00
Implemented iframe logic for modals
This commit is contained in:
parent
3b4dc298f8
commit
19f47a82fa
@ -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();
|
||||
});
|
||||
|
||||
@ -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 = '#';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user