Jump to content

MediaWiki:Common.js: Difference between revisions

← Older editNewer edit →
Line 1: Line 1:
(function() {
(function() {
     function resizeAndCenterSlideshow(mwSlideshow) {
     function resetSlideshowLayout(mwSlideshow) {
         const slideshow = mwSlideshow.querySelector('.slideshow');
         const slideshow = mwSlideshow.querySelector('.slideshow');


         if (!slideshow) return;
         if (!slideshow) return;


         // Reset positioning to let the parent naturally size
         // Remove bad positioning injected by original slideshow JS
         slideshow.style.position = 'relative';
         slideshow.style.position = 'relative';
         slideshow.style.left = '';
         slideshow.style.left = '0';
         slideshow.style.top = '';
         slideshow.style.top = '0';
         slideshow.style.transform = '';
         slideshow.style.transform = 'none';


         // Force `mw-jsslideshow` to wrap tightly around the slideshow
         // Let mw-jsslideshow size to fit its parent, no forced widths
         mwSlideshow.style.width = slideshow.scrollWidth + 'px';
         mwSlideshow.style.width = '100%';
         mwSlideshow.style.height = slideshow.scrollHeight + 'px';
         mwSlideshow.style.height = 'auto';
        mwSlideshow.style.margin = '0 auto'; // Center mw-jsslideshow itself


         // Center each individual image within its slide div
         // 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 => {
         slideshow.querySelectorAll('div').forEach(slide => {
             const img = slide.querySelector('img');
             slide.style.width = '100%';
            if (img) {
            slide.style.height = 'auto';
                // Reset slide container spacing
            slide.style.display = 'flex';
                slide.style.padding = '0';
            slide.style.justifyContent = 'center';
                slide.style.margin = '0';
            slide.style.alignItems = 'center';
                slide.style.border = 'none';
        });
                slide.style.width = slideshow.scrollWidth + 'px';
                slide.style.display = 'flex';
                slide.style.justifyContent = 'center';
                slide.style.alignItems = 'center';
                slide.style.boxSizing = 'border-box';


                // Image centering & sizing
        // Reset images to behave like good responsive citizens
                img.style.display = 'block';
        slideshow.querySelectorAll('img').forEach(img => {
                img.style.maxWidth = '100%';
            img.style.width = '100%';
                img.style.height = 'auto';
            img.style.height = 'auto';
                img.style.objectFit = 'contain';
            img.style.objectFit = 'contain';
                img.style.margin = '0'; // Kill any ghost margin
            img.style.display = 'block';
            }
         });
         });
     }
     }


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


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


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


                 observer.observe(slideshow, {
                 observer.observe(slideshow, {
                     attributes: true,
                     attributes: true,
                    attributeFilter: ['style'],
                     childList: true,
                     childList: true,
                     subtree: true
                     subtree: true
Line 67: Line 63:


     if (document.readyState === 'complete' || document.readyState === 'interactive') {
     if (document.readyState === 'complete' || document.readyState === 'interactive') {
         initSlideshowResizer();
         initSlideshowFixer();
     } else {
     } else {
         document.addEventListener('DOMContentLoaded', initSlideshowResizer);
         document.addEventListener('DOMContentLoaded', initSlideshowFixer);
     }
     }
      
      
Retrieved from "https://continuum-universes.com/wiki/MediaWiki:Common.js"