https://www.kpluss.com/system/modules/com.kpluss.websites.design.kpluss_2019/resources/js/list.js

1/** Javascript required for dynamic lists.
2* SHOULD BE IMPROVED OR INTEGRATED INTO OTHER JS.
3*/
4var List = function() {
5	function updateFilter(cid, eid, i) {
6		var state = updateAndGetState(eid, i);
7		reloadList(cid, eid, state);
8	}	
9	
10	function removeOldValues(url,oldFromValue,oldToValue,oldPageValue, anchor){
11		url = url.replace('?from='+oldFromValue,'').replace('&from='+oldFromValue,'');
12		url = url.replace('?to='+oldToValue,'').replace('&to='+oldToValue,'');
13		url = url.replace('?page='+oldPageValue,'').replace('&page='+oldPageValue,'');
14		var hashIndex = url.indexOf('#');
15		if (hashIndex > -1) {
16			localParams = url.substring(hashIndex);
17			url = url.substring(0,hashIndex);
18		}
19		return url+"#"+anchor;
20	}
21	
22	function resetFiltersNoAjax(oldFromValue,oldToValue,oldPageValue,anchor){
23		window.location.href = removeOldValues(window.location.href,oldFromValue,oldToValue,oldPageValue,anchor);
24	}
25	
26	function updateFilterNoAjax(fromName,toName,oldFromValue,oldToValue,oldPageValue,anchor){
27		var fromBox = document.querySelector('#' + anchor + " input[name=" + fromName + "]");
28		var fromValue = fromBox.value;
29		var toBox = document.querySelector('#' + anchor + " input[name=" + toName + "]");
30		var toValue = toBox.value;
31		var url = removeOldValues(window.location.href,oldFromValue,oldToValue,oldPageValue,anchor);
32		var localParams = "";
33		var hashIndex = url.indexOf('#');
34		if (hashIndex > -1) {
35			localParams = url.substring(hashIndex);
36			url = url.substring(0,hashIndex);
37		}
38		if (url.indexOf('?') > -1){
39   			url += '&from='+fromValue+"&to="+toValue;
40		}else{
41   			url += '?from='+fromValue+"&to="+toValue;
42		}
43		window.location.href = url+localParams;
44	}
45	
46	function updateAndGetState(eid, i) {
47		var fromBox = document.querySelector('#l_' + eid + ' .list-filter-range-start');
48		var fromValue = fromBox.options[fromBox.selectedIndex].value;
49		var toBox = document.querySelector('#l_' + eid + ' .list-filter-range-end');
50		var toValue = toBox.options[toBox.selectedIndex].value;
51		var hasActiveFilters = fromValue || toValue || false;
52		var state = 'reloaded&from=' + fromValue + '&to=' + toValue;
53		var filterButtons = document.querySelectorAll('#l_' + eid + ' .list-type-filter>button');
54		filterButtons.forEach(function (btn, idx) {
55			// a bit tricky code, since the class update happens after the JS is triggered
56			var hasSelectedClass = btn.classList.contains('mdc-chip--selected');
57			if (hasSelectedClass && idx != i || !hasSelectedClass && idx == i) {
58				hasActiveFilters=true;
59				state = state + '&facet_type=' + btn.dataset.list;
60			}
61		});
62		enableResetFilterButton(eid, hasActiveFilters);
63		return state;
64
65	}
66	function enableResetFilterButton(eid, enable) {
67		var resetBtn = document.querySelector('#l_' + eid + ' .list-reset-filter-button');
68		var isDisabled = resetBtn.classList.contains('button--disabled');
69		if (isDisabled && enable) {
70			resetBtn.classList.remove('button--disabled');
71		} else if (!enable && !isDisabled) {
72			resetBtn.classList.add('button--disabled');
73		}
74	}
75	function resetFilters(cid, eid) {
76		resetState(eid);
77		reloadList(cid, eid);
78	}
79	function resetState(eid) {
80		var fromBox = document.querySelector('#l_' + eid + ' .list-filter-range-start');
81		fromBox.selectedIndex = 0;
82		var toBox = document.querySelector('#l_' + eid + ' .list-filter-range-end');
83		toBox.selectedIndex = 0;
84		var filterButtons = document.querySelectorAll('#l_' + eid + ' .list-type-filter>button');
85		filterButtons.forEach(function (btn, idx) {
86			// a bit tricky code, since the class update happens after the JS is triggered
87			var isSelected = btn.classList.contains('mdc-chip--selected');
88			if (isSelected) {
89				btn.classList.remove('mdc-chip--selected');
90			}
91		});
92		enableResetFilterButton(eid, false);		
93	}
94	function reloadList(cid, eid,params) {
95		var listData = JSON.parse(document.getElementById('l_' + eid).dataset.list)
96		var xhr = new XMLHttpRequest();
97		var url = listData.ajaxUri + '?__locale=' + listData.locale + '&cid=' + cid + '&eid=' + eid + '&psize=' + listData.pageSize + '&uri=' + encodeURIComponent(listData.pageUri) + (undefined != params ? ('&' + params) : '');
98		xhr.open('GET', url);
99		xhr.onload = function() {
100			if (xhr.status === 200) {
101				replaceListHtml(eid, xhr.responseText);
102			} else {
103				//TODO: Something useful.
104				alert('Request failed.  Returned status of ' + xhr.status);
105			}
106		};
107		xhr.send();
108	}
109	function replaceListHtml(eid, newListHtml) {
110		var elem = document.getElementById("lb_" + eid);
111		elem.innerHTML = newListHtml;
112		// No edit buttons needed currently.
113		// reinitEditButtons();
114	}
115	function reinitEditButtons() {
116		if (typeof opencms != 'undefined' && typeof opencms.reinitializeEditButtons === 'function') {
117			opencms.reinitializeEditButtons();
118		}
119	}
120	return {
121		resetFiltersNoAjax:resetFiltersNoAjax,
122		updateFilterNoAjax: updateFilterNoAjax,
123		updateFilter : updateFilter,
124		resetFilters : resetFilters,
125		reloadList : reloadList
126	}
127}();