Wikireporter:Marek Mazurkiewicz/archiwum2021-07-12/common.js

Uwaga: aby zobaczyć zmiany po opublikowaniu, może zajść potrzeba wyczyszczenia pamięci podręcznej przeglądarki.

Firefox / Safari: Przytrzymaj Shift podczas klikania Odśwież bieżącą stronę, lub naciśnij klawisze Ctrl+F5, lub Ctrl+R (⌘-R na komputerze Mac)
Google Chrome: Naciśnij Ctrl-Shift-R (⌘-Shift-R na komputerze Mac)
Internet Explorer / Edge: Przytrzymaj Ctrl, jednocześnie klikając Odśwież, lub naciśnij klawisze Ctrl+F5
Opera: Naciśnij klawisze Ctrl+F5.

$(function (){
    // Nie uruchamiaj poza stroną główną
    var mainPageBodyClass = 'page-Wikireporter_Msz2001_Strona_główna';
    // var mainPageBodyClass = 'page-Strona_główna';
    if(!document.body.classList.contains(mainPageBodyClass)) return;

    var animationSpeed = 15000; // czas trwania obiegu w jedną stronę

    var sister_projects = document.getElementById('sister-projects');

    // Upewnij się, że pasek z projektami istnieje i da się animować
    if(sister_projects === null || sister_projects === undefined
        || sister_projects.animate === undefined) return;

    // Blokuje ręczne przewijanie
    sister_projects.parentNode.scroll(0, 0);
    sister_projects.parentNode.style.overflow = 'hidden';

    // Sprawdź przeglądarkę (https://stackoverflow.com/a/9851769/8127198)
    var isFirefox = typeof InstallTrigger !== 'undefined';

    var createAnimation = function () {
        // Ustaw zakończenie animacji
        // Firefox inaczej interpretuje 100% w calc(), dlatego potrzebuje wartości wyrażonej wprost
        // Powoduje to jednak, że przy zmianie rozmiaru okna, animację trzeba tworzyć od nowa
        var end = 'calc(-' + (sister_projects.scrollWidth + 8) + 'px + 100%)';
        if(isFirefox) end = (sister_projects.clientWidth - sister_projects.scrollWidth - 8) + 'px';

        // Stwórz animację
        return sister_projects.animate(
            [
                { marginLeft: '0' },
                { marginLeft: end }
            ],
            {
                duration: animationSpeed,
                easing: 'linear',
                direction: 'alternate',
                iterations: Infinity
            }
        );
    };

    // Uruchom animację
    var animation = createAnimation()

    // Dodaj zdarzenia myszy (wstrzymywanie i kontynuacja animacji)
    sister_projects.addEventListener('mouseenter', function () { animation.pause(); });
    sister_projects.addEventListener('mouseleave', function () { animation.play(); });

    // W Firefoksie należy rozpocząć animację od nowa, kiedy użytkownik zmieni rozmiar okna
    if(isFirefox){
        window.addEventListener('resize', function () {
            animation.cancel();
            animation = createAnimation();
        });
    }
});