https://pasoschools.org/js/components/post-feed/rows-pagination.js

1/**
2 * Rows Pagination
3 * Uses slick library for pagination of news articles with DISPLAY_STYLE_ROWS when there are more than 5 articles
4 */
5
6(() => {
7    const ARTICLES_PER_PAGE = 5;
8
9    // Initialize slick pagination for rows with more than 5 articles
10    const initializeRowsPagination = () => {
11        const rowsPaginationSliders = $('.news-feed-rows .ss-carousel-inner');
12
13        rowsPaginationSliders.each(function() {
14            const rowsSlider = $(this);
15
16            if (!rowsSlider.hasClass('slick-initialized')) {
17                // Find the pagination container
18                const newsFeedRows = rowsSlider.closest('.news-feed-rows');
19                const paginationContainer = newsFeedRows.find('.pagination');
20
21                // Add accessibility features
22                if (typeof window.slickSliderA11y === 'function') {
23                    window.slickSliderA11y(rowsSlider, rowsSlider.closest('.news-feed-rows'));
24                }
25
26                // Initialize slick with pagination settings
27                rowsSlider.slick({
28                    infinite: false,
29                    slidesToShow: 1,
30                    slidesToScroll: 1,
31                    adaptiveHeight: true,
32                    prevArrow: paginationContainer.find('.prev_link'),
33                    nextArrow: paginationContainer.find('.next_link'),
34                    speed: 500
35                });
36
37                // Handle pagination clicks for all navigation links
38                paginationContainer.find('a[data-slide]').on('click', function(e) {
39                    e.preventDefault();
40                    e.stopPropagation();
41                    e.stopImmediatePropagation();
42
43                    const slideData = $(this).data('slide');
44
45                    if (typeof slideData === 'number') {
46                        rowsSlider.slick('slickGoTo', slideData, false);
47                    } else if (slideData === 'last') {
48                        const totalSlides = rowsSlider.slick('getSlick').slideCount;
49                        rowsSlider.slick('slickGoTo', totalSlides - 1, false);
50                    } else if (slideData === 0) {
51                        rowsSlider.slick('slickGoTo', 0, false);
52                    } else if (slideData === 'prev') {
53                        rowsSlider.slick('slickPrev');
54                    } else if (slideData === 'next') {
55                        rowsSlider.slick('slickNext');
56                    }
57                });
58
59                // Sync pagination UI when slick changes
60                rowsSlider.on('afterChange', function(_e, slick, currentSlide) {
61                    const controller = window.SS && window.SS.pagination && window.SS.pagination.getController(paginationContainer[0]);
62                    if (controller && controller.setIndex) {
63                        controller.setIndex(currentSlide, { silent: true });
64                    }
65                });
66
67                // When pagination UI changes (via API), move the slider
68                paginationContainer[0].addEventListener('ss:pagination:changed', function(ev) {
69                    const index = ev && ev.detail ? ev.detail.index : null;
70                    if (typeof index === 'number') {
71                        rowsSlider.slick('slickGoTo', index, false);
72                    }
73                });
74            }
75        });
76    };
77
78    // Initialize on document ready
79    $(document).ready(() => {
80        initializeRowsPagination();
81    });
82
83})();