https://wwagner.net/_assets/4e0eedfca51438451b36498b02b8860f/JavaScript/languageMenu.js?1790272914

1document.addEventListener('DOMContentLoaded', function () {
2    const languageButton = document.getElementById('language-button');
3    const languageMenu = document.getElementById('language-menu');
4    const currentLanguageSpan = document.getElementById('current-language');
5
6    // Aktive Sprache der Website ermitteln
7    const currentLanguageCode = document.documentElement.lang.substr(0, 2); // 'de', 'en', etc.
8
9    const ariaLabels = {
10        'de': 'Sprache wechseln',
11        'en': 'Change language',
12        'fr': 'Changer de langue',
13        'it': 'Cambiare la lingua',
14        'es': 'Cambiar de idioma',
15        'pl': 'Zmień język',
16        'nl': 'Taal wijzigen',
17    };
18    console.log(document.documentElement.lang);
19
20    languageButton.setAttribute('aria-label', ariaLabels[currentLanguageCode] || 'Change language');
21
22    // Aktive Sprache neben dem Icon anzeigen
23    currentLanguageSpan.textContent = currentLanguageCode.toUpperCase();
24
25    // Aktive Sprache im Menü hervorheben
26    const menuItems = languageMenu.querySelectorAll('a');
27    menuItems.forEach(function (item) {
28        if (item.getAttribute('data-lang') === currentLanguageCode) {
29            item.classList.add('active-language');
30            item.setAttribute('aria-current', 'page');
31        } else {
32            item.classList.remove('active-language');
33            item.removeAttribute('aria-current');
34        }
35    });
36
37    // Menüanzeige umschalten
38    languageButton.addEventListener('click', function (event) {
39        event.preventDefault();
40        const expanded = languageButton.getAttribute('aria-expanded') === 'true';
41        languageButton.setAttribute('aria-expanded', !expanded);
42        languageMenu.setAttribute('aria-hidden', expanded);
43    });
44
45    // Menü schließen, wenn außerhalb geklickt wird
46    document.addEventListener('click', function (event) {
47        if (!languageButton.contains(event.target) && !languageMenu.contains(event.target)) {
48            languageButton.setAttribute('aria-expanded', 'false');
49            languageMenu.setAttribute('aria-hidden', 'true');
50        }
51    });
52
53    // Tastaturnavigation
54    languageButton.addEventListener('keydown', function (event) {
55        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
56            event.preventDefault();
57            languageButton.click();
58            languageMenu.querySelector('a').focus();
59        }
60    });
61
62    menuItems.forEach(function (item) {
63        item.addEventListener('keydown', function (event) {
64            if (event.key === 'ArrowDown') {
65                event.preventDefault();
66                if (item.parentElement.nextElementSibling) {
67                    item.parentElement.nextElementSibling.querySelector('a').focus();
68                } else {
69                    menuItems[0].focus();
70                }
71            } else if (event.key === 'ArrowUp') {
72                event.preventDefault();
73                if (item.parentElement.previousElementSibling) {
74                    item.parentElement.previousElementSibling.querySelector('a').focus();
75                } else {
76                    menuItems[menuItems.length - 1].focus();
77                }
78            } else if (event.key === 'Escape') {
79                languageButton.focus();
80                languageButton.setAttribute('aria-expanded', 'false');
81                languageMenu.setAttribute('aria-hidden', 'true');
82            }
83        });
84    });
85});