| 1 |
(function () { |
| 2 |
const config = window.syncBasalamHistoryPagination; |
| 3 |
|
| 4 |
if (!config || typeof window.fetch !== 'function') { |
| 5 |
return; |
| 6 |
} |
| 7 |
|
| 8 |
const createSectionFromHtml = function (html) { |
| 9 |
const template = document.createElement('template'); |
| 10 |
template.innerHTML = String(html).trim(); |
| 11 |
|
| 12 |
return template.content.firstElementChild; |
| 13 |
}; |
| 14 |
|
| 15 |
const setLoadingState = function (section, isLoading) { |
| 16 |
section.classList.toggle('is-loading', isLoading); |
| 17 |
section.setAttribute('aria-busy', isLoading ? 'true' : 'false'); |
| 18 |
}; |
| 19 |
|
| 20 |
const updateUrl = function (section, historyPage) { |
| 21 |
const url = new URL(window.location.href); |
| 22 |
|
| 23 |
url.searchParams.set('page', config.pageSlug); |
| 24 |
url.searchParams.set('sbp_active_page', section.dataset.activePage || '1'); |
| 25 |
url.searchParams.set('sbp_history_page', String(historyPage)); |
| 26 |
|
| 27 |
window.history.replaceState({ historyPage: historyPage }, '', url); |
| 28 |
}; |
| 29 |
|
| 30 |
document.addEventListener('click', function (event) { |
| 31 |
const link = event.target.closest('.basalam-history-section .basalam-pagination a.page-numbers'); |
| 32 |
|
| 33 |
if (!link) { |
| 34 |
return; |
| 35 |
} |
| 36 |
|
| 37 |
const section = link.closest('.basalam-history-section'); |
| 38 |
if (!section || section.classList.contains('is-loading')) { |
| 39 |
return; |
| 40 |
} |
| 41 |
|
| 42 |
const linkUrl = new URL(link.href, window.location.origin); |
| 43 |
const historyPage = parseInt(link.dataset.historyPage || linkUrl.searchParams.get('sbp_history_page') || '', 10); |
| 44 |
const activePage = section.dataset.activePage || linkUrl.searchParams.get('sbp_active_page') || '1'; |
| 45 |
|
| 46 |
if (!historyPage) { |
| 47 |
return; |
| 48 |
} |
| 49 |
|
| 50 |
event.preventDefault(); |
| 51 |
setLoadingState(section, true); |
| 52 |
|
| 53 |
const body = new URLSearchParams(); |
| 54 |
body.set('action', config.action); |
| 55 |
body.set('nonce', config.nonce); |
| 56 |
body.set('active_page', String(activePage)); |
| 57 |
body.set('history_page', String(historyPage)); |
| 58 |
|
| 59 |
window.fetch(config.ajaxUrl, { |
| 60 |
method: 'POST', |
| 61 |
credentials: 'same-origin', |
| 62 |
headers: { |
| 63 |
Accept: 'application/json', |
| 64 |
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' |
| 65 |
}, |
| 66 |
body: body.toString() |
| 67 |
}) |
| 68 |
.then(function (response) { |
| 69 |
if (!response.ok) { |
| 70 |
throw new Error(config.errorMessage); |
| 71 |
} |
| 72 |
|
| 73 |
return response.json(); |
| 74 |
}) |
| 75 |
.then(function (payload) { |
| 76 |
if (!payload || !payload.success || !payload.data || !payload.data.html) { |
| 77 |
const message = payload && payload.data && payload.data.message ? payload.data.message : config.errorMessage; |
| 78 |
throw new Error(message); |
| 79 |
} |
| 80 |
|
| 81 |
const nextSection = createSectionFromHtml(payload.data.html); |
| 82 |
if (!nextSection) { |
| 83 |
throw new Error(config.errorMessage); |
| 84 |
} |
| 85 |
|
| 86 |
section.replaceWith(nextSection); |
| 87 |
updateUrl(nextSection, nextSection.dataset.historyPage || payload.data.historyPage || historyPage); |
| 88 |
}) |
| 89 |
.catch(function (error) { |
| 90 |
setLoadingState(section, false); |
| 91 |
window.alert(error.message || config.errorMessage); |
| 92 |
}); |
| 93 |
}); |
| 94 |
}()); |
| 95 |
|
