Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ehancing filters features for page publications

Browse Source
This commit is contained in:
Antoine M 2023-12-06 16:30:20 +01:00
parent a5633f22c8
commit e420a0f2d7
2 changed files with 384 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
resources/css/pages/template-archive-publications.css
View File

@ -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;
}
}
}

485
resources/js/archive-template-publications.js
View File

@ -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();
}