Sign multiple PDF pages at the same time in the same location (Stirli…

…ng-Tools#2008)
thisisrenan · Nov 20, 2024 · 5eff937 · 5eff937
1 parent c43af24
commit 5eff937
Show file tree

Hide file tree

Showing 3 changed files with 469 additions and 343 deletions.
diff --git a/src/main/resources/static/css/sign.css b/src/main/resources/static/css/sign.css
@@ -62,53 +62,81 @@ select#font-select option {
   background-color: rgba(52, 152, 219, 0.2);
   /* Darken background on hover */
 }
+
 .signature-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 1rem;
-    padding: 1rem;
-    max-height: 400px;
-    overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
 .signature-list {
-    max-height: 400px;
-    overflow-y: auto;
+  max-height: 400px;
+  overflow-y: auto;
 }
 
 .signature-list-item {
-    padding: 0.75rem;
-    border: 1px solid #dee2e6;
-    border-radius: 4px;
-    margin-bottom: 0.5rem;
-    cursor: pointer;
-    transition: background-color 0.2s;
+  padding: 0.75rem;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
 }
 
 .signature-list-item:hover {
-    background-color: #f8f9fa;
+  background-color: #f8f9fa;
 }
 
 .signature-list-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .signature-list-name {
-    font-weight: 500;
+  font-weight: 500;
 }
 
 .signature-list-details {
-    color: #6c757d;
-    font-size: 0.875rem;
+  color: #6c757d;
+  font-size: 0.875rem;
 }
 
 .signature-list-details small:not(:last-child) {
-    margin-right: 1rem;
+  margin-right: 1rem;
 }
 
 .view-toggle {
-    text-align: right;
-    padding: 0.5rem 1rem;
-}
+  text-align: right;
+  padding: 0.5rem 1rem;
+}
+
+
+.btn-custom {
+  background-color: rgb(248 249 255);
+  border: none;
+  opacity: 0.8;
+  color: rgb(24 28 34);
+}
+
+.btn-custom:hover {
+  color: rgb(24 28 34);
+
+}
+
+.btn-custom:focus,
+.btn-custom.active {
+  border: 1px solid rgb(200, 201, 207);
+  opacity: 1;
+  padding: 3%;
+  color: rgb(24 28 34);
+}
+
+
+.btn-custom:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
diff --git a/src/main/resources/static/js/draggable-utils.js b/src/main/resources/static/js/draggable-utils.js
@@ -241,7 +241,7 @@ const DraggableUtils = {
     }
 
     const draggablesData = pagesMap[this.pageIndex];
-    if (draggablesData) {
+    if (draggablesData && Array.isArray(draggablesData)) {
       draggablesData.forEach((draggableData) => this.boxDragContainer.appendChild(draggableData.element));
     }
 
@@ -273,6 +273,13 @@ const DraggableUtils = {
 
     //return pdfCanvas.toDataURL();
   },
+
+  async goToPage(pageIndex) {
+    this.storePageContents();
+    await this.renderPage(this.pdfDoc, pageIndex);
+    this.loadPageContents();
+  },
+
   async incrementPage() {
     if (this.pageIndex < this.pdfDoc.numPages - 1) {
       this.storePageContents();
@@ -289,22 +296,39 @@ const DraggableUtils = {
   },
 
   parseTransform(element) { },
-  async getOverlayedPdfDocument() {
+  async getOverlayedPdfDocument(allPage = false) {
     const pdfBytes = await this.pdfDoc.getData();
     const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, {
       ignoreEncryption: true,
     });
     this.storePageContents();
 
     const pagesMap = this.documentsMap.get(this.pdfDoc);
+
+
+
+    if (allPage) {
+      for (let pageIndex = 1; pageIndex < this.pdfDoc.numPages; pageIndex++) {
+        pagesMap[pageIndex] = pagesMap[0][0];
+        pagesMap[`${pageIndex}-offsetWidth`] = pagesMap[`${0}-offsetWidth`];
+        pagesMap[`${pageIndex}-offsetHeight`] = pagesMap[`${0}-offsetHeight`];
+      }
+    }
+
+
     for (let pageIdx in pagesMap) {
       if (pageIdx.includes("offset")) {
         continue;
       }
       console.log(typeof pageIdx);
 
       const page = pdfDocModified.getPage(parseInt(pageIdx));
-      const draggablesData = pagesMap[pageIdx];
+      let draggablesData = pagesMap[pageIdx];
+
+      if (allPage) {
+        draggablesData = pagesMap[0];
+      }
+
       const offsetWidth = pagesMap[pageIdx + "-offsetWidth"];
       const offsetHeight = pagesMap[pageIdx + "-offsetHeight"];
 
@@ -383,7 +407,6 @@ const DraggableUtils = {
         });
       }
     }
-
     this.loadPageContents();
     return pdfDocModified;
   },