|
|
| (33 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| (function() { | | mw.hook('wikipage.content').add(function () { |
| function resizeAndCenterSlideshow(mwSlideshow) {
| | const el = document.getElementById('article-countdown'); |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| | console.log('countdown hook fired; element is:', el); |
|
| |
|
| if (!slideshow) return;
| | if (!el) return; |
| | el.textContent = '✅ Countdown JS is running…'; |
|
| |
|
| // Clear out any rogue inline styles
| | const apiUrl = mw.util.wikiScript('api') + |
| slideshow.style.position = 'relative'; // Let it sit naturally inside mw-jsslideshow
| | '?action=query&meta=siteinfo&siprop=statistics&format=json&origin=*'; |
| slideshow.style.left = '0';
| |
| slideshow.style.top = '0';
| |
| slideshow.style.transform = '';
| |
|
| |
|
| // Make sure mw-jsslideshow fits around slideshow
| | fetch(apiUrl) |
| mwSlideshow.style.width = slideshow.scrollWidth + 'px';
| | .then(r => r.json()) |
| mwSlideshow.style.height = slideshow.scrollHeight + 'px';
| | .then(d => { |
| mwSlideshow.style.margin = '0 auto'; // Center the whole box horizontally
| | const current = d.query.statistics.articles; |
| | const goal = 1000; |
| | const left = goal - current; |
|
| |
|
| // Center each individual image inside each slide | | el.innerHTML = left > 0 |
| slideshow.querySelectorAll('div').forEach(slide => { | | ? `🚧 Only <strong>${left}</strong> articles to go until 1000!` |
| const img = slide.querySelector('img');
| | : `🎯 We've reached 1000 articles! Let's Go Boyz and Girlz!`; |
| if (img) {
| | }) |
| // Make sure each slide is full-width & centers its image
| | .catch(err => { |
| slide.style.display = 'flex';
| | el.textContent = 'API request failed (see console).'; |
| slide.style.justifyContent = 'center';
| | console.error(err); |
| slide.style.alignItems = 'center';
| | }); |
| slide.style.width = slideshow.scrollWidth + 'px';
| | }); |
|
| |
|
| img.style.maxWidth = '100%';
| |
| img.style.height = '100%';
| |
| img.style.objectFit = 'contain';
| |
| }
| |
| });
| |
| }
| |
|
| |
|
| function initSlideshowResizer() {
| | // MediaWiki:Common.js |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| | mw.hook('rcfilters.ui.initialized').add(function () { |
| resizeAndCenterSlideshow(mwSlideshow);
| | document.documentElement.classList.add('rcfilters-ready'); |
| | | }); |
| // Optional: Resize on window resize
| |
| window.addEventListener('resize', () => {
| |
| resizeAndCenterSlideshow(mwSlideshow);
| |
| });
| |
| | |
| // Observe for changes (like slide swaps)
| |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| const observer = new MutationObserver(() => {
| |
| resizeAndCenterSlideshow(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: true,
| |
| subtree: true
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| // Init when ready
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| initSlideshowResizer();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', initSlideshowResizer);
| |
| }
| |
|
| |
|
| |
| 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('wikipage.content').add(function () {
const el = document.getElementById('article-countdown');
console.log('countdown hook fired; element is:', el);
if (!el) return;
el.textContent = '✅ Countdown JS is running…';
const apiUrl = mw.util.wikiScript('api') +
'?action=query&meta=siteinfo&siprop=statistics&format=json&origin=*';
fetch(apiUrl)
.then(r => r.json())
.then(d => {
const current = d.query.statistics.articles;
const goal = 1000;
const left = goal - current;
el.innerHTML = left > 0
? `🚧 Only <strong>${left}</strong> articles to go until 1000!`
: `🎯 We've reached 1000 articles! Let's Go Boyz and Girlz!`;
})
.catch(err => {
el.textContent = 'API request failed (see console).';
console.error(err);
});
});
// MediaWiki:Common.js
mw.hook('rcfilters.ui.initialized').add(function () {
document.documentElement.classList.add('rcfilters-ready');
});
