slimmer appearance of the user interface

src/main/resources/static/js/enable-submit-on-file.js

@@ -0,0 +1,41 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const elementsContainer = document.getElementById("elementsContainer");
+  const slidersContainer = document.getElementById("sliders-container");
+  const infoContainer = document.getElementById("infoContainer");
+  const signaturesResults = document.getElementById("signatures-results");
+  const signaturesList = document.getElementById("signatures-list");
+  const canvasesContainer = document.getElementById("canvasesContainer");
+
+  const selectedFiles = document.getElementsByClassName("selected-files");
+  const fileInput = document.getElementById("fileInput-input");
+
+  if (!fileInput || !elementsContainer || selectedFiles.length === 0) return;
+
+  function toggleVisibility(element, show) {
+    if (element) {
+      element.style.display = show ? "block" : "none";
+    }
+  }
+
+  const observer = new MutationObserver((mutationsList) => {
+    mutationsList.forEach((mutation) => {
+      if (mutation.type === "childList") {
+        const hasChildren = selectedFiles[0]?.childNodes.length > 0;
+
+        toggleVisibility(elementsContainer, hasChildren);
+        toggleVisibility(slidersContainer, hasChildren);
+        toggleVisibility(infoContainer, hasChildren);
+        toggleVisibility(canvasesContainer, hasChildren);
+
+        if (!hasChildren) {
+          toggleVisibility(signaturesResults, false);
+          if (signaturesList) {
+            signaturesList.textContent = "";
+          }
+        }
+      }
+    });
+  });
+
+  observer.observe(selectedFiles[0], { childList: true });
+});

src/main/resources/static/js/merge.js

@@ -179,15 +179,14 @@ function updateFiles() {
 
 document.querySelector("#resetFileInputBtn").addEventListener("click", ()=>{
   let formElement = document.querySelector("#fileInput-input");
-    formElement.value = '';
-    clearLiElements();
-    updateFiles();
-
+  formElement.value = '';
+  clearLiElements();
+  updateFiles();
 });
 
 function clearLiElements(){
   let listGroupItemNodeList = document.querySelectorAll(".list-group-item");
   for (let i = 0; i < listGroupItemNodeList.length; i++) {
     listGroupItemNodeList[i].remove();
-    };
-  }
+  };
+}

src/main/resources/static/js/pages/add-image.js

@@ -8,24 +8,27 @@ document.getElementById('download-pdf').addEventListener('click', async () => {
   link.click();
 });
 let originalFileName = '';
