MediaWiki:Vector.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All JavaScript here will be loaded for users of the Vector skin */

// News slideshow for MediaWiki pages
mw.hook('wikipage.content').add(function($content) {
    // Find all news sliders on the page
    const sliders = $content.find('.news-slider');

    sliders.each(function() {
        const $slider = $(this);
        const $slides = $slider.find('.news-slide');
        let current = 0;

        // Hide all slides initially
        $slides.css({
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            opacity: 0,
            transition: 'opacity 0.5s ease-in-out'
        });

        // Show the first slide
        $slides.eq(0).css('opacity', 1);

        // Make the slider container relative
        $slider.css({
            position: 'relative',
            width: '100%',
            overflow: 'hidden',
            background: 'transparent'
        });

        // Make captions overlay
        $slider.find('.news-caption').css({
            position: 'absolute',
            bottom: 0,
            left: 0,
            width: '100%',
            background: 'rgba(0, 0, 0, 0.5)',
            color: '#fff',
            padding: '8px 12px',
            'box-sizing': 'border-box',
            'font-size': '0.9em'
        });

        // Optional: wrap the image if needed
        $slider.find('.news-image-wrap img').css({
            width: '100%',
            display: 'block'
        });

        // Slide rotation every 4 seconds
        setInterval(() => {
            $slides.eq(current).css('opacity', 0);        // hide current
            current = (current + 1) % $slides.length;    // next slide
            $slides.eq(current).css('opacity', 1);       // show next
        }, 4000);
    });
});



document.addEventListener('click', function (e) {
	const header = e.target.closest('.pf-collapsible');
	if (!header) return;

	const targetId = header.dataset.target;
	const section = document.getElementById(targetId);
	if (!section) return;

	const isOpen = section.style.display === 'block';
	section.style.display = isOpen ? 'none' : 'block';
});