Jump to content

MediaWiki:Common.js: Difference between revisions

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


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


         // Remove bad positioning injected by original slideshow JS
         // Clear out any rogue inline styles
         slideshow.style.position = 'relative';
         slideshow.style.position = 'relative'; // Let it sit naturally inside mw-jsslideshow
         slideshow.style.left = '0';
         slideshow.style.left = '0';
         slideshow.style.top = '0';
         slideshow.style.top = '';
         slideshow.style.transform = 'none';
         slideshow.style.transform = '';


         // Let mw-jsslideshow size to fit its parent, no forced widths
         // Make sure mw-jsslideshow fits around slideshow
         mwSlideshow.style.width = '100%';
         mwSlideshow.style.width = slideshow.scrollWidth + 'px';
         mwSlideshow.style.height = 'auto';
         mwSlideshow.style.height = slideshow.scrollHeight + 'px';
        mwSlideshow.style.margin = '0 auto'; // Center the whole box horizontally


         // Allow slideshow div to naturally flow within mw-jsslideshow
         // Center each individual image inside each slide
        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 => {
             slide.style.width = '100%';
             const img = slide.querySelector('img');
             slide.style.height = 'auto';
             if (img) {
            slide.style.display = 'flex';
                // Make sure each slide is full-width & centers its image
            slide.style.justifyContent = 'center';
                slide.style.display = 'flex';
            slide.style.alignItems = 'center';
                slide.style.justifyContent = 'center';
        });
                slide.style.alignItems = 'center';
                slide.style.width = slideshow.scrollWidth + 'px';


        // Reset images to behave like good responsive citizens
                img.style.maxWidth = '100%';
        slideshow.querySelectorAll('img').forEach(img => {
                img.style.height = 'auto';
            img.style.width = '100%';
                img.style.objectFit = 'contain';
            img.style.height = 'auto';
             }
            img.style.objectFit = 'contain';
             img.style.display = 'block';
         });
         });
     }
     }


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


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


                 observer.observe(slideshow, {
                 observer.observe(slideshow, {
                     attributes: true,
                     attributes: true,
                    attributeFilter: ['style'],
                     childList: true,
                     childList: true,
                     subtree: true
                     subtree: true
Line 62: Line 59:
     }
     }


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