isotope icon indicating copy to clipboard operation
isotope copied to clipboard

Using function and filter at the same time

Open ThePrimeDev opened this issue 1 year ago • 0 comments

So I have two things.

First of all, how can I get a function and a filter(by class) work at the same time?

My code:

  let checkboxFilters;
  let searchFilter;
  let dropdownFilter;
  var elem = document.querySelector('.resultsgrid');
  var iso = new Isotope( elem, {
    // options
    itemSelector: '.resultitem',
    layoutMode: 'masonry',
    percentPosition: true,
  });
  const checkboxes = document.querySelectorAll('.checkboxGroup input[type="checkbox"]');

  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', (event) => {
      const checkedValues = [];
      checkboxes.forEach(checkbox => {
        if (checkbox.checked) {
          checkedValues.push(checkbox.value);
        } else {
          const index = checkedValues.indexOf(checkbox.value);
          if (index !== -1) {
            checkedValues.splice(index, 1);
          }
        }
      });
      updateFilters('checkbox', checkedValues.join(','));
    });
  });
  document.getElementById('searchField').addEventListener('input', function() {
    const searchValue = this.value.toString().toLowerCase().replace("á", 'a').replace("é", 'e').replace("í", 'i').replace("ü", 'u').replace("ő", 'o').replace("ő", 'o').replace("ú", 'u').replace("ű", 'u').replace("ö", 'o');
    var serachFiltRCol = {
      yes: function(itemElem) {
        const docname = itemElem.querySelector('.docname').innerText.toString().toLowerCase().replace("á", 'a').replace("é", 'e').replace("í", 'i').replace("ü", 'u').replace("ő", 'o').replace("ő", 'o').replace("ú", 'u').replace("ű", 'u').replace("ö", 'o');
        return docname.includes(searchValue);
      }
    }
    updateFilters('search', serachFiltRCol['yes']);
  });
  document.getElementById('szolgalt').addEventListener('change', function() {
    const selectedValue = this.value;
    if (selectedValue === 'all') {
      updateFilters('dropdown', 'EMPTYFILTERS');
    } else {
      updateFilters('dropdown', selectedValue);
    }
  });

  function updateFilters(inputType:string, filter){
    const filters = [];
    if(inputType == 'checkbox'){
      checkboxFilters = filter;
      if(filter == 'EMPTYFILTERS'){
        checkboxFilters = ''
      }
    }
    if(inputType == 'search'){
      searchFilter = filter;
      if(filter == 'EMPTYFILTERS'){
        searchFilter = ''
      }
    }
    if(inputType == 'dropdown'){
      dropdownFilter = filter;
      if(filter == 'EMPTYFILTERS'){
        dropdownFilter = ''
      }
    }
    filters.push(checkboxFilters);
    //filters.push(searchFilter);
    filters.push(dropdownFilter);

    iso.arrange({ filter: filters.join('') });

    iso.arrange({ filter: searchFilter });
  }

ThePrimeDev avatar Sep 16 '23 16:09 ThePrimeDev