Reset all selected filter values

[Sebastian]

Hello,

I have multiple filters. And I need a button to reset all of them.
I found the "show all items" part in the documentation. But it doesn't work when I build it according to the example.

I use the latest shuffle version from git.

Thanks for helping me

This is the code:

var Shuffle = window.Shuffle;

var url = new URL(window.location.href);
var isotileLang = url.searchParams.get('isotileLang');

var Isotile = function (element) {
this.allCats1 = Array.from(document.querySelectorAll('.js-358 .news-list-isotile-cat-ch'));
this.allCats2 = Array.from(document.querySelectorAll('.js-365 .news-list-isotile-cat-ch'));
this.allLang = Array.from(document.querySelectorAll('.js-369 .news-list-isotile-cat-ch'));

this.shuffle = new Shuffle(element, {
easing: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
initialSort: 'data-created',
});

this.filters = {
cat1: [],
cat2: [],
lang: [],
};
this._bindEventListeners();

if(isotileLang != null) {
this.shuffle.filter(function(element) {
return element.getAttribute('data-lang') == '{settings.enLang}';
});
}

/* RESET BUTTON */
jQuery('.news-list-isotile-filter-reset').click(function() {
this.shuffle.filter();
});

};

Isotile.prototype._bindEventListeners = function () {
this._onCat1Change = this._handleCat1Change.bind(this);
this._onCat2Change = this._handleCat2Change.bind(this);
this._onLangChange = this._handleLangChange.bind(this);

this.allCats1.forEach(function (div) {
div.addEventListener('click', this._onCat1Change);
}, this);

this.allCats2.forEach(function (div) {
div.addEventListener('click', this._onCat2Change);
}, this);

this.allLang.forEach(function (div) {
div.addEventListener('click', this._onLangChange);
}, this);
};

Isotile.prototype._getCurrentCat1Filters = function () {
return this.allCats1.filter(function (div) {
return div.classList.contains('active');
}).map(function (div) {
return div.getAttribute('data-value');
});
};

Isotile.prototype._getCurrentCat2Filters = function () {
return this.allCats2.filter(function (div) {
return div.classList.contains('active');
}).map(function (div) {
return div.getAttribute('data-value');
});
};

Isotile.prototype._getCurrentLangFilters = function () {
return this.allLang.filter(function (div) {
return div.classList.contains('active');
}).map(function (div) {
return div.getAttribute('data-value');
});
};

Isotile.prototype._handleCat1Change = function (evt) {
var div = evt.currentTarget;

if (div.classList.contains('active')) {
div.classList.remove('active');
} else {
this.allCats1.forEach(function (diV) {
diV.classList.remove('active');
});

  div.classList.add('active');

}

this.filters.cat1 = this._getCurrentCat1Filters();
if(isotileLang != null) {
this.filters.lang = '{settings.enLang}';
}
this.filter();
};

Isotile.prototype._handleCat2Change = function (evt) {
var div = evt.currentTarget;

if (div.classList.contains('active')) {
div.classList.remove('active');
} else {
this.allCats2.forEach(function (diV) {
diV.classList.remove('active');
});

  div.classList.add('active');

}

this.filters.cat2 = this._getCurrentCat2Filters();
if(isotileLang != null) {
this.filters.lang = '{settings.enLang}';
}
this.filter();
};

Isotile.prototype._handleLangChange = function (evt) {
var div = evt.currentTarget;

if (div.classList.contains('active')) {
div.classList.remove('active');
} else {
this.allLang.forEach(function (diV) {
diV.classList.remove('active');
});

  div.classList.add('active');

}

isotileLang = null;

this.filters.lang = this._getCurrentLangFilters();
this.filter();
};

Isotile.prototype.filter = function () {
if (this.hasActiveFilters()) {
this.shuffle.filter(this.itemPassesFilters.bind(this));
} else {
this.shuffle.filter(Shuffle.ALL_ITEMS);
}
};

Isotile.prototype.hasActiveFilters = function () {
return Object.keys(this.filters).some(function (key) {
return this.filters[key].length > 0;
}, this);
};

Isotile.prototype.itemPassesFilters = function (element) {
var allCats1 = this.filters.cat1;
var allCats2 = this.filters.cat2;
var allLang = this.filters.lang;
var cat1 = element.getAttribute('data-cat1');
var cat2 = element.getAttribute('data-cat2');
var lang = element.getAttribute('data-lang');

if (allCats1.length > 0 && !allCats1.includes(cat1)) {
return false;
}

if (allCats2.length > 0 && !allCats2.includes(cat2)) {
return false;
}

if (allLang.length > 0 && !allLang.includes(lang)) {
return false;
}

return true;
};

document.addEventListener('DOMContentLoaded', function () {
window.isotile = new Isotile(document.querySelector('.news-list-isotile-items'));
});

[Alexey]

Hi. You can try add function that do next:

1. uncheck your checkbox (or remove "ACTIVE STATE" from buttons) with:

$(checkboxElems).each(function () {
            $(this).prop('checked', false);
// OR remove active state from button
        });

2. Empty your arrays of filters (this is your main task if you want that filters work correclty)

this.filters.cat1.length = 0;
this.filters.cat2.length = 0;
this.filters.lang.length = 0;

3. Do:
   this.shuffle.filter();

[Sebastian]

Hello,
thanks for your suggestion, i will try it. Unfortunately it can take a while because I don't have time for it right now.

[Glen Cheney]

Thanks for helping out @Lysindr!