From 8e3816e2e2e5a6a63eb00d5997c21c00fc5bafb6 Mon Sep 17 00:00:00 2001 From: Gregoo Date: Thu, 30 Jan 2025 22:40:53 +0100 Subject: [PATCH] Create dedicated object for Grid filter --- static/scripts/grid/filter.js | 93 +++++++++++++++++++++++++++++++++++ static/scripts/grid/grid.js | 92 ++-------------------------------- templates/base.html | 1 + 3 files changed, 98 insertions(+), 88 deletions(-) create mode 100644 static/scripts/grid/filter.js diff --git a/static/scripts/grid/filter.js b/static/scripts/grid/filter.js new file mode 100644 index 0000000..a5c4688 --- /dev/null +++ b/static/scripts/grid/filter.js @@ -0,0 +1,93 @@ +// Grid filter +class BrickGridFilter { + constructor(grid) { + this.grid = grid; + + // Grid sort elements (built based on the initial id) + this.html_search = document.getElementById(`${this.grid.id}-search`); + this.html_status = document.getElementById(`${this.grid.id}-status`); + this.html_theme = document.getElementById(`${this.grid.id}-theme`); + + // Filter setup + if (this.html_search) { + this.html_search.addEventListener("keyup", ((grid) => () => { + grid.filter(); + })(this)); + } + + if (this.html_status) { + this.html_status.addEventListener("change", ((grid) => () => { + grid.filter(); + })(this)); + } + + if (this.html_theme) { + this.html_theme.addEventListener("change", ((grid) => () => { + grid.filter(); + })(this)); + } + } + + // Filter + filter() { + var filters = {}; + + // Check if there is a search filter + if (this.html_search && this.html_search.value != "") { + filters["search"] = this.html_search.value.toLowerCase(); + } + + // Check if there is a set filter + if (this.html_status && this.html_status.value != "") { + if (this.html_status.value.startsWith("-")) { + filters["filter"] = this.html_status.value.substring(1); + filters["filter-target"] = "0"; + } else { + filters["filter"] = this.html_status.value; + filters["filter-target"] = "1"; + } + } + + // Check if there is a theme filter + if (this.html_theme && this.html_theme.value != "") { + filters["theme"] = this.html_theme.value; + } + + // Filter all cards + const cards = this.grid.html_grid.querySelectorAll(`${this.grid.target} > .card`); + cards.forEach(current => { + // Set filter + if ("filter" in filters) { + if (current.getAttribute("data-" + filters["filter"]) != filters["filter-target"]) { + current.parentElement.classList.add("d-none"); + return; + } + } + + // Theme filter + if ("theme" in filters) { + if (current.getAttribute("data-theme") != filters["theme"]) { + current.parentElement.classList.add("d-none"); + return; + } + } + + // Check all searchable fields for a match + if ("search" in filters) { + for (let attribute of ["data-name", "data-number", "data-parts", "data-theme", "data-year"]) { + if (current.getAttribute(attribute).includes(filters["search"])) { + current.parentElement.classList.remove("d-none"); + return; + } + } + + // If no match, we need to hide it + current.parentElement.classList.add("d-none"); + return; + } + + // If we passed all filters, we need to display it + current.parentElement.classList.remove("d-none"); + }); + } +} diff --git a/static/scripts/grid/grid.js b/static/scripts/grid/grid.js index e11c2bd..d0b9dab 100644 --- a/static/scripts/grid/grid.js +++ b/static/scripts/grid/grid.js @@ -6,99 +6,15 @@ class BrickGrid { // Grid elements (built based on the initial id) this.html_grid = document.getElementById(this.id); - this.html_search = document.getElementById(`${this.id}-search`); - this.html_status = document.getElementById(`${this.id}-status`); - this.html_theme = document.getElementById(`${this.id}-theme`); - // Sort setup - this.sort = new BrickGridSort(this); - - // Filter setup - if (this.html_search) { - this.html_search.addEventListener("keyup", ((grid) => () => { - grid.filter(); - })(this)); - } - - if (this.html_status) { - this.html_status.addEventListener("change", ((grid) => () => { - grid.filter(); - })(this)); - } - - if (this.html_theme) { - this.html_theme.addEventListener("change", ((grid) => () => { - grid.filter(); - })(this)); - } - - } - - // Filter - filter() { - var filters = {}; - - // Check if there is a search filter - if (this.html_search && this.html_search.value != "") { - filters["search"] = this.html_search.value.toLowerCase(); - } - - // Check if there is a set filter - if (this.html_status && this.html_status.value != "") { - if (this.html_status.value.startsWith("-")) { - filters["filter"] = this.html_status.value.substring(1); - filters["filter-target"] = "0"; - } else { - filters["filter"] = this.html_status.value; - filters["filter-target"] = "1"; - } - } - - // Check if there is a theme filter - if (this.html_theme && this.html_theme.value != "") { - filters["theme"] = this.html_theme.value; - } - - // Filter all cards if (this.html_grid) { - const cards = this.html_grid.querySelectorAll("div > div.card"); - cards.forEach(current => { - // Set filter - if ("filter" in filters) { - if (current.getAttribute("data-" + filters["filter"]) != filters["filter-target"]) { - current.parentElement.classList.add("d-none"); - return; - } - } + // Sort setup + this.sort = new BrickGridSort(this); - // Theme filter - if ("theme" in filters) { - if (current.getAttribute("data-theme") != filters["theme"]) { - current.parentElement.classList.add("d-none"); - return; - } - } - - // Check all searchable fields for a match - if ("search" in filters) { - for (let attribute of ["data-name", "data-number", "data-parts", "data-theme", "data-year"]) { - if (current.getAttribute(attribute).includes(filters["search"])) { - current.parentElement.classList.remove("d-none"); - return; - } - } - - // If no match, we need to hide it - current.parentElement.classList.add("d-none"); - return; - } - - // If we passed all filters, we need to display it - current.parentElement.classList.remove("d-none"); - }) + // Filter setup + this.filter = new BrickGridFilter(this); } } - } // Helper to setup the grids diff --git a/templates/base.html b/templates/base.html index 8aa083d..a82a4ea 100644 --- a/templates/base.html +++ b/templates/base.html @@ -80,6 +80,7 @@ +