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

Added iframe draft

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-03-18 14:59:54 +01:00
parent ae775916b0
commit 3529749df5
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
6 changed files with 116 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/config.sample.yaml
View File

@ -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

46
app/static/js/iframe.js Normal file
View File

@ -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;
}
});
});

1
app/templates/moduls/base.html.j2
View File

@ -53,5 +53,6 @@
<script src="{{ url_for('static', filename='js/navigation.js') }}"></script>
<script src="{{ url_for('static', filename='js/tooltip.js') }}"></script>
<script src="{{ url_for('static', filename='js/custom_scrollbar.js') }}"></script>
<script src="{{ url_for('static', filename='js/iframe.js') }}"></script>
</body>
</html>

2
app/templates/moduls/card.html.j2
View File

@ -12,7 +12,7 @@
<h3 class="card-title">{{ card.title }}</h3>
<p class="card-text">{{ card.text }}</p>
{% if card.url %}
<a href="{{ card.url }}" class="mt-auto btn btn-light stretched-link">
<a href="{{ card.url }}" class="mt-auto btn btn-light stretched-link {% if card.iframe %}iframe-link{% endif %}">
<i class="fa-solid fa-globe"></i> {{ card.link_text }}
</a>
{% else %}

2
app/templates/moduls/navigation.html.j2
View File

@ -46,7 +46,7 @@
{% if item.url %}
<!-- Single Item -->
<li class="nav-item">
<a class="nav-link btn btn-light" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
<a class="nav-link btn btn-light {% if item.iframe %}iframe-link{% endif %}" href="{{ item.url }}" target="{{ item.target|default('_blank') }}" data-bs-toggle="tooltip" title="{{ item.description }}">
{{ render_icon_and_name(item) }}
</a>
</li>

65
test.html Normal file
View File

@ -0,0 +1,65 @@
<!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>