isotope
isotope copied to clipboard
Using function and filter at the same time
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 });
}