Update filter to include manufacturer and series.
This commit is contained in:
parent
eb18dad265
commit
7800557b88
@ -1,8 +1,9 @@
|
|||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
<div class="filters">
|
<div class="filters">
|
||||||
<fieldset>
|
<!-- Status -->
|
||||||
<legend>$filter$</legend>
|
<fieldset class="filter-group" data-filter="status">
|
||||||
|
<legend>Status</legend>
|
||||||
<label>
|
<label>
|
||||||
<input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
|
<input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
|
||||||
$filter-plamo-in-box$
|
$filter-plamo-in-box$
|
||||||
@ -20,13 +21,161 @@
|
|||||||
$filter-plamo-complete$
|
$filter-plamo-complete$
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Manufacturer -->
|
||||||
|
<fieldset class="filter-group" data-filter="manufacturer">
|
||||||
|
<legend>Manufacturer</legend>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="AZmodel" checked>
|
||||||
|
AZmodel
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Bandai" checked>
|
||||||
|
Bandai
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Bandai Spirits" checked>
|
||||||
|
Bandai Spirits
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Cavico" checked>
|
||||||
|
Cavico
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Eduard" checked>
|
||||||
|
Eduard
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Finemolds" checked>
|
||||||
|
Finemolds
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Flame Toys" checked>
|
||||||
|
Flame Toys
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Fujimi" checked>
|
||||||
|
Fujimi
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Hasegawa" checked>
|
||||||
|
Hasegawa
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Italeri" checked>
|
||||||
|
Italeri
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Kotobukiya" checked>
|
||||||
|
Kotobukiya
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="MiniArt" checked>
|
||||||
|
MiniArt
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
|
||||||
|
Moderoid - Good Smile Company
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Ōtaki" checked>
|
||||||
|
Ōtaki
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Revell" checked>
|
||||||
|
Revell
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Tamiya" checked>
|
||||||
|
Tamiya
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Thunder Model" checked>
|
||||||
|
Thunder Model
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Wave Corporation" checked>
|
||||||
|
Wave Corporation
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Series -->
|
||||||
|
<fieldset class="filter-group" data-filter="series">
|
||||||
|
<legend>Series</legend>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam" checked>
|
||||||
|
Mobile Suit Gundam
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam 0080: War in the Pocket" checked>
|
||||||
|
Mobile Suit Gundam 0080: War in the Pocket
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam 0083: Stardust Memory" checked>
|
||||||
|
Mobile Suit Gundam 0083: Stardust Memory
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam: Char's Counterattack" checked>
|
||||||
|
Mobile Suit Gundam: Char's Counterattack
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam GQuuuuuuX" checked>
|
||||||
|
Mobile Suit Gundam GQuuuuuuX
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam Iron Blooded Orphans" checked>
|
||||||
|
Mobile Suit Gundam Iron Blooded Orphans
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED" checked>
|
||||||
|
Mobile Suit Gundam SEED
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Destiny" checked>
|
||||||
|
Mobile Suit Gundam SEED Destiny
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Freedom" checked>
|
||||||
|
Mobile Suit Gundam SEED Freedom
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam the Witch from Mercury" checked>
|
||||||
|
Mobile Suit Gundam the Witch from Mercury
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam Unicorn" checked>
|
||||||
|
Mobile Suit Gundam Unicorn
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Gundam ZZ" checked>
|
||||||
|
Mobile Suit Gundam ZZ
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Suit Zeta Gundam" checked>
|
||||||
|
Mobile Suit Zeta Gundam
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Mobile Fighter G Gundam" checked>
|
||||||
|
Mobile Fighter G Gundam
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input class="me-2" type="checkbox" value="Gundam Build Fighters Try" checked>
|
||||||
|
Gundam Build Fighters Try
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-2">
|
||||||
|
<button id="clear-filters" type="button" class="btn btn-sm btn-outline-secondary">
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr/>
|
<hr/>
|
||||||
|
|
||||||
<div class="row row-cols-md-1 row-cols-lg-2 row-cols-xxl-3 g-4 p-1">
|
<div class="row row-cols-md-1 row-cols-lg-2 row-cols-xxl-3 g-4 p-1">
|
||||||
$for(kits)$
|
$for(kits)$
|
||||||
<div class="col kit" data-status="$status$">
|
<div class="col kit" data-status="$status$" data-manufacturer="$manufacturer$" data-series="$series$">
|
||||||
<div class="card h-100 mb-3" style="max-width: 500px; min-width: 300px;">
|
<div class="card h-100 mb-3" style="max-width: 500px; min-width: 300px;">
|
||||||
<div class="row g-0">
|
<div class="row g-0">
|
||||||
<a href="$url$"><h5 class="card-title text-center mt-1">$title$</h5></a>
|
<a href="$url$"><h5 class="card-title text-center mt-1">$title$</h5></a>
|
||||||
@ -77,11 +226,17 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
|
const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
|
||||||
const kits = document.querySelectorAll(".kit");
|
const kits = document.querySelectorAll(".kit");
|
||||||
|
|
||||||
// Count by status.
|
// Count meta data.
|
||||||
const counts = {};
|
const counts = {};
|
||||||
kits.forEach(kit => {
|
kits.forEach(kit => {
|
||||||
const status = kit.dataset.status;
|
const status = kit.dataset.status;
|
||||||
counts[status] = (counts[status] || 0) + 1;
|
counts[status] = (counts[status] || 0) + 1;
|
||||||
|
|
||||||
|
const manufacturer = kit.dataset.manufacturer;
|
||||||
|
counts[manufacturer] = (counts[manufacturer] || 0) + 1;
|
||||||
|
|
||||||
|
const series = kit.dataset.series;
|
||||||
|
counts[series] = (counts[series] || 0) + 1;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Update each filter label with the count.
|
// Update each filter label with the count.
|
||||||
@ -90,7 +245,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
const value = checkbox.value;
|
const value = checkbox.value;
|
||||||
const count = counts[value] || 0;
|
const count = counts[value] || 0;
|
||||||
|
|
||||||
// Update label text
|
// Update label text.
|
||||||
const label = checkbox.parentElement;
|
const label = checkbox.parentElement;
|
||||||
const textNode = label.childNodes[label.childNodes.length - 1];
|
const textNode = label.childNodes[label.childNodes.length - 1];
|
||||||
|
|
||||||
@ -98,20 +253,55 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
function updateFilter() {
|
function updateFilter() {
|
||||||
const selected = Array.from(checkboxes)
|
const groups = document.querySelectorAll(".filter-group");
|
||||||
.filter(cb => cb.checked)
|
|
||||||
.map(cb => cb.value);
|
// Get all checked checkboxes across all groups.
|
||||||
|
const allChecked = document.querySelectorAll(
|
||||||
|
".filter-group input:checked"
|
||||||
|
);
|
||||||
|
|
||||||
|
// If nothing is selected anywhere, then hide everything.
|
||||||
|
if (allChecked.length === 0) {
|
||||||
|
kits.forEach(kit => {
|
||||||
|
kit.style.display = "none";
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
kits.forEach(kit => {
|
kits.forEach(kit => {
|
||||||
const status = kit.dataset.status;
|
let visible = true;
|
||||||
if (selected.includes(status)) {
|
|
||||||
kit.style.display = "";
|
groups.forEach(group => {
|
||||||
} else {
|
const filterName = group.dataset.filter;
|
||||||
kit.style.display = "none";
|
|
||||||
|
const selected = Array.from(
|
||||||
|
group.querySelectorAll("input:checked")
|
||||||
|
).map(cb => cb.value);
|
||||||
|
|
||||||
|
const kitValue = kit.dataset[filterName];
|
||||||
|
|
||||||
|
// OR inside group
|
||||||
|
if (selected.length > 0 && !selected.includes(kitValue)) {
|
||||||
|
visible = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
kit.style.display = visible ? "" : "none";
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
|
checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
|
||||||
|
|
||||||
|
// Clear button.
|
||||||
|
const clearButton = document.getElementById("clear-filters");
|
||||||
|
|
||||||
|
clearButton.addEventListener("click", function () {
|
||||||
|
// Uncheck all checkboxes.
|
||||||
|
checkboxes.forEach(cb => {
|
||||||
|
cb.checked = false;
|
||||||
|
});
|
||||||
|
// Update the visible kits.
|
||||||
|
updateFilter();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
Loading…
x
Reference in New Issue
Block a user