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

rework/lightweight #12

Merged
GauthierWebDev merged 106 commits from rework/lightweight into main 2025-04-21 16:27:38 +00:00
Conversation 0 Commits 106 Files Changed 251 +19 -8
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6e7eeb7dc0 - Show all commits

26
app/partials/ReadProgressBar.tsx
View File

@ -8,16 +8,28 @@ export function ReadProgressBar() {
const [width, setWidth] = createSignal("0%");
const handleScroll = () => {
const scrollTop = window.scrollY;
const pageHeight = document.documentElement.scrollHeight;
const scrollHeight = articleContentElement.scrollHeight;
const articleHeight = articleContentElement.scrollHeight;
const articleTopPosition =
articleContentElement.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
const gapWithBottom = pageHeight - scrollHeight;
const scrollableHeight = pageHeight - gapWithBottom;
// Calculer la hauteur visible de l'élément dans la fenêtre
const visibleHeight = Math.min(
articleHeight,
windowHeight + articleTopPosition,
);
const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);
// Calculer la position de défilement relative à l'élément
const elementScrollTop = -articleTopPosition;
setWidth(`${scrollPercentage}%`);
// Calculer le pourcentage de défilement relatif à l'élément
const percentage =
(elementScrollTop / (articleHeight - windowHeight)) * 100;
// Limiter le pourcentage entre 0 et 100
const clampedPercentage = Math.max(0, Math.min(100, percentage));
setWidth(`${clampedPercentage}%`);
};
createEffect(() => {

1
app/partials/TableOfContents.tsx
View File

@ -21,7 +21,6 @@ export function TableOfContents() {
if (!section.hash) return null;
const el = document.getElementById(section.hash);
console.log(section.hash, el);
if (!el) return null;
const style = window.getComputedStyle(el);