Modifying the functionality of how the signature is added to all pages (

Stirling-Tools#2008)
thisisrenan · Nov 22, 2024 · a1c30f8 · a1c30f8
1 parent 5eff937
commit a1c30f8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 86 deletions.
diff --git a/src/main/resources/static/css/sign.css b/src/main/resources/static/css/sign.css
@@ -113,30 +113,3 @@ select#font-select option {
   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
@@ -4,6 +4,7 @@ const DraggableUtils = {
   nextId: 0,
   pdfDoc: null,
   pageIndex: 0,
+  elementAllPages: [],
   documentsMap: new Map(),
   lastInteracted: null,
 
@@ -197,6 +198,43 @@ const DraggableUtils = {
   deleteAllDraggableCanvases() {
     this.boxDragContainer.querySelectorAll(".draggable-canvas").forEach((el) => el.remove());
   },
+  async addAllPagesDraggableCanvas(element) {
+    if (element) {
+
+      if (!this.elementAllPages.includes(element)) {
+        this.elementAllPages.push(element)
+        element.style.filter = 'sepia(1) hue-rotate(90deg) brightness(1.2)';
+        let newElement = {
+          "element": element,
+          "offsetWidth": element.width,
+          "offsetHeight": element.height
+        }
+
+        let pagesMap = this.documentsMap.get(this.pdfDoc);
+
+        if (!pagesMap) {
+          pagesMap = {};
+          this.documentsMap.set(this.pdfDoc, pagesMap);
+        }
+        let page = this.pageIndex
+
+        for (let pageIndex = 0; pageIndex < this.pdfDoc.numPages; pageIndex++) {
+
+          if (pagesMap[`${pageIndex}-offsetWidth`]) {
+            if (!pagesMap[pageIndex].includes(newElement)) {
+              pagesMap[pageIndex].push(newElement);
+            }
+          } else {
+            pagesMap[pageIndex] = []
+            pagesMap[pageIndex].push(newElement)
+            pagesMap[`${pageIndex}-offsetWidth`] = pagesMap[`${page}-offsetWidth`];
+            pagesMap[`${pageIndex}-offsetHeight`] = pagesMap[`${page}-offsetHeight`];
+          }
+          await this.goToPage(pageIndex)
+        }
+      }
+    }
+  },
   deleteDraggableCanvas(element) {
     if (element) {
       //Check if deleted element is the last interacted
@@ -296,7 +334,7 @@ const DraggableUtils = {
   },
 
   parseTransform(element) { },
-  async getOverlayedPdfDocument(allPage = false) {
+  async getOverlayedPdfDocument() {
     const pdfBytes = await this.pdfDoc.getData();
     const pdfDocModified = await PDFLib.PDFDocument.load(pdfBytes, {
       ignoreEncryption: true,
@@ -305,17 +343,6 @@ const DraggableUtils = {
 
     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;
@@ -325,10 +352,6 @@ const DraggableUtils = {
       const page = pdfDocModified.getPage(parseInt(pageIdx));
       let draggablesData = pagesMap[pageIdx];
 
-      if (allPage) {
-        draggablesData = pagesMap[0];
-      }
-
       const offsetWidth = pagesMap[pageIdx + "-offsetWidth"];
       const offsetHeight = pagesMap[pageIdx + "-offsetHeight"];
 

diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
@@ -111,24 +111,6 @@
                 });
               });
             </script>
-            <div class=" show-on-file-selected justify-content-center align-itens-center">
-              <ul class="nav nav-pill justify-content-center">
-                <li class="nav-item">
-                  <button class="nav-link active btn-custom " id="manualSignatureTab" data-bs-toggle="pill"
-                    onclick="manualOrAll(false)">
-                    Add Signature Manually
-                  </button>
-                </li>
-                <li class="nav-item">
-                  <button class="nav-link btn-custom " id="allPagesSignatureTab" data-bs-toggle="pill"
-                    onclick="manualOrAll(true)">
-                    Add Signature to All Pages
-                  </button>
-                </li>
-              </ul>
-
-            </div>
-
             <div class="tab-group show-on-file-selected">
               <div class="tab-container" th:title="#{sign.upload}">
                 <div
@@ -256,30 +238,6 @@ <h5 th:text="#{sign.sharedSigs}"></h5>
               </div>
             </div>
 
-            <script>
-              let allPages = false
-              async function manualOrAll(choice) {
-                const incrementPage = document.getElementById('incrementPage');
-                const decrementPage = document.getElementById('decrementPage');
-                if (choice) {
-                  incrementPage.disabled = true;
-                  decrementPage.disabled = true
-                  allPages = true
-                } else {
-                  incrementPage.disabled = false;
-                  decrementPage.disabled = false;
-                  allPages = false
-
-                }
-                // Remove all the canvases that were added
-                for (let index = 0; index < DraggableUtils.pdfDoc.numPages; index++) {
-                  await DraggableUtils.goToPage(index)
-                  await DraggableUtils.deleteAllDraggableCanvases()
-                }
-                await DraggableUtils.goToPage(0)
-              }
-            </script>
-
             <script>
               const imageUpload = document.querySelector('input[name=image-upload]');
               imageUpload.addEventListener('change', e => {
@@ -412,6 +370,12 @@ <h5 th:text="#{sign.sharedSigs}"></h5>
                       d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z" />
                   </svg>
                 </button>
+                <button class="btn btn-outline-secondary"
+                  onclick="DraggableUtils.addAllPagesDraggableCanvas(DraggableUtils.getLastInteracted())">
+                  <span class="material-symbols-rounded">
+                    content_copy
+                  </span>
+                </button>
                 <button class="btn btn-outline-secondary" id="incrementPage"
                   onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()"
                   style="margin-left:auto">
@@ -440,7 +404,7 @@ <h5 th:text="#{sign.sharedSigs}"></h5>
 
             <script>
               document.getElementById("download-pdf").addEventListener('click', async () => {
-                const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument(allPages);
+                const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
                 const modifiedPdfBytes = await modifiedPdf.save();
                 const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
                 const link = document.createElement('a');