From 0aa83d08e1eabc41f09b4a1f25b6a8d22fa70441 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 6 Dec 2023 16:30:48 +0100 Subject: [PATCH] ehancing filter for thematiques taxonomy page --- resources/js/taxonomy-thematique-(faq).js | 325 +++++++++++++++++++--- 1 file changed, 280 insertions(+), 45 deletions(-) diff --git a/resources/js/taxonomy-thematique-(faq).js b/resources/js/taxonomy-thematique-(faq).js index 6d8771d..1585261 100644 --- a/resources/js/taxonomy-thematique-(faq).js +++ b/resources/js/taxonomy-thematique-(faq).js @@ -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(); - return data; + if (!submenuToggle) return; + + 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; - const posts = await fetchMoreThematiquePostDatas(currentTermId); - const postsContainer = document.querySelector('.post-question-page__accordeons-container'); - // console.log(posts); - // posts.forEach((post) => { - // let newContent = createDetailsElement(post); - // postsContainer.appendChild(newContent); - // }); +// ########################### +// ### DETAILS DEPLOY / CLOSE +// ########################### +function handleDeployDetails() { + const deployAllButton = document.querySelector('.filters-toolbar__action-button--deploy-all'); + const closeAllButton = document.querySelector('.filters-toolbar__action-button--close-all'); + + 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'); - details.classList.add('question'); +// ################################# +// ### UPDATE RESULTS AND DISPLAY +// ################################ - const summary = document.createElement('summary'); - summary.textContent = post.title.rendered; - - const openCloseIcon = document.createElement('div'); - openCloseIcon.classList.add('open-close-icon'); - - 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 updatePostCountResults(totalPostsFound) { + const resultAmountCounter = document.querySelector( + '.filters-toolbar__posts-results-amount .results-amount ' + ); + resultAmountCounter.innerHTML = totalPostsFound; } +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 currentQuestionPage = document.querySelector('.post-question-page'); - const filters = document.querySelectorAll('.thematiques-subtaxonomy-links li'); - if (!currentQuestionPage) return; + const activeFiltersContainer = document.querySelector( + '.filters-toolbar__active-filters-viewer .active-filters-button-container' + ); + 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) => { - filter.addEventListener('click', (e) => { - e.preventDefault; + button.addEventListener('click', () => { + activeFilterCheckbox.checked = false; + 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(); +}