Added header h1 pointer

app/static/js/iframe.js

@@ -1,21 +1,14 @@
-document.addEventListener("DOMContentLoaded", function () {
+// Global variables to store elements and original state
-    const links = document.querySelectorAll(".iframe-link");
+let mainElement, originalContent, originalMainStyle, container, customScrollbar;
-    const mainElement = document.querySelector("main");
-    const container = document.querySelector(".container");
-    const customScrollbar = document.getElementById("custom-scrollbar");
 
-    links.forEach(link => {
+// Function to open a URL in an iframe using global variables
-        link.addEventListener("click", function (event) {
+function openIframe(url) {
-            event.preventDefault(); // Prevent default link behavior
+    // Set a fixed height for the main element if not already set
-
-            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
+    // 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 +18,79 @@ 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;
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    // Initialize global variables
+    mainElement = document.querySelector("main");
+    originalContent = mainElement.innerHTML;
+    originalMainStyle = mainElement.getAttribute("style"); // might be null if no inline style exists
+
+    container = document.querySelector(".container");
+    customScrollbar = document.getElementById("custom-scrollbar");
+
+    // Get all links that should open in an iframe
+    const links = document.querySelectorAll(".iframe-link");
+
+    // Add click event listener to each iframe link
+    links.forEach(link => {
+        link.addEventListener("click", function (event) {
+            event.preventDefault(); // Prevent default link behavior
+            const url = this.getAttribute("href");
+            openIframe(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.style.cursor = "pointer";
+        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 = "";
+            }
+
+            // Adjust scroll container height if that function exists
+            if (typeof adjustScrollContainerHeight === "function") {
+                adjustScrollContainerHeight();
+            }
+        });
+    }
+
     // Adjust iframe height on window resize (optional, to keep it responsive)
     window.addEventListener("resize", function () {
         const iframe = mainElement.querySelector("iframe");

app/static/js/modal.js

@@ -45,6 +45,16 @@ function openDynamicPopup(subitem) {
     linkBox.classList.remove('d-none');
     linkHref.href = subitem.url;
     linkHref.innerText = subitem.description || "Open Link";
+    if (subitem.iframe) {
+      linkHref.classList.add('iframe');
+      // Attach an event listener that prevents the default behavior and
+      // opens the URL in an iframe when clicked.
+      linkHref.addEventListener('click', function(event) {
+        event.preventDefault();
+        openIframe(subitem.url);
+        closeAllModals()
+      });
+    }
   } else {
     linkBox.classList.add('d-none');
     linkHref.href = '#';

app/templates/moduls/base.html.j2

@@ -43,7 +43,7 @@
                     <p itemprop="name">{{ company.titel }} <br />
                     {{ company.subtitel }}</p>
                     <span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
-                    <p><a href="{{company.imprint_url}}"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
+                    <p><a href="{{company.imprint_url}}" class="iframe-link"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
                 </div>
             </footer>
         </div>

app/templates/moduls/navigation.html.j2

@@ -26,7 +26,7 @@
             </li>
         {% else %}
             <li>
-                <a class="dropdown-item" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
+                <a class="dropdown-item {% if children.iframe %}iframe-link{% endif %}" href="{{ children.url }}" target="{{ children.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ children.description }}">
                      {{ render_icon_and_name(children) }}
                 </a>
             </li>

test.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Iframe Navigation</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-        }
-        #iframe-container {
-            width: 100%;
-            height: 80vh;
-            border: none;
-        }
-        nav {
-            margin-bottom: 10px;
-        }
-    </style>
-</head>
-<body>
-
-    <nav>
-        <a href="https://www.example.com" class="iframe-link">Beispiel 1</a> |
-        <a href="https://www.wikipedia.org" class="iframe-link">Wikipedia</a> |
-        <a href="https://www.openstreetmap.org" class="iframe-link">OpenStreetMap</a>
-    </nav>
-
-    <main id="main">
-        <p>Hier wird der Inhalt durch ein Iframe ersetzt.</p>
-    </main>
-
-    <script>
-        document.addEventListener("DOMContentLoaded", function () {
-            const links = document.querySelectorAll(".iframe-link");
-            const main = document.getElementById("main");
-
-            links.forEach(link => {
-                link.addEventListener("click", function (event) {
-                    event.preventDefault(); // Verhindert das Standardverhalten
-
-                    const url = this.getAttribute("href");
-
-                    // Prüfe, ob das Iframe bereits existiert
-                    let iframe = document.getElementById("iframe-container");
-
-                    if (!iframe) {
-                        // Neues Iframe erstellen
-                        iframe = document.createElement("iframe");
-                        iframe.id = "iframe-container";
-                        iframe.width = "100%";
-                        iframe.height = "600px";
-                        iframe.style.border = "none";
-                        main.innerHTML = ""; // Inhalt von main löschen
-                        main.appendChild(iframe);
-                    }
-
-                    iframe.src = url; // Lade die URL in das Iframe
-                });
-            });
-        });
-    </script>
-
-</body>
-</html>