https://www.magic-park.de/modules/mod_attraktion/media/filter.js

1document.addEventListener("DOMContentLoaded", function () {
2  document.querySelectorAll(".attraktion-container").forEach(function (el) {
3    function checkVisibility() {
4      const selectedAge = parseInt(document.getElementById("filter-age")?.value || "0");
5      const selectedHeight = parseInt(document.getElementById("filter-height")?.value || "0");
6      const selectedCategory = document.getElementById("filter-category")?.value || "";
7      const inbegleitung = document.getElementById("filter-companion")?.checked;
8      const ageAlone    = parseInt(el.dataset.ageAlone || "0");
9      const heightAlone = parseInt(el.dataset.heightAlone || "0");
10      const maxAge      = parseInt(el.dataset.ageMax || "9999");
11      const maxHeight   = parseInt(el.dataset.heightMax || "9999");
12
13      const age = parseInt(el.dataset.age || "0");
14      const height = parseInt(el.dataset.height || "0");
15     // const category = el.dataset.categorys || "";
16
17      const categoryString = el.dataset.categorys || "";
18      const categories = JSON.parse(categoryString);
19
20      /**const shouldShow = (
21        (isNaN(selectedAge) || age <= selectedAge) &&
22        (isNaN(selectedHeight) || height <= selectedHeight) &&
23        (!selectedCategory || categories.includes(selectedCategory))
24      );**/
25
26      const shouldShow =
27        // 1. Mindestalter & -größe (allgemein) müssen erfüllt sein
28        (isNaN(age) || selectedAge >= age) &&
29        (isNaN(height) || selectedHeight >= height) &&
30
31        // 2. Wenn keine Begleitung erlaubt ist, müssen auch Alone-Werte erfüllt werden
32        (
33          inbegleitung ||
34          (
35            (isNaN(ageAlone) || ageAlone === 0 || selectedAge >= ageAlone) &&
36            (isNaN(heightAlone) || heightAlone === 0 || selectedHeight >= heightAlone)
37          )
38        ) &&
39
40        // 3. Maximalwerte dürfen nicht überschritten werden
41        (isNaN(maxAge) || selectedAge <= maxAge) &&
42        (isNaN(maxHeight) || selectedHeight <= maxHeight) &&
43
44        // 4. Kategorie muss passen (falls gesetzt)
45        (!selectedCategory || categories.includes(selectedCategory));
46
47      const init = (selectedAge == 0) && (selectedHeight == 0) &&
48             (!selectedCategory || categories.includes(selectedCategory));
49
50      if (shouldShow || init) {
51        // Direkt sichtbar machen (damit opacity wirken kann)
52        el.classList.remove("really-hidden");
53        
54
55        // Browser-Redraw erzwingen (damit Transition startet)
56        void el.offsetWidth;
57
58        // Dann "sichtbar" animieren
59        el.classList.remove("hidden");
60        el.parentElement.classList.remove("module-hidden");
61      } else {
62        // Zuerst "verstecken" per Animation
63        el.classList.add("hidden");
64
65        // Nach Ablauf der Animation: display: none setzen
66        setTimeout(() => {
67          if (el.classList.contains("hidden")) {
68            el.classList.add("really-hidden");
69            el.parentElement.classList.add("module-hidden");
70          }
71        }, 400); // Übergangszeit muss zu CSS passen
72      }
73    }
74
75    // Event-Listener
76    ["filter-age", "filter-height", "filter-category", "filter-companion"].forEach(function (id) {
77      const f = document.getElementById(id);
78      if (f) {
79        f.addEventListener("input", checkVisibility);
80        f.addEventListener("change", checkVisibility);
81      }
82    });
83
84    checkVisibility(); // Initial prüfen
85  });
86});