Shop-Filter: Tier-Unterkategorien im Kategorie-Dropdown jetzt klar sichtbar
Der native <select> mit optgroups zeigte Kuh/Hase/Wal/Oktopus/Schildkroete/
Pinguin zwar technisch an, aber in der schmucklosen Browser-eigenen Liste
kaum erkennbar (kein Kontrast, keine Struktur). Ersetzt durch ein eigenes,
zum Rest der Seite passendes Dropdown (Verlaufsrand-Look wie beim
Sprach-Umschalter): Hauptkategorien mit Icon als Gruppen-Header, Tier-
Unterkategorien darunter eingerueckt mit denselben freundlichen Namen wie auf
den Kategorie-Seiten ("Kuh „Frieda"", "Hase „HasiDog"" usw.) statt schlichtem
Kategorienamen. Filterlogik, URL-Preset (?kategorie=) und Barrierefreiheit
(role=listbox/option, aria-selected) unveraendert erhalten. Gilt fuer alle 4
Sprachen, gebaut und per Screenshot in offenem und geschlossenem Zustand
geprueft.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
af0093e401
commit
22c475d6a5
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import { categories } from "../../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import { categories } from "../../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import ProductCard from "../../../components/ProductCard.astro";
|
||||
import { categories } from "../../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../../data/categories";
|
||||
import { products } from "../../../data/products";
|
||||
import type { Locale } from "../../../i18n/config";
|
||||
import { useTranslations } from "../../../i18n/ui";
|
||||
@@ -25,20 +25,30 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +144,49 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
+73
-17
@@ -1,7 +1,7 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import ProductCard from "../../components/ProductCard.astro";
|
||||
import { categories } from "../../data/categories";
|
||||
import { categories, subcategoryChipLabel } from "../../data/categories";
|
||||
import { products } from "../../data/products";
|
||||
import type { Locale } from "../../i18n/config";
|
||||
import { useTranslations } from "../../i18n/ui";
|
||||
@@ -25,20 +25,35 @@ const t = useTranslations(lang);
|
||||
<aside class="filters card" aria-label={t.shop.filters}>
|
||||
<h3>{t.shop.filters}</h3>
|
||||
<div class="filter-group">
|
||||
<label for="f-kategorie">{t.shop.categoryLabel}</label>
|
||||
<select id="f-kategorie">
|
||||
<option value="">{t.shop.allCategories}</option>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<optgroup label={c.name[lang]}>
|
||||
<option value={c.slug}>{c.name[lang]} ({t.shop.allCategories})</option>
|
||||
{c.subcategories.map((s) => <option value={`sub:${s.slug}`}>— {s.name[lang]}</option>)}
|
||||
</optgroup>
|
||||
) : (
|
||||
<option value={c.slug}>{c.name[lang]}</option>
|
||||
)
|
||||
))}
|
||||
</select>
|
||||
<span id="f-kategorie-label">{t.shop.categoryLabel}</span>
|
||||
{/* Eigens gestaltetes Dropdown statt eines nativen <select> — bei einem nativen Select
|
||||
mit optgroups (wie vorher) waren die Tier-Unterkategorien (Kuh, Hase, Wal, ...)
|
||||
zwar technisch da, aber in der schmucklosen Browser-eigenen Liste kaum zu erkennen.
|
||||
Hier stehen sie als eigene, klar lesbare Zeilen mit demselben Namen wie auf den
|
||||
Kategorie-Seiten ("Kuh „Frieda"" usw.), damit man sie auf einen Blick sieht. */}
|
||||
<div class="cat-filter" id="cat-filter">
|
||||
<input type="hidden" id="f-kategorie" value="" />
|
||||
<button type="button" class="cat-filter-btn" id="cat-filter-btn" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="f-kategorie-label">
|
||||
<span id="cat-filter-current">{t.shop.allCategories}</span>
|
||||
<span class="chevron" aria-hidden="true">▼</span>
|
||||
</button>
|
||||
<div class="cat-filter-menu" role="listbox" aria-labelledby="f-kategorie-label">
|
||||
<button type="button" class="cat-filter-option" data-value="" data-label={t.shop.allCategories} role="option" aria-selected="true">{t.shop.allCategories}</button>
|
||||
{categories.map((c) => (
|
||||
c.subcategories && c.subcategories.length > 0 ? (
|
||||
<div class="cat-filter-group">
|
||||
<span class="cat-filter-group-label" aria-hidden="true">{c.icon} {c.name[lang]}</span>
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{t.shop.allCategories} – {c.name[lang]}</button>
|
||||
{c.subcategories.map((s) => (
|
||||
<button type="button" class="cat-filter-option cat-filter-sub" data-value={`sub:${s.slug}`} data-label={subcategoryChipLabel(s, lang)} role="option" aria-selected="false">{subcategoryChipLabel(s, lang)}</button>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<button type="button" class="cat-filter-option" data-value={c.slug} data-label={`${c.icon} ${c.name[lang]}`} role="option" aria-selected="false">{c.icon} {c.name[lang]}</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="f-preis">{t.shop.priceUpTo}</label>
|
||||
@@ -134,11 +149,52 @@ const t = useTranslations(lang);
|
||||
sorted.forEach((el) => grid.appendChild(el));
|
||||
}
|
||||
|
||||
[kategorieSel, preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
[preisRange, verfuegbarChk, sortSel].forEach((el) => el.addEventListener("input", apply));
|
||||
|
||||
// Eigenes Kategorie-Dropdown (statt nativem <select>): Klick auf den Button öffnet/schließt
|
||||
// die Liste, Klick auf eine Zeile setzt den Filter, aktualisiert die Anzeige-Beschriftung und
|
||||
// schließt die Liste wieder — gleiches Verhalten wie der Sprach-Umschalter im Header.
|
||||
const catFilter = document.getElementById("cat-filter");
|
||||
const catFilterBtn = document.getElementById("cat-filter-btn");
|
||||
const catFilterCurrent = document.getElementById("cat-filter-current");
|
||||
const catFilterOptions = Array.from(catFilter.querySelectorAll(".cat-filter-option"));
|
||||
|
||||
function selectKategorie(value, label) {
|
||||
kategorieSel.value = value;
|
||||
catFilterCurrent.textContent = label;
|
||||
catFilterOptions.forEach((opt) => opt.setAttribute("aria-selected", String(opt.dataset.value === value)));
|
||||
apply();
|
||||
}
|
||||
|
||||
catFilterBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const open = catFilter.classList.toggle("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", open ? "true" : "false");
|
||||
});
|
||||
catFilterOptions.forEach((opt) => {
|
||||
opt.addEventListener("click", () => {
|
||||
selectKategorie(opt.dataset.value, opt.dataset.label);
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
});
|
||||
document.addEventListener("click", () => {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
catFilter.classList.remove("open");
|
||||
catFilterBtn.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
});
|
||||
|
||||
const params = new URLSearchParams(location.search);
|
||||
const preset = params.get("kategorie");
|
||||
if (preset) kategorieSel.value = preset;
|
||||
if (preset) {
|
||||
const match = catFilterOptions.find((opt) => opt.dataset.value === preset);
|
||||
if (match) selectKategorie(preset, match.dataset.label);
|
||||
}
|
||||
|
||||
apply();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user