https://www.swiss-athletics.ch/_assets/9936fbff2fa9683e2f00411c767453f4/Javascript/components/panel/panel.js

1export default class Panel {
2    static before = new Event('Panel.before');
3    static after = new Event('Panel.after');
4    static initElement(element) {
5        const panel = element;
6        const burger = document.getElementsByClassName('js-open-panel');
7        const links = panel.querySelectorAll('a, button');
8
9        Panel.setTabIndex(links, '-1');
10        if (panel) {
11            if (panel.parentNode !== document.body) {
12                const wrapper = document.querySelector('.pusha-push');
13                wrapper.parentNode.insertBefore(panel, wrapper);
14            }
15            new Pusha(panel, {
16                onOpen: function (panel) {
17                    Array.prototype.slice.call(document.querySelectorAll('[data-panel="#' + panel.id + '"]')).forEach(function (item) {
18                        document.body.dispatchEvent(Panel.before);
19                        item.classList.add('is-active');
20                        item.setAttribute('aria-expanded', true);
21
22                    });
23
24                },
25                onClose: function (panel) {
26                    Array.prototype.slice.call(document.querySelectorAll('[data-panel="#' + panel.id + '"]')).forEach(function (item) {
27                        item.classList.remove('is-active');
28                        item.setAttribute('aria-expanded', false);
29                        document.querySelector('.js-open-panel-focusout').focus();
30                        document.body.dispatchEvent(Panel.after);
31
32                    });
33                }
34            });
35            Array.prototype.slice.call(burger).forEach(function (button) {
36                const panel = document.querySelector(button.getAttribute('data-panel'));
37                button.addEventListener('click', function (e) {
38                    e.preventDefault();
39                    panel.pusha.toggle(e);
40                    Panel.setTabIndex(links, null);
41
42                });
43            });
44        }
45    }
46
47    static setTabIndex(items, value) {
48        items.forEach(function (link) {
49            if (!link.closest('.js-navigation-sub')) {
50                if (link.getAttribute('tabindex')) {
51                    if (link.getAttribute('tabindex') === '0') {
52                        link.setAttribute('tabindex', '-1');
53                    } else {
54                        link.setAttribute('tabindex', '0');
55                    }
56                } else {
57                    link.setAttribute('tabindex', '-1');
58                }
59            }
60        });
61    }
62
63}