MediaWiki:Common.js: Difference between revisions
Appearance
Cdjensen94 (talk | contribs) No edit summary |
Cdjensen94 (talk | contribs) No edit summary |
||
Line 53: | Line 53: | ||
document.addEventListener('DOMContentLoaded', cleanAndResizeSlideshows); | document.addEventListener('DOMContentLoaded', cleanAndResizeSlideshows); | ||
} | } | ||
function cleanSlideshowStyles(slideshowContainer) { | function cleanSlideshowStyles(slideshowContainer) { | ||
const slideshow = slideshowContainer.querySelector('.slideshow'); | const slideshow = slideshowContainer.querySelector('.slideshow'); |
Revision as of 13:02, 3 March 2025
(function() {
function resizeSlideshowContainer(mwSlideshow) {
const slideshow = mwSlideshow.querySelector('.slideshow');
if (slideshow) {
// Get the current computed height of the slideshow (based on content)
const computedHeight = slideshow.scrollHeight;
// Apply that height directly to the parent container
mwSlideshow.style.height = computedHeight + 'px';
// Optional: If you want to also resize the parent on window resize
window.addEventListener('resize', () => {
mwSlideshow.style.height = slideshow.scrollHeight + 'px';
});
}
}
function cleanAndResizeSlideshows() {
document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
const slideshow = mwSlideshow.querySelector('.slideshow');
if (slideshow) {
// Remove inline styles from slideshow and slides
slideshow.style.width = '';
slideshow.style.height = '';
slideshow.querySelectorAll('div').forEach(slide => {
slide.style.width = '';
slide.style.height = '';
});
// Immediately resize the parent to match slideshow height
resizeSlideshowContainer(mwSlideshow);
// Observe changes to keep it dynamic (slides changing, etc.)
const observer = new MutationObserver(() => {
resizeSlideshowContainer(mwSlideshow);
});
observer.observe(slideshow, {
attributes: true,
attributeFilter: ['style'],
childList: true,
subtree: true
});
}
});
}
// Init once DOM is ready
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);
}
})();