Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using function and filter at the same time #1658

Open
ThePrimeDev opened this issue Sep 16, 2023 · 0 comments
Open

Using function and filter at the same time #1658

ThePrimeDev opened this issue Sep 16, 2023 · 0 comments

Comments

@ThePrimeDev
Copy link

ThePrimeDev commented Sep 16, 2023

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 ThePrimeDev changed the title Using function and filter at the same time || imagesLoaded() ruins the filtering? Using function and filter at the same time Sep 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

1 participant