85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
async function filterPosts(e) {
|
|
const filterID =
|
|
e.target.getAttribute('data-term-id') ??
|
|
e.target.parentElement.getAttribute('data-term-id') ??
|
|
null;
|
|
const termName =
|
|
e.target.getAttribute('data-term-name') ??
|
|
e.target.parentElement.getAttribute('data-term-name') ??
|
|
null;
|
|
|
|
const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
|
|
|
|
filterButtons.forEach((button) => {
|
|
button.classList.remove('filters-toolbar__action-button--active');
|
|
});
|
|
|
|
const newsContainer = document.querySelector('.news-container .card-grid-container');
|
|
newsContainer.setAttribute('isLoading', true);
|
|
await hydrateNewsFeedByTypeId(filterID, termName);
|
|
newsContainer.removeAttribute('isLoading');
|
|
|
|
e.target.classList.add('filters-toolbar__action-button--active');
|
|
}
|
|
|
|
async function hydrateNewsFeedByTypeId(filterID, termName) {
|
|
let newCardsDatas;
|
|
if (filterID === 'all') {
|
|
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
|
|
newCardsDatas = await response.json();
|
|
} else {
|
|
const response = await fetch(`/wp-json/homegrade-datas/v1/build/news/type/${filterID}`);
|
|
newCardsDatas = await response.json();
|
|
}
|
|
|
|
let container = document.querySelector('.card-grid-container');
|
|
container.innerHTML = newCardsDatas.html_template;
|
|
updateSearchResultsAmount(newCardsDatas.total_posts_found, termName);
|
|
}
|
|
|
|
function updateSearchResultsAmount(totalPostsFound, termName) {
|
|
const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount');
|
|
|
|
if (termName !== 'all') {
|
|
searchResultsComponent.querySelector('.results-amount').innerHTML = totalPostsFound;
|
|
searchResultsComponent.querySelector('.results-filter-name').innerHTML = '"' + termName + '"';
|
|
searchResultsComponent.classList.add('filter-active');
|
|
searchResultsComponent.classList.remove('filter-disable');
|
|
return;
|
|
}
|
|
if (termName === 'all') {
|
|
searchResultsComponent.classList.remove('filter-active');
|
|
searchResultsComponent.classList.add('filter-disable');
|
|
searchResultsComponent.querySelector('.results-amount').innerHTML = totalPostsFound;
|
|
searchResultsComponent.querySelector('.results-filter-name').innerHTML = termName;
|
|
return;
|
|
}
|
|
}
|
|
function filterNewsInit() {
|
|
const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
|
|
if (!filterNewsToolbar) return;
|
|
|
|
const filterButtons = filterNewsToolbar.querySelectorAll('.filters-toolbar__action-button');
|
|
if (!filterButtons) return;
|
|
|
|
filterButtons.forEach((button) => {
|
|
const termId = button.getAttribute('data-term-id');
|
|
button.addEventListener('click', (e) => filterPosts(e));
|
|
});
|
|
}
|
|
function loadMoreNewsInit() {
|
|
const loadMoreButton = document.querySelector('#load-more-news');
|
|
if (!loadMoreButton) return;
|
|
|
|
function loadMoreNews() {
|
|
console.log('loadMoreNews');
|
|
}
|
|
|
|
loadMoreButton.addEventListener('click', loadMoreNews);
|
|
}
|
|
|
|
export default function archiveNewsInit() {
|
|
filterNewsInit();
|
|
loadMoreNewsInit();
|
|
}
|