From acda1e4dd8ec3e8d4c0924578504da32c770afe2 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Thu, 4 May 2023 23:19:05 +0100
Subject: [PATCH] flatten pdf

---
 .../static/js/local-pdf-input-download.js     |  47 +++++
 .../resources/templates/fragments/common.html | 190 +++++++++---------
 .../resources/templates/other/flatten.html    |  57 ++++++
 src/main/resources/templates/sign.html        |  46 ++++-
 4 files changed, 243 insertions(+), 97 deletions(-)
 create mode 100644 src/main/resources/static/js/local-pdf-input-download.js
 create mode 100644 src/main/resources/templates/other/flatten.html

diff --git a/src/main/resources/static/js/local-pdf-input-download.js b/src/main/resources/static/js/local-pdf-input-download.js
new file mode 100644
index 00000000..37090390
--- /dev/null
+++ b/src/main/resources/static/js/local-pdf-input-download.js
@@ -0,0 +1,47 @@
+async function downloadFilesWithCallback(processFileCallback) {
+    const fileInput = document.querySelector('input[type="file"]');
+    const files = fileInput.files;
+
+    const zipThreshold = 4;
+    const zipFiles = files.length > zipThreshold;
+
+    let jszip = null;
+    if (zipFiles) {
+        jszip = new JSZip();
+    }
+
+    const promises = Array.from(files).map(async file => {
+        const { processedData, fileName } = await processFileCallback(file);
+
+        if (zipFiles) {
+            jszip.file(fileName, processedData);
+        } else {
+            const url = URL.createObjectURL(processedData);
+            const downloadOption = localStorage.getItem('downloadOption');
+
+            if (downloadOption === 'sameWindow') {
+                window.location.href = url;
+            } else if (downloadOption === 'newWindow') {
+                window.open(url, '_blank');
+            } else {
+                const downloadLink = document.createElement('a');
+                downloadLink.href = url;
+                downloadLink.download = fileName;
+                downloadLink.click();
+            }
+        }
+    });
+
+    await Promise.all(promises);
+
+    if (zipFiles) {
+        const content = await jszip.generateAsync({ type: "blob" });
+        const url = URL.createObjectURL(content);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = "files.zip";
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+    }
+}
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 80db8871..6ae7fdef 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -205,7 +205,7 @@ document.addEventListener("DOMContentLoaded", function () {
     </dialog>
 </th:block>
 
-<th:block th:fragment="fileSelector(name, multiple)"  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}">
+<th:block th:fragment="fileSelector(name, multiple)"  th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: 'true'">
     <script>
         $(document).ready(function() {
             $('form').submit(async function(event) {
@@ -227,103 +227,109 @@ document.addEventListener("DOMContentLoaded", function () {
                 var multiple = [[${multiple}]] || false;
                 var override = $('#override').val() || '';
                 console.log("override=" + override)
-                if (override === 'multi' || (!multiple && files.length > 1) && override !== 'single' ) {
-                    console.log("multi parallel download")
-                    await submitMultiPdfForm(event,url);
-                } else {
-                    console.log("start single download")
-
-                    // Get the selected download option from localStorage
-                    const downloadOption = localStorage.getItem('downloadOption');
-
-                    var formData = new FormData($('form')[0]);
-                    
-                    // Send the request to the server using the fetch() API
-                    const response = await fetch(url, {
-                        method: 'POST',
-                        body: formData
-                    });
-                    try {
-                        if (!response) {
-                            throw new Error('Received null response for file ' + i);
-                        }
-                        console.log("load single download")
-
-                            
-                        // Extract the filename from the Content-Disposition header, if present
-                        let filename = null;
-                        const contentDispositionHeader = response.headers.get('Content-Disposition');
-                        console.log(contentDispositionHeader)
-                        if (contentDispositionHeader && contentDispositionHeader.indexOf('attachment') !== -1) {
-                            filename = decodeURIComponent(contentDispositionHeader.split('filename=')[1].replace(/"/g, ''));
-                        } else {
-                            // If the Content-Disposition header is not present or does not contain the filename, use a default filename
-                            filename = 'download';
-                        }
-                        console.log("filename=" + filename)
-
-                    
-                        const contentType = response.headers.get('Content-Type');
-                        console.log("contentType=" + contentType)
-                        // Check if the response is a PDF or an image
-                        if (contentType.includes('pdf') || contentType.includes('image')) {
-                            const blob = await response.blob();
-                            console.log("pdf/image")
-
-                            // Perform the appropriate action based on the download option
-                            if (downloadOption === 'sameWindow') {
-                                console.log("same window")
-
-                                // Open the file in the same window
-                                window.location.href = URL.createObjectURL(blob);
-                            } else if (downloadOption === 'newWindow') {
-                                console.log("new window")
-
-                                // Open the file in a new window
-                                window.open(URL.createObjectURL(blob), '_blank');
+                
+                if([[${remoteCall}]] === true) {
+                    if (override === 'multi' || (!multiple && files.length > 1) && override !== 'single' ) {
+                        console.log("multi parallel download")
+                        await submitMultiPdfForm(event,url);
+                    } else {
+                        console.log("start single download")
+    
+                        // Get the selected download option from localStorage
+                        const downloadOption = localStorage.getItem('downloadOption');
+    
+                        var formData = new FormData($('form')[0]);
+                        
+                        // Send the request to the server using the fetch() API
+                        const response = await fetch(url, {
+                            method: 'POST',
+                            body: formData
+                        });
+                        try {
+                            if (!response) {
+                                throw new Error('Received null response for file ' + i);
+                            }
+                            console.log("load single download")
+    
+                                
+                            // Extract the filename from the Content-Disposition header, if present
+                            let filename = null;
+                            const contentDispositionHeader = response.headers.get('Content-Disposition');
+                            console.log(contentDispositionHeader)
+                            if (contentDispositionHeader && contentDispositionHeader.indexOf('attachment') !== -1) {
+                                filename = decodeURIComponent(contentDispositionHeader.split('filename=')[1].replace(/"/g, ''));
                             } else {
-                                console.log("else save")
-
-                                // Download the file
+                                // If the Content-Disposition header is not present or does not contain the filename, use a default filename
+                                filename = 'download';
+                            }
+                            console.log("filename=" + filename)
+    
+                        
+                            const contentType = response.headers.get('Content-Type');
+                            console.log("contentType=" + contentType)
+                            // Check if the response is a PDF or an image
+                            if (contentType.includes('pdf') || contentType.includes('image')) {
+                                const blob = await response.blob();
+                                console.log("pdf/image")
+    
+                                // Perform the appropriate action based on the download option
+                                if (downloadOption === 'sameWindow') {
+                                    console.log("same window")
+    
+                                    // Open the file in the same window
+                                    window.location.href = URL.createObjectURL(blob);
+                                } else if (downloadOption === 'newWindow') {
+                                    console.log("new window")
+    
+                                    // Open the file in a new window
+                                    window.open(URL.createObjectURL(blob), '_blank');
+                                } else {
+                                    console.log("else save")
+    
+                                    // Download the file
+                                    const link = document.createElement('a');
+                                    link.href = URL.createObjectURL(blob);
+                                    link.download = filename;
+                                    link.click();
+                                }
+                            } else if (contentType.includes('json')) {
+                                // Handle the JSON response
+                                const json = await response.json();
+                                // Format the error message
+                                const errorMessage = JSON.stringify(json, null, 2);
+                                // Display the error message in an alert
+                                alert(`An error occurred: ${errorMessage}`);
+                            } else {
+                                const blob = await response.blob()
+                                console.log("else save 2 zip")
+                                
+                                // For ZIP files or other file types, just download the file
                                 const link = document.createElement('a');
                                 link.href = URL.createObjectURL(blob);
                                 link.download = filename;
                                 link.click();
                             }
-                        } else if (contentType.includes('json')) {
-                            // Handle the JSON response
-                            const json = await response.json();
-                            // Format the error message
-                            const errorMessage = JSON.stringify(json, null, 2);
-                            // Display the error message in an alert
-                            alert(`An error occurred: ${errorMessage}`);
-                        } else {
-                            const blob = await response.blob()
-                            console.log("else save 2 zip")
+                        } catch(error) {
+                            console.log("error listener")
+    
+                            // Extract the error message and stack trace from the response
+                            const errorMessage = error.message;
+                            const stackTrace = error.stack;
+    
+                            // Create an error message to display to the user
+                            const message = `${errorMessage}\n\n${stackTrace}`;
+                        
+                            $('#submitBtn').text(submitButtonText);
                             
-                            // For ZIP files or other file types, just download the file
-                            const link = document.createElement('a');
-                            link.href = URL.createObjectURL(blob);
-                            link.download = filename;
-                            link.click();
-                        }
-                    } catch(error) {
-                        console.log("error listener")
-
-                        // Extract the error message and stack trace from the response
-                        const errorMessage = error.message;
-                        const stackTrace = error.stack;
-
-                        // Create an error message to display to the user
-                        const message = `${errorMessage}\n\n${stackTrace}`;
-                    
-                        $('#submitBtn').text(submitButtonText);
-                        
-                        // Display the error message to the user
-                        alert(message);
-                        
-                    };
-                        
+                            // Display the error message to the user
+                            alert(message);
+                            
+                        };
+                            
+                    }
+                } else {
+                	//Offline do nothing and let other scripts handle everything
+                	
                 }
                 $('#submitBtn').text(submitButtonText);
             });
@@ -467,7 +473,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     <div class="custom-file-chooser">
         <div class="custom-file">
-            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple>
+            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple required>
             <label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
         </div>
         <div class="selected-files"></div>
diff --git a/src/main/resources/templates/other/flatten.html b/src/main/resources/templates/other/flatten.html
new file mode 100644
index 00000000..5fab1b5f
--- /dev/null
+++ b/src/main/resources/templates/other/flatten.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
+
+
+<th:block th:insert="~{fragments/common :: head(title=#{flatten.title})}"></th:block>
+
+
+<body>
+    <div id="page-container">
+        <div id="content-wrap">
+            <div th:insert="~{fragments/navbar.html :: navbar}"></div>
+            <br> <br>
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-md-6">
+                        <h2 th:text="#{flatten.header}"></h2>
+                         <form id="pdfForm" class="mb-3">
+                            <div class="custom-file">
+                                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf', remoteCall='false')}"></div>
+                            </div>
+                            <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{flatten.submit}"></button>
+                            <script src="js/local-pdf-input-download.js"></script>
+                           <script>
+        document.getElementById('pdfForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const { PDFDocument } = PDFLib;
+
+            const processFile = async (file) => {
+                const origFileUrl = URL.createObjectURL(file);
+                const formPdfBytes = await fetch(origFileUrl).then(res => res.arrayBuffer());
+                const pdfDoc = await PDFDocument.load(formPdfBytes);
+
+                const form = pdfDoc.getForm();
+                form.flatten();
+
+                const pdfBytes = await pdfDoc.save();
+                const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
+                const fileName = (file.name ? file.name.replace('.pdf', '') : 'pdf') + '_flattened.pdf';
+
+                return { processedData: pdfBlob, fileName };
+            };
+
+            await downloadFilesWithCallback(processFile);
+        });
+    </script>
+                            
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div th:insert="~{fragments/footer.html :: footer}"></div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/sign.html b/src/main/resources/templates/sign.html
index cc9d2dfc..3ef8ef89 100644
--- a/src/main/resources/templates/sign.html
+++ b/src/main/resources/templates/sign.html
@@ -60,8 +60,11 @@
                         <div class = "btn-group">
                             <input type="radio" class="btn-check" name="signature-type" id="draw-signature" autocomplete="off" checked>
                             <label class="btn btn-outline-secondary" for="draw-signature">Draw signature</label>
+                            <input type="radio" class="btn-check" name="signature-type" id="generate-signature" autocomplete="off">
+                            <label class="btn btn-outline-secondary" for="generate-signature">Generate Signature</label>
                             <input type="radio" class="btn-check" name="signature-type" id="import-image" autocomplete="off">
                             <label class="btn btn-outline-secondary" for="import-image">Import image</label>
+                            
                         </div>
                         
                         <div th:replace="~{fragments/common :: fileSelector(name='signature-upload', multiple=false, accept='image/*', inputText=#{imgPrompt})}"></div>
@@ -72,7 +75,11 @@
                             <button id="clear-signature" class="btn btn-outline-danger mt-2">Clear</button>
                             <button id="save-signature" class="btn btn-outline-success mt-2">Save</button>
                         </div>
-
+                        <div id="signature-text-input-container" style="display: none;">
+                            <input type="text" id="signature-text-input" class="form-control mt-2" placeholder="Type your signature here...">
+                        </div>
+                        
+                        
                         <div id="pdf-container">
                             <canvas id="pdf-canvas"></canvas>
                             <canvas id="signature-canvas" hidden style="position: absolute;" data-scale="1"></canvas>
@@ -89,6 +96,7 @@
         document.addEventListener('DOMContentLoaded', () => {
             const pdfUpload = document.querySelector('input[name=pdf-upload]');
             const signatureUpload = document.querySelector('input[name=signature-upload]');
+            const signatureTextInput = document.querySelector('input[name=signatureTextInput]');
             const pdfCanvas = document.getElementById('pdf-canvas');
             const signatureCanvas = document.getElementById('signature-canvas');
             const downloadPdfBtn = document.getElementById('download-pdf');
@@ -124,17 +132,44 @@
                 signaturePad.clear();
             });
 
-            $("input[name=signature-type]").change(function() {
-                const drawSignatureInput = document.getElementById('draw-signature');
-                signaturePadContainer.style.display = drawSignatureInput.checked ? 'block' : 'none';
-                document.querySelector('input[name=signature-upload]').closest(".custom-file-chooser").style.display = drawSignatureInput.checked ? 'none' : 'block';
+            $("input[name=signature-type]").change(function () {
+                const drawSignatureInput = document.getElementById("draw-signature");
+                const generateSignatureInput = document.getElementById("generate-signature");
+                const importImageInputContainer = document.querySelector("input[name=signature-upload]").closest(".custom-file-chooser");
+                signaturePadContainer.style.display = drawSignatureInput.checked ? "block" : "none";
+                importImageInputContainer.style.display = drawSignatureInput.checked ? "none" : (generateSignatureInput.checked ? "none" : "block");
+                document.getElementById("signature-text-input-container").style.display = generateSignatureInput.checked ? "block" : "none";
 
                 if (drawSignatureInput.checked) {
                     populateSignatureFromPad();
+                } else if (generateSignatureInput.checked) {
+                    populateSignatureFromText();
                 } else {
                     populateSignatureFromFileUpload();
                 }
             });
+
+
+            function populateSignatureFromText() {
+                const signatureText = document.getElementById("signature-text-input").value;
+                if (!signatureText) return;
+
+                const canvas = document.createElement("canvas");
+                const ctx = canvas.getContext("2d");
+                ctx.font = "32px Arial";
+                const textMetrics = ctx.measureText(signatureText);
+
+                canvas.width = textMetrics.width;
+                canvas.height = parseInt(ctx.font, 10);
+
+                ctx.fillStyle = "black";
+                ctx.font = "32px Arial";
+                ctx.fillText(signatureText, 0, canvas.height * 0.8);
+
+                const dataURL = canvas.toDataURL();
+                populateSignature(dataURL);
+            }
+
             
             function populateSignature(imgUrl) {
                 const img = new Image();
@@ -184,6 +219,7 @@
                 populateSignature(dataURL);
             }
             signatureUpload.addEventListener('change', populateSignatureFromFileUpload);
+            signatureTextInput.addEventListener('change', populateSignatureFromText);
             saveSignatureBtn.addEventListener('click', populateSignatureFromPad);