https://spielatus.ch/js/faq.js

1/**
2 * SPielatus FAQ Page - Accordion & Language Switching
3 */
4
5(function() {
6  function getPreferredLanguage() {
7    var stored = localStorage.getItem('spielatus-lang');
8    if (stored && ['de', 'en', 'fr', 'es'].includes(stored)) return stored;
9
10    var urlParams = new URLSearchParams(window.location.search);
11    var langParam = urlParams.get('lang');
12    if (langParam && ['de', 'en', 'fr', 'es'].includes(langParam)) return langParam;
13
14    var browserLang = navigator.language.split('-')[0];
15    if (['de', 'en', 'fr', 'es'].includes(browserLang)) return browserLang;
16
17    return 'de';
18  }
19
20  function renderFaq(lang) {
21    var content = window.faqContent && window.faqContent[lang];
22    if (!content) return;
23
24    // Page header
25    document.getElementById('page-title').textContent = content.pageTitle;
26    document.getElementById('page-subtitle').textContent = content.pageSubtitle;
27
28    // Build FAQ HTML
29    var container = document.getElementById('faq-container');
30    var html = '';
31
32    content.categories.forEach(function(cat) {
33      html += '<div class="faq-category">';
34      html += '<h2 class="faq-category-title">' + cat.title + '</h2>';
35
36      cat.items.forEach(function(item) {
37        html += '<div class="faq-item">';
38        html += '<button class="faq-question" aria-expanded="false">';
39        html += '<span>' + item.q + '</span>';
40        html += '<svg class="faq-chevron" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>';
41        html += '</button>';
42        html += '<div class="faq-answer">';
43        html += '<p>' + item.a + '</p>';
44        html += '</div>';
45        html += '</div>';
46      });
47
48      html += '</div>';
49    });
50
51    container.innerHTML = html;
52
53    // Attach accordion handlers
54    container.querySelectorAll('.faq-question').forEach(function(btn) {
55      btn.addEventListener('click', function() {
56        var item = this.parentElement;
57        var isOpen = item.classList.contains('open');
58
59        // Close all others in same category
60        item.parentElement.querySelectorAll('.faq-item.open').forEach(function(openItem) {
61          openItem.classList.remove('open');
62          openItem.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
63        });
64
65        // Toggle current
66        if (!isOpen) {
67          item.classList.add('open');
68          this.setAttribute('aria-expanded', 'true');
69        }
70      });
71    });
72
73    // i18n for nav/footer
74    document.querySelectorAll('[data-i18n]').forEach(function(el) {
75      var key = el.getAttribute('data-i18n');
76      if (content[key]) el.textContent = content[key];
77    });
78
79    document.documentElement.lang = lang;
80    document.title = content.pageTitle + ' - SPielatus';
81    localStorage.setItem('spielatus-lang', lang);
82
83    document.querySelectorAll('.lang-btn').forEach(function(btn) {
84      btn.classList.toggle('active', btn.dataset.lang === lang);
85    });
86  }
87
88  document.addEventListener('DOMContentLoaded', function() {
89    var preferredLang = getPreferredLanguage();
90    renderFaq(preferredLang);
91
92    document.querySelectorAll('.lang-btn').forEach(function(btn) {
93      btn.addEventListener('click', function() {
94        renderFaq(this.dataset.lang);
95      });
96    });
97  });
98})();