https://bbs-me.de/wp-content/themes/BBSME/src/dist/files/load-more.js?ver=1.0

1document.addEventListener("DOMContentLoaded", function () {
2	var loadMoreButton = document.getElementById("load-more");
3	if (loadMoreButton) {
4		var page = parseInt(loadMoreButton.getAttribute("data-page"));
5		var maxPages = parseInt(loadMoreButton.getAttribute("data-max-pages"));
6		var ajaxUrl = loadMoreButton.getAttribute("data-url");
7
8		// Ensure displayedPostIds is defined
9		if (typeof displayedPostIds === "undefined") {
10			var displayedPostIds = [];
11		}
12
13		loadMoreButton.addEventListener("click", function () {
14			// Show loading spinner
15			var spinner = document.createElement("div");
16			spinner.className = "spinner-border text-warning";
17			spinner.setAttribute("role", "status");
18			spinner.innerHTML = '<span class="visually-hidden">Loading...</span>';
19			loadMoreButton.parentNode.insertBefore(
20				spinner,
21				loadMoreButton.nextSibling
22			);
23
24			// Disable the button
25			loadMoreButton.disabled = true;
26
27			// Prepare data to send
28			var data = new FormData();
29			data.append("action", "loadmore");
30			data.append("page", page);
31			data.append("displayed_post_ids", JSON.stringify(displayedPostIds));
32
33			// If currentCatId is defined, include it
34			if (typeof currentCatId !== "undefined" && currentCatId !== 0) {
35				data.append("category_id", currentCatId);
36			}
37
38			// Create and send the AJAX request
39			var xhr = new XMLHttpRequest();
40			xhr.open("POST", ajaxUrl, true);
41
42			xhr.onload = function () {
43				if (xhr.status === 200) {
44					// Remove spinner
45					spinner.parentNode.removeChild(spinner);
46
47					// Enable the button

48					loadMoreButton.disabled = false;
49
50					if (xhr.responseText) {
51						// Create a temporary div to hold the response
52						var tempDiv = document.createElement("div");
53						tempDiv.innerHTML = xhr.responseText;
54
55						// Get the posts
56						var newPosts = tempDiv.children;
57
58						// Append new posts to the container
59						var postContainer = document.getElementById("post-container");
60
61						// Convert HTMLCollection to Array
62						var postsArray = Array.prototype.slice.call(newPosts);
63
64						// Fade in the new posts
65						postsArray.forEach(function (post) {
66							post.style.opacity = 0;
67							postContainer.appendChild(post);
68
69							// Use setTimeout to create fade-in effect
70							setTimeout(function () {
71								post.style.transition = "opacity 0.5s";
72								post.style.opacity = 1;
73							}, 50);
74						});
75
76						// Update displayedPostIds
77						var tempDivIds = tempDiv.querySelectorAll("[data-post-id]");
78						tempDivIds.forEach(function (element) {
79							var postId = element.getAttribute("data-post-id");
80							displayedPostIds.push(parseInt(postId));
81						});
82
83						// Increment the page
84						page++;
85						loadMoreButton.setAttribute("data-page", page);
86
87						// Remove the button if we have reached the max pages
88						if (page >= maxPages) {
89							loadMoreButton.parentNode.removeChild(loadMoreButton);
90						}
91					} else {
92						// No more posts
93						loadMoreButton.parentNode.removeChild(loadMoreButton);
94					}
95				} else {
96					console.error("Error loading posts");
97				}
98			};
99
100			xhr.onerror = function () {
101				console.error("Error during AJAX request");
102			};
103
104			xhr.send(data);
105		});
106	}
107});