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').each(function() {
        let raw = $(this).html();
        let files = raw.split('|').map(s => s.trim()).filter(s => s !== '');
        
        if (files.length === 0) return;

        let total = files.length;
        let items = files.map(function(fileWikitext, i) {
            let cls = 'hidden';
            if (i === 0) cls = 'active';
            else if (i === 1) cls = 'next';
            else if (i === total - 1 && total > 2) cls = 'prev';

            return '<div class="carousel-item ' + cls + '">'
                 + '<div class="carousel-image">' + fileWikitext + '</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);
            }
        }
    });
});