MediaWiki:Common.js

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

mw.hook('wikipage.content').add(function($content) {
	$content.find('.yastre-carousel-raw').each(function() {
	    let $images = $(this).find('span[typeof="mw:File"]');
	    
	    if ($images.length === 0) return;
	
	    let total = $images.length;
	    let items = [];
	
	    $images.each(function(i) {
	        let cls = 'hidden';
	        if (i === 0) cls = 'active';
	        else if (i === 1) cls = 'next';
	        else if (i === total - 1 && total > 2) cls = 'prev';
	
	        items.push(
	            '<div class="carousel-item ' + cls + '">'
	          + '<div class="carousel-image">' + $(this).prop('outerHTML') + '</div>'
	          + '</div>'
	        );
	    });
	
	    let carouselHtml = '<div class="yastre-carousel-container">'
	                     + '<div class="yastre-carousel">'
	                     + items.join('')
	                     + '</div></div>';
	
	    $(this).replaceWith(carouselHtml);
	});

    $content.find('.yastre-carousel-container').each(function() {
        let $carousel = $(this);
        let $items = $carousel.find('.carousel-item');
        if ($items.length < 2) return;

        function updateCarousel(newIndex) {
            $items.removeClass('active prev next hidden');
            $items.addClass('hidden');

            let total = $items.length;
            let prevIndex = (newIndex - 1 + total) % total;
            let nextIndex = (newIndex + 1) % total;

            $items.eq(newIndex).removeClass('hidden').addClass('active');

            if (total > 2) {
                $items.eq(prevIndex).removeClass('hidden').addClass('prev');
                $items.eq(nextIndex).removeClass('hidden').addClass('next');
            } else if (total === 2) {
                $items.eq(nextIndex).removeClass('hidden').addClass('next');
            }
        }

        $carousel.on('click', '.carousel-item.prev, .carousel-item.next', function(e) {
            e.preventDefault();
            e.stopPropagation();

            let currIndex = $items.index($carousel.find('.active'));
            if ($(this).hasClass('prev')) {
                updateCarousel((currIndex - 1 + $items.length) % $items.length);
            } else {
                updateCarousel((currIndex + 1) % $items.length);
            }
        });

        let touchstartX = 0;
        let touchendX = 0;

        $carousel.on('touchstart', function(e) {
            touchstartX = e.changedTouches[0].screenX;
        }, { passive: true });

        $carousel.on('touchend', function(e) {
            touchendX = e.changedTouches[0].screenX;
            handleSwipe();
        }, { passive: true });

        function handleSwipe() {
            let currIndex = $items.index($carousel.find('.active'));
            if (touchendX < touchstartX - 40) {
                updateCarousel((currIndex + 1) % $items.length);
            }
            if (touchendX > touchstartX + 40) {
                updateCarousel((currIndex - 1 + $items.length) % $items.length);
            }
        }
    });
});