kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-04-22 13:12:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added logic for reload via header

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-03-19 16:14:06 +01:00
parent 242d1b9948
commit f5a9838474
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
1 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/static/js/iframe.js
View File

@ -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");