MediaWiki:Common.js

(function() {
    function resizeSlideshowContainer(mwSlideshow) {
        const slideshow = mwSlideshow.querySelector('.slideshow');
        if (!slideshow) return;

        const activeSlide = slideshow.querySelector('div[style*="block"]') || slideshow.querySelector('div');

        if (activeSlide) {
            const img = activeSlide.querySelector('img');
            if (img) {
                // Natural image dimensions (ideal fit)
                const naturalWidth = img.naturalWidth;
                const naturalHeight = img.naturalHeight;

                // Optional: Clamp max width to fit parent (vector-body in your case)
                const maxAllowedWidth = mwSlideshow.parentElement.clientWidth;

                const finalWidth = Math.min(naturalWidth, maxAllowedWidth);

                // Set slideshow container to match
                mwSlideshow.style.width = finalWidth + 'px';
                mwSlideshow.style.height = (naturalHeight * (finalWidth / naturalWidth)) + 'px';
            }
        }
    }

    function cleanAndResizeSlideshows() {
        document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
            const slideshow = mwSlideshow.querySelector('.slideshow');

            if (slideshow) {
                // Nuke bad inline styles (MediaWiki injected)
                slideshow.style.width = '';
                slideshow.style.height = '';
                slideshow.querySelectorAll('div').forEach(slide => {
                    slide.style.width = '';
                    slide.style.height = '';
                });

                // Initial resize
                resizeSlideshowContainer(mwSlideshow);

                // Observe for new slides / style changes (e.g., slide transitions)
                const observer = new MutationObserver(() => {
                    resizeSlideshowContainer(mwSlideshow);
                });

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

                // Optional: Resize on window resize too (for good measure)
                window.addEventListener('resize', () => resizeSlideshowContainer(mwSlideshow));
            }
        });
    }

    // Init on page load
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
        cleanAndResizeSlideshows();
    } else {
        document.addEventListener('DOMContentLoaded', cleanAndResizeSlideshows);
    }
    
    
    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);
    }
})();