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

refactor: Improve code formatting in ReadProgressBar

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-23 15:53:21 +02:00
parent 67c9732ee5
commit 6031b88792
1 changed files with 31 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/partials/ReadProgressBar.tsx
View File

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