Etheryo/etheryo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Git: Fixed counter animation resetting when viewport changed status.

Browse source
This commit is contained in:
Yohan Boujon 2025-04-06 20:16:04 +02:00
parent 5ff81dba3b
commit 90951f2318
1 changed files with 16 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/lib/components/git.svelte
View file

@ -29,12 +29,12 @@
repoSize: 0, repoSize: 0,
}; };
// Loading // Loading logic
let finishLoading = new Loading(); let finishLoading = new Loading();
let finishLoadingStatus = false; let finishLoadingStatus = false;
// Mouse animation // Mouse animation
let overlay_div; let overlayDiv;
let cursorX = 0; let cursorX = 0;
let cursorY = 0; let cursorY = 0;
let updateX = true; let updateX = true;
@ -44,7 +44,7 @@
cursorX = event.clientX - rect.left; cursorX = event.clientX - rect.left;
} }
cursorY = event.clientY - rect.top; cursorY = event.clientY - rect.top;
overlay_div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`; overlayDiv.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--color-background) 0%, #958a98 100%)`;
} }
function animateForeground(isEntering, div_back) { function animateForeground(isEntering, div_back) {
@ -59,12 +59,13 @@
} }
// Loading animation // Loading animation
let div_loading; let divLoading;
let loadingAnimation; let skeleton;
let countersSet = false;
onMount(async () => { onMount(async () => {
loadingAnimation = new LoadingSkeleton(div_loading); skeleton = new LoadingSkeleton(divLoading);
loadingAnimation.start(); skeleton.start();
// Gathering commit number // Gathering commit number
let response = await getCommitCount(repo); let response = await getCommitCount(repo);
@ -97,7 +98,7 @@
(repoColors[i].lang_percentage / lang_total) * 1000, (repoColors[i].lang_percentage / lang_total) * 1000,
) / 10; ) / 10;
} }
await loadingAnimation.stop(); await skeleton.stop();
finishLoadingStatus = finishLoading.setStatus(true); finishLoadingStatus = finishLoading.setStatus(true);
} }
}); });
@ -129,6 +130,7 @@
); );
}, },
}); });
countersSet = true;
} }
</script> </script>
@ -137,13 +139,13 @@
role="button" role="button"
tabindex="0" tabindex="0"
on:mousemove={(event) => { on:mousemove={(event) => {
update_gradient(event, overlay_div); update_gradient(event, overlayDiv);
}} }}
on:mouseenter={() => { on:mouseenter={() => {
animateForeground(true, overlay_div); animateForeground(true, overlayDiv);
}} }}
on:mouseleave={() => { on:mouseleave={() => {
animateForeground(false, overlay_div); animateForeground(false, overlayDiv);
}} }}
on:click={() => { on:click={() => {
window.location.href = `https://git.etheryo.fr/${repo}`; window.location.href = `https://git.etheryo.fr/${repo}`;
@ -153,7 +155,7 @@
}} }}
use:viewport use:viewport
on:enterViewport={() => { on:enterViewport={() => {
animateCounters(); if (!countersSet) animateCounters();
}} }}
> >
<div class="git-container overlay"> <div class="git-container overlay">
@ -182,9 +184,9 @@
{/each} {/each}
</div> </div>
{:else} {:else}
<div class="git-loading w-100 h-100" bind:this={div_loading}></div> <div class="git-loading w-100 h-100" bind:this={divLoading}></div>
{/if} {/if}
</div> </div>
<div class="overlay-front"></div> <div class="overlay-front"></div>
<div class="overlay-back" bind:this={overlay_div}></div> <div class="overlay-back" bind:this={overlayDiv}></div>
</div> </div>