kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-07-08 20:05:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Added correct iframe size loading

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-07-05 13:17:38 +02:00
parent bb8799eb8a
commit 25dbc3f331
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
1 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,39 @@ function openIframe(url) {
window.history.pushState({ iframe: url }, '', newUrl.toString()); window.history.pushState({ iframe: url }, '', newUrl.toString());
} }
// Function to restore the original main content and style
function restoreOriginal() {
// 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");
}
// Revert the container class back to "container" if needed
if (container && container.classList.contains("container-fluid")) {
container.classList.replace("container-fluid", "container");
}
// Show the custom scrollbar again
if (customScrollbar) {
customScrollbar.style.display = "";
}
// Adjust scroll container height if that function exists
if (typeof adjustScrollContainerHeight === "function") {
adjustScrollContainerHeight();
}
// Update the URL to remove the iframe param
const newUrl = new URL(window.location);
newUrl.searchParams.delete("iframe");
window.history.pushState({}, '', newUrl.toString());
}
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
// Initialize global variables // Initialize global variables
mainElement = document.querySelector("main"); mainElement = document.querySelector("main");
@ -52,56 +85,22 @@ document.addEventListener("DOMContentLoaded", function () {
container = document.querySelector(".container"); container = document.querySelector(".container");
customScrollbar = document.getElementById("custom-scrollbar"); customScrollbar = document.getElementById("custom-scrollbar");
// Get all links that should open in an iframe // Set up click handlers for iframe links
const links = document.querySelectorAll(".iframe-link"); document.querySelectorAll(".iframe-link").forEach(link => {
// Add click event listener to each iframe link
links.forEach(link => {
link.addEventListener("click", function (event) { link.addEventListener("click", function (event) {
event.preventDefault(); // Prevent default link behavior event.preventDefault(); // Prevent default link behavior
const url = this.getAttribute("href"); openIframe(this.href);
openIframe(url);
}); });
}); });
// Add click event listener to header h1 to restore the original main content and style // Set up click handler on header h1 to restore original state
const headerH1 = document.querySelector("header h1"); const headerH1 = document.querySelector("header h1");
if (headerH1) { if (headerH1) {
headerH1.style.cursor = "pointer"; headerH1.style.cursor = "pointer";
headerH1.addEventListener("click", function () { headerH1.addEventListener("click", restoreOriginal);
// 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();
}
// Also update the URL to remove the iframe param
const newUrl = new URL(window.location);
newUrl.searchParams.delete("iframe");
window.history.pushState({}, '', newUrl.toString());
});
} }
// Adjust iframe height on window resize (optional, to keep it responsive) // Responsive resize: adjust iframe height when window resizes
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
const iframe = mainElement.querySelector("iframe"); const iframe = mainElement.querySelector("iframe");
if (iframe) { if (iframe) {
@ -109,23 +108,24 @@ document.addEventListener("DOMContentLoaded", function () {
} }
}); });
// On initial load: check if URL has iframe parameter // Wait until all resources are loaded before doing the initial iframe check
const initialParams = new URLSearchParams(window.location.search); window.addEventListener("load", function () {
const iframeUrl = initialParams.get('iframe'); const initialParams = new URLSearchParams(window.location.search);
if (iframeUrl) { const iframeUrl = initialParams.get('iframe');
openIframe(iframeUrl); if (iframeUrl) {
} openIframe(iframeUrl);
}
});
}); });
// Handle browser back/forward navigation // Handle browser back/forward navigation
window.addEventListener('popstate', function(event) { window.addEventListener('popstate', function (event) {
const url = new URL(window.location); const url = new URL(window.location);
const iframeUrl = url.searchParams.get('iframe'); const iframeUrl = url.searchParams.get('iframe');
if (iframeUrl) { if (iframeUrl) {
openIframe(iframeUrl); openIframe(iframeUrl);
} else { } else {
// Simulate click on H1 to restore original state
const headerH1 = document.querySelector("header h1"); const headerH1 = document.querySelector("header h1");
if (headerH1) headerH1.click(); if (headerH1) headerH1.click();
} }