Jump to content

MediaWiki:Common.js: Difference between revisions

← Older editNewer edit →
Line 2: Line 2:
     function resizeSlideshowContainer(mwSlideshow) {
     function resizeSlideshowContainer(mwSlideshow) {
         const slideshow = mwSlideshow.querySelector('.slideshow');
         const slideshow = mwSlideshow.querySelector('.slideshow');
         if (slideshow) {
         if (!slideshow) return;
            // Get the current computed height of the slideshow (based on content)
            const computedHeight = slideshow.scrollHeight;


            // Apply that height directly to the parent container
        const activeSlide = slideshow.querySelector('div[style*="block"]') || slideshow.querySelector('div');
            mwSlideshow.style.height = computedHeight + 'px';


             // Optional: If you want to also resize the parent on window resize
        if (activeSlide) {
            window.addEventListener('resize', () => {
            const img = activeSlide.querySelector('img');
                 mwSlideshow.style.height = slideshow.scrollHeight + 'px';
             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';
             }
         }
         }
     }
     }
Line 21: Line 30:


             if (slideshow) {
             if (slideshow) {
                 // Remove inline styles from slideshow and slides
                 // Nuke bad inline styles (MediaWiki injected)
                 slideshow.style.width = '';
                 slideshow.style.width = '';
                 slideshow.style.height = '';
                 slideshow.style.height = '';
Line 29: Line 38:
                 });
                 });


                 // Immediately resize the parent to match slideshow height
                 // Initial resize
                 resizeSlideshowContainer(mwSlideshow);
                 resizeSlideshowContainer(mwSlideshow);


                 // Observe changes to keep it dynamic (slides changing, etc.)
                 // Observe for new slides / style changes (e.g., slide transitions)
                 const observer = new MutationObserver(() => {
                 const observer = new MutationObserver(() => {
                     resizeSlideshowContainer(mwSlideshow);
                     resizeSlideshowContainer(mwSlideshow);
Line 43: Line 52:
                     subtree: true
                     subtree: true
                 });
                 });
                // Optional: Resize on window resize too (for good measure)
                window.addEventListener('resize', () => resizeSlideshowContainer(mwSlideshow));
             }
             }
         });
         });
     }
     }


     // Init once DOM is ready
     // Init on page load
     if (document.readyState === 'complete' || document.readyState === 'interactive') {
     if (document.readyState === 'complete' || document.readyState === 'interactive') {
         cleanAndResizeSlideshows();
         cleanAndResizeSlideshows();
Line 53: Line 65:
         document.addEventListener('DOMContentLoaded', cleanAndResizeSlideshows);
         document.addEventListener('DOMContentLoaded', cleanAndResizeSlideshows);
     }
     }
   
   
     function cleanSlideshowStyles(slideshowContainer) {
     function cleanSlideshowStyles(slideshowContainer) {
         const slideshow = slideshowContainer.querySelector('.slideshow');
         const slideshow = slideshowContainer.querySelector('.slideshow');
Retrieved from "https://continuum-universes.com/wiki/MediaWiki:Common.js"