https://www.peelenmaas.nl/framework/js/Search/components/pagination.js

1// https://www.algolia.com/doc/api-reference/widgets/pagination/js/#connector
2// Create the render function
3const renderPagination = (renderOptions, isFirstRender) => {
4    const {
5        pages,
6        currentRefinement,
7        nbPages,
8        isFirstPage,
9        isLastPage,
10        refine,
11        widgetParams,
12        createURL,
13    } = renderOptions;
14
15    const createPageEntry = (pageIndex, isCurrent) => {
16        return `
17<li>
18<a href="${createURL(pageIndex)}" data-value="${pageIndex}" class="paging__page ${isCurrent ? `paging__page--active` : ''}" 
19${isCurrent ? `aria-current="page" aria-label="${translator.translate('search.pagination.page')} ${pageIndex + 1}"` : ''}>
20${!isCurrent ? `<span class="sr-only">${translator.translate('search.pagination.page')}&nbsp;</span>` : ''} ${pageIndex + 1}</a></li>`;
21    }
22
23    const threeDots = '…';
24    const translator = widgetParams.translator;
25
26    if (nbPages > 1) {
27        widgetParams.container.innerHTML = `
28<nav class="paging" aria-label="${translator.translate('search.pagination.pagination')}">
29<ul class="paging__pages">
30
31<li class="paging__prev-wrapper">
32${ !isFirstPage ? `
33    <a href="${createURL(currentRefinement - 1)}" data-value="${currentRefinement - 1}" class="paging__prev" title="${translator.translate('search.pagination.previous_page')}">${widgetParams.previousWidget()}</a>
34` : `` }
35</li>
36
37    ${ (pages.length > 0 && pages[0] !== 0) ? createPageEntry(0, false) : `` }
38    ${ (pages.length > 0 && pages[0] > 1) ? `<li><span class="paging__more">${threeDots}</span></li>` : ``}
39    
40    ${ pages.map(page => createPageEntry(page, currentRefinement === page)).join('')}
41    ${ (pages.length > 0 && pages[pages.length - 1] <= nbPages - 3) ? `<li><span class="paging__more">${threeDots}</span></li>` : ``}
42    ${ (pages.length > 0 && pages[pages.length - 1] !== nbPages - 1) ? createPageEntry(nbPages - 1, false) : `` }
43    
44<li class="paging__next-wrapper">
45${ !isLastPage ? `
46    <a href="${createURL(currentRefinement + 1)}" data-value="${currentRefinement + 1}" class="paging__next" title="${translator.translate('search.pagination.next_page')}">${widgetParams.nextWidget()}</a>
47` : `` }
48</li>
49
50</ul>
51</nav>
52`;
53    } else {
54        widgetParams.container.innerHTML = ``;
55    }
56
57    [...widgetParams.container.querySelectorAll('a')].forEach(element => {
58        element.addEventListener('click', event => {
59            event.preventDefault();
60            refine(event.currentTarget.dataset.value);
61
62            widgetParams.paginationClick();
63        });
64    });
65};
66
67// Create the custom widget
68export const customPagination = window.instantsearch ? instantsearch.connectors.connectPagination(
69    renderPagination
70) : () => null;