https://goteborgsregionen.se/download/18.1062f9d419762553f1cf2e4/1776771191638/menu-frontend.js

1svDocReady(function () {
2
3    var 
4        headerWrapper = '.gr-header',
5        itemCurrentClass = '.con-menu-list__item--current',
6        itemActiveClass = '.con-menu-list__item--active',
7        itemToggleClass = '.con-menu-list__toggle',
8        itemToggleOpenClass = '.con-menu-list__toggle--open',
9        itemClass = '.con-menu .con-menu-list__item';
10
11    // Klassnamn utan punkt
12    var 
13        itemActive = 'con-menu-list__item--active',
14        itemToggleOpen = 'con-menu-list__toggle--open';
15
16    // =========================================
17    // Klick-hanterare för meny-accordion
18    // =========================================
19    $svjq(itemClass).on('click', itemToggleClass, function () {
20
21        var id = $svjq(this).data("id"),
22            toggleButton = $svjq(this),
23            parentLi = $svjq(this).closest('li'),
24            targetText = $svjq(this).prev().text();
25
26        // SVG-ikoner
27        var svgChevronMinus = '<svg aria-hidden="true" class="chevron chevron-minus" viewBox="0 0 22 3" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 3H0V0H22V3Z" fill="#2B1E24"/></svg>';
28        var svgChevronPlus  = '<svg aria-hidden="true" class="chevron chevron-plus" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 12.5714H12.5714V22H9.42857V12.5714H0V9.42857H9.42857V0H12.5714V9.42857H22V12.5714Z" fill="#FFB8A5"/></svg>';
29
30        // =========================================
31        // OM KLICKAD MENY REDAN ÄR ÖPPEN → STÄNG
32        // =========================================
33        if (toggleButton.hasClass(itemToggleOpen)) {
34
35            parentLi.find("ul").slideUp('fast');
36            toggleButton.removeClass(itemToggleOpen).html(svgChevronPlus);
37            parentLi.removeClass(itemActive);
38            toggleButton.attr('aria-expanded', false);
39            toggleButton.attr('aria-label', 'Öppna menystruktur för ' + targetText);
40
41        } else {
42
43            // Hitta <ul> som denna <li> tillhör (rätt accordion-nivå)
44            var parentUl = parentLi.closest('ul');
45
46            // Stäng alla syskon-accordioner (inte föräldrar / barn)
47            parentUl.children('li').not(parentLi).each(function () {
48
49                var siblingLi = $svjq(this);
50                var siblingToggle = siblingLi.find(itemToggleClass).first();
51
52                siblingLi
53                    .removeClass(itemActive)
54                    .find('ul').slideUp('fast');
55
56                siblingToggle
57                    .removeClass(itemToggleOpen)
58                    .html(svgChevronPlus)
59                    .attr('aria-expanded', false);
60            });
61
62            // =========================================
63            // OM INNEHÅLL REDAN ÄR LADDAT
64            // =========================================
65            if (parentLi.data("hascontentloaded") === true) {
66
67                parentLi.find("ul").first().slideDown('fast');
68                toggleButton.addClass(itemToggleOpen).html(svgChevronMinus);
69                parentLi.addClass(itemActive);
70                toggleButton.attr('aria-expanded', true);
71                toggleButton.attr('aria-label', 'Stäng menystruktur för ' + targetText);
72
73            } else {
74
75                // =========================================
76                // AJAX – HÄMTA MENYINNEHÅLL
77                // =========================================
78                $svjq.ajax({
79                    url: "/api-menu/?id=" + id,
80                    cache: false,
81                    dataType: 'html'
82                })
83                .done(function (html) {
84
85                    parentLi.append(html);
86                    parentLi.find("ul").first().hide().slideDown('fast');
87                    parentLi.attr("data-hascontentloaded", true);
88                    toggleButton.addClass(itemToggleOpen).html(svgChevronMinus);
89                    parentLi.addClass(itemActive);
90                    toggleButton.attr('aria-expanded', true);
91                    toggleButton.attr('aria-label', 'Stäng menystruktur för ' + targetText);
92
93                    // =========================================
94                    // Tillgänglighet – fokus via TAB
95                    // =========================================
96                    var tabIsPressed;
97
98                    $svjq(document).on('keydown', function (e) {
99                        tabIsPressed = (e.keyCode || e.which) === 9;
100                    });
101
102                    $svjq(document).on('mousedown', function () {
103                        tabIsPressed = false;

104                    });
105
106                    var links = $svjq(headerWrapper).find('a');
107                    var buttons = $svjq(headerWrapper).find('button');
108
109                    links.on('focus', function () {
110                        if (tabIsPressed) {
111                            $svjq(this).addClass('focused');
112                        }
113                    }).on('blur', function () {
114                        $svjq(this).removeClass('focused');
115                    });
116
117                    buttons.on('focus', function () {
118                        if (tabIsPressed) {
119                            $svjq(this).addClass('focused');
120                        }
121                    }).on('blur', function () {
122                        $svjq(this).removeClass('focused');
123                    });
124
125                });
126            }
127        }
128
129        return false;
130    });
131
132    // =========================================
133    // Markera aktiva menyer vid sidladdning
134    // =========================================
135    $svjq(itemCurrentClass).each(function () {
136        if ($svjq(this).parents('ul').parents('li').length > 0) {
137            $svjq(this).parents('ul').parents('li').addClass(itemActive);
138        } else {
139            $svjq(this).addClass(itemActive);
140        }
141    });
142
143    // Visa öppna UL för aktiva element
144    $svjq(itemActiveClass).each(function () {
145        $svjq(this).find('ul').first().show();
146    });
147
148});