MediaWiki:Common.js

// MediaWiki Slideshow Gallery - PAGE SPECIFIC ONLY
// Only loads on pages with slideshow-gallery-page class
// Add this to MediaWiki:Common.js

// Check if current page should have slideshow functionality
function shouldLoadSlideshow() {
    return document.body.classList.contains('slideshow-gallery-page') || 
           document.querySelector('.slideshow-gallery-page') !== null ||
           document.querySelector('.slideshow-container') !== null;
}

// Only load slideshow code if needed
if (shouldLoadSlideshow()) {
    console.log('Loading slideshow gallery for this page');
    
    // Wait for MediaWiki to fully load
    mw.hook('wikipage.content').add(function($content) {
        initSlideshows($content);
    });

    $(document).ready(function() {
        initSlideshows($(document));
    });

    function initSlideshows($context) {
        $context = $context || $(document);
        
        // Only initialize slideshow containers on pages with the specific class
        const $galleryPages = $context.find('.slideshow-gallery-page, body.slideshow-gallery-page');
        if ($galleryPages.length === 0 && !$context.hasClass('slideshow-gallery-page')) {
            // Also check for direct slideshow containers as fallback
            if ($context.find('.slideshow-container').length === 0) {
                return;
            }
        }
        
        // Initialize each slideshow container
        $context.find('.slideshow-container').each(function() {
            if (!$(this).data('slideshow-initialized')) {
                $(this).data('slideshow-initialized', true);
                initSingleSlideshow(this);
            }
        });
    }

    function initSingleSlideshow(container) {
        const slides = container.querySelectorAll('.mySlides');
        const thumbnails = container.querySelectorAll('.demo');
        const captionText = container.querySelector('#caption, .caption');
        let slideIndex = 1;
        
        console.log('Initializing slideshow with', slides.length, 'slides');
        
        if (slides.length === 0) {
            console.log('No slides found in slideshow container');
            return;
        }
        
        // Show first slide initially
        showSlides(slideIndex);
        
        // Add click handlers to navigation buttons
        const prevBtn = container.querySelector('.prev');
        const nextBtn = container.querySelector('.next');
        
        if (prevBtn) {
            prevBtn.addEventListener('click', function(e) {
                e.preventDefault();
                plusSlides(-1);
            });
        }
        
        if (nextBtn) {
            nextBtn.addEventListener('click', function(e) {
                e.preventDefault();
                plusSlides(1);
            });
        }
        
        // Add click handlers to thumbnails
        thumbnails.forEach(function(thumb, index) {
            thumb.addEventListener('click', function() {
                currentSlide(index + 1);
            });
        });
        
        // Keyboard navigation
        container.addEventListener('keydown', function(e) {
            if (e.keyCode === 37) { // Left arrow
                plusSlides(-1);
                e.preventDefault();
            } else if (e.keyCode === 39) { // Right arrow
                plusSlides(1);
                e.preventDefault();
            }
        });
        
        // Make container focusable for keyboard navigation
        container.setAttribute('tabindex', '0');
        
        // Touch/swipe support
        let startX = 0;
        let endX = 0;
        
        container.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
        });
        
        container.addEventListener('touchmove', function(e) {
            e.preventDefault();
        });
        
        container.addEventListener('touchend', function(e) {
            endX = e.changedTouches[0].clientX;
            const diffX = startX - endX;
            
            if (Math.abs(diffX) > 50) {
                if (diffX > 0) {
                    plusSlides(1); // Swipe left = next
                } else {
                    plusSlides(-1); // Swipe right = previous
                }
            }
        });
        
        // Auto-play functionality (if data-autoplay attribute is set)
        let autoPlayInterval;
        const autoPlayDelay = container.getAttribute('data-autoplay');
        
        if (autoPlayDelay) {
            function startAutoPlay() {
                autoPlayInterval = setInterval(function() {
                    plusSlides(1);
                }, parseInt(autoPlayDelay));
            }
            
            function stopAutoPlay() {
                if (autoPlayInterval) {
                    clearInterval(autoPlayInterval);
                    autoPlayInterval = null;
                }
            }
            
            container.addEventListener('mouseenter', stopAutoPlay);
            container.addEventListener('mouseleave', startAutoPlay);
            
            startAutoPlay();
        }
        
        // Next/previous controls
        function plusSlides(n) {
            showSlides(slideIndex += n);
        }
        
        // Thumbnail image controls
        function currentSlide(n) {
            showSlides(slideIndex = n);
        }
        
        function showSlides(n) {
            let i;
            
            if (n > slides.length) { slideIndex = 1; }
            if (n < 1) { slideIndex = slides.length; }
            
            // Hide all slides
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
                slides[i].classList.remove('active');
            }
            
            // Remove active class from all thumbnails
            for (i = 0; i < thumbnails.length; i++) {
                thumbnails[i].classList.remove('active-thumb');
            }
            
            // Show current slide
            if (slides[slideIndex - 1]) {
                slides[slideIndex - 1].style.display = "block";
                slides[slideIndex - 1].classList.add('active');
            }
            
            // Highlight current thumbnail
            if (thumbnails[slideIndex - 1]) {
                thumbnails[slideIndex - 1].classList.add('active-thumb');
            }
            
            // Update caption
            if (captionText && thumbnails[slideIndex - 1]) {
                captionText.innerHTML = thumbnails[slideIndex - 1].getAttribute('alt') || '';
            }
            
            console.log('Showing slide', slideIndex, 'of', slides.length);
        }
    }
} else {
    console.log('Slideshow gallery not needed on this page');
}