Got paging working. In progress. Preview at projects-test.

cagov · Aug 15, 2024 · 2cb7e00 · 2cb7e00
1 parent 35871b8
commit 2cb7e00
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/pages/wordpress-pages/projects-test.html b/pages/wordpress-pages/projects-test.html
@@ -127,11 +127,11 @@ <h2 class="wp-block-heading h3">Accessibility and performance</h2>
 
 
 
-</div>
+</div></div> <!-- had to add an extra close div here (moved up from bottom) -->
 
 <!-- begin pagination insertion -->
 <div class="wp-block-group">
-  <cagov-paginator data-paged-container="div.cagov-tab-content" data-paged-block="div.cagov-aligned-group" data-per-page="4"></cagov-pagination>
+  <cagov-paginator data-paged-container="div.cagov-tab-content" data-paged-block="div.cagov-aligned-group" data-per-page="2"></cagov-pagination>
 </div>
 <!-- end pagination insertion -->
 
@@ -153,5 +153,5 @@ <h2 class="wp-block-heading">How we choose projects</h2>
     </ul>
 
     <p>If you’re interested in working with ODI, <a href="/contact-us/">we’d love to hear from you</a>.</p>
-    </div></div></div>
+    </div></div>
 
diff --git 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 = `<cagov-pagination data-current-page="${this.currentPage}" data-total-pages="${this.nbrPages}"></cagov-pagination>`;
         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();
     }
 }