ehancing filters features for page publications

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

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');
+function getActivePublicationType() {
-  const currentActiveButton = e.target;
+  return document
-  let returnedElementsAmount;
+    .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(
+      postcount = brochurePostsCount;
-        '.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';
-
       break;
-
     case 'fiches-infos':
-      returnedElementsAmount = document.querySelectorAll(
+      postcount = ficheInfoPostsCount;
-        '.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';
       break;
-
     case 'webinaires':
-      returnedElementsAmount = document.querySelectorAll(
+      postcount = webinairePostsCount;
-        '.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';
       break;
     case 'all':
-      const brochureElementsAmount = document.querySelectorAll(
+      postcount = brochurePostsCount + ficheInfoPostsCount + webinairePostsCount;
-        '.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');
       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')
+  const correspondingActiveThematiqueButton = document.querySelector(
-    ? e.target
+    `.filters-toolbar__action-button[data-publication-type=${activePublicationType}]`
-    : e.target.parentElement.getAttribute('data-publication-type')
+  );
-    ? e.target.parentElement
+
-    : null;
+  if (!correspondingActiveThematiqueButton) return;
-  activeFilterButton.classList.add('filters-toolbar__action-button--active');
+  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(() => {
+      await hydrateWebinaireArchiveGrid();
-        sectionWebinaires.removeAttribute('isLoading');
+      sectionWebinaires.removeAttribute('isLoading');
-      }, 300);
+
+      // setTimeout(() => {}, 300);
       break;
   }
 
-  updateSearchResultsIndications(publicationType, e);
+  updatePublicationsCountResults();
-  toggleActiveFilterButton(e);
+  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;
   }
 }
-
+function handleLoadMore() {
-export default function filterPublicationsInit() {
-  const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
-  const loadAllbutton = document.querySelector('.filters-toolbar__action-button--load-all');
   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();
+}