Show statistics animation in viewport only

This commit is contained in:
Jay Trees 2022-04-07 14:47:48 +02:00
parent aaae228cfd
commit c6e6121f06

View file

@ -8,21 +8,43 @@ $(function() {
.then(handleFetchError) .then(handleFetchError)
.then(handleFetchResponse) .then(handleFetchResponse)
.then(function(response) { .then(function(response) {
showStatistic( /**
$('#wishes .value'), * Intersection observer
response.data.wishes.count, *
0 * @link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
); */
showStatistic( var observerOptions = {
$('#wishlists .value'), rootMargin : '0px',
response.data.wishlists.count, threshold : 0
0 };
); var observerCallbackWishes = (entries, observer) => {
showStatistic( entries.forEach(entry => {
$('#users .value'), if (entry.isIntersecting) {
response.data.users.count, showStatistic($('#wishes .value'), response.data.wishes.count, 0);
0 }
); });
};
var observerCallbackWishlists = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
showStatistic($('#wishlists .value'), response.data.wishlists.count, 0);
}
});
};
var observerCallbackUsers = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
showStatistic($('#users .value'), response.data.users.count, 0);
}
});
};
var observerWishes = new IntersectionObserver(observerCallbackWishes, observerOptions);
var observerWishlists = new IntersectionObserver(observerCallbackWishlists, observerOptions);
var observerUsers = new IntersectionObserver(observerCallbackUsers, observerOptions);
observerWishes.observe(document.querySelector('#wishes'));
observerWishlists.observe(document.querySelector('#wishlists'));
observerUsers.observe(document.querySelector('#users'));
}); });
}); });