https://heeg.de/files/CMSWebPageApplicationFiles/extendableCollectionScript.js

1/*****************************************************************************************
2*		SeaMS2.CMSExtendableCollectionScript
3******************************************************************************************
4CMSExtendableCollectionScript contains the javascript part of the More-Button that tells a CMSExtendableCollectionContainer to add more elements to the webpage
5*****************************************************************************************/
6
7(function(){
8//  --------------------------------------------------------------------------------------
9function main(){
10	window.addEventListener("load", function(){
11		var anchors = document.querySelectorAll("a[data-cms-task=extendable-load]");
12		anchors.forEach(element => element.addEventListener("click", clickedAnchor));
13	});
14	window.cmsExtensibleCollectionHandleInitialCall = function(targetId, json)
15	{
16		window.addEventListener("load", function(){
17			// do that only when load is complete. The handleJson operates on the anchor element and it may not yet be part of the DOM
18			handleJson(targetId, JSON.parse(json));
19		});
20	}
21}
22
23
24//  --------------------------------------------------------------------------------------
25function clickedAnchor(event) {
26	var anchor = event.target;
27	var targetId = anchor.getAttribute("data-cms-target");
28	var pageOffset = anchor.getAttribute("data-cms-page-offset");
29	var url = new URL(window.location.href);
30	var urlParams = new URLSearchParams(url.search);
31	urlParams.append("_pageOffset", pageOffset);
32	urlParams.append("_collectionId", targetId);
33	url.search = urlParams.toString();
34	fetch(url)
35	.then(response => response.json())
36	.then(json => handleJson(targetId, json));
37}
38
39
40//  --------------------------------------------------------------------------------------
41function handleJson(targetId, json){
42	console.log("handling json", targetId, json);
43	var anchor = document.querySelector("a[data-cms-task=extendable-load][data-cms-target=" + targetId + "]");
44	if (anchor)
45	{
46		anchor.setAttribute("data-cms-page-offset", json.pageOffset);
47		if (json.atEnd)
48		{
49			anchor.style ="display:none";
50		}
51	}
52	if (json.html)
53	{
54		var parent = document.querySelector(json.parent);
55		parent.insertAdjacentHTML('beforeend', json.html);
56		window.sbDidReplace(json.parent);
57	}
58}
59
60
61
62	main()
63})();