https://high.org/wp-content/themes/icelander-child/assets/js/globa…/filters.js?t=1790849127&ver=1.0.0

1/**
2 * Functions for the filters component.
3 */
4
5function toggleFilterByContainerElement (expand = true) {
6	const filtersMobileToggleContainerElement = document.getElementsByClassName('at-filters-component-mobile-toggle-container')[0];
7	const filterByContainerElement = document.getElementsByClassName('at-filters-component-filter-by-container')[0];
8
9	if (window.matchMedia('(max-width: 879px)').matches) {
10		const toggleButton = filtersMobileToggleContainerElement.getElementsByClassName('at-filters-component-mobile-toggle-button')[0];
11
12		if (!expand && toggleButton.classList.contains('expanded')) {
13			const filtersDropdown = document.getElementById(toggleButton.getAttribute('aria-controls'));
14			const expandedElements = filtersDropdown.querySelectorAll('div.visible');
15
16			if (expandedElements.length) {
17				for (i = 0; i < expandedElements.length; i++) {
18					expandedElements[i].classList.toggle('visible');
19				}
20			}
21
22			expandCollapseMobileFilters(toggleButton);
23		}
24
25		if (!expand && filtersMobileToggleContainerElement.classList.contains('visible')) {
26			setTimeout(function () {
27				filtersMobileToggleContainerElement.classList.toggle('visible');
28			}, 275);
29		}
30
31		if (expand && !filtersMobileToggleContainerElement.classList.contains('visible')) {
32			filtersMobileToggleContainerElement.classList.toggle('visible');
33		}
34	} else {
35		if ((expand && !filterByContainerElement.classList.contains('visible')) || (!expand && filterByContainerElement.classList.contains('visible'))) {
36			filterByContainerElement.classList.toggle('visible');
37		}
38	}
39}
40
41function toggleFilterByElements (resultType, closeAll = false) {
42	let resultTypeElementsMap = {};
43	resultTypeElementsMap['collection'] = document.getElementsByClassName('at-filters-component-collections-filters-container')[0];
44	resultTypeElementsMap['exhibitions'] = document.getElementsByClassName('at-filters-component-exhibitions-filters-container')[0];
45	resultTypeElementsMap['events'] = document.getElementsByClassName('at-filters-component-events-filters-container')[0];
46	resultTypeElementsMap['teacher-resources'] = document.getElementsByClassName('at-filters-component-teacher-resources-filters-container')[0];
47
48	for (let resultTypeElement in resultTypeElementsMap) {
49		// We want to close all items and uncheck any checked elements
50		if (closeAll) {
51			if (resultTypeElementsMap[resultTypeElement].classList.contains('visible')) {
52				let expandedCategoryButtons = resultTypeElementsMap[resultTypeElement].querySelectorAll('button.at-filters-component-filter-by-legend.expanded');
53				let checkedCategoryFilters = resultTypeElementsMap[resultTypeElement].querySelectorAll('input:checked');
54
55				if (checkedCategoryFilters.length) {
56					clearCategoryCheckedFilters(checkedCategoryFilters);
57				}
58
59				if (expandedCategoryButtons.length) {
60					for (i = 0; i < expandedCategoryButtons.length; i++) {
61						expandCollapseFilterCategory(expandedCategoryButtons[i]);
62					}
63				}
64
65				resultTypeElementsMap[resultTypeElement].classList.toggle('visible');
66			}
67
68			continue;
69		}
70
71		if (resultTypeElement === resultType) {
72			// Only activate if the item isn't already expanded.
73			if (!resultTypeElementsMap[resultTypeElement].classList.contains('visible')) {
74				resultTypeElementsMap[resultTypeElement].classList.toggle('visible');
75			}
76		} else {
77			// Hide any visible components that aren't the one we want to show.
78			if (resultTypeElementsMap[resultTypeElement].classList.contains('visible')) {
79				let expandedCategoryButtons = resultTypeElementsMap[resultTypeElement].querySelectorAll('button.at-filters-component-filter-by-legend.expanded');
80				let checkedCategoryFilters = resultTypeElementsMap[resultTypeElement].querySelectorAll('input:checked');
81
82				if (checkedCategoryFilters.length) {
83					clearCategoryCheckedFilters(checkedCategoryFilters);
84				}
85
86				if (expandedCategoryButtons.length) {
87					for (i = 0; i < expandedCategoryButtons.length; i++) {
88						expandCollapseFilterCategory(expandedCategoryButtons[i]);
89					}
90				}
91
92				resultTypeElementsMap[resultTypeElement].classList.toggle('visible');
93			}
94		}
95	}
96}
97
98function filtersResultTypeListener (element) {
99	const resultType = element.getAttribute('value');
100
101	if (resultType !== 'all') {
102		toggleFilterByContainerElement(true);
103		toggleFilterByElements(resultType);
104	} else {
105		toggleFilterByContainerElement(false);
106
107		if (window.matchMedia('(max-width: 991px)').matches) {
108			setTimeout(function () {
109				toggleFilterByElements(resultType, true);
110			}, 275);
111		} else {
112			toggleFilterByElements(resultType, true);
113		}
114	}
115}
116
117function expandCollapseFilterCategory (element) {
118	const dropdown = document.getElementById(element.getAttribute('aria-controls'));
119	const expandIcon = element.getElementsByClassName('at-filters-component-expand-icon')[0];
120	const collapseIcon = element.getElementsByClassName('at-filters-component-collapse-icon')[0];
121
122	if (dropdown.classList.contains('expanded')) {
123		dropdown.classList.toggle('collapsed');
124		dropdown.classList.toggle('expanded');
125		element.setAttribute('aria-expanded', 'false');
126		element.classList.toggle('expanded');
127
128		setTimeout(function () {
129			expandIcon.classList.toggle('visible');
130			collapseIcon.classList.toggle('visible');
131		}, 250);
132	} else {
133		element.classList.toggle('expanded');
134		element.setAttribute('aria-expanded', 'true');
135		expandIcon.classList.toggle('visible');
136		collapseIcon.classList.toggle('visible');
137		dropdown.classList.toggle('expanded');
138		dropdown.classList.toggle('collapsed');
139	}
140}
141
142// Use the appropriate icon for the toggle depending on situation.
143function mobileFiltersChangeToggleIcon (status = 'regular') {
144	const regularFiltersIcon = document.getElementsByClassName('at-filters-component-mobile-filters-icon')[0];
145	const expandedFiltersIcon = document.getElementsByClassName('at-filters-component-mobile-filters-expanded-icon')[0];
146	const filledInFiltersIcon = document.getElementsByClassName('at-filters-component-mobile-filters-filled-in-icon')[0];
147
148	switch (status) {
149		case 'regular':
150			if (expandedFiltersIcon.classList.contains('visible')) {
151				expandedFiltersIcon.classList.toggle('visible');
152			}
153
154			if (filledInFiltersIcon.classList.contains('visible')) {
155				filledInFiltersIcon.classList.toggle('visible');
156			}
157
158			if (!regularFiltersIcon.classList.contains('visible')) {
159				regularFiltersIcon.classList.toggle('visible');
160			}
161			break;
162
163		case 'expanded':
164			if (regularFiltersIcon.classList.contains('visible')) {
165				regularFiltersIcon.classList.toggle('visible');
166			}
167
168			if (filledInFiltersIcon.classList.contains('visible')) {
169				filledInFiltersIcon.classList.toggle('visible');
170			}
171
172			if (!expandedFiltersIcon.classList.contains('visible')) {
173				expandedFiltersIcon.classList.toggle('visible');
174			}
175			break;
176
177		case 'filled in':
178			if (regularFiltersIcon.classList.contains('visible')) {
179				regularFiltersIcon.classList.toggle('visible');
180			}
181
182			if (expandedFiltersIcon.classList.contains('visible')) {
183				expandedFiltersIcon.classList.toggle('visible');
184			}
185
186			if (!filledInFiltersIcon.classList.contains('visible')) {
187				filledInFiltersIcon.classList.toggle('visible');
188			}
189			break;
190	}
191}
192
193function expandCollapseMobileFilters (element) {
194	const dropdown = document.getElementById(element.getAttribute('aria-controls'));
195
196	if (dropdown.classList.contains('expanded')) {
197		const expandedCategories = dropdown.querySelectorAll('.at-filters-component-filter-by-legend.expanded');
198
199		if (expandedCategories.length) {
200			for (i = 0; i < expandedCategories.length; i++) {
201				expandCollapseFilterCategory(expandedCategories[i]);
202			}
203		}
204		dropdown.classList.toggle('expanded');
205		element.setAttribute('aria-expanded', 'false');
206		element.classList.toggle('expanded');
207
208		if (areFiltersApplied()) {

209			mobileFiltersChangeToggleIcon('filled in');
210		} else {
211			mobileFiltersChangeToggleIcon();
212		}
213	} else {
214		element.classList.toggle('expanded');
215		element.setAttribute('aria-expanded', 'true');
216		dropdown.classList.toggle('expanded');
217
218		if (areFiltersApplied()) {
219			mobileFiltersChangeToggleIcon('filled in');
220		} else {
221			mobileFiltersChangeToggleIcon('expanded');
222		}
223	}
224}
225
226function areFiltersApplied () {
227	let filtersApplied = false;
228
229	let appliedFilters = document.querySelectorAll('.at-filters-component-filter-by-container input[type="checkbox"]:checked');
230
231	if (appliedFilters.length) {
232		filtersApplied = true;
233	}
234
235	return filtersApplied;
236}
237
238function toggleFiltersExcessItems (element) {
239	const filterItems = element.parentElement.querySelectorAll('div');
240
241	element.classList.toggle('expanded');
242
243	if (element.classList.contains('expanded')) {
244		element.textContent = '- Show less';
245	} else {
246		element.textContent = '+ Show all';
247	}
248
249	for (i = 9; i < filterItems.length; i++) {
250		if (element.classList.contains('expanded') && filterItems[i].classList.contains('hidden')) {
251			filterItems[i].classList.toggle('hidden');
252		} else if (!filterItems[i].classList.contains('hidden')) {
253			filterItems[i].classList.toggle('hidden');
254		}
255	}
256}
257
258function clearCategoryCheckedFilters (categoryCheckedItems) {
259	let collectionCheckedExtraFilters = document.querySelectorAll('.at-filters-component-collections-checkboxes-container input:checked');
260
261	if (collectionCheckedExtraFilters.length) {
262		for (i = 0; i < collectionCheckedExtraFilters.length; i++) {
263			collectionCheckedExtraFilters[i].checked = false;
264		}
265	}
266
267	if (categoryCheckedItems.length) {
268		for (i = 0; i < categoryCheckedItems.length; i++) {
269			categoryCheckedItems[i].checked = false;
270		}
271	}
272}
273
274async function clearAllFilters () {
275	let allExpandedCategoryButtons = document.querySelectorAll('.at-filters-component .at-filters-component-filter-by-legend.expanded');
276	let allCheckedItems = document.querySelectorAll('.at-filters-component .at-filters-component-filter-by-container input:checked');
277	let allExpandedExcessToggles = document.querySelectorAll('.at-filters-component .at-filters-component-show-all-button.expanded');
278	let allDateItems = document.querySelectorAll('.at-filters-component .at-filters-component-filter-by-container input.date-element');
279
280	if (allCheckedItems.length) {
281		for (i = 0; i < allCheckedItems.length; i++) {
282			allCheckedItems[i].checked = false;
283		}
284	}
285
286	if (allExpandedCategoryButtons.length) {
287		for (i = 0; i < allExpandedCategoryButtons.length; i++) {
288			expandCollapseFilterCategory(allExpandedCategoryButtons[i]);
289		}
290	}
291
292	if (allExpandedExcessToggles.length) {
293		for (i = 0; i < allExpandedExcessToggles.length; i++) {
294			toggleFiltersExcessItems(allExpandedExcessToggles[i]);
295		}
296	}
297
298	if (allDateItems.length) {
299		allDateItems.forEach((item, index) => {
300			item.value = '';
301		});
302	}
303
304	if (window.matchMedia('(max-width: 991px)').matches) {
305		mobileFiltersChangeToggleIcon('expanded');
306	}
307
308	window.scrollTo(0, 0);
309
310	const clearSearchButton = document.querySelector('.at-search-clear-button');
311
312	if (clearSearchButton) {
313		clearSearchButton.click();
314	}
315
316	await pageSearch.reloadPageBasedOnRadioActive();
317}
318
319async function filterExhibition (element, exhibitionType, page = null) {
320	let attrPage = element.getAttribute('data-current-page');
321
322	if (page) {
323		if (attrPage) {
324			page = attrPage ?? 1;
325		} else {
326			element.setAttribute('data-current-page', page);
327		}
328	} else {
329		page = attrPage ?? 1;
330	}
331
332	if (!element.classList.contains('active')) {
333		const mainTabElement = getMainTabElement(element);
334		const mainTabNavigation = mainTabElement.querySelector('.tabs-navigation');
335		const mainTabOutput = mainTabElement.querySelector('#tabs-output');
336
337		mainTabNavigation.classList.add('disabled');
338
339		addLoading(mainTabOutput);
340
341		// This function (fetchExhibitionContent) is being loaded by WP Core.
342		// It is located inside ./child-ajax-functions.js (/icelander-child/assets/js/child-ajax-functions.js)
343		const exhibitionContent = await fetchExhibitionContent(exhibitionType, page);
344		updateInnerHTML(mainTabOutput, exhibitionContent);
345
346		mainTabNavigation.classList.remove('disabled');
347
348		if (exhibitionType == 'past') {
349			if (page > 1) {
350				injectURL(exhibitionType, '/exhibitions/' + exhibitionType + '/page/' + page);
351			} else {
352				injectURL(exhibitionType, '/exhibitions/' + exhibitionType);
353			}
354		} else {
355			injectURL(exhibitionType, '/exhibitions/' + exhibitionType);
356		}
357	}
358}