Adding paging to projects page.

package.json

@@ -27,7 +27,7 @@
     "@cagov/ds-page-alert": "^2.0.2",
     "@cagov/ds-page-feedback": "^1.1.0",
     "@cagov/ds-page-navigation": "^2.1.0",
-    "@cagov/ds-pagination": "^2.0.0",
+    "@cagov/ds-pagination": "^2.0.4",
     "@cagov/ds-site-footer": "^1.1.0",
     "@cagov/ds-site-header": "^1.1.0",
     "@cagov/ds-site-navigation": "^2.1.4",

src/css/_aligned-dual-group.scss

@@ -72,5 +72,7 @@
   .expansion-width-full {
     width: 1160px;
     margin-left: -142px;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
   }
 }

src/css/index.scss

@@ -250,4 +250,23 @@ table.table-bordered {
   .site-header .hamburger {
     top:-4px !important;
   }
-}
+}
+
+cagov-pagination li.cagov-pagination__item {
+  border: var(--border-1, 1px) solid #D4D4D7 !important;
+  border-radius: 5px !important;
+  width: 42px;
+  height: 42px;
+  /* margin: 0 0; */
+  padding: 0 0;
+  text-align: center;
+}
+cagov-pagination li.cagov-pagination__item a {
+  /* margin: 0 0; */
+  padding: 0.1rem 0.7rem;
+}
+cagov-pagination .cagov-pagination__item.cagov-pagination-current {
+  background-color: #0D4F8C !important;
+  /* margin: 0 0; */
+  padding: 0 0;
+}

src/js/cagov-paginator.js

@@ -0,0 +1,93 @@
+import "@cagov/ds-pagination"; 
+
+// cagov-paginator
+class CAGovPaginator extends HTMLElement {
+    connectedCallback() {
+        // initial set up -- pull data and determine # of pages
+        //
+        this.pagedContainerSelector = this.getAttribute('data-paged-container');
+        this.pagedBlockSelector = this.getAttribute('data-paged-block');
+        this.perPage = parseInt(this.getAttribute('data-per-page'));
+        console.log("pagedContainer",this.pagedContainerSelector);
+        console.log("pagedBlock",this.pagedBlockSelector);
+        this.pagedContainer = document.querySelector(this.pagedContainerSelector);
+        this.pagedBlocks = this.pagedContainer.querySelectorAll(this.pagedBlockSelector);
+        console.log("number blocks",this.pagedBlocks.length);
+        this.nbrPages = Math.ceil(this.pagedBlocks.length / this.perPage);
+        this.currentPage = 1; // !!! pull from URL
+        var locationhash = location.hash;
+        if (locationhash.startsWith('#page-')) {
+            var cp = parseInt(locationhash.split('-')[1]);
+            if (cp > 0 && cp <= this.nbrPages) {
+                this.currentPage = cp;
+                console.log("Set current page to ",this.currentPage);
+            }
+        }
+        this.boundPaginationHandler = this.paginationHandler.bind(this);
+        console.log("nbrPages",this.nbrPages);
+
+        if(document.readyState === 'complete') {
+            setTimeout(() => {
+              this.drawPaginator();
+            }, 10)  
+          } else {
+            window.addEventListener("load", this.drawPaginator.bind(this));
+          }
+
+    }
+
+    drawPaginator() { // only called once
+        // this.pagedContainer = document.querySelector(this.pagedContainerSelector);
+        // this.pagedBlocks = this.pagedContainer.querySelectorAll(this.pagedBlockSelector);
+        // console.log("number blocks",this.pagedBlocks.length);
+        var markup = `<cagov-pagination data-current-page="${this.currentPage}" data-total-pages="${this.nbrPages}"></cagov-pagination>`;
+        this.innerHTML = markup;
+        // location.hash = `#`;
+        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.pagedBlocks.forEach((block,index) => {
+            var displayStyle = "none";
+            if (index >= (this.currentPage - 1) * this.perPage && index < this.currentPage * this.perPage) {
+                displayStyle = "block";
+            }
+            block.style.display = displayStyle;
+        });
+
+
+        location.hash = `#page-${this.currentPage}`;
+        // console.log("location.hash",location.hash);
+    }
+
+    paginationHandler(e) {
+        console.log("paginationHandler called", e);
+        this.currentPage = parseInt(e.detail);
+        this.drawCurrentPage();
+    }
+}
+
+window.customElements.define("cagov-paginator", CAGovPaginator);
+
+

src/js/index.js

@@ -3,3 +3,4 @@ import '@cagov/ds-page-feedback';
 import '@cagov/ds-page-navigation';
 import './cagov-connector-lines.js';
 import './ga-tracking.js';
+import './cagov-paginator.js';