From 81284fcc02b00d85574f184d5ab111712164439f Mon Sep 17 00:00:00 2001 From: lelo Date: Sun, 23 Mar 2025 22:30:27 +0100 Subject: [PATCH] update reload --- static/app.js | 27 +++++++++++++++++++++------ templates/app.html | 6 +++--- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/static/app.js b/static/app.js index 7315586..730d554 100644 --- a/static/app.js +++ b/static/app.js @@ -323,7 +323,11 @@ window.addEventListener('popstate', function (event) { }); +let isReloadButtonVisible = true; // Boolean to track the visibility of the reload button. + function reloadDirectory() { + if (!isReloadButtonVisible) return; // Exit if the reload button is hidden. + // Extract the current path from the URL, similar to your initial load code. let currentSubpath = ''; if (window.location.pathname.indexOf('/path/') === 0) { @@ -331,16 +335,27 @@ function reloadDirectory() { } loadDirectory(currentSubpath); - // Get the SVG element (assuming it's a child of the button) - const reloadBtn = document.querySelector('#reload-button svg'); + const reloadBtn = document.querySelector('#reload-button'); + const reloadBtnSVG = document.querySelector('#reload-button svg'); // Force reflow to reset the animation - void reloadBtn.offsetWidth; - reloadBtn.classList.add("rotate"); + void reloadBtnSVG.offsetWidth; + reloadBtnSVG.classList.add("rotate"); - // call function after 500 ms to remove the class - setTimeout(() => reloadBtn.classList.remove("rotate"), 500); + // Gradually fade out the button by reducing opacity over 500ms + setTimeout(() => { + reloadBtnSVG.classList.remove("rotate"); + reloadBtn.style.transition = 'opacity 0.5s ease'; + reloadBtn.style.opacity = '0'; + isReloadButtonVisible = false; // Update the visibility status. + }, 500); + // Gradually fade back in after 10 seconds + setTimeout(() => { + reloadBtn.style.transition = 'opacity 0.5s ease'; + reloadBtn.style.opacity = '1'; + isReloadButtonVisible = true; // Update the visibility status. + }, 10000); } if ('mediaSession' in navigator) { diff --git a/templates/app.html b/templates/app.html index b26c7c1..e26f2b6 100644 --- a/templates/app.html +++ b/templates/app.html @@ -70,13 +70,13 @@
-