MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.
Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
(function() {
    function resizeAndCenterSlideshow(mwSlideshow) {
        const slideshow = mwSlideshow.querySelector('.slideshow');

        if (!slideshow) return;

         // Remove bad positioning injected by original slideshow JS
        slideshow.style.position = 'relative';
        slideshow.style.left = '0';
        slideshow.style.top = '0';
        slideshow.style.transform = 'none';

        // Let mw-jsslideshow size to fit its parent, no forced widths
        mwSlideshow.style.width = '100%';
        mwSlideshow.style.height = 'auto';

        // Allow slideshow div to naturally flow within mw-jsslideshow
        slideshow.style.width = '100%';
        slideshow.style.height = 'auto';

        // Reset each slide div to flow properly
        /*
        slideshow.querySelectorAll('div').forEach(slide => {
            slide.style.width = '100%';
            slide.style.height = 'auto';
            slide.style.display = 'flex';
            slide.style.justifyContent = 'center';
            slide.style.alignItems = 'center';
        });
*/
        // Reset images to behave like good responsive citizens
        slideshow.querySelectorAll('img').forEach(img => {
            img.style.width = '100%';
            img.style.height = 'auto';
            img.style.objectFit = 'contain';
            img.style.display = 'block';
        });
    }

        // Center each individual image inside each slide
        slideshow.querySelectorAll('div').forEach(slide => {
            const img = slide.querySelector('img');
            if (img) {
                // Make sure each slide is full-width & centers its image
                slide.style.display = 'flex';
                slide.style.justifyContent = 'center';
                slide.style.alignItems = 'center';
                slide.style.width = slideshow.scrollWidth + 'px';

                img.style.maxWidth = '100%';
                img.style.height = 'auto';
                img.style.objectFit = 'contain';
            }
        });
    }

    function initSlideshowResizer() {
        document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
            resizeAndCenterSlideshow(mwSlideshow);

            // Optional: Resize on window resize
            window.addEventListener('resize', () => {
                resizeAndCenterSlideshow(mwSlideshow);
            });

            // Observe for changes (like slide swaps)
            const slideshow = mwSlideshow.querySelector('.slideshow');
            if (slideshow) {
                const observer = new MutationObserver(() => {
                    resizeAndCenterSlideshow(mwSlideshow);
                });

                observer.observe(slideshow, {
                    attributes: true,
                    attributeFilter: ['style'],
                    childList: true,
                    subtree: true
                });
            }
        });
    }

    // Init when ready
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        initSlideshowResizer();
    } else {
        document.addEventListener('DOMContentLoaded', initSlideshowResizer);
    }
    
    
    function cleanSlideshowStyles(slideshowContainer) {
        const slideshow = slideshowContainer.querySelector('.slideshow');
        if (slideshow) {
            // Remove inline styles on the main slideshow container
            slideshow.style.width = '';
            slideshow.style.height = '';

            // Remove inline styles on each slide div
            slideshow.querySelectorAll('div').forEach(slide => {
                slide.style.width = '';
                slide.style.height = '';
            });
        }
    }

    function initSlideshowFix() {
        // Locate all mw-jsslideshow instances
        document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
            // Clean styles on page load
            cleanSlideshowStyles(mwSlideshow);

            // Optional: Re-clean styles on window resize
            window.addEventListener('resize', () => {
                cleanSlideshowStyles(mwSlideshow);
            });

            // Hook into slide transitions if needed (depends on the specific JS driving the slideshow)
            const slideshow = mwSlideshow.querySelector('.slideshow');
            if (slideshow) {
                const observer = new MutationObserver(() => {
                    cleanSlideshowStyles(mwSlideshow);
                });

                observer.observe(slideshow, {
                    attributes: true,
                    attributeFilter: ['style'],
                    childList: false,
                    subtree: false
                });
            }
        });
    }

    // Run once DOM is ready (in case the slideshows are injected late)
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        initSlideshowFix();
    } else {
        document.addEventListener('DOMContentLoaded', initSlideshowFix);
    }
})();
/* Any JavaScript here will be loaded for all users on every page load. */
(function() {
    function cleanSlideshowStyles(slideshowContainer) {
        const slideshow = slideshowContainer.querySelector('.slideshow');
        if (slideshow) {
            // Remove inline styles on the main slideshow container
            slideshow.style.width = '';
            slideshow.style.height = '';

            // Remove inline styles on each slide div
            slideshow.querySelectorAll('div').forEach(slide => {
                slide.style.width = '';
                slide.style.height = '';
            });
        }
    }

    function initSlideshowFix() {
        // Locate all mw-jsslideshow instances
        document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
            // Clean styles on page load
            cleanSlideshowStyles(mwSlideshow);

            // Optional: Re-clean styles on window resize
            window.addEventListener('resize', () => {
                cleanSlideshowStyles(mwSlideshow);
            });

            // Hook into slide transitions if needed (depends on the specific JS driving the slideshow)
            const slideshow = mwSlideshow.querySelector('.slideshow');
            if (slideshow) {
                const observer = new MutationObserver(() => {
                    cleanSlideshowStyles(mwSlideshow);
                });

                observer.observe(slideshow, {
                    attributes: true,
                    attributeFilter: ['style'],
                    childList: false,
                    subtree: false
                });
            }
        });
    }

    // Run once DOM is ready (in case the slideshows are injected late)
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        initSlideshowFix();
    } else {
        document.addEventListener('DOMContentLoaded', initSlideshowFix);
    }
})();