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(handleFetchResponse)
.then(function(response) {
showStatistic(
$('#wishes .value'),
response.data.wishes.count,
0
);
showStatistic(
$('#wishlists .value'),
response.data.wishlists.count,
0
);
showStatistic(
$('#users .value'),
response.data.users.count,
0
);
/**
* Intersection observer
*
* @link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
*/
var observerOptions = {
rootMargin : '0px',
threshold : 0
};
var observerCallbackWishes = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
showStatistic($('#wishes .value'), response.data.wishes.count, 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'));
});
});