GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs/html #25

Merged
GauthierWebDev merged 16 commits from docs/html into main 2025-05-13 13:37:11 +00:00
Conversation 0 Commits 16 Files Changed 16 +31 -38
1 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6031b88792 - Show all commits

69
app/partials/ReadProgressBar.tsx
View File

@ -1,51 +1,44 @@
import { createEffect, createSignal } from "solid-js"; import { createEffect, createSignal } from "solid-js";
export function ReadProgressBar() { export function ReadProgressBar() {
const articleContentElement: HTMLElement | null = const articleContentElement: HTMLElement | null = document.getElementById("article-content");
document.getElementById("article-content"); if (!articleContentElement) return null;
if (!articleContentElement) return null;
const [width, setWidth] = createSignal("0%"); const [width, setWidth] = createSignal("0%");
const handleScroll = () => { const handleScroll = () => {
const articleHeight = articleContentElement.scrollHeight; const articleHeight = articleContentElement.scrollHeight;
const topPosition = articleContentElement.getBoundingClientRect().top; const topPosition = articleContentElement.getBoundingClientRect().top;
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
if (articleHeight <= windowHeight) { if (articleHeight <= windowHeight) {
setWidth("100%"); setWidth("100%");
return; return;
} }
const elementScrollTop = -topPosition; const elementScrollTop = -topPosition;
const scrollableHeight = articleHeight - windowHeight; const scrollableHeight = articleHeight - windowHeight;
const percentage = (elementScrollTop / scrollableHeight) * 100; const percentage = (elementScrollTop / scrollableHeight) * 100;
const clampedPercentage = Math.max(0, Math.min(100, percentage)); const clampedPercentage = Math.max(0, Math.min(100, percentage));
setWidth(`${clampedPercentage}%`); setWidth(`${clampedPercentage}%`);
}; };
createEffect(() => { createEffect(() => {
window.addEventListener("scroll", handleScroll); window.addEventListener("scroll", handleScroll);
window.addEventListener("resize", handleScroll); window.addEventListener("resize", handleScroll);
handleScroll(); handleScroll();
return () => { return () => {
window.removeEventListener("scroll", handleScroll); window.removeEventListener("scroll", handleScroll);
window.removeEventListener("resize", handleScroll); window.removeEventListener("resize", handleScroll);
}; };
}); });
return ( return (
<div <div aria-hidden="true" class="fixed inset-x-0 bottom-0 lg:top-0 z-50 h-1 w-full bg-violet-50 pointer-events-none">
aria-hidden="true" <div class="bg-violet-300 h-full transition-all duration-300 ease-out" style={{ width: width() }} />
class="fixed inset-x-0 bottom-0 lg:top-0 z-50 h-1 w-full bg-violet-50 pointer-events-none" </div>
> );
<div
class="bg-violet-300 h-full transition-all duration-300 ease-out"
style={{ width: width() }}
/>
</div>
);
} }