kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-11-04 09:27:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rafactored iframe.js

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-03-19 16:53:49 +01:00
parent 79e10e97b7
commit 3b4dc298f8
1 changed files with 39 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,38 @@
document.addEventListener("DOMContentLoaded", function () { // Global variables to store the original main content and style (only once)
// Select the main element and store its original content and inline style let originalMainContent = null;
const mainElement = document.querySelector("main"); let originalMainStyle = null;
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 function initializeIframeSetup() {
const links = document.querySelectorAll(".iframe-link"); // 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);
}
// 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");
}
// Get the container element and the custom scrollbar element // Get the container element and the custom scrollbar element
const container = document.querySelector(".container"); const container = document.querySelector(".container");
const customScrollbar = document.getElementById("custom-scrollbar"); const customScrollbar = document.getElementById("custom-scrollbar");
// Add click event listener to each iframe link // Re-select the links (now without previous event listeners) and add new event listeners
links.forEach(link => { const newLinks = document.querySelectorAll(".iframe-link");
newLinks.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"); const url = this.getAttribute("href");
// Fix the original height of the main element if not already set // Fix the original height of the main element if not already set
@@ -35,7 +52,6 @@ document.addEventListener("DOMContentLoaded", function () {
// Check if an iframe already exists in the main element // Check if an iframe already exists in the main element
let iframe = mainElement.querySelector("iframe"); let iframe = mainElement.querySelector("iframe");
if (!iframe) { if (!iframe) {
// Create a new iframe element // Create a new iframe element
iframe = document.createElement("iframe"); iframe = document.createElement("iframe");
@@ -55,15 +71,14 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
}); });
// Add click event listener to header h1 to restore the original main content and style // Re-select header h1 and add its event listener to restore the original main content and style
const headerH1 = document.querySelector("header h1"); const newHeaderH1 = document.querySelector("header h1");
if (headerH1) { if (newHeaderH1) {
// Change the cursor to pointer to indicate clickability // Change the cursor to pointer to indicate clickability
headerH1.style.cursor = "pointer"; newHeaderH1.style.cursor = "pointer";
newHeaderH1.addEventListener("click", function () {
headerH1.addEventListener("click", function () {
// Restore the original content of the main element (removing the iframe) // Restore the original content of the main element (removing the iframe)
mainElement.innerHTML = originalContent; mainElement.innerHTML = originalMainContent;
// Restore the original inline style of the main element // Restore the original inline style of the main element
if (originalMainStyle !== null) { if (originalMainStyle !== null) {
@@ -84,11 +99,16 @@ document.addEventListener("DOMContentLoaded", function () {
}); });
} }
// Adjust iframe height on window resize (optional, to keep it responsive) // Add a window resize event listener to adjust the iframe height (if any)
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
const iframe = mainElement.querySelector("iframe"); const iframe = mainElement.querySelector("iframe");
if (iframe) { if (iframe) {
iframe.style.height = mainElement.style.height; iframe.style.height = mainElement.style.height;
} }
}); });
}
// Example: manually trigger initialization after DOM is loaded
document.addEventListener("DOMContentLoaded", function () {
initializeIframeSetup();
}); });