Chưa có bài viết phù hợp.

'; return; } const html = articles.map(function (article) { const imageHtml = article.imageUrl ? '

' : ''; const dateHtml = article.publishDate ? ' ' + escapeHtml(formatDate(article.publishDate)) + '' : ''; const descriptionHtml = article.description ? '

' + escapeHtml(article.description) + '

' : ''; return '

' + '

' + imageHtml + '

' + '' + escapeHtml(article.title) + '' + '

' + dateHtml + descriptionHtml + '

' + '

'; }).join(''); articleListContainer.innerHTML = html; } function createPaginationButton(config) { const button = document.createElement('a'); button.className = 'pagination-btn'; if (config.extraClass) { button.className += ' ' + config.extraClass; } if (config.active) { button.classList.add('is-active'); } if (config.disabled) { button.setAttribute('aria-disabled', 'true'); button.style.pointerEvents = 'none'; button.style.opacity = '0.45'; button.href = '#'; } else if (typeof config.page === 'number') { button.dataset.page = String(config.page); button.href = buildPageHref(config.page); } else { button.href = '#'; } if (config.icon === 'prev' || config.icon === 'next') { const icon = document.createElement('i'); icon.className = config.icon === 'prev' ? 'material-symbols--arrow-forward-ios-rounded t:rotate-180 t:block' : 'material-symbols--arrow-forward-ios-rounded t:block'; button.appendChild(icon); button.setAttribute('aria-label', config.icon === 'prev' ? 'Trang trước' : 'Trang sau'); } else { button.textContent = String(config.label || ''); } return button; } function getPaginationRange(currentPage, totalPages) { const size = Math.min(PAGINATION_WINDOW, totalPages); // Keep the page window centered around currentPage whenever possible. let start = currentPage - Math.floor(size / 2); if (start < 1) start = 1; let end = start + size - 1; if (end > totalPages) { end = totalPages; start = Math.max(1, end - size + 1); } return { start: start, end: end }; } function renderPagination() { if (!paginationContainer) return; paginationContainer.innerHTML = ''; const currentPage = clampPage(state.currentPage, state.totalPages); const totalPages = Math.max(1, state.totalPages); const range = getPaginationRange(currentPage, totalPages); paginationContainer.appendChild(createPaginationButton({ icon: 'prev', page: currentPage - 1, disabled: currentPage <= 1, extraClass: 't:text-[#0A64B4]' })); for (let page = range.start; page <= range.end; page++) { paginationContainer.appendChild(createPaginationButton({ label: page, page: page, active: page === currentPage })); } paginationContainer.appendChild(createPaginationButton({ icon: 'next', page: currentPage + 1, disabled: currentPage >= totalPages, extraClass: 't:text-[#0A64B4]' })); } function ensureErrorNode() { if (!paginationContainer || !paginationContainer.parentNode) return null; let node = paginationContainer.parentNode.querySelector('.cate-pagination-error'); if (node) return node; node = document.createElement('p'); node.className = 'cate-pagination-error t:mt-3'; node.style.display = 'none'; node.style.color = '#B42318'; node.style.fontSize = '14px'; paginationContainer.parentNode.insertBefore(node, paginationContainer); return node; } function setErrorMessage(message) { const errorNode = ensureErrorNode(); if (!errorNode) return; if (!message) { errorNode.textContent = ''; errorNode.style.display = 'none'; return; } errorNode.textContent = message; errorNode.style.display = 'block'; } function setLoadingState(isLoading) { state.isLoading = isLoading; if (!articleListContainer || !paginationContainer) return; articleListContainer.style.opacity = isLoading ? '0.65' : ''; paginationContainer.style.pointerEvents = isLoading ? 'none' : ''; paginationContainer.style.opacity = isLoading ? '0.65' : ''; paginationContainer.setAttribute('aria-busy', isLoading ? 'true' : 'false'); } function getPageFromUrl() { try { const url = new URL(window.location.href); return parsePositiveInt(url.searchParams.get('page'), 1); } catch (error) { return 1; } } function getPageFromButton(button) { if (!button) return NaN; const datasetPage = parsePositiveInt(button.dataset && button.dataset.page, NaN); if (Number.isFinite(datasetPage)) return datasetPage; const href = button.getAttribute('href'); if (href && href !== '#') { try { const hrefUrl = new URL(href, window.location.origin); const hrefPage = parsePositiveInt(hrefUrl.searchParams.get('page'), NaN); if (Number.isFinite(hrefPage)) return hrefPage; } catch (error) { // Ignore malformed href and continue with other fallbacks. } } const labelPage = parsePositiveInt((button.textContent || '').trim(), NaN); if (Number.isFinite(labelPage)) return labelPage; const icon = button.querySelector('i'); if (!icon) return NaN; const iconClassName = icon.className || ''; if (iconClassName.indexOf('t:rotate-180') !== -1) return state.currentPage - 1; if (iconClassName.indexOf('material-symbols--arrow-forward-ios-rounded') !== -1) return state.currentPage + 1; return NaN; } function getCurrentPageFromDom() { if (!paginationContainer) return NaN; const activeButton = paginationContainer.querySelector('.pagination-btn.is-active'); if (!activeButton) return NaN; const currentPage = parsePositiveInt((activeButton.textContent || '').trim(), NaN); if (Number.isFinite(currentPage)) return currentPage; return getPageFromButton(activeButton); } function getTotalPagesFromDom() { if (!paginationContainer) return 1; const buttons = paginationContainer.querySelectorAll('.pagination-btn'); let maxPage = 1; for (let i = 0; i < buttons.length; i++) { const page = parsePositiveInt((buttons[i].textContent || '').trim(), NaN); if (Number.isFinite(page) && page > maxPage) { maxPage = page; } } return maxPage; } function buildPageHref(page) { try { const url = new URL(window.location.href); if (page <= 1) url.searchParams.delete('page'); else url.searchParams.set('page', String(page)); return url.pathname + url.search + url.hash; } catch (error) { return '#'; } } function syncUrlPage(page, mode) { if (!window.history || typeof window.history.pushState !== 'function') return; const method = mode === 'replace' ? 'replaceState' : 'pushState'; const href = buildPageHref(page); window.history[method]({ page: page }, '', href); } async function getArticle(page) { const safePage = parsePositiveInt(page, 1); const url = getArticleApiUrl(safePage); const response = await fetch(url, { method: 'GET', headers: { Accept: 'application/json' } }); if (!response.ok) { throw new Error('Fetch articles failed with status ' + response.status); } const payload = await response.json(); if (!payload || payload.success === false || !Array.isArray(payload.data)) { throw new Error('Invalid article response payload'); } const meta = payload.meta && typeof payload.meta === 'object' ? payload.meta : {}; const totalCount = parsePositiveInt(meta.total, 0); const remaining = totalCount > PAGINATION_OFFSET_START ? totalCount - PAGINATION_OFFSET_START : 0; const totalPages = remaining > 0 ? Math.ceil(remaining / PAGINATION_LIMIT) : 1; return { page: safePage, totalPages: totalPages, articles: payload.data.map(normalizeArticle) }; } async function loadPage(nextPage, options) { const opts = options && typeof options === 'object' ? options : {}; const targetPage = parsePositiveInt(nextPage, 1); if (state.isLoading) return; const requestId = state.requestId + 1; state.requestId = requestId; setLoadingState(true); setErrorMessage(''); try { const result = await getArticle(targetPage); if (requestId !== state.requestId) return; state.totalPages = Math.max(1, result.totalPages); state.currentPage = clampPage(result.page, state.totalPages); renderArticleList(result.articles); renderPagination(); if (opts.syncUrl !== false) { syncUrlPage(state.currentPage, opts.historyMode || 'push'); } if (opts.scrollToTop) { const targetTop = articleListContainer.getBoundingClientRect().top + window.pageYOffset - 62; window.scrollTo({ top: targetTop, behavior: 'smooth' }); } } catch (error) { if (requestId !== state.requestId) return; console.error('[cate-pagination] Failed to load page:', error); setErrorMessage('Không thể tải bài viết. Vui lòng thử lại.'); renderPagination(); } finally { if (requestId === state.requestId) { setLoadingState(false); } } } function onPaginationClick(event) { if (!paginationContainer) return; const target = event.target; if (!target || typeof target.closest !== 'function') return; const button = target.closest('.pagination-btn'); if (!button || !paginationContainer.contains(button)) return; event.preventDefault(); if (state.isLoading) return; if (button.getAttribute('aria-disabled') === 'true') return; let nextPage = getPageFromButton(button); if (!Number.isFinite(nextPage)) return; const maxPage = state.totalPages > 1 ? state.totalPages : Number.MAX_SAFE_INTEGER; nextPage = clampPage(nextPage, maxPage); if (nextPage === state.currentPage) return; loadPage(nextPage, { syncUrl: true, historyMode: 'push', scrollToTop: true }); } function onHistoryChange() { const pageFromUrl = getPageFromUrl(); if (pageFromUrl === state.currentPage) return; loadPage(pageFromUrl, { syncUrl: false, scrollToTop: false }); } function initializePagination() { if (!articleListContainer || !paginationContainer || !PUBLIC_API_URL) return; if (paginationContainer.dataset.paginationBound === '1') return; paginationContainer.dataset.paginationBound = '1'; paginationContainer.addEventListener('click', onPaginationClick); window.addEventListener('popstate', onHistoryChange); let initialPage = getCurrentPageFromDom(); if (!Number.isFinite(initialPage)) { initialPage = getPageFromUrl(); } state.currentPage = parsePositiveInt(initialPage, 1); state.totalPages = Math.max(1, getTotalPagesFromDom(), state.currentPage); } initializePagination()

Trang chủ

Bảo vệ dữ liệu