valentin_le_moignandClaude Opus 5
167950c627
Les règles `.scroll-spinner` et leurs keyframes étaient enfermées dans le bloc `/* … */` legacy de `_category.scss` : Sass recopie ces commentaires verbatim, les trois points n'avaient donc aucun style et restaient invisibles pendant le chargement AJAX. Bloc sorti du commentaire (le legacy reste en place), points allégés (5 px, gris) et marge haute élargie. Le modifieur `--reserve` réserve la place en permanence et n'anime que l'opacité, au lieu de basculer `display` : plus de saut de mise en page ni à l'apparition ni à la disparition. `infiniteScroll.js` bascule désormais la classe `is-loading`. Le `rootMargin` de l'observer passe à 700 px pour que la requête parte plus tôt, et le loader de l'agenda est supprimé (markup + JS). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WQLwtNFa1LNaN7QTAbYkZx
74 lines
2.9 KiB
JavaScript
74 lines
2.9 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
var sentinel = document.getElementById('scroll-sentinel');
|
|
var grid = document.getElementById('post-grid');
|
|
var spinner = document.getElementById('scroll-spinner');
|
|
|
|
if (!sentinel || !grid) return;
|
|
|
|
var page = 1;
|
|
var loading = false;
|
|
var done = false;
|
|
|
|
// Read filter params from sentinel data attributes (set server-side)
|
|
var categoryId = sentinel.dataset.category || '';
|
|
var axe = sentinel.dataset.axe || '';
|
|
var dateFrom = sentinel.dataset.dateFrom || '';
|
|
var dateTo = sentinel.dataset.dateTo || '';
|
|
var taxonomy = sentinel.dataset.taxonomy || '';
|
|
var termId = sentinel.dataset.term || '';
|
|
var catFilter = sentinel.dataset.filterCat || '';
|
|
var filterAutres = sentinel.dataset.filterAutres || '';
|
|
var excludeCats = sentinel.dataset.excludeCats || '';
|
|
var searchQuery = sentinel.dataset.search || '';
|
|
|
|
function fetchPosts() {
|
|
if (loading || done) return;
|
|
loading = true;
|
|
page++;
|
|
if (spinner) spinner.classList.add('is-loading');
|
|
|
|
var data = new FormData();
|
|
data.append('action', 'load_more_posts');
|
|
data.append('page', page);
|
|
data.append('nonce', infiniteScrollData.nonce);
|
|
data.append('lang', infiniteScrollData.lang || 'fr');
|
|
if (categoryId) data.append('category', categoryId);
|
|
if (axe) data.append('axe', axe);
|
|
if (dateFrom) data.append('date_from', dateFrom);
|
|
if (dateTo) data.append('date_to', dateTo);
|
|
if (taxonomy) data.append('taxonomy', taxonomy);
|
|
if (termId) data.append('term', termId);
|
|
if (catFilter) data.append('filter_cat', catFilter);
|
|
if (filterAutres) data.append('filter_autres', filterAutres);
|
|
if (excludeCats) data.append('exclude_cats', excludeCats);
|
|
if (searchQuery) data.append('search', searchQuery);
|
|
|
|
fetch(infiniteScrollData.ajaxUrl, { method: 'POST', body: data })
|
|
.then(function (response) { return response.json(); })
|
|
.then(function (result) {
|
|
if (spinner) spinner.classList.remove('is-loading');
|
|
if (result.success && result.data.html) {
|
|
grid.insertAdjacentHTML('beforeend', result.data.html);
|
|
loading = false;
|
|
} else {
|
|
done = true;
|
|
observer.disconnect();
|
|
}
|
|
})
|
|
.catch(function () {
|
|
if (spinner) spinner.classList.remove('is-loading');
|
|
loading = false;
|
|
});
|
|
}
|
|
|
|
// Marge large : la requête part bien avant que la sentinelle soit à
|
|
// l'écran, les cards sont souvent déjà en place quand on arrive en bas
|
|
var observer = new IntersectionObserver(function (entries) {
|
|
if (entries[0].isIntersecting) {
|
|
fetchPosts();
|
|
}
|
|
}, { rootMargin: '700px' });
|
|
|
|
observer.observe(sentinel);
|
|
});
|