kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-07-17 15:04:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Changed fade between html iframe animation

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach 2025-07-07 15:37:24 +02:00
parent d99a8c8452
commit 55d309b2d7
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
2 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,71 +21,77 @@ function syncIframeHeight() {
}
}
// Function to open a URL in an iframe
// Function to open a URL in an iframe (jQuery version mit 1500 ms Fade)
function openIframe(url) {
enterFullscreen()
// Hide the container (and its scroll-container) so the iframe can appear in its place
if (scrollbarContainer) {
scrollbarContainer.style.display = 'none';
}
enterFullscreen();
// Hide any custom scrollbar element if present
if (customScrollbar) {
customScrollbar.style.display = 'none';
}
var $container = scrollbarContainer ? $(scrollbarContainer) : null;
var $customScroll = customScrollbar ? $(customScrollbar) : null;
var $main = $(mainElement);
// Create or retrieve the iframe in the main element
let iframe = mainElement.querySelector("iframe");
if (!iframe) {
iframe = document.createElement("iframe");
iframe.width = "100%";
iframe.style.border = "none";
iframe.style.overflow = "auto"; // Enable internal scrolling
iframe.scrolling = "auto";
mainElement.appendChild(iframe);
syncIframeHeight();
}
// Original-Content ausblenden mit 1500 ms
var promises = [];
if ($container) promises.push($container.fadeOut(1500).promise());
if ($customScroll) promises.push($customScroll.fadeOut(1500).promise());
// Set the iframe's source URL
iframe.src = url;
$.when.apply($, promises).done(function() {
// Iframe anlegen, falls noch nicht vorhanden
var $iframe = $main.find('iframe');
if ($iframe.length === 0) {
originalMainStyle = $main.attr('style') || null;
$iframe = $('<iframe>', {
width: '100%',
frameborder: 0,
scrolling: 'auto'
}).css({ overflow: 'auto', display: 'none' });
$main.append($iframe);
}
// Push the new URL state without reloading the page
const newUrl = new URL(window.location);
newUrl.searchParams.set('iframe', url);
window.history.pushState({ iframe: url }, '', newUrl);
// Quelle setzen und mit 1500 ms einblenden
$iframe
.attr('src', url)
.fadeIn(1500, function() {
syncIframeHeight();
});
// URL-State pushen
var newUrl = new URL(window.location);
newUrl.searchParams.set('iframe', url);
window.history.pushState({ iframe: url }, '', newUrl);
});
}
// Function to restore the original content and show the container again
// Function to restore the original content (jQuery version mit 1500 ms Fade)
function restoreOriginal() {
// Remove the iframe from the DOM
const iframe = mainElement.querySelector("iframe");
if (iframe) {
iframe.remove();
}
var $main = $(mainElement);
var $iframe = $main.find('iframe');
var $container = scrollbarContainer ? $(scrollbarContainer) : null;
var $customScroll = customScrollbar ? $(customScrollbar) : null;
// Show the original container
if (scrollbarContainer) {
scrollbarContainer.style.display = '';
}
if ($iframe.length) {
// Iframe mit 1500 ms ausblenden, dann entfernen und Original einblenden
$iframe.fadeOut(1500, function() {
$iframe.remove();
// Restore any custom scrollbar
if (customScrollbar) {
customScrollbar.style.display = '';
}
if ($container) $container.fadeIn(1500);
if ($customScroll) $customScroll.fadeIn(1500);
// Restore the original inline style of the main element
if (originalMainStyle !== null) {
mainElement.setAttribute("style", originalMainStyle);
} else {
mainElement.removeAttribute("style");
}
// Inline-Style des main-Elements zurücksetzen
if (originalMainStyle !== null) {
$main.attr('style', originalMainStyle);
} else {
$main.removeAttr('style');
}
// Update the URL to remove the iframe parameter
const newUrl = new URL(window.location);
newUrl.searchParams.delete("iframe");
window.history.pushState({}, '', newUrl);
// URL-Parameter entfernen
var newUrl = new URL(window.location);
newUrl.searchParams.delete('iframe');
window.history.pushState({}, '', newUrl);
});
}
}
// Initialize event listeners after DOM content is loaded
document.addEventListener("DOMContentLoaded", function() {
// Cache references to elements and original state

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

@ -20,6 +20,11 @@
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/default.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom_scrollbar.css') }}">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
crossorigin="anonymous">
</script>
</head>
<body
{% if apod_bg %}