https://diakonisches-werk.de/_assets/f6c0ac48b5ec686c73150944555d7…/TplNavigationlist.js?1788359349

1document.addEventListener("DOMContentLoaded", function (event) {
2    (function ($) { // $ is not defined
3
4
5        $('.tpl__navigation__menubutton').on('click', function () {
6            $('body').toggleClass('tpl__navigation--active');
7            $(this).toggleClass('tpl__navigation__menubutton--active');
8            $('.tpl__navigation__main').toggleClass('tpl__navigation__main--active');
9
10            // Prüfen, ob das Menü nach dem Klick aktiv ist
11            const isMenuOpen = $('body').hasClass('tpl__navigation--active');
12
13            $(this).attr('aria-expanded', isMenuOpen ? 'true' : 'false');
14            $(this).attr('aria-label', isMenuOpen ? 'Hauptmenü schließen' : 'Hauptmenü öffnen');
15
16
17            // Die betroffenen Elemente auswählen
18            const contentContainer = document.querySelector('.tpl__contentcontainer');
19            const jumpmarks = document.querySelector('.tpl__jumpmarks');
20
21            // Wenn das Menü offen ist -> im Hintergrund sperren (inert = true)
22            // Wenn das Menü geschlossen wird -> Hintergrund freigeben (inert = false)
23            if (contentContainer) contentContainer.inert = isMenuOpen;
24            if (jumpmarks) jumpmarks.inert = isMenuOpen;
25
26            if (isMenuOpen) {
27                // Optional: Fokus beim Öffnen direkt in das erste Element des Menüs setzen
28                // document.querySelector('.tpl__navigation__main a').focus();
29            } else {
30                // Beim Schließen: Fokus zurück auf den Menü-Button setzen
31                this.focus();
32            }
33        });
34
35        // Zentrale Stelle, die Submenü-Zustand UND aria-expanded des zugehörigen
36        // Toggle-Buttons immer synchron hält. isOpen: true = öffnen, false = schließen.
37        function setSubmenuState($submenu, isOpen) {
38            $submenu.toggleClass('tpl__navigation__list__submenu--active', isOpen);
39            $submenu.siblings('.tpl__navigation__list__card__button')
40                .attr('aria-expanded', isOpen ? 'true' : 'false');
41        }
42
43        // Startzustand: alle Toggle-Buttons als "zu" markieren
44        $('.tpl__navigation__list__card__button').attr('aria-expanded', 'false');
45
46        let focus = 0;
47
48        $(document).keydown(function (event) {
49
50            //Tab-Key
51            if (event.which === 9) {
52
53                if ($('.tpl__navigation__list__submenu--active').length) {
54                    var submenu = $('.tpl__navigation__list__submenu--active');
55                }
56
57                var ele = $('.tpl__navigation__list__submenu--active >.tpl__navigation__list--submenu >.tpl__navigation__list__item >.tpl__navigation__list__card__link');
58
59                ele.each(function () {
60                    if ($(this).is(':focus')) {
61                        focus = 1;
62                        return false;
63                    } else {
64                        focus = 0;
65                        submenu.each(function () {
66                            setSubmenuState($(this), false);
67                        });
68                    }
69                });
70            }
71
72        });
73
74
75        const BREAKPOINT = 1440;
76
77        function isDesktop() {
78            return $(window).width() > BREAKPOINT;
79        }
80
81
82        //Desktop-Funktionen
83        $('.tpl__navigation__list__item--children').on('mouseenter', function (event) {
84            if (isDesktop()) {
85                setSubmenuState($(this).children('.tpl__navigation__list__submenu'), true);
86            }
87        });
88
89        $('.tpl__navigation__list__item--children').on('mouseleave', function (event) {
90            if (isDesktop()) {
91                setSubmenuState($(this).children('.tpl__navigation__list__submenu'), false);
92            }
93        });
94
95        $('.tpl__navigation__list > .tpl__navigation__list__item > .tpl__navigation__list__card__link').on('click', function (e) {
96            if (isDesktop()) {
97                e.preventDefault();
98                if ($(this).next().next().hasClass('tpl__navigation__list__submenu--active')) {
99                    $('.tpl__navigation__list__submenu').each(function () {
100                        setSubmenuState($(this), false);
101                    });
102                    window.location.href = $(this).attr('href');
103                } else {
104                    //console.log($(this).parent().siblings());
105                    setSubmenuState($(this).parent().children('.tpl__navigation__list__submenu'), true);
106                    $(this).parent().siblings().children('.tpl__navigation__list__submenu').each(function () {
107                        setSubmenuState($(this), false);
108                    });
109                    $('body').addClass('tpl__navigation--active');
110                }
111            }
112        });
113        $('.tpl__navigation__list--submenu--close').on('click', function () {
114            if (isDesktop()) {
115                $('body').removeClass('tpl__navigation--active');
116                $('.tpl__navigation__list__submenu').each(function () {
117                    setSubmenuState($(this), false);
118                });
119            }
120        });
121
122
123        // Öffnen/Schließen per Klick, Enter ODER Leertaste: <button>-Elemente lösen bei
124        // Enter und Leertaste automatisch ein natives "click"-Event aus, daher reicht EIN
125        // click-Handler für Maus + Tastatur - auf Mobile und Desktop gleichermaßen. Der

126        // frühere separate Enter-only-keydown-Handler (oben) ist damit überflüssig und
127        // wurde entfernt; vorher reagierte Desktop-Tastaturbedienung nur auf Enter, nicht
128        // auf die Leertaste, weil dafür gar kein Handler existierte.
129        $('.tpl__navigation__list__card__button').on('click', function (event) {
130            var $submenu = $(this).siblings('.tpl__navigation__list__submenu');
131            var willOpen = !$submenu.hasClass('tpl__navigation__list__submenu--active');
132            setSubmenuState($submenu, willOpen);
133        });
134
135
136        $('.tpl__navigation__list__card__button--back').on('click', function (event) {
137            if (!isDesktop()) {
138                setSubmenuState($(this).parent('.tpl__navigation__list__submenu'), false);
139            }
140        });
141
142
143    })(jQuery);
144});