From 3529749df5f6bc3a372692ad640e97d71ec882a3 Mon Sep 17 00:00:00 2001 From: Kevin Veen-Birkenbach Date: Tue, 18 Mar 2025 14:59:54 +0100 Subject: [PATCH] Added iframe draft --- app/config.sample.yaml | 2 + app/static/js/iframe.js | 46 +++++++++++++++++ app/templates/moduls/base.html.j2 | 1 + app/templates/moduls/card.html.j2 | 2 +- app/templates/moduls/navigation.html.j2 | 2 +- test.html | 65 +++++++++++++++++++++++++ 6 files changed, 116 insertions(+), 2 deletions(-) create mode 100644 app/static/js/iframe.js create mode 100644 test.html diff --git a/app/config.sample.yaml b/app/config.sample.yaml index c565281..dbc9c28 100644 --- a/app/config.sample.yaml +++ b/app/config.sample.yaml @@ -205,6 +205,7 @@ cards: ensuring agile principles are effectively implemented for sustainable success. url: https://www.agile-coach.world link_text: www.agile-coach.world + iframe: true - icon: source: https://cloud.veen.world/s/logo_personal_coach_512x512/download title: Personal Coach @@ -645,4 +646,5 @@ navigation: icon: class: fa-solid fa-scale-balanced url: https://s.veen.world/imprint + iframe: true \ No newline at end of file diff --git a/app/static/js/iframe.js b/app/static/js/iframe.js new file mode 100644 index 0000000..63012d1 --- /dev/null +++ b/app/static/js/iframe.js @@ -0,0 +1,46 @@ +document.addEventListener("DOMContentLoaded", function () { + const links = document.querySelectorAll(".iframe-link"); + const mainElement = document.querySelector("main"); + const container = document.querySelector(".container"); + + links.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 + if (!mainElement.style.height) { + mainElement.style.height = `${mainElement.clientHeight}px`; + } + + // Replace the container class with container-fluid + if (container && !container.classList.contains("container-fluid")) { + container.classList.replace("container", "container-fluid"); + } + + // Check if the iframe already exists + let iframe = mainElement.querySelector("iframe"); + + if (!iframe) { + // Create a new iframe + iframe = document.createElement("iframe"); + iframe.width = "100%"; + iframe.style.border = "none"; + iframe.style.height = mainElement.style.height; // Apply fixed height + mainElement.innerHTML = ""; // Clear main content + mainElement.appendChild(iframe); + } + + iframe.src = url; // Load the URL into the iframe + }); + }); + + // 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; + } + }); +}); diff --git a/app/templates/moduls/base.html.j2 b/app/templates/moduls/base.html.j2 index a0f6204..76ec759 100644 --- a/app/templates/moduls/base.html.j2 +++ b/app/templates/moduls/base.html.j2 @@ -53,5 +53,6 @@ + \ No newline at end of file diff --git a/app/templates/moduls/card.html.j2 b/app/templates/moduls/card.html.j2 index e019c28..3541811 100644 --- a/app/templates/moduls/card.html.j2 +++ b/app/templates/moduls/card.html.j2 @@ -12,7 +12,7 @@

{{ card.title }}

{{ card.text }}

{% if card.url %} - + {{ card.link_text }} {% else %} diff --git a/app/templates/moduls/navigation.html.j2 b/app/templates/moduls/navigation.html.j2 index 2c04820..e57ad34 100644 --- a/app/templates/moduls/navigation.html.j2 +++ b/app/templates/moduls/navigation.html.j2 @@ -46,7 +46,7 @@ {% if item.url %}
  • - + {{ render_icon_and_name(item) }}
    • diff --git a/test.html b/test.html new file mode 100644 index 0000000..025d5b5 --- /dev/null +++ b/test.html @@ -0,0 +1,65 @@ + + + + + + Iframe Navigation + + + + + + +
    +

    Hier wird der Inhalt durch ein Iframe ersetzt.

    +
    + + + + +