Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Handling new features in components like scrolling to filters if page var has query

Browse Source
This commit is contained in:
Antoine M 2026-03-20 16:53:33 +01:00
parent 13930d6449
commit ea5e3b13cd
1 changed files with 140 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
resources/js/archives/archives.ts
View File

@ -1,33 +1,31 @@
//post-grid__toolbar-actions //post-grid__toolbar-actions
export default function archivesInit() { export default function archivesInit() {
const isArchivePage = document.querySelector('body.archive'); const isArchivePage = document.querySelector('body.archive');
if (!isArchivePage) return; if (!isArchivePage) return;
const toolbar = document.querySelector('.post-grid__toolbar'); const toolbar = document.querySelector('.post-grid__toolbar');
if (!toolbar) return; if (!toolbar) return;
const postGridToolbarActions = toolbar.querySelector('.post-grid__toolbar-actions'); const postGridToolbarActions = toolbar.querySelector('.post-grid__toolbar-actions');
const currentPostType = postGridToolbarActions?.getAttribute('data-post-type') as string; const currentPostType = postGridToolbarActions?.getAttribute(
const etiquettesSelect = toolbar.querySelector('select[name="etiquettes"]') as HTMLSelectElement; 'data-post-type',
const auteursSelect = toolbar.querySelector('select[name="auteurs"]') as HTMLSelectElement; ) as string;
const sortBySelect = toolbar.querySelector('select[name="sort_by"]') as HTMLSelectElement; const etiquettesSelect = toolbar.querySelector(
'select[name="etiquettes"]',
) as HTMLSelectElement;
const auteursSelect = toolbar.querySelector(
'select[name="auteurs"]',
) as HTMLSelectElement;
const sortBySelect = toolbar.querySelector(
'select[name="sort_by"]',
) as HTMLSelectElement;
const rechercheInput = toolbar.querySelector('.search-bar input') as HTMLInputElement; const rechercheInput = toolbar.querySelector('.search-bar input') as HTMLInputElement;
console.log('currentPostType', currentPostType);
console.log('etiquettesSelect', etiquettesSelect);
console.log('auteursSelect', auteursSelect);
console.log('sortBySelect', sortBySelect);
console.log('rechercheInput', rechercheInput);
// Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes // Évite les courses: annule les requêtes précédentes et ignore les réponses obsolètes
let currentAbortController: AbortController | null = null; let currentAbortController: AbortController | null = null;
let lastRequestId = 0; let lastRequestId = 0;
// Debounce simple pour la recherche // Debounce simple pour la recherche
function debounce<T extends (...args: any[]) => void>(fn: T, waitMs: number) { function debounce<T extends (...args: any[]) => void>(fn: T, waitMs: number) {
let timeoutId: number | undefined; let timeoutId: number | undefined;
@ -38,14 +36,12 @@ export default function archivesInit() {
} }
async function hydratePosts() { async function hydratePosts() {
const etiquetteValue = etiquettesSelect?.value ?? ''; const etiquetteValue = etiquettesSelect?.value ?? '';
const auteurValue = auteursSelect?.value ?? ''; const auteurValue = auteursSelect?.value ?? '';
const sortByValue = sortBySelect?.value ?? ''; const sortByValue = sortBySelect?.value ?? '';
const rechercheValue = rechercheInput?.value ?? ''; const rechercheValue = rechercheInput?.value ?? '';
const postTypeValue = currentPostType ?? ''; const postTypeValue = currentPostType ?? '';
const params = new URLSearchParams({ const params = new URLSearchParams({
etiquette: etiquetteValue, etiquette: etiquetteValue,
auteur: auteurValue, auteur: auteurValue,
@ -53,9 +49,8 @@ export default function archivesInit() {
recherche: rechercheValue, recherche: rechercheValue,
post_type: postTypeValue, post_type: postTypeValue,
}); });
console.log(params.toString());
const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;
const url = `/wp-json/carhop-datas/v1/build/posts?${params.toString()}`;
// Annule la précédente et prépare un nouvel identifiant // Annule la précédente et prépare un nouvel identifiant
if (currentAbortController) currentAbortController.abort(); if (currentAbortController) currentAbortController.abort();
@ -102,8 +97,6 @@ export default function archivesInit() {
button.setAttribute('aria-selected', 'true'); button.setAttribute('aria-selected', 'true');
} }
function handleFilterPostsBy() { function handleFilterPostsBy() {
const filterByButtons = document.querySelectorAll('.search-by button'); const filterByButtons = document.querySelectorAll('.search-by button');
if (!filterByButtons) return; if (!filterByButtons) return;
@ -133,8 +126,34 @@ export default function archivesInit() {
}); });
handleFilterPostsBy(); handleFilterPostsBy();
postGridToolbarActions.addEventListener('click', (e) => { postGridToolbarActions.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
}); });
} }
function updatePostCount(count: number) {
const postCount = document.querySelector('.post-count__count');
if (!postCount) return;
postCount.innerHTML = count.toString();
}
function scrollToPostsGridIfHasInitialFilter() {
const postsGrid = document.querySelector('.post-grid');
const hasInitialFilter = postsGrid?.classList.contains('has-initial-filter');
if (!hasInitialFilter || !postsGrid) return;
setTimeout(() => {
postsGrid.scrollIntoView({ behavior: 'smooth' });
}, 200);
setTimeout(() => {
const etiquettesSelect = document.querySelector(
'.post-grid__toolbar-actions select[name="etiquettes"]',
) as HTMLSelectElement;
if (!etiquettesSelect) return;
etiquettesSelect.focus();
}, 500);
}
window.addEventListener('load', () => {
scrollToPostsGridIfHasInitialFilter();
});