ehancing filter for thematiques taxonomy page
This commit is contained in:
parent
e420a0f2d7
commit
0aa83d08e1
|
|
@ -1,59 +1,294 @@
|
||||||
async function fetchMoreThematiquePostDatas(id) {
|
// ##################################
|
||||||
const response = await fetch(`/wp-json/homegrade-datas/v1/questions-thematiques/${id}`);
|
// ### HANDLE FILTER SUBMENU TOGGLE
|
||||||
|
// ##################################
|
||||||
|
function handleSubmenuToggle() {
|
||||||
|
const submenuToggle = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filters .filter-by-thematiques-submenu-toggle'
|
||||||
|
);
|
||||||
|
const submenuFilters = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
|
||||||
|
);
|
||||||
|
|
||||||
const data = await response.json();
|
if (!submenuToggle) return;
|
||||||
return data;
|
|
||||||
|
submenuToggle.addEventListener('click', () => {
|
||||||
|
const isSubmenuOpen = submenuToggle.getAttribute('aria-expanded');
|
||||||
|
|
||||||
|
if (isSubmenuOpen != null) {
|
||||||
|
return closeSubMenuFilters();
|
||||||
|
} else {
|
||||||
|
return openSubMenuFilters();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// CLOSE SUBMENU IF CLICK OUTSIDE
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
const submenuGroup = document.querySelector('.filters-toolbar__action-thematiques-filters');
|
||||||
|
|
||||||
|
const isClickInside = submenuGroup.contains(e.target);
|
||||||
|
if (!isClickInside) {
|
||||||
|
closeSubMenuFilters();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// CLOSE SUBMENU IF ESCAPE KEY
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
closeSubMenuFilters();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function openSubMenuFilters() {
|
||||||
|
const submenuToggle = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filters .filter-by-thematiques-submenu-toggle'
|
||||||
|
);
|
||||||
|
const submenuFilters = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
|
||||||
|
);
|
||||||
|
submenuFilters.removeAttribute('hidden');
|
||||||
|
submenuToggle.setAttribute('active', '');
|
||||||
|
submenuToggle.setAttribute('aria-expanded', '');
|
||||||
|
}
|
||||||
|
function closeSubMenuFilters() {
|
||||||
|
const submenuToggle = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filters .filter-by-thematiques-submenu-toggle'
|
||||||
|
);
|
||||||
|
const submenuFilters = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filters .action-thematiques-filters-list'
|
||||||
|
);
|
||||||
|
submenuFilters.setAttribute('hidden', '');
|
||||||
|
submenuToggle.removeAttribute('active');
|
||||||
|
submenuToggle.removeAttribute('aria-expanded');
|
||||||
}
|
}
|
||||||
|
|
||||||
async function handleLoadMoreClick() {
|
// ###########################
|
||||||
const currentTermId = mainAppJsDynamicDatas.current_thematique.term_id;
|
// ### DETAILS DEPLOY / CLOSE
|
||||||
const posts = await fetchMoreThematiquePostDatas(currentTermId);
|
// ###########################
|
||||||
const postsContainer = document.querySelector('.post-question-page__accordeons-container');
|
function handleDeployDetails() {
|
||||||
// console.log(posts);
|
const deployAllButton = document.querySelector('.filters-toolbar__action-button--deploy-all');
|
||||||
// posts.forEach((post) => {
|
const closeAllButton = document.querySelector('.filters-toolbar__action-button--close-all');
|
||||||
// let newContent = createDetailsElement(post);
|
|
||||||
// postsContainer.appendChild(newContent);
|
if (!deployAllButton) return;
|
||||||
// });
|
|
||||||
|
deployAllButton.addEventListener('click', () => {
|
||||||
|
deployAllDetails();
|
||||||
|
deployAllButton.setAttribute('hidden', true);
|
||||||
|
closeAllButton.removeAttribute('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
closeAllButton.addEventListener('click', () => {
|
||||||
|
closeAllDetails();
|
||||||
|
closeAllButton.setAttribute('hidden', true);
|
||||||
|
deployAllButton.removeAttribute('hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function deployAllDetails() {
|
||||||
|
const detailsContainers = document.querySelectorAll('details');
|
||||||
|
if (!detailsContainers) return;
|
||||||
|
|
||||||
|
detailsContainers.forEach((details) => {
|
||||||
|
details.open = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function closeAllDetails() {
|
||||||
|
const detailsContainers = document.querySelectorAll('details');
|
||||||
|
if (!detailsContainers) return;
|
||||||
|
|
||||||
|
detailsContainers.forEach((details) => {
|
||||||
|
details.open = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function createDetailsElement(post) {
|
// #################################
|
||||||
const details = document.createElement('details');
|
// ### UPDATE RESULTS AND DISPLAY
|
||||||
details.classList.add('question');
|
// ################################
|
||||||
|
|
||||||
const summary = document.createElement('summary');
|
function updatePostCountResults(totalPostsFound) {
|
||||||
summary.textContent = post.title.rendered;
|
const resultAmountCounter = document.querySelector(
|
||||||
|
'.filters-toolbar__posts-results-amount .results-amount '
|
||||||
const openCloseIcon = document.createElement('div');
|
);
|
||||||
openCloseIcon.classList.add('open-close-icon');
|
resultAmountCounter.innerHTML = totalPostsFound;
|
||||||
|
|
||||||
const chevron = document.createElement('img');
|
|
||||||
chevron.src =
|
|
||||||
mainAppJsDynamicDatas.template_directory_uri + '/resources/img/graphic-assets/chevron_down.svg';
|
|
||||||
|
|
||||||
const content = document.createElement('div');
|
|
||||||
content.classList.add('content', 'entry-content');
|
|
||||||
content.innerHTML = post.content.rendered;
|
|
||||||
|
|
||||||
details.appendChild(summary);
|
|
||||||
openCloseIcon.appendChild(chevron);
|
|
||||||
details.appendChild(openCloseIcon);
|
|
||||||
details.appendChild(content);
|
|
||||||
|
|
||||||
return details;
|
|
||||||
}
|
}
|
||||||
|
function updateActiveFiltersViewer() {
|
||||||
|
const activeFilters = document.querySelectorAll(
|
||||||
|
'.filters-toolbar__action-thematiques-filter:checked'
|
||||||
|
);
|
||||||
|
if (activeFilters.length === 0) {
|
||||||
|
const resetFiltersButton = document.querySelector(
|
||||||
|
'.filters-toolbar__action-button--reset-filter'
|
||||||
|
);
|
||||||
|
resetFiltersButton.setAttribute('hidden', '');
|
||||||
|
}
|
||||||
|
|
||||||
export default async function taxonomyThematiqueFaqInit() {
|
const activeFiltersContainer = document.querySelector(
|
||||||
const currentQuestionPage = document.querySelector('.post-question-page');
|
'.filters-toolbar__active-filters-viewer .active-filters-button-container'
|
||||||
const filters = document.querySelectorAll('.thematiques-subtaxonomy-links li');
|
);
|
||||||
if (!currentQuestionPage) return;
|
const previousButtons = activeFiltersContainer.querySelectorAll(
|
||||||
|
'.filters-toolbar__action-button--active-filter-remover'
|
||||||
|
);
|
||||||
|
|
||||||
const loadMoreButton = document.querySelector('#load-more-questions');
|
activeFiltersContainer.innerHTML = '';
|
||||||
|
activeFilters.forEach((activeFilterCheckbox) => {
|
||||||
|
const button = document.createElement('button');
|
||||||
|
button.classList.add('filters-toolbar__action-button--active-filter-remover');
|
||||||
|
button.innerText = activeFilterCheckbox.getAttribute('data-title');
|
||||||
|
button.setAttribute('value', activeFilterCheckbox.getAttribute('value'));
|
||||||
|
|
||||||
loadMoreButton.addEventListener('click', handleLoadMoreClick);
|
activeFiltersContainer.appendChild(button);
|
||||||
|
|
||||||
filters.forEach((filter) => {
|
button.addEventListener('click', () => {
|
||||||
filter.addEventListener('click', (e) => {
|
activeFilterCheckbox.checked = false;
|
||||||
e.preventDefault;
|
filterPosts();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ###############################################
|
||||||
|
// ### HANDLE TOOLBAR ACTIVE FILTERS CLASS STATUS
|
||||||
|
// ###############################################
|
||||||
|
|
||||||
|
function setToolbarThematiqueFilterActive() {
|
||||||
|
const toolBar = document.querySelector('.filters-toolbar--faq');
|
||||||
|
toolBar.setAttribute('thematique-filter-active', '');
|
||||||
|
}
|
||||||
|
function setToolbarThematiqueFilterInactive() {
|
||||||
|
const toolBar = document.querySelector('.filters-toolbar--faq');
|
||||||
|
toolBar.removeAttribute('thematique-filter-active');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ###########################
|
||||||
|
// ### POST FILTERTING
|
||||||
|
// ###########################
|
||||||
|
|
||||||
|
function handleFilterPosts() {
|
||||||
|
const filters = document.querySelectorAll('.filters-toolbar__action-thematiques-filter');
|
||||||
|
if (!filters) return;
|
||||||
|
// HANDLE FILTERS
|
||||||
|
filters.forEach((filter) => filter.addEventListener('click', filterPosts));
|
||||||
|
|
||||||
|
// HANDLE "ALL" BUTTON
|
||||||
|
const showAllButton = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filter--show-all'
|
||||||
|
);
|
||||||
|
const loadAllButton = document.querySelector('.filters-toolbar__action-button--load-all');
|
||||||
|
const resetFiltersButton = document.querySelector(
|
||||||
|
'.filters-toolbar__action-button--reset-filter'
|
||||||
|
);
|
||||||
|
|
||||||
|
showAllButton.addEventListener('click', showAllPosts);
|
||||||
|
loadAllButton.addEventListener('click', () => {
|
||||||
|
closeSubMenuFilters();
|
||||||
|
showAllPosts();
|
||||||
|
});
|
||||||
|
resetFiltersButton.addEventListener('click', () => {
|
||||||
|
closeSubMenuFilters();
|
||||||
|
showAllPosts();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function showAllPosts() {
|
||||||
|
setToolbarThematiqueFilterInactive();
|
||||||
|
const activeFilters = document.querySelectorAll(
|
||||||
|
'.filters-toolbar__action-thematiques-filter:checked'
|
||||||
|
);
|
||||||
|
activeFilters.forEach((filter) => (filter.checked = false));
|
||||||
|
const currentMainParentThematiqueId = document
|
||||||
|
.querySelector('.post-question-page-container')
|
||||||
|
.getAttribute('data-thematique-id');
|
||||||
|
if (!currentMainParentThematiqueId) return;
|
||||||
|
hydrateAllQuestions(currentMainParentThematiqueId);
|
||||||
|
|
||||||
|
// Hide "load all" button
|
||||||
|
const loadAllButton = document.querySelector('.filters-toolbar__action-button--load-all');
|
||||||
|
loadAllButton.setAttribute('hidden', '');
|
||||||
|
|
||||||
|
// Hide "reset all" button
|
||||||
|
const resetAllButton = document.querySelector('.filters-toolbar__action-button--reset-filter');
|
||||||
|
resetAllButton.setAttribute('hidden', '');
|
||||||
|
|
||||||
|
updateActiveFiltersViewer();
|
||||||
|
// Remove Toolbar Filter-Active Status
|
||||||
|
const filtersToolbar = document.querySelector('.filters-toolbar--faq');
|
||||||
|
filtersToolbar.removeAttribute('filter-active');
|
||||||
|
}
|
||||||
|
async function filterPosts() {
|
||||||
|
setToolbarThematiqueFilterActive();
|
||||||
|
const showAllPostsButton = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filter--show-all'
|
||||||
|
);
|
||||||
|
showAllPostsButton.checked = false;
|
||||||
|
|
||||||
|
const activeFilters = document.querySelectorAll(
|
||||||
|
'.filters-toolbar__action-thematiques-filter:checked'
|
||||||
|
);
|
||||||
|
if (activeFilters.length === 0) {
|
||||||
|
const showAllCheckbox = document.querySelector(
|
||||||
|
'.filters-toolbar__action-thematiques-filter--show-all'
|
||||||
|
);
|
||||||
|
showAllCheckbox.checked = true;
|
||||||
|
return showAllPosts();
|
||||||
|
}
|
||||||
|
|
||||||
|
const posts = Array.from(activeFilters).map((filter) => filter.getAttribute('value'));
|
||||||
|
hydrateFilteredQuestions(posts);
|
||||||
|
|
||||||
|
const loadAllButton = document.querySelector('.filters-toolbar__action-button--load-all');
|
||||||
|
loadAllButton.removeAttribute('hidden');
|
||||||
|
|
||||||
|
const resetAllButton = document.querySelector('.filters-toolbar__action-button--reset-filter');
|
||||||
|
resetAllButton.removeAttribute('hidden');
|
||||||
|
|
||||||
|
updateActiveFiltersViewer();
|
||||||
|
|
||||||
|
// Set Toolbar Filter-Active Status
|
||||||
|
|
||||||
|
const filtersToolbar = document.querySelector('.filters-toolbar--faq');
|
||||||
|
filtersToolbar.setAttribute('filter-active', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ###########################
|
||||||
|
// ### HYDRATATION
|
||||||
|
// ###########################
|
||||||
|
|
||||||
|
async function hydrateFilteredQuestions(questionsIds) {
|
||||||
|
const currentLanguage = document.querySelector('body').getAttribute('current-language');
|
||||||
|
const faqRowsContainer = document.querySelector('.post-question-page__accordeons-container');
|
||||||
|
faqRowsContainer.setAttribute('isLoading', 'true');
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`/wp-json/homegrade-datas/v1/build/faq-details-rows?current-page-language=${currentLanguage}&questions-ids=${questionsIds}`
|
||||||
|
);
|
||||||
|
faqDatas = await response.json();
|
||||||
|
|
||||||
|
faqRowsContainer.innerHTML = faqDatas.html_template;
|
||||||
|
const postFounds = await faqDatas.total_posts_found;
|
||||||
|
updatePostCountResults(postFounds);
|
||||||
|
faqRowsContainer.removeAttribute('isLoading');
|
||||||
|
}
|
||||||
|
async function hydrateAllQuestions(CurrentMainParentThematiqueId) {
|
||||||
|
const currentLanguage = document.querySelector('body').getAttribute('current-language');
|
||||||
|
const faqRowsContainer = document.querySelector('.post-question-page__accordeons-container');
|
||||||
|
|
||||||
|
faqRowsContainer.setAttribute('isLoading', 'true');
|
||||||
|
|
||||||
|
const response = await fetch(
|
||||||
|
`/wp-json/homegrade-datas/v1/build/faq-details-rows-all?current-page-language=${currentLanguage}&parent-thematique-id=${CurrentMainParentThematiqueId}`
|
||||||
|
);
|
||||||
|
faqDatas = await response.json();
|
||||||
|
|
||||||
|
faqRowsContainer.innerHTML = faqDatas.html_template;
|
||||||
|
|
||||||
|
updatePostCountResults(faqDatas.total_posts_found);
|
||||||
|
faqRowsContainer.removeAttribute('isLoading');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ###########################
|
||||||
|
// ### INSTATIATE
|
||||||
|
// ###########################
|
||||||
|
|
||||||
|
export default async function taxonomyThematiqueFaqInit() {
|
||||||
|
const faqFiltersToolbar = document.querySelector('.filters-toolbar--faq');
|
||||||
|
if (!faqFiltersToolbar) return;
|
||||||
|
handleDeployDetails();
|
||||||
|
handleFilterPosts();
|
||||||
|
handleSubmenuToggle();
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user