mirror of
https://github.com/kevinveenbirkenbach/homepage.veen.world.git
synced 2025-04-22 13:12:25 +02:00
102 lines
3.8 KiB
JavaScript
102 lines
3.8 KiB
JavaScript
// Global variables to store elements and original state
|
|
let mainElement, originalContent, originalMainStyle, container, customScrollbar;
|
|
|
|
// 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`;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
|
|
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");
|
|
openIframe(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.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();
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
});
|
|
});
|