Merge pull request #424 from DimK10/Bug-Multitool-Filename

Bug multitool filename
Stirling-Tools · Oct 15, 2023 · 3be12c8 · 3be12c8
2 parents 39ac823 + 89345c8
commit 3be12c8
Show file tree

Hide file tree

Showing 6 changed files with 168 additions and 9 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/src/main/resources/static/css/dark-mode.css b/src/main/resources/static/css/dark-mode.css
@@ -91,3 +91,26 @@ hr {
     border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */
     background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for <hr> */
 }
+
+#global-buttons-container input {
+    background-color: #323948;
+    caret-color: #ffffff;
+    color: #ffffff;
+}
+#global-buttons-container input::placeholder {
+    color: #ffffff;
+}
+
+#global-buttons-container input:disabled::-webkit-input-placeholder { /* WebKit browsers */
+    color:    #6E6865;
+}
+#global-buttons-container input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+    color:    #6E6865;
+}
+#global-buttons-container input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
+    color:    #6E6865;
+}
+#global-buttons-container input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
+    color:    #6E6865;
+}
+
diff --git a/src/main/resources/static/css/light-mode.css b/src/main/resources/static/css/light-mode.css
@@ -2,4 +2,23 @@
 body {
     --body-background-color: 255, 255, 255;
     --base-font-color: 33, 37, 41;
-}
+}
+
+
+#global-buttons-container input {
+    background-color: #ffffff;
+    /*caret-color: #ffffff;*/
+    /*color: #ffffff;*/
+}
+/*#global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*#global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*#global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/
+/*    color:    #98A0AB;*/
+/*}*/
+/*#global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/
+/*    color:    #98A0AB;*/
+/*}*/
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -55,6 +55,17 @@ class PdfActionsManager {
     deletePageButtonCallback(e) {
         var imgContainer = this.getPageContainer(e.target);
         this.pagesContainer.removeChild(imgContainer);
+        if (this.pagesContainer.childElementCount === 0) {
+            const filenameInput = document.getElementById('filename-input');
+            const filenameParagraph = document.getElementById('filename');
+            const downloadBtn = document.getElementById('export-button');
+
+            filenameInput.disabled = true;
+            filenameInput.value = "";
+            filenameParagraph.innerText = "";
+
+            downloadBtn.disabled = true;
+        }
     };
 
     insertFileButtonCallback(e) {

diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -3,17 +3,21 @@ class PdfContainer {
     pagesContainer;
     pagesContainerWrapper;
     pdfAdapters;
+    downloadLink;
 
     constructor(id, wrapperId, pdfAdapters) {
-        this.fileName = null;
         this.pagesContainer = document.getElementById(id)
         this.pagesContainerWrapper = document.getElementById(wrapperId);
+        this.downloadLink = null;
         this.movePageTo = this.movePageTo.bind(this);
         this.addPdfs = this.addPdfs.bind(this);
         this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
         this.rotateElement = this.rotateElement.bind(this);
         this.rotateAll = this.rotateAll.bind(this);
         this.exportPdf = this.exportPdf.bind(this);
+        this.updateFilename = this.updateFilename.bind(this);
+        this.setDownloadAttribute = this.setDownloadAttribute.bind(this);
+        this.preventIllegalChars = this.preventIllegalChars.bind(this);
 
         this.pdfAdapters = pdfAdapters;
 
@@ -28,6 +32,15 @@ class PdfContainer {
         window.addPdfs = this.addPdfs;
         window.exportPdf = this.exportPdf;
         window.rotateAll = this.rotateAll;
+
+        const filenameInput = document.getElementById('filename-input');
+        const downloadBtn = document.getElementById('export-button');
+
+        filenameInput.onkeyup = this.updateFilename;
+        filenameInput.onkeydown = this.preventIllegalChars;
+        filenameInput.disabled = true;
+        filenameInput.innerText = "";
+        downloadBtn.disabled = true;
     }
 
     movePageTo(startElement, endElement, scrollTo = false) {
@@ -60,6 +73,29 @@ class PdfContainer {
         input.setAttribute("accept", "application/pdf");
         input.onchange = async(e) => {
             const files = e.target.files;
+            if (files.length > 0) {
+                const filenameInput = document.getElementById('filename-input');
+                const pagesContainer = document.getElementById('pages-container');
+                const downloadBtn = document.getElementById('export-button');
+
+                filenameInput.disabled = false;
+
+                if (pagesContainer.childElementCount === 0) {
+                    filenameInput.value = "";
+                    this.filename = null;
+                    downloadBtn.disabled = true;
+                } else {
+                    this.filename = filenameInput.value;
+                }
+
+                if (this.filename === null || this.filename === undefined) {
+                    filenameInput.value = files[0].name;
+                } else {
+                    filenameInput.value = this.filename;
+                }
+
+            }
+
             this.addPdfsFromFiles(files, nextSiblingElement);
         }
 
@@ -192,6 +228,27 @@ class PdfContainer {
         const url = URL.createObjectURL(pdfBlob);
         const downloadOption = localStorage.getItem('downloadOption');
 
+        const filenameInput = document.getElementById('filename-input');
+
+        let inputArr = filenameInput.value.split('.');
+
+        if (inputArr !== null && inputArr !== undefined && inputArr.length > 0) {
+
+            inputArr = inputArr.filter(n => n); // remove all empty strings, nulls or undefined
+
+            if (inputArr.length > 1) {
+                inputArr.pop(); // remove right part after last dot
+            }
+
+            filenameInput.value = inputArr.join('');
+            this.filename = filenameInput.value;
+        }
+
+        if (!filenameInput.value.includes('.pdf')) {
+            filenameInput.value = filenameInput.value + '.pdf';
+            this.filename = filenameInput.value;
+        }
+
         if (downloadOption === 'sameWindow') {
             // Open the file in the same window
             window.location.href = url;
@@ -200,12 +257,45 @@ class PdfContainer {
             window.open(url, '_blank');
         } else {
             // Download the file
-            const downloadLink = document.createElement('a');
-            downloadLink.href = url;
-            downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
-            downloadLink.click();
+            this.downloadLink = document.createElement('a');
+            this.downloadLink.id = 'download-link';
+            this.downloadLink.href = url;
+            // downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
+            // downloadLink.download = this.fileName;
+            this.downloadLink.setAttribute('download', this.filename ? this.fileName : 'managed.pdf');
+            this.downloadLink.setAttribute('target', '_blank');
+            this.downloadLink.onclick = this.setDownloadAttribute;
+            this.downloadLink.click();
         }
     }
+
+    setDownloadAttribute() {
+        this.downloadLink.setAttribute("download", this.filename ? this.filename : 'managed.pdf');
+    }
+
+    updateFilename() {
+       const filenameInput = document.getElementById('filename-input');
+        const downloadBtn = document.getElementById('export-button');
+
+        if (filenameInput.value === "") {
+            downloadBtn.disabled = true;
+            return;
+        }
+
+        downloadBtn.disabled = false;
+        this.filename = filenameInput.value;
+    }
+
+    preventIllegalChars(e) {
+        // const filenameInput = document.getElementById('filename-input');
+        //
+        // filenameInput.value = filenameInput.value.replace('.pdf', '');
+        //
+        // // prevent .
+        // if (filenameInput.value.includes('.')) {
+        //     filenameInput.value.replace('.','');
+        // }
+    }
 }
 
 export default PdfContainer;
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
@@ -20,15 +20,22 @@ <h2 th:text="#{multiTool.header}"></h2>
             <div class="container">
                 <div class="row justify-content-center">
                     <div class="col-md-6" style="text-align: center">
+                        <div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
+                            <div class="form-group">
+                                <label for="filename-input">Filename</label>
+                                <input type="text" class="form-control" id="filename-input" placeholder="filename">
+                            </div>
+                        </div>
                         <div id="global-buttons-container">
-                            
+
                             <button class="btn btn-primary" onclick="addPdfs()">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                     <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                     <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                                 </svg>
                             </button>
-
+
+
                             <button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                                     <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
@@ -58,7 +65,7 @@ <h2 th:text="#{multiTool.header}"></h2>
         <div th:insert="~{fragments/footer.html :: footer}"></div>
     </div>
     <div id="drag-container"></div>
-    
+
     <script type="module">
         import PdfContainer from './js/multitool/PdfContainer.js';
         import DragDropManager from "./js/multitool/DragDropManager.js";
@@ -114,6 +121,7 @@ <h2 th:text="#{multiTool.header}"></h2>
         #global-buttons-container > * {
             padding: 0.6rem 0.75rem;
         }
+
         #global-buttons-container svg {
             width: 20px;
             height: 20px;