|
|
| (23 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| (function() { | | mw.hook('ext.popups').add(function() { |
| function resizeSlideshowContainer(mwSlideshow) { | | $('.mwe-popups-extract .portable-infobox').each(function() { |
| const slideshow = mwSlideshow.querySelector('.slideshow'); | | var $infobox = $(this); |
| if (!slideshow) return; | | var $firstParagraph = $('.mwe-popups-extract p:first'); |
|
| |
|
| const activeSlide = slideshow.querySelector('div[style*="block"]') || slideshow.querySelector('div'); | | // If there is a paragraph, move the infobox after it |
| | | if ($firstParagraph.length) { |
| if (activeSlide) { | | $infobox.insertAfter($firstParagraph); |
| const img = activeSlide.querySelector('img'); | | } else { |
| if (img) {
| | // If there's no paragraph, just hide the infobox |
| // Natural image dimensions (ideal fit)
| | $infobox.hide(); |
| 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';
| |
| }
| |
| } | | } |
| } | | }); |
| | | }); |
| function cleanAndResizeSlideshows() {
| |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| |
| const slideshow = mwSlideshow.querySelector('.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(() => {
| |
| resizeSlideshowContainer(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: true,
| |
| subtree: true
| |
| });
| |
| | |
| // Optional: Resize on window resize too (for good measure)
| |
| window.addEventListener('resize', () => resizeSlideshowContainer(mwSlideshow));
| |
| }
| |
| });
| |
| }
| |
| | |
| // Init on page load
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| cleanAndResizeSlideshows();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', cleanAndResizeSlideshows);
| |
| }
| |
|
| |
|
| |
| function cleanSlideshowStyles(slideshowContainer) {
| |
| const slideshow = slideshowContainer.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| // Remove inline styles on the main slideshow container
| |
| slideshow.style.width = '';
| |
| slideshow.style.height = '';
| |
| | |
| // Remove inline styles on each slide div
| |
| slideshow.querySelectorAll('div').forEach(slide => {
| |
| slide.style.width = '';
| |
| slide.style.height = '';
| |
| });
| |
| }
| |
| }
| |
| | |
| function initSlideshowFix() {
| |
| // Locate all mw-jsslideshow instances
| |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| |
| // Clean styles on page load
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| | |
| // Optional: Re-clean styles on window resize
| |
| window.addEventListener('resize', () => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| // Hook into slide transitions if needed (depends on the specific JS driving the slideshow)
| |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| const observer = new MutationObserver(() => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: false,
| |
| subtree: false
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| // Run once DOM is ready (in case the slideshows are injected late)
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| initSlideshowFix();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', initSlideshowFix);
| |
| }
| |
| })();
| |
| /* Any JavaScript here will be loaded for all users on every page load. */
| |
| (function() {
| |
| function cleanSlideshowStyles(slideshowContainer) {
| |
| const slideshow = slideshowContainer.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| // Remove inline styles on the main slideshow container
| |
| slideshow.style.width = '';
| |
| slideshow.style.height = '';
| |
| | |
| // Remove inline styles on each slide div
| |
| slideshow.querySelectorAll('div').forEach(slide => {
| |
| slide.style.width = '';
| |
| slide.style.height = '';
| |
| });
| |
| }
| |
| }
| |
| | |
| function initSlideshowFix() {
| |
| // Locate all mw-jsslideshow instances
| |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| |
| // Clean styles on page load
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| | |
| // Optional: Re-clean styles on window resize
| |
| window.addEventListener('resize', () => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| // Hook into slide transitions if needed (depends on the specific JS driving the slideshow)
| |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| const observer = new MutationObserver(() => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: false,
| |
| subtree: false
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| // Run once DOM is ready (in case the slideshows are injected late)
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| initSlideshowFix();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', initSlideshowFix);
| |
| }
| |
| })();
| |
mw.hook('ext.popups').add(function() {
$('.mwe-popups-extract .portable-infobox').each(function() {
var $infobox = $(this);
var $firstParagraph = $('.mwe-popups-extract p:first');
// If there is a paragraph, move the infobox after it
if ($firstParagraph.length) {
$infobox.insertAfter($firstParagraph);
} else {
// If there's no paragraph, just hide the infobox
$infobox.hide();
}
});
});