Override Academic Theme Filter

multifilter.js

function multiFilter(e){
  //  get isotope instance and filter buttons
  let iso = Isotope.data('.projects-container');
  let filterButtons = document.querySelectorAll('.project-filters a');

  // iterate through buttons...
  filterButtons.forEach((button) => {
    // remove existing event listeners
    let buttonClone = button.cloneNode(true);
    button.parentNode.replaceChild(buttonClone, button);

    // add new event listener to do the filtering
    buttonClone.addEventListener('click', (e) => {
      // prevent the page from jumping back up to the top on click
      e.preventDefault();

      // toggle active state of this button
      e.target.classList.toggle('active');

      //  get all active buttons
      let activeButtons = document.querySelectorAll('.project-filters a.active');

      // if a button besides 'all' is active, make sure 'all' isnt
      if (activeButtons.length > 1){
        activeButtons.forEach((b) => {
          if (b.getAttribute('data-filter') === '*'){
            b.classList.remove('active')
          }
        })
        // refresh activeButton list
        activeButtons = document.querySelectorAll('.project-filters a.active');
      }

      //  get data filters of active buttons
      let filters = Array.from(activeButtons).map(a => a.getAttribute('data-filter'));

      //  join filters to single string
      let filterstring = filters.join('');
      console.log('filtering with filter string', filterstring)

      // filter isotope elements
      iso.arrange({filter:filterstring})
    })
  })
}

window.addEventListener('load', multiFilter)