Jump to content

MediaWiki:Common.js: Difference between revisions

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


         const activeSlide = slideshow.querySelector('div[style*="block"]') || slideshow.querySelector('div');
         // Clear out any rogue inline styles
        slideshow.style.position = 'relative';  // Let it sit naturally inside mw-jsslideshow
        slideshow.style.left = '';
        slideshow.style.top = '';
        slideshow.style.transform = '';


         if (activeSlide) {
         // Make sure mw-jsslideshow fits around slideshow
             const img = activeSlide.querySelector('img');
        mwSlideshow.style.width = slideshow.scrollWidth + 'px';
        mwSlideshow.style.height = slideshow.scrollHeight + 'px';
        mwSlideshow.style.margin = '0 auto';  // Center the whole box horizontally
 
        // Center each individual image inside each slide
        slideshow.querySelectorAll('div').forEach(slide => {
             const img = slide.querySelector('img');
             if (img) {
             if (img) {
                 // Natural image dimensions (ideal fit)
                 // Make sure each slide is full-width & centers its image
                 const naturalWidth = img.naturalWidth;
                 slide.style.display = 'flex';
                 const naturalHeight = img.naturalHeight;
                 slide.style.justifyContent = 'center';
 
                 slide.style.alignItems = 'center';
                 // Optional: Clamp max width to fit parent (vector-body in your case)
                 slide.style.width = slideshow.scrollWidth + 'px';
                const maxAllowedWidth = mwSlideshow.parentElement.clientWidth;
 
                 const finalWidth = Math.min(naturalWidth, maxAllowedWidth);


                 // Set slideshow container to match
                 img.style.maxWidth = '100%';
                 mwSlideshow.style.width = finalWidth + 'px';
                 img.style.height = 'auto';
                 mwSlideshow.style.height = (naturalHeight * (finalWidth / naturalWidth)) + 'px';
                 img.style.objectFit = 'contain';
             }
             }
         }
         });
     }
     }


     function cleanAndResizeSlideshows() {
     function initSlideshowResizer() {
         document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
         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');
             const slideshow = mwSlideshow.querySelector('.slideshow');
             if (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(() => {
                 const observer = new MutationObserver(() => {
                     resizeSlideshowContainer(mwSlideshow);
                     resizeAndCenterSlideshow(mwSlideshow);
                 });
                 });


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


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