https://www.natcom.org/wp-content/themes/elevation-framework/lib/directory/assets/custom-directory.js

1class Directory {
2	filtersClass = '.filter';
3	selectedFilters = {
4		page: 1,
5	};
6	container;
7	baseUrl = wp_site_url + '/wp-json/wp/v2/';
8
9	constructor(container) {
10		this.container = container;
11		this.postType = this.container.dataset.postType;
12		this.taxonomy = this.container.dataset.taxonomy;
13		this.term = this.container.dataset.term;
14		this.clearFilterButton = document.getElementById('clear_filters');
15		this.getPrefilter();
16		this.updateFilters();
17		this.paginator();
18		this.filter();
19		this.clearFilter();
20	}
21
22	clearFilter() {
23		const clearFilter = this.clearFilterButton;
24		clearFilter?.addEventListener('click', (e) => {
25			e.preventDefault();
26			const keywordInput = document.querySelector('#keyword'); // Assuming an input field with id 'keyword'
27
28			if (keywordInput) {
29				keywordInput.value = '';
30			}
31
32			this.selectedFilters = {
33				page: 1,
34				taxonomy: this.taxonomy,
35				term: this.term,
36				keyword: '',
37			};
38			this.getDirectory();
39		});
40	}
41
42	updateFilters() {
43		const filters = document.querySelectorAll(this.filtersClass);
44		filters.forEach((filter) => {
45			filter.addEventListener('click', (e) => {
46				e.preventDefault();
47				const filter = e.target.value;
48				const idFilter = e.target.id;
49
50				if (filter) {
51					this.selectedFilters = {
52						...this.selectedFilters,
53						[idFilter]: filter,
54					};
55				}
56			});
57		});
58	}
59
60	getPrefilter() {
61		this.selectedFilters = {
62			...this.selectedFilters,
63			taxonomy: this.taxonomy,
64			term: this.term,
65			keyword: '',
66		};
67	}
68
69	paginator() {
70		const nav_links = document.querySelectorAll('.nav-links a');
71		nav_links.forEach((link) => {
72			link.addEventListener('click', (e) => {
73				e.preventDefault();
74				const currentLink = e.target;
75				if (currentLink.classList.contains('next')) {
76					if (!this.selectedFilters.page) {
77						this.selectedFilters = {
78							...this.selectedFilters,
79							page: 2,
80						};
81					} else {
82						this.selectedFilters = {
83							...this.selectedFilters,
84							page: this.selectedFilters.page + 1,
85						};
86					}
87				} else if (currentLink.classList.contains('prev')) {
88					this.selectedFilters = {
89						...this.selectedFilters,
90						page: this.selectedFilters.page - 1,
91					};
92				} else {
93					this.selectedFilters = {
94						...this.selectedFilters,
95						page: parseInt(currentLink.innerHTML),
96					};
97				}
98				this.getDirectory();
99			});
100		});
101	}
102
103	filter() {
104		const search = document.querySelectorAll('#search, .search_directory');
105		const keywordInput = document.querySelector('#keyword'); // Assuming an input field with id 'keyword'
106
107		const action = (e) => {
108			e.preventDefault();
109			this.selectedFilters.page = 1;
110			this.getDirectory();
111		};
112
113		if (keywordInput) {
114			keywordInput.addEventListener('input', (e) => {
115				this.selectedFilters.keyword = e.target.value;
116			});
117
118			keywordInput.addEventListener('keypress', (e) => {
119				if (e.key === 'Enter') {
120					action(e);
121				}
122			});
123		}
124
125		if (search?.length) {
126			search.forEach((s) => {
127				s.addEventListener('click', (e) => {
128					action(e);
129				});
130			});
131		}
132	}
133
134	parsedParams() {
135		const arrayParams = Object.entries(this.selectedFilters);
136		return arrayParams.map((param) => `${param[0]}=${param[1]}`).join('&');
137	}
138
139	toggleClearButton() {
140		const clearFilter = this.clearFilterButton;
141		const keywordInput = document.querySelector('#keyword'); // Assuming an input field with id 'keyword'
142		if (keywordInput) {
143			if (keywordInput.value !== '') {
144				clearFilter.classList.remove('d-none');
145			} else {
146				clearFilter.classList.add('d-none');
147			}
148		}
149	}
150
151	getDirectory() {
152		this.selectedFilters.taxonomy = this.taxonomy;
153		const data = this.parsedParams();
154		this.animation();
155		fetch(this.baseUrl + this.postType + '/get_custom_directory?' + data)
156			.then((response) => response.json())
157			.then((data) => {
158				this.container.innerHTML = data;
159				this.paginator();
160				this.toggleClearButton();
161			});
162	}
163
164	animation() {
165		this.container.innerHTML = '<span class="spiner-contain"></span>';
166	}
167}
168const directoryContainer = document.querySelector(
169	'.related-posts-taxonomy__directory'
170);
171
172if (directoryContainer) {
173	new Directory(directoryContainer);
174}