From 5eff93732d026ba1bb83206c143c4b1915311c11 Mon Sep 17 00:00:00 2001 From: thisisrenan Date: Wed, 20 Nov 2024 14:28:39 -0300 Subject: [PATCH 1/3] Sign multiple PDF pages at the same time in the same location (#2008) --- src/main/resources/static/css/sign.css | 78 +- .../resources/static/js/draggable-utils.js | 31 +- src/main/resources/templates/sign.html | 703 ++++++++++-------- 3 files changed, 469 insertions(+), 343 deletions(-) diff --git a/src/main/resources/static/css/sign.css b/src/main/resources/static/css/sign.css index 3055b52e96b..e4988585739 100644 --- 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; -} \ No newline at end of file + 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 index bdcb81610b5..1d5b426ce88 100644 --- 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,7 +296,7 @@ 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, @@ -297,6 +304,18 @@ const DraggableUtils = { 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; @@ -304,7 +323,12 @@ const DraggableUtils = { 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; }, diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html index 63d976e4d51..1ceaf7b6bb3 100644 --- a/src/main/resources/templates/sign.html +++ b/src/main/resources/templates/sign.html @@ -1,10 +1,12 @@ - - + + + - + - + - - - - - - - -
-
- -

-
-
-
-
- signature - -
+ + + + + + + +
+
+ +

+
+
+
+
+ signature + +
- -
- - + - -
-
-
- -
- -
- -
- - - +
+
    +
  • + +
    • +
  • + +
    • +
- new IntersectionObserver((entries, observer) => { - if (entries.some(entry => entry.intersectionRatio > 0)) { - resizeCanvas(); - } - }).observe(signaturePadCanvas); +
- new ResizeObserver(resizeCanvas).observe(signaturePadCanvas); - +
+
+
+
-
-
- -
- -
+
+ +
+ + +
- -