ginou/scripts/pagination.js

function paginationInit(data, paintingList, explorer)
{
    function getPageRange()
    {
        if (window.innerWidth >= 600)
            return explorer ? 6 : null;
        else if (window.innerWidth < 600 && window.innerWidth > 450)
            return 4;
        else
            return 1;
    }

    var options = 
    {
        dataSource: paintingList,
        pageSize: pageSize,
        pageRange: getPageRange(),
        className: 'paginationjs-theme-ginou',
        hideWhenLessThanOnePage: true,
        callback: function (response, pagination)
        {
            currentPage = pagination.pageNumber;

            // fix to have two synced pagination bars
            var paginationClone = $("#pagination > *").clone(true);
            $("#pagination-sec").empty();
            paginationClone.appendTo("#pagination-sec");

            // url handling
            if (explorer)
            {
                urlParams = new URLSearchParams(window.location.search)
                if (urlParams.get('page') == undefined)
                {
                    window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
                }
                else
                {
                    trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
                    window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
                }
            }
            else
            {
                window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
            }

            if (previousArray.length > 0)
            {
                for (i of previousArray)
                    $('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
            }

            previousArray = response;
            
            infoArray = []
            for (a of response)
            {
                for (d of data)
                {
                    if (a == d.number)
                        infoArray.push({"number": d.number, "photo": d.photo});
                }
            }

            $.each(response, function(index, item)
            {
                for (i of infoArray)
                {
                    if (i.number == item)
                    {
                        $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"]').parent().removeClass("inactive").addClass("active");
                        if (i.photo != "none")
                            $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "photos/paintings/mini/" + item + ".jpg");
                        else
                            $('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "images/unknown.jpg");
                    }
                }
            });
        }
    };

    $('#pagination').pagination(options);
}