zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-23 19:20:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactored updatePagination to encapsulate it

Browse source
This commit is contained in:
David Kennedy 2024-10-31 12:24:21 -04:00
parent 3d398a68da
commit a377daaf8d
No known key found for this signature in database
GPG key ID: 6528A5386E66B96B
1 changed files with 31 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/registrar/assets/js/get-gov.js
View file

@ -1196,10 +1196,28 @@ class BaseTable {
counterSelectorEl.innerHTML = `${totalItems} ${this.itemName}${totalItems > 1 ? 's' : ''}${this.currentSearchTerm ? ' for ' + '"' + this.currentSearchTerm + '"' : ''}`; counterSelectorEl.innerHTML = `${totalItems} ${this.itemName}${totalItems > 1 ? 's' : ''}${this.currentSearchTerm ? ' for ' + '"' + this.currentSearchTerm + '"' : ''}`;
// Helper function to create a pagination item, such as a
const createPaginationItem = (page) => {
const paginationItem = document.createElement('li');
paginationItem.className = 'usa-pagination__item usa-pagination__page-no';
paginationItem.innerHTML = `
<a href="${parentTableSelector}" class="usa-pagination__button" aria-label="Page ${page}">${page}</a>
`;
if (page === currentPage) {
paginationItem.querySelector('a').classList.add('usa-current');
paginationItem.querySelector('a').setAttribute('aria-current', 'page');
}
paginationItem.querySelector('a').addEventListener('click', (event) => {
event.preventDefault();
this.loadTable(page);
});
return paginationItem;
};
if (hasPrevious) { if (hasPrevious) {
const prevPageItem = document.createElement('li'); const prevPaginationItem = document.createElement('li');
prevPageItem.className = 'usa-pagination__item usa-pagination__arrow'; prevPaginationItem.className = 'usa-pagination__item usa-pagination__arrow';
prevPageItem.innerHTML = ` prevPaginationItem.innerHTML = `
<a href="${parentTableSelector}" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page"> <a href="${parentTableSelector}" class="usa-pagination__link usa-pagination__previous-page" aria-label="Previous page">
<svg class="usa-icon" aria-hidden="true" role="img"> <svg class="usa-icon" aria-hidden="true" role="img">
<use xlink:href="/public/img/sprite.svg#navigate_before"></use> <use xlink:href="/public/img/sprite.svg#navigate_before"></use>
@ -1207,16 +1225,16 @@ class BaseTable {
<span class="usa-pagination__link-text">Previous</span> <span class="usa-pagination__link-text">Previous</span>
</a> </a>
`; `;
prevPageItem.querySelector('a').addEventListener('click', (event) => { prevPaginationItem.querySelector('a').addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
this.loadTable(currentPage - 1); this.loadTable(currentPage - 1);
}); });
paginationButtons.appendChild(prevPageItem); paginationButtons.appendChild(prevPaginationItem);
} }
// Add first page and ellipsis if necessary // Add first page and ellipsis if necessary
if (currentPage > 2) { if (currentPage > 2) {
paginationButtons.appendChild(this.createPageItem(1, parentTableSelector, currentPage)); paginationButtons.appendChild(createPaginationItem(1));
if (currentPage > 3) { if (currentPage > 3) {
const ellipsis = document.createElement('li'); const ellipsis = document.createElement('li');
ellipsis.className = 'usa-pagination__item usa-pagination__overflow'; ellipsis.className = 'usa-pagination__item usa-pagination__overflow';
@ -1228,7 +1246,7 @@ class BaseTable {
// Add pages around the current page // Add pages around the current page
for (let i = Math.max(1, currentPage - 1); i <= Math.min(numPages, currentPage + 1); i++) { for (let i = Math.max(1, currentPage - 1); i <= Math.min(numPages, currentPage + 1); i++) {
paginationButtons.appendChild(this.createPageItem(i, parentTableSelector, currentPage)); paginationButtons.appendChild(createPaginationItem(i));
} }
// Add last page and ellipsis if necessary // Add last page and ellipsis if necessary
@ -1240,13 +1258,13 @@ class BaseTable {
ellipsis.innerHTML = '<span>…</span>'; ellipsis.innerHTML = '<span>…</span>';
paginationButtons.appendChild(ellipsis); paginationButtons.appendChild(ellipsis);
} }
paginationButtons.appendChild(this.createPageItem(numPages, parentTableSelector, currentPage)); paginationButtons.appendChild(createPaginationItem(numPages));
} }
if (hasNext) { if (hasNext) {
const nextPageItem = document.createElement('li'); const nextPaginationItem = document.createElement('li');
nextPageItem.className = 'usa-pagination__item usa-pagination__arrow'; nextPaginationItem.className = 'usa-pagination__item usa-pagination__arrow';
nextPageItem.innerHTML = ` nextPaginationItem.innerHTML = `
<a href="${parentTableSelector}" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page"> <a href="${parentTableSelector}" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
<span class="usa-pagination__link-text">Next</span> <span class="usa-pagination__link-text">Next</span>
<svg class="usa-icon" aria-hidden="true" role="img"> <svg class="usa-icon" aria-hidden="true" role="img">
@ -1254,11 +1272,11 @@ class BaseTable {
</svg> </svg>
</a> </a>
`; `;
nextPageItem.querySelector('a').addEventListener('click', (event) => { nextPaginationItem.querySelector('a').addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
this.loadTable(currentPage + 1); this.loadTable(currentPage + 1);
}); });
paginationButtons.appendChild(nextPageItem); paginationButtons.appendChild(nextPaginationItem);
} }
} }
@ -1288,24 +1306,6 @@ class BaseTable {
} }
}; };
// Helper function to create a page item
createPageItem(page, parentTableSelector, currentPage) {
const pageItem = document.createElement('li');
pageItem.className = 'usa-pagination__item usa-pagination__page-no';
pageItem.innerHTML = `
<a href="${parentTableSelector}" class="usa-pagination__button" aria-label="Page ${page}">${page}</a>
`;
if (page === currentPage) {
pageItem.querySelector('a').classList.add('usa-current');
pageItem.querySelector('a').setAttribute('aria-current', 'page');
}
pageItem.querySelector('a').addEventListener('click', (event) => {
event.preventDefault();
this.loadTable(page);
});
return pageItem;
}
/** /**
* A helper that resets sortable table headers * A helper that resets sortable table headers
* *