MediaWiki:Vector.js: Difference between revisions

Revision as of 22:17, 24 January 2026 view source Admin (talk | contribs) ← Older edit		Revision as of 22:19, 24 January 2026 view source Admin (talk | contribs) Newer edit →
Line 1:		Line 1:
	/* All JavaScript here will be loaded for users of the Vector skin */		/* 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) {		document.addEventListener('click', function (e) {
Line 11:		Line 72:
	const isOpen = section.style.display === 'block';		const isOpen = section.style.display === 'block';
	section.style.display = isOpen ? 'none' : 'block';		section.style.display = isOpen ? 'none' : 'block';
	});
	mw.hook('wikipage.content').add(function($content) {
	const sliders = $content.find(".news-slider");
	sliders.each(function() {
	const slides = $(this).find(".news-slide");
	let current = 0;
	// Hide all slides except first
	slides.css('opacity', 0);
	slides.eq(0).css('opacity', 1);
	setInterval(() => {
	slides.eq(current).css('opacity', 0);
	current = (current + 1) % slides.length;
	slides.eq(current).css('opacity', 1);
	}, 4000); // 4 seconds per slide
	});
	});		});

Revision as of 22:19, 24 January 2026

/* 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';
});