102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
export default function archivesFondsArchivesInit() {
|
||
const toolbar = document.querySelector('.fonds-archives-grid__toolbar');
|
||
if (!toolbar) return;
|
||
|
||
const lettersButtons = toolbar.querySelectorAll(
|
||
'.alphabetical-order-select__button',
|
||
) as NodeListOf<HTMLButtonElement>;
|
||
const sortBySelect = toolbar.querySelector(
|
||
'select[name="sort_by"]',
|
||
) as HTMLSelectElement;
|
||
const resetButton = toolbar.querySelectorAll(
|
||
'.reset-button',
|
||
) as NodeListOf<HTMLButtonElement>;
|
||
const postsContainer = document.querySelector('.post-grid__list');
|
||
const postCountElement = document.querySelector('.post-count__count');
|
||
|
||
if (!lettersButtons.length || !postsContainer) return;
|
||
const postsContainerElement = postsContainer as HTMLElement;
|
||
|
||
let activeLetter = '';
|
||
let currentAbortController: AbortController | null = null;
|
||
let lastRequestId = 0;
|
||
|
||
function setActiveLetterButton(letter: string) {
|
||
lettersButtons.forEach((button) => {
|
||
const isActive = button.dataset.letter === letter;
|
||
|
||
button.classList.toggle('is-active', isActive);
|
||
button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
|
||
});
|
||
}
|
||
|
||
function resetSearch() {
|
||
activeLetter = 'all';
|
||
setActiveLetterButton(activeLetter);
|
||
hydrateFondsArchivesByLetter();
|
||
}
|
||
|
||
async function hydrateFondsArchivesByLetter() {
|
||
const showAllLetters = activeLetter === 'all' || activeLetter === '';
|
||
const startLetter = showAllLetters ? '' : activeLetter;
|
||
const params = new URLSearchParams({
|
||
start_letter: startLetter,
|
||
show_all_letters: showAllLetters ? 'true' : 'false',
|
||
sort_by: sortBySelect?.value ?? 'title_asc',
|
||
post_type: 'fonds-archives',
|
||
});
|
||
|
||
const url = `/wp-json/carhop-datas/v1/build/fonds-archives?${params.toString()}`;
|
||
|
||
if (currentAbortController) currentAbortController.abort();
|
||
currentAbortController = new AbortController();
|
||
const requestId = ++lastRequestId;
|
||
|
||
try {
|
||
const response = await fetch(url, { signal: currentAbortController.signal });
|
||
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
||
const data = await response.json();
|
||
|
||
if (requestId !== lastRequestId) return;
|
||
|
||
postsContainerElement.innerHTML = data.html_template;
|
||
if (postCountElement) {
|
||
postCountElement.textContent = String(data.post_count ?? 0);
|
||
}
|
||
} catch (error) {
|
||
if ((error as Error).name === 'AbortError') return;
|
||
console.error('Erreur lors de la récupération des fonds d’archives:', error);
|
||
}
|
||
}
|
||
|
||
lettersButtons.forEach((button) => {
|
||
button.setAttribute('aria-pressed', 'false');
|
||
button.addEventListener('click', (event) => {
|
||
event.preventDefault();
|
||
const clickedLetter = button.dataset.letter ?? '';
|
||
if (clickedLetter === 'all') {
|
||
activeLetter = 'all';
|
||
} else {
|
||
activeLetter = activeLetter === clickedLetter ? '' : clickedLetter;
|
||
}
|
||
setActiveLetterButton(activeLetter);
|
||
hydrateFondsArchivesByLetter();
|
||
});
|
||
});
|
||
|
||
if (resetButton) {
|
||
resetButton.forEach((button) => {
|
||
button.addEventListener('click', (event) => {
|
||
event.preventDefault();
|
||
resetSearch();
|
||
});
|
||
});
|
||
}
|
||
|
||
if (sortBySelect) {
|
||
sortBySelect.addEventListener('change', () => {
|
||
hydrateFondsArchivesByLetter();
|
||
});
|
||
}
|
||
}
|