https://www.deutsche-digitale-bibliothek.de/assets/views/content/contentPagination.js

1var process = process || {env: {NODE_ENV: "development"}};
2/*
3 Copyright 2026 FIZ Karlsruhe - Leibniz-Institut fuer Informationsinfrastruktur GmbH
4
5 Licensed under the Apache License, Version 2.0 (the "License");
6 you may not use this file except in compliance with the License.
7 You may obtain a copy of the License at
8
9       https://www.apache.org/licenses/LICENSE-2.0
10
11 Unless required by applicable law or agreed to in writing, software
12 distributed under the License is distributed on an "AS IS" BASIS,
13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14 See the License for the specific language governing permissions and
15 limitations under the License.
16*/
17
18import {fetchJSON} from '../../helpers/requests.js';
19import {addParamToCurrentUrl} from "../../helpers/helpers.js";
20import {addImageItemsToImageContainer} from "./masonryResultsList.js";
21import {selectedFiltersEvents} from "../../components/selectedFilter.js";
22import {searchResultsEvents} from "../searchResults/searchResults.js";
23
24export const initContentPagination = () => {
25    bindFilterRemoved();
26    bindContentSortChanged();
27};
28
29const PARAM_OFFSET = 'offset';
30const PARAM_LOAD_MORE = 'loadMore';
31
32function fetchResults(itemsPerPage, offset) {
33    let url = new URL(document.URL);
34    let urlSP = url.searchParams;
35    const pageSum = itemsPerPage + offset;
36
37    urlSP.set(PARAM_OFFSET, pageSum.toString());
38    urlSP.set(PARAM_LOAD_MORE, 'true');
39
40    let newUrlParams = addParamToCurrentUrl([[PARAM_OFFSET, urlSP.get(PARAM_OFFSET)], [PARAM_LOAD_MORE, urlSP.get(PARAM_LOAD_MORE)]], location.href);
41    newUrlParams = newUrlParams.replaceAll('+', '%20');
42    url = new URL(location.origin + newUrlParams);
43    let searchResultsList = document.querySelector('#results-container');
44    const divSearchResultsOverlayModal = document.createElement('div');
45    divSearchResultsOverlayModal.classList.add('search-results-overlay-modal');
46    const divSearchResultsOverlayWaiting = document.createElement('div');
47    divSearchResultsOverlayWaiting.classList.add('search-results-overlay-waiting');
48    divSearchResultsOverlayWaiting.classList.add('spinner-load-more');
49    const divSearchResultsOverlayImg = document.createElement('div');
50    divSearchResultsOverlayImg.classList.add('spinner-border', 'spinner-border-size');
51    divSearchResultsOverlayWaiting.append(divSearchResultsOverlayImg);
52
53    if (searchResultsList) {
54        searchResultsList.appendChild(divSearchResultsOverlayModal);
55        searchResultsList.appendChild(divSearchResultsOverlayWaiting);
56    }

57    const loadMoreButton = document.querySelector('.load-more');
58
59    const getElementsPerRow = (searchResultsList) => {
60        let elementsPerRow = getComputedStyle(searchResultsList).columns;
61        if (elementsPerRow.includes(' ')) {
62            return parseInt(elementsPerRow.split(" ")[1]);
63        } else {
64            return parseInt(elementsPerRow);
65        }
66    };
67
68    getData(url).then(content => {
69        const imageItems = searchResultsList.querySelectorAll(".image-item");
70        if (imageItems.length > 0) {
71            let elementsPerRow = getElementsPerRow(searchResultsList);
72
73            addImageItemsToImageContainer(searchResultsList, imageItems, content.results, elementsPerRow);
74        } else {
75            content.results.forEach(function (el) {
76                var elem = document.createElement('div');
77                elem.innerHTML = `${el}`;
78                searchResultsList.append(elem.firstChild);
79            });
80        }
81
82        if (loadMoreButton) {
83            loadMoreButton.classList.remove('inactive');
84            if (content.pager.current_page === content.pager.total_pages - 1) {
85                loadMoreButton.classList.add("off");
86            }
87        }
88
89        divSearchResultsOverlayImg.remove();
90        divSearchResultsOverlayWaiting.remove();
91        divSearchResultsOverlayModal.remove();
92    }).catch((error) => {
93        console.log(error);
94        divSearchResultsOverlayImg.remove();
95        divSearchResultsOverlayWaiting.remove();
96        divSearchResultsOverlayModal.remove();
97    });
98
99}
100
101const DEFAULT_ITEMS_PER_PAGE = 20;
102const DEFAULT_OFFSET = 0;
103

104export const loadMore = () => {
105    const loadMoreButton = document.querySelector('.load-more');
106    if (loadMoreButton) {
107
108        const getDefaultValueIfInvalid = (attributeName, defaultValue) => {
109            const attributeValue = loadMoreButton.getAttribute(attributeName);
110            return attributeValue ? parseInt(attributeValue) : defaultValue;
111        };
112
113        const itemsPerPage = getDefaultValueIfInvalid('data-items-per-page', DEFAULT_ITEMS_PER_PAGE);
114
115        loadMoreButton.addEventListener('click', function (e) {
116            e.preventDefault();
117
118            loadMoreButton.classList.add('inactive');
119
120            const offset = getDefaultValueIfInvalid('data-offset', DEFAULT_OFFSET);
121
122            loadMoreButton.setAttribute('data-offset', offset + itemsPerPage);
123
124            fetchResults(itemsPerPage, offset);
125        });
126    }
127};
128
129const bindFilterRemoved = () => {
130    // Add listener for removing of filter from the selected filter section
131    document.addEventListener(selectedFiltersEvents.filterRemoved, function () {
132        resetOffset();
133    });
134};
135
136const bindContentSortChanged = () => {
137    // Add listener for result sort change
138    document.addEventListener(searchResultsEvents.contentSortChanged, function () {
139        resetOffset();
140    });
141};
142
143const resetOffset = () => {

144    const loadMoreButton = document.querySelector('.load-more');
145    if (loadMoreButton) {
146        loadMoreButton.setAttribute('data-offset', DEFAULT_OFFSET.toString());
147    }
148};
149
150async function getData(url) {
151    let response = await fetchJSON(url);
152    return await response.json();
153}
154