pipeline
48 lines
1.6 KiB
JavaScript
48 lines
1.6 KiB
JavaScript
/* =========================================================================
|
|
games-filter.js — Alpine.js component powering the slots library filter.
|
|
Cards are rendered server-side by Hugo (so thumbnails go through the image
|
|
pipeline); this component toggles their visibility via data-attributes.
|
|
Registered on `alpine:init`, so this file must load before the Alpine CDN.
|
|
========================================================================= */
|
|
document.addEventListener("alpine:init", function () {
|
|
window.Alpine.data("gamesFilter", function () {
|
|
return {
|
|
provider: "all",
|
|
category: "all",
|
|
search: "",
|
|
visibleCount: 0,
|
|
|
|
get normalizedSearch() {
|
|
return this.search.trim().toLowerCase();
|
|
},
|
|
|
|
cardVisible: function (el) {
|
|
var okProvider =
|
|
this.provider === "all" || el.dataset.provider === this.provider;
|
|
var okCategory =
|
|
this.category === "all" || el.dataset.category === this.category;
|
|
var okSearch =
|
|
this.normalizedSearch === "" ||
|
|
(el.dataset.title || "").indexOf(this.normalizedSearch) !== -1;
|
|
return okProvider && okCategory && okSearch;
|
|
},
|
|
|
|
recount: function () {
|
|
var self = this;
|
|
var cards = this.$root.querySelectorAll("[data-game]");
|
|
var n = 0;
|
|
Array.prototype.forEach.call(cards, function (el) {
|
|
if (self.cardVisible(el)) n++;
|
|
});
|
|
this.visibleCount = n;
|
|
},
|
|
|
|
reset: function () {
|
|
this.provider = "all";
|
|
this.category = "all";
|
|
this.search = "";
|
|
},
|
|
};
|
|
});
|
|
});
|