diff --git a/resources/css/pages/template-archive-publications.css b/resources/css/pages/template-archive-publications.css index 440a3ad..bd531d5 100644 --- a/resources/css/pages/template-archive-publications.css +++ b/resources/css/pages/template-archive-publications.css @@ -1,7 +1,4 @@ .template-archives--publications { - section[isLoading] { - @apply opacity-30; - } .archives-publications-header { @apply bg-primary max-w-screen-xl text-white text-center mx-auto; } @@ -89,4 +86,10 @@ .videos-webinaires-archives { @apply max-w-screen-xl mx-auto pt-4 pb-16 mt-8; } + + &[filter-active] { + .highlighted-publication { + @apply !hidden; + } + } } diff --git a/resources/js/archive-template-publications.js b/resources/js/archive-template-publications.js index 4f0d4cd..9cef519 100644 --- a/resources/js/archive-template-publications.js +++ b/resources/js/archive-template-publications.js @@ -1,144 +1,358 @@ -function updateSearchResultsIndications(publicationType, e) { - if (!publicationType) return; +// ################################### +// ### UTILITIES +// ################################### - const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount'); - const currentActiveButton = e.target; - let returnedElementsAmount; +function getActivePublicationType() { + return document + .querySelector('.filters-toolbar--archive-publications') + .getAttribute('active-publication-type'); +} +function getActiveThematiquesFiltersIds() { + const checkedFilters = document.querySelectorAll( + '.filters-toolbar__action-thematiques-filter:checked' + ); + return Array.from(checkedFilters).map((filter) => filter.getAttribute('value')); +} - switch (publicationType) { +// ################################### +// ### UPDATE INDICATORS AND DISPLAY +// ################################### + +function updatePublicationsCountResults() { + const webinairePostsCount = + parseInt( + document + .querySelector('.videos-webinaires-archives #webinaires-rows') + .getAttribute('current-post-count'), + 10 + ) || 0; + const ficheInfoPostsCount = + parseInt( + document + .querySelector('.fiches-infos-archives #fiche-infos-rows') + .getAttribute('current-post-count'), + 10 + ) || 0; + const brochurePostsCount = + parseInt( + document + .querySelector('.brochures-archives #brochures-rows') + .getAttribute('current-post-count'), + 10 + ) || 0; + + const currentPublicationType = getActivePublicationType(); + + let postcount; + switch (currentPublicationType) { case 'brochures': - returnedElementsAmount = document.querySelectorAll( - '.brochures-archives .publications-grid__row' - ).length; - searchResultsComponent.classList.add('filter-active'); - searchResultsComponent.classList.remove('filter-disable'); - searchResultsComponent.querySelector('.results-filter-name').innerHTML = - 'Brochures Thématiques'; - + postcount = brochurePostsCount; break; - case 'fiches-infos': - returnedElementsAmount = document.querySelectorAll( - '.fiches-infos-archives .publications-grid__row' - ).length; - searchResultsComponent.classList.add('filter-active'); - searchResultsComponent.classList.remove('filter-disable'); - searchResultsComponent.querySelector('.results-filter-name').innerHTML = 'Fiches infos'; + postcount = ficheInfoPostsCount; break; - case 'webinaires': - returnedElementsAmount = document.querySelectorAll( - '.videos-webinaires-archives .publications-grid__row' - ).length; - searchResultsComponent.classList.add('filter-active'); - searchResultsComponent.classList.remove('filter-disable'); - searchResultsComponent.querySelector('.results-filter-name').innerHTML = - 'Vidéos et Webinaires'; + postcount = webinairePostsCount; break; case 'all': - const brochureElementsAmount = document.querySelectorAll( - '.fiches-infos-archives .publications-grid__row' - ).length; - const webinairesElementsAmount = document.querySelectorAll( - '.videos-webinaires-archives .publications-grid__row' - ).length; - const fichesInfosElementsAmount = document.querySelectorAll( - '.fiches-infos-archives .publications-grid__row' - ).length; - returnedElementsAmount = - fichesInfosElementsAmount + webinairesElementsAmount + brochureElementsAmount; - - searchResultsComponent.classList.add('filter-disable'); - searchResultsComponent.classList.remove('filter-active'); + postcount = brochurePostsCount + ficheInfoPostsCount + webinairePostsCount; break; - default: - searchResultsComponent.classList.add('filter-disable'); - searchResultsComponent.classList.remove('filter-active'); - return; } + const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount'); const postAmountSpan = searchResultsComponent.querySelector('.results-amount'); - postAmountSpan.innerHTML = returnedElementsAmount; + postAmountSpan.innerHTML = postcount; } -function toggleActiveFilterButton(e) { +function toggleActivePublicationTypeFilterButton() { const filterButtons = document.querySelectorAll('.filters-toolbar__action-button'); + const activePublicationType = getActivePublicationType(); filterButtons.forEach((button) => { button.classList.remove('filters-toolbar__action-button--active'); }); - const activeFilterButton = e.target.getAttribute('data-publication-type') - ? e.target - : e.target.parentElement.getAttribute('data-publication-type') - ? e.target.parentElement - : null; - activeFilterButton.classList.add('filters-toolbar__action-button--active'); + const correspondingActiveThematiqueButton = document.querySelector( + `.filters-toolbar__action-button[data-publication-type=${activePublicationType}]` + ); + + if (!correspondingActiveThematiqueButton) return; + correspondingActiveThematiqueButton.classList.add('filters-toolbar__action-button--active'); } +function updateActiveThematiquesFiltersViewer() { + const activeFilters = document.querySelectorAll( + '.filters-toolbar__action-thematiques-filter:checked' + ); + const resetFiltersButton = document.querySelector( + '.filters-toolbar__action-button--reset-filter' + ); + const activeFiltersContainer = document.querySelector( + '.filters-toolbar__active-filters-viewer .active-filters-button-container' + ); + activeFiltersContainer.innerHTML = ''; + if (activeFilters.length === 0) { + resetFiltersButton.setAttribute('hidden', ''); + checkShowAllCheckboxFilter(); + setToolbarThematiqueFilterInactive(); + } + + if (activeFilters.length > 0) { + resetFiltersButton.removeAttribute('hidden'); + } + + 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')); + + activeFiltersContainer.appendChild(button); + + button.addEventListener('click', () => { + activeFilterCheckbox.checked = false; + filterPublications(); + }); + }); +} + +// ############################################ +// ### HANDLE THEMATIQUE 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' + ); + + 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'); +} + +// ################################################# +// ### HANDLE THEMATIQUE FILTER CHECKING/UNCHECKING +// ################################################# + +function handleThematiqueCheckFilters() { + const filters = document.querySelectorAll('.filters-toolbar__action-thematiques-filter'); + + if (!filters) return; + + // HANDLE FILTERS + filters.forEach((filter) => + filter.addEventListener('click', () => { + uncheckShowAllFilter(); + filterPublications(); + setToolbarThematiqueFilterActive(); + const activeFilters = document.querySelectorAll( + '.filters-toolbar__action-thematiques-filter:checked' + ); + if (activeFilters.length === 0) { + checkShowAllCheckboxFilter(); + filterPublications(); + setToolbarThematiqueFilterInactive(); + } + }) + ); + + // HANDLE SHOW ALL FILTER + const showAllPostsCheckbox = document.querySelector( + '.filters-toolbar__action-thematiques-filter--show-all' + ); + showAllPostsCheckbox.addEventListener('click', () => { + uncheckAllFilters(); + filterPublications(); + setToolbarThematiqueFilterInactive(); + }); +} +function uncheckAllFilters() { + const activeFilters = document.querySelectorAll( + '.filters-toolbar__action-thematiques-filter:checked' + ); + activeFilters.forEach((filter) => (filter.checked = false)); +} +function uncheckShowAllFilter() { + const showAllFilter = document.querySelector( + '.filters-toolbar__action-thematiques-filter--show-all' + ); + showAllFilter.checked = false; +} +function checkShowAllCheckboxFilter() { + const showAllFilter = document.querySelector( + '.filters-toolbar__action-thematiques-filter--show-all' + ); + showAllFilter.checked = true; +} +function handleThematiqueFiltersReset() { + const resetThematiquesFilterButton = document.querySelector( + '.filters-toolbar__action-button--reset-filter' + ); + resetThematiquesFilterButton.addEventListener('click', () => { + uncheckAllFilters(); + checkShowAllCheckboxFilter(); + updateActiveThematiquesFiltersViewer(); + setToolbarThematiqueFilterInactive(); + filterPublications(); + }); +} + +// #################################### +// ### HANDLE PUBLICATION TYPE FILTER +// #################################### + +function handlePublicationTypeFilters() { + const publicationTypeFilterButtons = document.querySelectorAll( + '.publication-type-filters-wrapper .filters-toolbar__action-button' + ); + publicationTypeFilterButtons.forEach((button) => { + const buttonPublicationType = button.getAttribute('data-publication-type'); + const toolBar = document.querySelector('.filters-toolbar--archive-publications'); + button.addEventListener('click', (e) => { + toolBar.setAttribute('active-publication-type', buttonPublicationType); + // filterPublications(publicationType, e); + filterPublications(); + }); + }); +} + +// ############################################### +// ### HANDLE TOOLBAR ACTIVE FILTERS CLASS STATUS +// ############################################### + +function setToolbarThematiqueFilterActive() { + const toolBar = document.querySelector('.filters-toolbar--archive-publications'); + toolBar.setAttribute('thematique-filter-active', ''); +} +function setToolbarThematiqueFilterInactive() { + const toolBar = document.querySelector('.filters-toolbar--archive-publications'); + toolBar.removeAttribute('thematique-filter-active'); +} + +// ######################### +// ### HYDRATATION +// ######################### async function hydrateBrochureArchiveGrid() { const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const activeFiltersIds = getActiveThematiquesFiltersIds(); + const response = await fetch( - `/wp-json/homegrade-datas/v1/build/brochures-archive-rows?current-page-language=${currentLanguage}` + `/wp-json/homegrade-datas/v1/build/brochures-archive-rows?current-page-language=${currentLanguage}&thematiques-ids=${activeFiltersIds}` ); brochuresDatas = await response.json(); const brochureRows = document.querySelector('.brochures-archives #brochures-rows'); brochureRows.innerHTML = brochuresDatas.html_template; + brochureRows.setAttribute('current-post-count', brochuresDatas.total_posts_found); } - async function hydrateFicheInfoArchiveGrid() { const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const activeFiltersIds = getActiveThematiquesFiltersIds(); const response = await fetch( - `/wp-json/homegrade-datas/v1/build/fiche-info-archive-rows?current-page-language=${currentLanguage}` + `/wp-json/homegrade-datas/v1/build/fiche-info-archive-rows?current-page-language=${currentLanguage}&thematiques-ids=${activeFiltersIds}` ); ficheInfosDatas = await response.json(); const ficheInfoRows = document.querySelector('.fiches-infos-archives #fiche-infos-rows'); + ficheInfoRows.innerHTML = ficheInfosDatas.html_template; + ficheInfoRows.setAttribute('current-post-count', ficheInfosDatas.total_posts_found); +} +async function hydrateWebinaireArchiveGrid() { + const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const activeFiltersIds = getActiveThematiquesFiltersIds(); + + const response = await fetch( + `/wp-json/homegrade-datas/v1/build/webinaire-archive-rows?current-page-language=${currentLanguage}&thematiques-ids=${activeFiltersIds}` + ); + webinairesDatas = await response.json(); + + const webinaireRows = document.querySelector('.videos-webinaires-archives #webinaires-rows'); + webinaireRows.innerHTML = webinairesDatas.html_template; + webinaireRows.setAttribute('current-post-count', webinairesDatas.total_posts_found); } async function hydrateAll() { await hydrateBrochureArchiveGrid(); await hydrateFicheInfoArchiveGrid(); + await hydrateWebinaireArchiveGrid(); } -async function filterPublications(publicationType, e) { + +// ######################### +// ### SECTION VISIBILITIES +// ######################### + +function handleSectionVisibility() { const sectionFichesInfos = document.querySelector('.fiches-infos-archives'); const sectionBrochures = document.querySelector('.brochures-archives'); const sectionWebinaires = document.querySelector('.videos-webinaires-archives'); const sectionHighlight = document.querySelector('#highlighted-document'); - let loadMoreBrochuresButton = sectionBrochures.querySelector('.cta--load-more'); - let loadMoreFichesInfosButton = sectionFichesInfos.querySelector('.cta--load-more'); - sectionFichesInfos.removeAttribute('hidden'); sectionWebinaires.removeAttribute('hidden'); sectionBrochures.removeAttribute('hidden'); sectionHighlight.removeAttribute('hidden'); + let loadMoreBrochuresButton = sectionBrochures.querySelector('.cta--load-more'); + let loadMoreFichesInfosButton = sectionFichesInfos.querySelector('.cta--load-more'); + + const publicationType = getActivePublicationType(); + switch (publicationType) { - case 'all': - loadMoreBrochuresButton.setAttribute('hidden', true); - loadMoreFichesInfosButton.setAttribute('hidden', true); - - sectionBrochures.setAttribute('isLoading', true); - sectionFichesInfos.setAttribute('isLoading', true); - sectionHighlight.setAttribute('isLoading', true); - await hydrateAll(); - sectionBrochures.removeAttribute('isLoading'); - sectionFichesInfos.removeAttribute('isLoading'); - sectionHighlight.removeAttribute('isLoading'); - break; - case 'brochures': sectionFichesInfos.setAttribute('hidden', true); sectionWebinaires.setAttribute('hidden', true); sectionHighlight.setAttribute('hidden', true); loadMoreBrochuresButton.setAttribute('hidden', true); - - sectionBrochures.setAttribute('isLoading', true); - await hydrateBrochureArchiveGrid(); - sectionBrochures.removeAttribute('isLoading'); break; case 'fiches-infos': @@ -148,27 +362,76 @@ async function filterPublications(publicationType, e) { loadMoreFichesInfosButton.setAttribute('hidden', true); - sectionFichesInfos.setAttribute('isLoading', true); - await hydrateFicheInfoArchiveGrid(); - sectionFichesInfos.removeAttribute('isLoading'); break; case 'webinaires': sectionFichesInfos.setAttribute('hidden', true); sectionBrochures.setAttribute('hidden', true); sectionHighlight.setAttribute('hidden', true); + break; + case 'all': + loadMoreBrochuresButton.setAttribute('hidden', true); + loadMoreFichesInfosButton.setAttribute('hidden', true); + + sectionBrochures.removeAttribute('hidden'); + sectionFichesInfos.removeAttribute('hidden'); + sectionWebinaires.removeAttribute('hidden'); + sectionHighlight.removeAttribute('hidden'); + break; + } +} + +// ######################### +// ### FILTER +// ######################### +async function filterPublications() { + updateActiveThematiquesFiltersViewer(); + const activePublicationType = getActivePublicationType(); + + const sectionFichesInfos = document.querySelector('.fiches-infos-archives'); + const sectionBrochures = document.querySelector('.brochures-archives'); + const sectionWebinaires = document.querySelector('.videos-webinaires-archives'); + + handleSectionVisibility(); + switch (activePublicationType) { + case 'all': + sectionBrochures.setAttribute('isLoading', true); + sectionFichesInfos.setAttribute('isLoading', true); + await hydrateAll(); + sectionBrochures.removeAttribute('isLoading'); + sectionFichesInfos.removeAttribute('isLoading'); + break; + + case 'brochures': + sectionBrochures.setAttribute('isLoading', true); + await hydrateBrochureArchiveGrid(); + sectionBrochures.removeAttribute('isLoading'); + break; + + case 'fiches-infos': + sectionFichesInfos.setAttribute('isLoading', true); + await hydrateFicheInfoArchiveGrid(); + sectionFichesInfos.removeAttribute('isLoading'); + break; + + case 'webinaires': sectionWebinaires.setAttribute('isLoading', true); - setTimeout(() => { - sectionWebinaires.removeAttribute('isLoading'); - }, 300); + await hydrateWebinaireArchiveGrid(); + sectionWebinaires.removeAttribute('isLoading'); + + // setTimeout(() => {}, 300); break; } - updateSearchResultsIndications(publicationType, e); - toggleActiveFilterButton(e); + updatePublicationsCountResults(); + toggleActivePublicationTypeFilterButton(); } -async function loadMorePublications(publicationType, button, e) { +// ########################### +// ### LOAD MORE PUBLICATIONS +// ########################### + +async function loadMorePublications(publicationType, button) { button.setAttribute('hidden', true); const sectionFichesInfos = document.querySelector('.fiches-infos-archives'); const sectionBrochures = document.querySelector('.brochures-archives'); @@ -187,26 +450,8 @@ async function loadMorePublications(publicationType, button, e) { break; } } - -export default function filterPublicationsInit() { - const filterButtons = document.querySelectorAll('.filters-toolbar__action-button'); - const loadAllbutton = document.querySelector('.filters-toolbar__action-button--load-all'); +function handleLoadMore() { const loadMoreButtons = document.querySelectorAll('.cta--load-more'); - - if (!filterButtons) return; - filterButtons.forEach((button) => { - const publicationType = button.getAttribute('data-publication-type'); - button.addEventListener('click', (e) => { - filterPublications(publicationType, e); - }); - }); - - if (!loadAllbutton) return; - loadAllbutton.addEventListener('click', (e) => { - const publicationType = loadAllbutton.getAttribute('data-publication-type'); - filterPublications(publicationType, e); - }); - if (!loadMoreButtons) return; loadMoreButtons.forEach((button) => { const publicationType = button.getAttribute('data-publication-type'); @@ -215,3 +460,29 @@ export default function filterPublicationsInit() { }); }); } +function handleLoadAll() { + const loadAllbutton = document.querySelector('.filters-toolbar__action-button--load-all'); + if (!loadAllbutton) return; + + loadAllbutton.addEventListener('click', (e) => { + const publicationType = loadAllbutton.getAttribute('data-publication-type'); + filterPublications(); + }); +} + +// ######################### +// ### INSTANCIATE +// ######################### +export default function filterPublicationsInit() { + const publicationsFiltersToolbar = document.querySelector( + '.filters-toolbar--archive-publications' + ); + if (!publicationsFiltersToolbar) return; + + handleSubmenuToggle(); + handleThematiqueCheckFilters(); + handleThematiqueFiltersReset(); + handlePublicationTypeFilters(); + handleLoadMore(); + handleLoadAll(); +}