web7sys/public/js/components.js

document.addEventListener('DOMContentLoaded', function() {
    // Helper function to handle component loading
    async function loadComponent(url, insertPosition) {
        try {
            const response = await fetch(url);
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.text();
            document.body.insertAdjacentHTML(insertPosition, data);

            // After header is loaded, initialize its event listeners
            if (url.includes('header.html')) {
                initializeHeader();
            }
            return true;
        } catch (error) {
            console.warn(`Failed to load component from ${url}:`, error);
            return false;
        }
    }

    // Load components with error handling
    Promise.all([
        loadComponent('components/header.html', 'afterbegin'),
        loadComponent('components/footer.html', 'beforeend')
    ]).then(results => {
        if (results.every(Boolean)) {
            document.dispatchEvent(new Event('componentsLoaded'));
            initializeTooltips();
        }
    }).catch(error => {
        console.warn('Error loading components:', error);
    });

    // Initialize tooltip functionality
    function initializeTooltips() {
        const tooltipContainers = document.querySelectorAll('.tooltip-container');
        
        tooltipContainers.forEach(container => {
            container.addEventListener('click', function(e) {
                // Prevent click from propagating if clicking inside the content when expanded
                if (this.classList.contains('active') && 
                    e.target.closest('.tooltip-content') && 
                    !e.target.closest('.tooltip-header')) {
                    return;
                }
                
                // Toggle current container
                this.classList.toggle('active');
                
                // Close other containers
                tooltipContainers.forEach(otherContainer => {
                    if (otherContainer !== this && otherContainer.classList.contains('active')) {
                        otherContainer.classList.remove('active');
                    }
                });
            });
        });

        // Close tooltips when clicking outside
        document.addEventListener('click', function(e) {
            if (!e.target.closest('.tooltip-container')) {
                tooltipContainers.forEach(container => {
                    container.classList.remove('active');
                });
            }
        });

        // Handle escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                tooltipContainers.forEach(container => {
                    container.classList.remove('active');
                });
            }
        });
    }

    // Initialize header functionality
    function initializeHeader() {
        const header = document.querySelector('header');
        if (!header) return;

        const pagesToHideLinks = [
            'datenschutz.html',
            'impressum.html'
        ];
        
        if (pagesToHideLinks.some(page => window.location.pathname.includes(page))) {
            const expertiseLink = document.getElementById('expertise-link');
            const contactLink = document.getElementById('contact-link');
            
            if (expertiseLink) expertiseLink.style.display = 'none';
            if (contactLink) contactLink.style.display = 'none';
        }
        
        const mobileMenuToggle = header.querySelector('.mobile-menu-toggle');
        const navMenu = header.querySelector('.nav-menu');

        function closeMenu() {
            navMenu.classList.remove('active');
            const menuIcon = mobileMenuToggle.querySelector('i');
            if (menuIcon) {
                menuIcon.className = 'fas fa-bars';
            }
            mobileMenuToggle.setAttribute('aria-expanded', 'false');
        }

        // Mobile menu toggle
        if (mobileMenuToggle && navMenu) {
            mobileMenuToggle.setAttribute('aria-expanded', 'false');
            
            mobileMenuToggle.addEventListener('click', () => {
                const isExpanded = navMenu.classList.contains('active');
                navMenu.classList.toggle('active');
                const menuIcon = mobileMenuToggle.querySelector('i');
                if (menuIcon) {
                    menuIcon.className = isExpanded ? 'fas fa-bars' : 'fas fa-times';
                }
                mobileMenuToggle.setAttribute('aria-expanded', (!isExpanded).toString());
            });

            // Add click handlers for nav items
            navMenu.querySelectorAll('a').forEach(link => {
                link.addEventListener('click', (e) => {
                    // Only close menu if it's a same-page anchor link
                    if (link.getAttribute('href').startsWith('#')) {
                        e.preventDefault();
                        const targetId = link.getAttribute('href').slice(1);
                        const targetElement = document.getElementById(targetId);
                        if (targetElement) {
                            closeMenu();
                            targetElement.scrollIntoView({ behavior: 'smooth' });
                        }
                    }
                    closeMenu();
                });
            });

            // Close menu when clicking outside
            document.addEventListener('click', (e) => {
                if (navMenu.classList.contains('active') &&
                    !e.target.closest('.nav-menu') &&
                    !e.target.closest('.mobile-menu-toggle')) {
                    closeMenu();
                }
            });
        }

        // Scroll behavior - only enable on index page
        if (window.location.pathname === '/' || window.location.pathname === '/index.html') {
            let lastScrollTop = 0;
            let scrollTimeout;

            window.addEventListener('scroll', () => {
                if (scrollTimeout) {
                    window.cancelAnimationFrame(scrollTimeout);
                }

                scrollTimeout = window.requestAnimationFrame(() => {
                    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                    
                    // Don't hide header when near top of page
                    if (scrollTop < 100) {
                        header.style.transform = 'translateY(0)';
                        return;
                    }
                    
                    // Hide header on scroll down, show on scroll up
                    if (scrollTop > lastScrollTop) {
                        header.style.transform = 'translateY(-100%)';
                    } else {
                        header.style.transform = 'translateY(0)';
                    }
                    
                    lastScrollTop = scrollTop;
                });
            }, { passive: true });
        }
    }
});