MediaWiki:Common.js

// MediaWiki Slideshow Gallery - PAGE SPECIFIC ONLY
// Add this to MediaWiki:Common.js

(function() {
    'use strict';
    
    // Check if current page should have slideshow functionality
    function shouldLoadSlideshow() {
        return document.body && (
            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()) {
        return;
    }

    console.log('Loading slideshow gallery for this page');

    // Wait for MediaWiki and jQuery to be ready
    function initWhenReady() {
        if (typeof mw === 'undefined' || typeof $ === 'undefined') {
            setTimeout(initWhenReady, 100);
            return;
        }
        
        // MediaWiki hook
        mw.hook('wikipage.content').add(function($content) {
            initSlideshows($content);
        });

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

    function initSlideshows($context) {
        $context = $context || $(document);
        
        // Only initialize slideshow containers on pages with the specific class
        var $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) {
        var slides = container.querySelectorAll('.mySlides');
        var thumbnails = container.querySelectorAll('.demo');
        var captionText = container.querySelector('#caption, .caption');
        var 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
        var prevBtn = container.querySelector('.prev');
        var 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
        for (var i = 0; i < thumbnails.length; i++) {
            (function(index) {
                thumbnails[index].addEventListener('click', function() {
                    currentSlide(index + 1);
                });
            })(i);
        }
        
        // 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
        var startX = 0;
        var 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;
            var 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)
        var autoPlayInterval;
        var 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) {
            var 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);
        }
    }

    // Start initialization
    initWhenReady();

})();