-document.querySelector('input[name=pdf-upload]').addEventListener('change', async (event) => {
+document.querySelector('input[name=fileInput]').addEventListener('change', async (event) => {
   const fileInput = event.target;
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
-    if (allFiles && allFiles.length > 0) {
-      const file = allFiles[0];
-      originalFileName = file.name.replace(/\.[^/.]+$/, '');
-      const pdfData = await file.arrayBuffer();
-      pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
-      const pdfDoc = await pdfjsLib.getDocument({data: pdfData}).promise;
-      await DraggableUtils.renderPage(pdfDoc, 0);
+    if (e.detail) {
+      const {allFiles} = e.detail;
+      if (allFiles && allFiles.length > 0) {
+        const file = allFiles[0];
+        originalFileName = file.name.replace(/\.[^/.]+$/, '');
+        const pdfData = await file.arrayBuffer();
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
+        const pdfDoc = await pdfjsLib.getDocument({data: pdfData}).promise;
+        await DraggableUtils.renderPage(pdfDoc, 0);
 
-      document.querySelectorAll('.show-on-file-selected').forEach((el) => {
-        el.style.cssText = '';
-      });
+        document.querySelectorAll('.show-on-file-selected').forEach((el) => {
+          el.style.cssText = '';
+        });
+      }
     }
   });
 });
+
 document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.show-on-file-selected').forEach((el) => {
     el.style.cssText = 'display:none !important';
@@ -34,9 +37,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 const imageUpload = document.querySelector('input[name=image-upload]');
 imageUpload.addEventListener('change', (e) => {
-  if (!e.target.files) {
-    return;
-  }
+  if (!e.target.files) return;
   for (const imageFile of e.target.files) {
     var reader = new FileReader();
     reader.readAsDataURL(imageFile);

src/main/resources/static/js/pages/adjust-contrast.js

@@ -224,11 +224,13 @@ async function downloadPDF() {
 document.getElementById('fileInput-input').addEventListener('change', function (e) {
   const fileInput = e.target;
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
-    if (allFiles && allFiles.length > 0) {
-      const file = allFiles[0];
-      inputFileName = file.name;
-      renderPDFAndSaveOriginalImageData(file);
+    if (e.detail) {
+      const {allFiles} = e.detail;
+      if (allFiles && allFiles.length > 0) {
+        const file = allFiles[0];
+        inputFileName = file.name;
+        renderPDFAndSaveOriginalImageData(file);
+      }
     }
   });
 });

src/main/resources/static/js/pages/change-metadata.js

@@ -33,47 +33,49 @@ var lastPDFFile = null;
 
 fileInput.addEventListener('change', async function () {
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
-    if (allFiles && allFiles.length > 0) {
-      const file = allFiles[0];
-      while (otherMetadataEntriesDiv.firstChild) {
-        otherMetadataEntriesDiv.removeChild(otherMetadataEntriesDiv.firstChild);
-      }
-      while (customMetadataFormContainer.firstChild) {
-        customMetadataFormContainer.removeChild(customMetadataFormContainer.firstChild);
-      }
-      var url = URL.createObjectURL(file);
-      pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
-      const pdf = await pdfjsLib.getDocument(url).promise;
-      const pdfMetadata = await pdf.getMetadata();
-      lastPDFFile = pdfMetadata?.info;
-      console.log(pdfMetadata);
-      if (!pdfMetadata?.info?.Custom || pdfMetadata?.info?.Custom.size == 0) {
-        customModeCheckbox.disabled = true;
-        customModeCheckbox.checked = false;
-      } else {
-        customModeCheckbox.disabled = false;
-      }
-      authorInput.value = pdfMetadata?.info?.Author;
-      creationDateInput.value = convertDateFormat(pdfMetadata?.info?.CreationDate);
-      creatorInput.value = pdfMetadata?.info?.Creator;
-      keywordsInput.value = pdfMetadata?.info?.Keywords;
-      modificationDateInput.value = convertDateFormat(pdfMetadata?.info?.ModDate);
-      producerInput.value = pdfMetadata?.info?.Producer;
-      subjectInput.value = pdfMetadata?.info?.Subject;
-      titleInput.value = pdfMetadata?.info?.Title;
-      console.log(pdfMetadata?.info);
-      const trappedValue = pdfMetadata?.info?.Trapped;
-      // Get all options in the select element
-      const options = trappedInput.options;
-      // Loop through all options to find the one with a matching value
-      for (let i = 0; i < options.length; i++) {
-        if (options[i].value === trappedValue) {
-          options[i].selected = true;
-          break;
+    if (e.detail) {
+      const {allFiles} = e.detail;
+      if (allFiles && allFiles.length > 0) {
+        const file = allFiles[0];
+        while (otherMetadataEntriesDiv.firstChild) {
+          otherMetadataEntriesDiv.removeChild(otherMetadataEntriesDiv.firstChild);
+        }
+        while (customMetadataFormContainer.firstChild) {
+          customMetadataFormContainer.removeChild(customMetadataFormContainer.firstChild);
+        }
+        var url = URL.createObjectURL(file);
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
+        const pdf = await pdfjsLib.getDocument(url).promise;
+        const pdfMetadata = await pdf.getMetadata();
+        lastPDFFile = pdfMetadata?.info;
+        console.log(pdfMetadata);
+        if (!pdfMetadata?.info?.Custom || pdfMetadata?.info?.Custom.size == 0) {
+          customModeCheckbox.disabled = true;
+          customModeCheckbox.checked = false;
+        } else {
+          customModeCheckbox.disabled = false;
+        }
+        authorInput.value = pdfMetadata?.info?.Author;
+        creationDateInput.value = convertDateFormat(pdfMetadata?.info?.CreationDate);
+        creatorInput.value = pdfMetadata?.info?.Creator;
+        keywordsInput.value = pdfMetadata?.info?.Keywords;
+        modificationDateInput.value = convertDateFormat(pdfMetadata?.info?.ModDate);
+        producerInput.value = pdfMetadata?.info?.Producer;
+        subjectInput.value = pdfMetadata?.info?.Subject;
+        titleInput.value = pdfMetadata?.info?.Title;
+        console.log(pdfMetadata?.info);
+        const trappedValue = pdfMetadata?.info?.Trapped;
+        // Get all options in the select element
+        const options = trappedInput.options;
+        // Loop through all options to find the one with a matching value
+        for (let i = 0; i < options.length; i++) {
+          if (options[i].value === trappedValue) {
+            options[i].selected = true;
+            break;
+          }
         }
+        addExtra();
       }
-      addExtra();
     }
   });
 });

src/main/resources/static/js/pages/crop.js

@@ -72,11 +72,13 @@ window.addEventListener('resize', function () {
 
 fileInput.addEventListener('change', function (e) {
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
-    if (allFiles && allFiles.length > 0) {
-      canvasesContainer.style.display = 'block'; // set for visual purposes
-      let file = allFiles[0];
-      renderPageFromFile(file);
+    if (e.detail) {
+      const {allFiles} = e.detail;
+      if (allFiles && allFiles.length > 0) {
+        canvasesContainer.style.display = 'block'; // set for visual purposes
+        let file = allFiles[0];
+        renderPageFromFile(file);
+      }
     }
   });
 });

src/main/resources/static/js/pages/pdf-to-csv.js

@@ -113,11 +113,13 @@ window.addEventListener('resize', function () {
 
 fileInput.addEventListener('change', function (e) {
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
-    if (allFiles && allFiles.length > 0) {
-      canvasesContainer.style.display = 'block'; // set for visual purposes
-      file = e.target.files[0];
-      renderPageFromFile(file);
+    if (e.detail) {
+      const {allFiles} = e.detail;
+      if (allFiles && allFiles.length > 0) {
+        canvasesContainer.style.display = 'block'; // set for visual purposes
+        file = e.target.files[0];
+        renderPageFromFile(file);
+      }
     }
   });
 });

src/main/resources/static/js/pages/sign.js

@@ -50,21 +50,24 @@ function addSignatureFromPreview() {
 }
 
 let originalFileName = '';
-document.querySelector('input[name=pdf-upload]').addEventListener('change', async (event) => {
+document.querySelector('input[name=fileInput]').addEventListener('change', async (event) => {
   const fileInput = event.target;
+
   fileInput.addEventListener('file-input-change', async (e) => {
-    const {allFiles} = e.detail;
-    if (allFiles && allFiles.length > 0) {
-      const file = allFiles[0];
-      originalFileName = file.name.replace(/\.[^/.]+$/, '');
-      const pdfData = await file.arrayBuffer();
-      pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
-      const pdfDoc = await pdfjsLib.getDocument({data: pdfData}).promise;
-      await DraggableUtils.renderPage(pdfDoc, 0);
-
-      document.querySelectorAll('.show-on-file-selected').forEach((el) => {
-        el.style.cssText = '';
-      });
+    if (e.detail) {
+      const {allFiles} = e.detail;
+      if (allFiles && allFiles.length > 0) {
+        const file = allFiles[0];
+        originalFileName = file.name.replace(/\.[^/.]+$/, '');
+        const pdfData = await file.arrayBuffer();
+        pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs';
+        const pdfDoc = await pdfjsLib.getDocument({data: pdfData}).promise;
+        await DraggableUtils.renderPage(pdfDoc, 0);
+
+        document.querySelectorAll('.show-on-file-selected').forEach((el) => {
+          el.style.cssText = '';
+        });
+      }
     }
   });
 });

src/main/resources/templates/auto-split-pdf.html

@@ -26,13 +26,8 @@
               <div
                 th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='application/pdf')}">
               </div>
-              <div class="form-check ms-3">
-                <input type="checkbox" name="duplexMode" id="duplexMode">
-                <label for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
-              </div>
               <p>
-                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button"
-                  aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
+                <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#info" role="button" aria-expanded="false" aria-controls="info" th:text="#{info}"></a>
               </p>
               <div class="collapse" id="info">
                 <!-- Added a brief description -->
@@ -48,8 +43,14 @@
                 <p><a th:href="@{'/files/Auto%20Splitter%20Divider%20(with%20instructions).pdf'}" download
                     th:text="#{autoSplitPDF.dividerDownload2}"></a></p>
               </div>
+              <div id="elementsContainer" style="display: none;">
+                <div class="form-check ms-3">
+                  <input type="checkbox" name="duplexMode" id="duplexMode">
+                  <label for="duplexMode" th:text=#{autoSplitPDF.duplexMode}></label>
+                </div>
 
-              <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
+                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{autoSplitPDF.submit}"></button>
+              </div>
             </form>
           </div>
         </div>

src/main/resources/templates/convert/book-to-pdf.html

@@ -12,11 +12,16 @@
         <br><br>
         <div class="container">
           <div class="row justify-content-center">
-            <div class="col-md-6">
-              <h2 th:text="#{BookToPDF.header}"></h2>
+            <div class="col-md-6 bg-card">
+              <div class="tool-header">
+                <span class="material-symbols-rounded tool-header-icon advance">book</span>
+                <span class="tool-header-text" th:text="#{BookToPDF.header}"></span>
+              </div>
               <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/book/pdf'}">
                 <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false)}"></div>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{BookToPDF.submit}"></button>
+                <div id="elementsContainer" style="display: none;">
+                  <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{BookToPDF.submit}"></button>
+                </div>
               </form>
               <p class="mt-3" th:text="#{BookToPDF.credit}"></p>
             </div>

src/main/resources/templates/convert/file-to-pdf.html

@@ -41,7 +41,7 @@
                 <a
                   href="https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html">https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html</a>
               </div>
-              <div>
+              <div id="elementsContainer" style="display: none;">
                 <br/>
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{fileToPDF.submit}"></button>
               </div>

src/main/resources/templates/convert/html-to-pdf.html

@@ -18,15 +18,17 @@
                 <span class="tool-header-text" th:text="#{HTMLToPDF.header}"></span>
               </div>
               <form method="post" enctype="multipart/form-data" th:action="@{'/api/v1/convert/html/pdf'}">
-                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='text/html,application/zip' )}"></div>
-                <div class="mb-3">
-                  <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
-                  <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
+                <p class="mt-3" th:text="#{HTMLToPDF.help}"></p>
+                <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multipleInputsForSingleRequest=false, accept='text/html,application/zip')}"></div>
+                <div id="elementsContainer" style="display: none;">
+                  <div class="mb-3">
+                    <label for="zoom" th:text="#{HTMLToPDF.zoom}" class="form-label"></label>
+                    <input type="number" step="0.1" class="form-control" id="zoom" name="zoom" value="1">
+                  </div>
+                  <br>
+                  <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
                 </div>
-                <br>
-                <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{HTMLToPDF.submit}"></button>
               </form>
-              <p class="mt-3" th:text="#{HTMLToPDF.help}"></p>
               <p class="mt-3" th:text="#{HTMLToPDF.credit}"></p>
             </div>
           </div>