/** * IT-Hilfe Sofort - Main JavaScript * Cookie Consent, Mobile Navigation, Form Handling */ (function() { 'use strict'; // ======================================== // Cookie Consent Management (DSGVO) // ======================================== const CookieConsent = { storageKey: 'it-hilfe-cookie-consent', init() { const consent = this.getConsent(); if (!consent) { this.showBanner(); } else if (consent.analytics) { this.loadAnalytics(); } }, getConsent() { try { return JSON.parse(localStorage.getItem(this.storageKey)); } catch { return null; } }, saveConsent(consent) { localStorage.setItem(this.storageKey, JSON.stringify(consent)); }, showBanner() { const banner = document.getElementById('cookie-banner'); if (banner) { banner.classList.remove('hidden'); document.getElementById('cookie-accept')?.addEventListener('click', () => { this.saveConsent({ essential: true, analytics: true, marketing: true }); this.loadAnalytics(); banner.classList.add('hidden'); }); document.getElementById('cookie-essential')?.addEventListener('click', () => { this.saveConsent({ essential: true, analytics: false, marketing: false }); banner.classList.add('hidden'); }); document.getElementById('cookie-settings')?.addEventListener('click', () => { // TODO: Open settings modal alert('Cookie-Einstellungen werden in Kürze verfügbar sein.'); }); } }, loadAnalytics() { // Placeholder for analytics loading (e.g., Matomo, Plausible) // Only loads after explicit consent console.log('Analytics geladen (nach Consent)'); } }; // ======================================== // Mobile Navigation // ======================================== const MobileNav = { init() { const toggle = document.querySelector('.nav-toggle'); const menu = document.querySelector('.nav-menu'); if (toggle && menu) { toggle.addEventListener('click', () => { menu.classList.toggle('active'); toggle.setAttribute('aria-expanded', menu.classList.contains('active')); }); // Close menu on link click menu.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { menu.classList.remove('active'); }); }); } } }; // ======================================== // Form Validation (Kontaktformular) // ======================================== const FormHandler = { init() { const forms = document.querySelectorAll('form[data-validate]'); forms.forEach(form => this.attachValidation(form)); }, attachValidation(form) { form.addEventListener('submit', (e) => { const errors = this.validateForm(form); if (errors.length > 0) { e.preventDefault(); this.showErrors(form, errors); } }); }, validateForm(form) { const errors = []; const required = form.querySelectorAll('[required]'); required.forEach(field => { if (!field.value.trim()) { errors.push({ field: field.name, message: 'Dieses Feld ist erforderlich' }); } if (field.type === 'email' && field.value) { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(field.value)) { errors.push({ field: field.name, message: 'Bitte geben Sie eine gültige E-Mail-Adresse ein' }); } } }); // Check consent checkbox const consent = form.querySelector('input[name="datenschutz"]'); if (consent && !consent.checked) { errors.push({ field: 'datenschutz', message: 'Sie müssen der Datenschutzerklärung zustimmen' }); } return errors; }, showErrors(form, errors) { // Remove existing errors form.querySelectorAll('.error-message').forEach(el => el.remove()); form.querySelectorAll('.error').forEach(el => el.classList.remove('error')); errors.forEach(error => { const field = form.querySelector(`[name="${error.field}"]`); if (field) { field.classList.add('error'); const errorEl = document.createElement('small'); errorEl.className = 'error-message'; errorEl.textContent = error.message; errorEl.style.color = '#dc2626'; errorEl.style.fontSize = '0.875rem'; field.parentNode.insertBefore(errorEl, field.nextSibling); } }); } }; // ======================================== // Lazy Loading Images // ======================================== const LazyLoader = { init() { if ('IntersectionObserver' in window) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.removeAttribute('data-src'); observer.unobserve(img); } }); }, { rootMargin: '50px' }); document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img); }); } } }; // ======================================== // Smooth Scroll for Anchor Links // ======================================== const SmoothScroll = { init() { document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { const targetId = this.getAttribute('href'); if (targetId === '#') return; const target = document.querySelector(targetId); if (target) { e.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); } }; // ======================================== // Initialize All Modules // ======================================== document.addEventListener('DOMContentLoaded', () => { CookieConsent.init(); MobileNav.init(); FormHandler.init(); LazyLoader.init(); SmoothScroll.init(); }); })();