https://antenne-pfalz.de/wp-content/plugins/breakdance/plugin/elem…/pagination.js?bd_ver=3.0.0-beta.2

1(() => {
2  window.BreakdancePostsList = {
3    loadMorePostsInit,
4    infiniteScrollInit
5  };
6
7  async function loadMorePostsAndAppend({
8    selector,
9    postId,
10    id,
11    paged,
12    ssrFilePath
13  }) {
14    const body = new FormData();
15
16    body.append("action", "breakdance_posts_pagination_load_more");
17    body.append("postId", postId);
18    body.append("elementId", id);
19    body.append("paged", `${paged}`);
20    body.append("ssrFilePath", ssrFilePath);
21
22    /**
23     * @typedef {Object} data
24     * @property {string} html
25     * @property {number} maxNumberOfPages
26     * @property {string[]} inlineScripts
27     */
28
29    const { makeAjaxRequest } = window.BreakdanceFrontend.utils;
30
31    /**
32     * @type {data|null}
33     */
34    const response = await makeAjaxRequest(BreakdanceFrontend.data.ajaxUrl, {
35      method: "POST",
36      credentials: "same-origin",
37      body
38    })
39      .then(res => res.json())
40      .then(data => data?.data)
41      .catch(e => {
42        console.error(e);
43      });
44
45    if (response?.html) {
46      const element = document.querySelector(selector);
47      const container = element.querySelector(".ee-posts");
48
49      // Convert string to DOM elements
50      const parser = new DOMParser();
51      const parsedDocument = parser.parseFromString(response.html, "text/html");
52
53      const newPosts = parsedDocument.querySelectorAll(".ee-post");
54      const fragment = document.createDocumentFragment();
55
56      newPosts.forEach((post) => {
57        fragment.appendChild(post);
58      });
59
60      container.appendChild(fragment);
61
62      // Trigger event as the next page has been successfully loaded
63      const event = new CustomEvent("breakdance_infinite_scroll_loaded", {
64        detail: newPosts
65      });
66
67      element.dispatchEvent(event);
68    }
69
70    if (response?.inlineScripts) {
71      response.inlineScripts.forEach(scriptText => {
72        const scriptEle = document.createElement("script");
73        scriptEle.textContent = scriptText;
74        document.body.appendChild(scriptEle);
75      });
76    }
77
78    return response;
79  }
80
81  function loadMorePostsInit({ selector, postId, id }) {

82    const loadMoreButton = document.querySelector(
83      `${selector} .bde-posts-pagination-loadmore-button`
84    );
85
86    if (!loadMoreButton) return;
87
88    const ssrFilePath =
89      loadMoreButton.closest("[data-ssr-path]")?.dataset.ssrPath || "";
90
91    // load more won't change the URL, so we page it ourselves
92    let paged = 1;
93
94    loadMoreButton.addEventListener("click", async function() {
95      paged++;
96
97      loadMoreButton.classList.add("is-loading");
98
99      const response = await loadMorePostsAndAppend({
100        selector,
101        postId,
102        id,
103        paged,
104        ssrFilePath
105      });
106
107      if (!response || !response.html || response.maxNumberOfPages <= paged) {
108        loadMoreButton.style.display = "none";
109        return;
110      }
111
112      loadMoreButton.classList.remove("is-loading");
113    });
114  }
115
116  // https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_throttle
117  function throttle(func, timeFrame) {
118    let lastTime = 0;
119    return function(...args) {
120      const now = new Date();
121      if (now - lastTime >= timeFrame) {
122        func(...args);
123        lastTime = now;
124      }
125    };
126  }
127
128  function infiniteScrollInit({ selector, postId, id }) {
129    const element = document.querySelector(selector);
130    const loadingIndicatorElement = document.querySelector(
131      `${selector} .breakdance-form-loader`
132    );
133    let paged = 2;
134    let loading = false;
135    const ssrFilePath =
136      element.querySelector("[data-ssr-path]")?.dataset?.ssrPath || "";
137
138    async function scrollFunction() {
139      const scrollTop =
140        window.pageYOffset || document.documentElement.scrollTop;
141      const scrollBottom = scrollTop + window.innerHeight;
142
143      const { top, height } = element.getBoundingClientRect();
144      // "top" is relative to the viewport, to make it absolute we add scrollTop
145      const elementBottom = top + scrollTop + height;
146
147      if (scrollBottom >= elementBottom + 50 && !loading) {
148        if (loadingIndicatorElement) {
149          loadingIndicatorElement.style.display = "inline";
150        }
151
152        loading = true;
153        const response = await loadMorePostsAndAppend({
154          selector,
155          postId,
156          id,
157          paged,
158          ssrFilePath
159        });
160
161        loading = false;
162
163        if (loadingIndicatorElement) {
164          loadingIndicatorElement.style.display = "none";
165        }
166
167        if (!response || !response.html || response.maxNumberOfPages <= paged) {
168          document.removeEventListener("scroll", throttledScrollFunc);
169        }
170
171        paged++;
172      }
173    }
174
175    const throttledScrollFunc = throttle(scrollFunction, 150);
176
177    document.addEventListener("scroll", throttledScrollFunc);
178  }
179})();