diff --git a/pages/wordpress-pages/projects-test.html b/pages/wordpress-pages/projects-test.html index 64260ef2..3d051dd4 100644 --- a/pages/wordpress-pages/projects-test.html +++ b/pages/wordpress-pages/projects-test.html @@ -127,11 +127,11 @@

Accessibility and performance

- +
- +
@@ -153,5 +153,5 @@

How we choose projects

If you’re interested in working with ODI, we’d love to hear from you.

- + \ No newline at end of file diff --git a/src/js/cagov-paginator.js b/src/js/cagov-paginator.js index e4ec8dcf..c9e09936 100644 --- a/src/js/cagov-paginator.js +++ b/src/js/cagov-paginator.js @@ -15,6 +15,7 @@ class CAGovPaginator extends HTMLElement { console.log("number blocks",this.pagedBlocks.length); this.nbrPages = Math.ceil(this.pagedBlocks.length / this.perPage); this.currentPage = 1; // !!! pull from URL + this.boundPaginationHandler = this.paginationHandler.bind(this); console.log("nbrPages",this.nbrPages); if(document.readyState === 'complete') { @@ -31,10 +32,47 @@ class CAGovPaginator extends HTMLElement { // this.pagedContainer = document.querySelector(this.pagedContainerSelector); // this.pagedBlocks = this.pagedContainer.querySelectorAll(this.pagedBlockSelector); // console.log("number blocks",this.pagedBlocks.length); + console.log("drawPaginator"); var markup = ``; this.innerHTML = markup; + if (this.querySelector("cagov-pagination")) { + var paginator = this.querySelector("cagov-pagination"); + console.log("binding cagov-pagination listener"); + paginator.removeEventListener( + "paginationClick", + this.boundPaginationHandler, + true + ); + paginator.addEventListener( + "paginationClick", + this.boundPaginationHandler, + true + ); + this.drawCurrentPage(); + } + else { + console.log("cagov-pagination not found"); + } + + + } + + drawCurrentPage() { + console.log("drawCurrentPage",this.currentPage); + this.pagedContainer.innerHTML = ""; + this.pagedBlocks.forEach((block,index) => { + if (index >= (this.currentPage - 1) * this.perPage && index < this.currentPage * this.perPage) { + this.pagedContainer.appendChild(block); + } + }); + } + + paginationHandler(e) { + console.log("paginationHandler called", e); + this.currentPage = parseInt(e.detail); + this.drawCurrentPage(); } }