sg07-stleon.de/main.js

// ==========================================================================
// SG 07 ST. LEON - ZENTRALES JAVASCRIPT
// ==========================================================================

document.addEventListener('DOMContentLoaded', () => {

    // --- 1. Mobiles Menü Toggle ---
    const menuToggle = document.getElementById('menuToggle');
    const navMenu = document.getElementById('navMenu');
    
    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', () => {
            navMenu.classList.toggle('show');
        });
    }

    // --- 2. News & API Logik ---
    const newsContainer = document.getElementById('news-container');
    
    if (newsContainer) {
        window.allNews = [];

        async function loadNewsFromDatabase() {
            try {
                const response = await fetch('api.php');
                window.allNews = await response.json();
                newsContainer.innerHTML = '';

                if (window.allNews.error) {
                    newsContainer.innerHTML = `<p style="color: red; grid-column: 1 / -1;">Fehler: ${window.allNews.error}</p>`;
                    return;
                }

                // Prüfen, ob der Container ein Limit hat (z.B. auf der Startseite: data-limit="3")
                const limit = newsContainer.getAttribute('data-limit');
                let newsToShow = window.allNews;
                if (limit) {
                    newsToShow = window.allNews.slice(0, parseInt(limit));
                }

                newsToShow.forEach(news => {
                    const imgSrc = news.image ? news.image : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23f4f4f4'/%3E%3Ctext x='50' y='55' font-size='14' fill='%23cccccc' text-anchor='middle' font-family='sans-serif'%3ESportgemeinschaft%3C/text%3E%3C/svg%3E";
                    
                    const card = document.createElement('div');
                    card.className = 'card';
                    card.innerHTML = `
                        <img src="${imgSrc}" alt="${news.title}" class="card-img" loading="lazy">
                        <div class="card-content">
                            <div class="card-date">
                                <span>${news.date}</span>
                                <span class="card-tag">${news.department}</span>
                            </div>
                            <h3>${news.title}</h3>
                            <p>${news.content}</p>
                            <a class="read-more" onclick="openNewsModal(${news.id})">Weiterlesen &rarr;</a>
                        </div>
                    `;
                    newsContainer.appendChild(card);
                });
            } catch (error) {
                console.error("News Fehler:", error);
            }
        }

        loadNewsFromDatabase();
    }

    // --- 3. News Modal (Popup) Logik ---
    const newsModal = document.getElementById('newsModal');
    
    if (newsModal) {
        // Global verfügbar machen für das onclick-Attribut in den HTML-Karten
        window.openNewsModal = function(id) {
            const news = window.allNews.find(n => n.id === id);
            if(!news) return;

            document.getElementById('modalTitle').innerText = news.title;
            document.getElementById('modalMeta').innerText = news.date + ' | ' + news.department;
            document.getElementById('modalBody').innerText = news.full_text || news.content;

            const imgEl = document.getElementById('modalImage');
            if(news.image && news.image.trim() !== "") {
                imgEl.src = news.image;
                imgEl.style.display = 'block';
            } else {
                imgEl.style.display = 'none';
            }

            newsModal.classList.add('active');
            document.body.style.overflow = 'hidden'; 
        };

        window.closeNewsModal = function() {
            newsModal.classList.remove('active');
            document.body.style.overflow = 'auto';
        };

        newsModal.addEventListener('click', function(e) {
            if (e.target === this) closeNewsModal();
        });

        document.addEventListener('keydown', function(e) {
            if(e.key === "Escape" && newsModal.classList.contains('active')) {
                closeNewsModal();
            }
        });
    }

    // --- 4. Lightbox / Bildergalerie Logik (Vereinsheim) ---
    const lightbox = document.getElementById('lightbox');
    
    if (lightbox) {
        let currentImageIndex = 0;
        const galleryImages = document.querySelectorAll('.gallery-item img');
        const lightboxImg = document.getElementById('lightboxImg');
        const lightboxCounter = document.getElementById('lightboxCounter');

        window.openLightbox = function(index) {
            currentImageIndex = index;
            updateLightbox();
            lightbox.classList.add('active');
            document.body.style.overflow = 'hidden'; 
        };

        window.closeLightbox = function() {
            lightbox.classList.remove('active');
            document.body.style.overflow = 'auto'; 
        };

        window.changeImage = function(direction) {
            currentImageIndex += direction;
            if (currentImageIndex >= galleryImages.length) {
                currentImageIndex = 0;
            } else if (currentImageIndex < 0) {
                currentImageIndex = galleryImages.length - 1;
            }
            updateLightbox();
        };

        function updateLightbox() {
            if (galleryImages[currentImageIndex]) {
                lightboxImg.src = galleryImages[currentImageIndex].src;
                lightboxCounter.innerText = (currentImageIndex + 1) + ' / ' + galleryImages.length;
            }
        }

        lightbox.addEventListener('click', function(event) {
            if (event.target === lightbox || event.target.className === 'lightbox-content') {
                closeLightbox();
            }
        });

        document.addEventListener('keydown', function(event) {
            if (lightbox.classList.contains('active')) {
                if (event.key === "Escape") closeLightbox();
                if (event.key === "ArrowRight") changeImage(1);
                if (event.key === "ArrowLeft") changeImage(-1);
            }
        });
    }

});