homegrade_theme_production/resources/js/archive-template-publications.js

function updateSearchResultsIndications(publicationType, e) {
  if (!publicationType) return;

  const searchResultsComponent = document.querySelector('.filters-toolbar__posts-results-amount');
  const currentActiveButton = e.target;
  let returnedElementsAmount;

  switch (publicationType) {
    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';

      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';
      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';
      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');
      break;
    default:
      searchResultsComponent.classList.add('filter-disable');
      searchResultsComponent.classList.remove('filter-active');
      return;
  }

  const postAmountSpan = searchResultsComponent.querySelector('.results-amount');
  postAmountSpan.innerHTML = returnedElementsAmount;
}
function toggleActiveFilterButton(e) {
  const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');

  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');
}

async function hydrateBrochureArchiveGrid() {
  const currentLanguage = document.querySelector('body').getAttribute('current-language');
  const response = await fetch(
    `/wp-json/homegrade-datas/v1/build/brochures-archive-rows?current-page-language=${currentLanguage}`
  );
  brochuresDatas = await response.json();

  const brochureRows = document.querySelector('.brochures-archives #brochures-rows');
  brochureRows.innerHTML = brochuresDatas.html_template;
}

async function hydrateFicheInfoArchiveGrid() {
  const currentLanguage = document.querySelector('body').getAttribute('current-language');

  const response = await fetch(
    `/wp-json/homegrade-datas/v1/build/fiche-info-archive-rows?current-page-language=${currentLanguage}`
  );
  ficheInfosDatas = await response.json();

  const ficheInfoRows = document.querySelector('.fiches-infos-archives #fiche-infos-rows');
  ficheInfoRows.innerHTML = ficheInfosDatas.html_template;
}
async function hydrateAll() {
  await hydrateBrochureArchiveGrid();
  await hydrateFicheInfoArchiveGrid();
}
async function filterPublications(publicationType, e) {
  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');

  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':
      sectionBrochures.setAttribute('hidden', true);
      sectionWebinaires.setAttribute('hidden', true);
      sectionHighlight.setAttribute('hidden', true);

      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);

      sectionWebinaires.setAttribute('isLoading', true);
      setTimeout(() => {
        sectionWebinaires.removeAttribute('isLoading');
      }, 300);
      break;
  }

  updateSearchResultsIndications(publicationType, e);
  toggleActiveFilterButton(e);
}
async function loadMorePublications(publicationType, button, e) {
  button.setAttribute('hidden', true);
  const sectionFichesInfos = document.querySelector('.fiches-infos-archives');
  const sectionBrochures = document.querySelector('.brochures-archives');

  switch (publicationType) {
    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;
  }
}

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');
    button.addEventListener('click', (e) => {
      loadMorePublications(publicationType, button, e);
    });
  });
}