https://pbsc.edu/_resources/js/wparticlesListing.js

1let wp_articlesPerPage = 2;
2let wp_currentPage = 1;
3let wp_totalPages = 0;
4let articles = [];
5
6document.addEventListener('DOMContentLoaded', () => {
7	// Find the target div with articles
8	const articlesContainer = document.querySelector('div.relatedarticles.wp_articles');
9
10	if (articlesContainer) {
11		// Get JSON URL from data attribute
12		const jsonUrl = articlesContainer.getAttribute('data-json-url');
13
14		if (jsonUrl) {
15			// Fetch articles from the dynamically specified URL
16			fetch(jsonUrl)
17				.then(response => response.json())
18				.then(data => {
19				// Assuming the new JSON format has 'items' as the key for articles
20				articles = data.items;
21				updatewp_articlesPerPage(); // Call to set initial articles per page based on screen width
22				renderArticles(wp_currentPage);
23				// Event listener for screen resize to update articles per page
24				window.addEventListener('resize', updatewp_articlesPerPage);
25			})
26				.catch(error => console.error('Error fetching articles:', error));
27		} else {
28			console.error('No JSON URL specified in data-json-url attribute');
29		}
30	} 
31});
32// Function to update articles per page based on screen width
33function updatewp_articlesPerPage() {
34	const screenWidth = window.innerWidth;
35	if (screenWidth < 768) {
36		// For screens less than 768px (mobile), show 1 article per page
37		wp_articlesPerPage = 1;
38	} else {
39		// For screens 992px and above, revert to default (2 articles per page)
40		wp_articlesPerPage = 2;
41	}
42	// Re-render articles with updated pagination
43	renderArticles(wp_currentPage);
44}
45
46function extractFirstImageSrc(htmlContent) {
47	const tempDiv = document.createElement('div');
48	tempDiv.innerHTML = htmlContent;
49	const firstImage = tempDiv.querySelector('img');
50	return firstImage ? firstImage.getAttribute('src') : '';
51}
52
53function generateArticleHTML(article) {
54	return `
55<div class="col-12 col-md-6">
56<div class="griddedtilesmainbox">
57<h3 class="heading4">${article.title}</h3>
58<div class="griddedtilesmainboxImg">
59<img src="${extractFirstImageSrc(article.content_html)}" alt="${article.title}" width="361" height="197" loading="lazy">
60</div>
61<div class="griddedtilesmainboxCont">
62<p>${article.content_text.split(' ').slice(0, 30).join(' ')}...</p>
63<a href="${article.url}" class="btn link_btn"><span>Read More</span><span class="material-symbols-outlined">arrow_circle_right</span></a>
64</div>
65</div>
66</div>
67`;
68}
69
70function renderArticles(page) {
71	const container = document.querySelector('.relatedarticlesMain > .row');
72	container.innerHTML = '';
73
74	let start = (page - 1) * wp_articlesPerPage;
75	let end = start + wp_articlesPerPage;
76	let paginatedArticles = articles.slice(start, end);
77
78	paginatedArticles.forEach(article => {
79		container.innerHTML += generateArticleHTML(article);
80	});
81
82	updatePagination();
83}
84
85function updatePagination() {
86	wp_totalPages = Math.ceil(articles.length / wp_articlesPerPage);
87	generatePaginationControls();
88}
89
90function navigatePage(page) {
91	if (page < 1 || page > wp_totalPages) return;
92	wp_currentPage = page;
93	renderArticles(wp_currentPage);
94	// Scroll to the .relatedarticles-scroll section
95	const scrollSection = document.querySelector('.relatedarticles-scroll');
96	if (scrollSection) {
97		scrollSection.scrollIntoView({ behavior: 'smooth' });
98	}
99	// Focus on the first article's link button
100	focusOnFirstLinkButton();
101}
102
103function focusOnFirstLinkButton() {
104	const firstLinkButton = document.querySelector('.relatedarticlesMain .griddedtilesmainboxCont .link_btn');
105	if (firstLinkButton) {
106		firstLinkButton.focus();
107	}
108}
109
110function generatePaginationControls() {
111	const paginationControls = document.querySelector('.paginationControls');
112	paginationControls.innerHTML = '';
113
114	if (wp_totalPages > 1) {
115		const prevButton = document.createElement('button');
116		prevButton.innerHTML = 'Previous <span class="material-symbols-outlined">arrow_circle_left</span>';
117		prevButton.addEventListener('click', function (event) {
118			event.preventDefault();
119			navigatePage(wp_currentPage - 1);
120		});
121		prevButton.classList.add('primary_btn','btn', 'prev');
122		prevButton.setAttribute('aria-label', 'previous');
123		if (wp_currentPage === 1) {
124			prevButton.disabled = true;
125		}
126		paginationControls.appendChild(prevButton);
127
128		let startIdx;
129		let endIdx;
130
131		if (wp_totalPages <= 5 || wp_currentPage <= 3) {
132			startIdx = 1;
133			endIdx = Math.min(wp_totalPages, 5);
134		} else if (wp_currentPage >= wp_totalPages - 2) {
135			startIdx = Math.max(wp_totalPages - 4, 1);
136			endIdx = wp_totalPages;
137		} else {
138			startIdx = wp_currentPage - 2;
139			endIdx = wp_currentPage + 2;
140		}
141
142		for (let i = startIdx; i <= endIdx; i++) {
143			const pageButton = document.createElement('button');
144			pageButton.textContent = i;
145			pageButton.setAttribute('aria-label', i);
146			if (i === wp_currentPage) {
147				pageButton.classList.add('active');
148			}
149			pageButton.classList.add('page-index');
150			pageButton.addEventListener('click', function (event) {
151				event.preventDefault();
152				navigatePage(i);
153			});
154			paginationControls.appendChild(pageButton);
155		}
156
157		if (wp_totalPages > 5) {
158			const ellipsis = document.createElement('span');
159			ellipsis.classList.add('page-index', 'ellipsis-index');
160			ellipsis.textContent = '...';
161			paginationControls.appendChild(ellipsis);
162		}
163
164		if (wp_totalPages > 5) {
165			const lastPageButton = document.createElement('button');
166			lastPageButton.classList.add('page-index', 'lastPageButton');
167
168			lastPageButton.textContent = wp_totalPages;
169			lastPageButton.setAttribute('aria-label', wp_totalPages);
170			lastPageButton.addEventListener('click', function (event) {
171				event.preventDefault();
172				navigatePage(wp_totalPages);
173			});
174			paginationControls.appendChild(lastPageButton);
175		}
176
177		// Check if the last five page numbers are being displayed
178		const progLastFivePages = wp_totalPages - 2;
179		if (wp_currentPage >= progLastFivePages) {
180			paginationControls.classList.add('lastFivePages');
181		} else {
182			paginationControls.classList.remove('lastFivePages');
183		}
184
185		const nextButton = document.createElement('button');
186		nextButton.innerHTML = 'Next <span class="material-symbols-outlined">arrow_circle_right</span>';
187		nextButton.addEventListener('click', function (event) {
188			event.preventDefault();
189			navigatePage(wp_currentPage + 1);
190		});
191		nextButton.classList.add('primary_btn','btn', 'next');
192		nextButton.setAttribute('aria-label', 'next');
193		if (wp_currentPage === wp_totalPages) {
194			nextButton.disabled = true;
195		}
196		paginationControls.appendChild(nextButton);
197	}
198}