MediaWiki:Common.js: Difference between revisions

Line 5:

if (!slideshow) return;

// ~~Clear out any rogue inline styles~~

// Reset positioning to let the parent naturally size

slideshow.style.position = 'relative'; ~~// Let it sit naturally inside mw-jsslideshow~~

slideshow.style.position = 'relative';

slideshow.style.left = '';

slideshow.style.top = '';

slideshow.style.transform = '';

// ~~Make sure~~ mw-jsslideshow ~~fits~~ around slideshow

// Force `mw-jsslideshow` to wrap tightly around the slideshow

mwSlideshow.style.width = slideshow.scrollWidth + 'px';

mwSlideshow.style.height = slideshow.scrollHeight + 'px';

mwSlideshow.style.margin = '0 auto'; // Center ~~the whole box horizontally~~

mwSlideshow.style.margin = '0 auto'; // Center mw-jsslideshow itself

// Center each individual image ~~inside each~~ slide

// Center each individual image within its slide div

slideshow.querySelectorAll('div').forEach(slide => {

const img = slide.querySelector('img');

if (img) {

// ~~Make sure each~~ slide ~~is full-~~width ~~& centers its image~~

// Reset slide container spacing

slide.style.padding = '0';

slide.style.margin = '0';

slide.style.border = 'none';

slide.style.width = slideshow.scrollWidth + 'px';

slide.style.display = 'flex';

slide.style.justifyContent = 'center';

slide.style.alignItems = 'center';

slide.style.~~width~~ = ~~slideshow.scrollWidth +~~ 'px';

slide.style.boxSizing = 'border-box';

// Image centering & sizing

img.style.display = 'block';

img.style.maxWidth = '100%';

img.style.height = 'auto';

img.style.objectFit = 'contain';

img.style.margin = '0'; // Kill any ghost margin

}

});

Line 37:

Line 44:

resizeAndCenterSlideshow(mwSlideshow);

~~// Optional: Resize on window resize~~

window.addEventListener('resize', () => {

resizeAndCenterSlideshow(mwSlideshow);

});

~~// Observe for changes (like slide swaps)~~

const slideshow = mwSlideshow.querySelector('.slideshow');

if (slideshow) {

Line 59:

Line 64:

}

~~// Init when ready~~

if (document.readyState === 'complete' || document.readyState === 'interactive') {

initSlideshowResizer();