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

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
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
1 changed files with 39 additions and 19 deletions
Show Stats 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 () {
// 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
// Global variables to store the original main content and style (only once)
let originalMainContent = null;
let originalMainStyle = null;
// Get all links that should open in an iframe
const links = document.querySelectorAll(".iframe-link");
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);
}
// 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
const container = document.querySelector(".container");
const customScrollbar = document.getElementById("custom-scrollbar");
// Add click event listener to each iframe link
links.forEach(link => {
// Re-select the links (now without previous event listeners) and add new event listeners
const newLinks = document.querySelectorAll(".iframe-link");
newLinks.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
@ -35,7 +52,6 @@ document.addEventListener("DOMContentLoaded", function () {
// 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");
@ -55,15 +71,14 @@ document.addEventListener("DOMContentLoaded", function () {
});
});
// Add click event listener to header h1 to restore the original main content and style
const headerH1 = document.querySelector("header h1");
if (headerH1) {
// 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
headerH1.style.cursor = "pointer";
headerH1.addEventListener("click", function () {
newHeaderH1.style.cursor = "pointer";
newHeaderH1.addEventListener("click", function () {
// 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
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 () {
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();
});