Code clean up and minor updates

bradsec · Jul 29, 2024 · bb0d96e · bb0d96e
1 parent 3cdba7c
commit bb0d96e
Show file tree

Hide file tree

Showing 11 changed files with 877 additions and 1,098 deletions.
diff --git a/index.html b/index.html
@@ -16,12 +16,6 @@
   <link href="css/styles.css" rel="stylesheet" />
 </head>
 <body>
-  <script>
-    (function () {
-      const theme = localStorage.getItem("theme") || "light";
-      document.body.setAttribute("data-theme", theme);
-    })();
-  </script>
   <div id="spinner" class="spinner"></div>
   <div class="wrapper">
     <header>
@@ -134,20 +128,24 @@
       <div id="progress-container">
         <div id="progress-bar"></div>
       </div>
-      <button id="convert-button" onclick="convertToPDF()" style="display: none">Convert and PDF Merge</button>
-      <button id="reset-button" onclick="resetPage()" style="display: none">Clear File List</button>
+      <button id="convert-button" class="button primary">Convert and PDF Merge</button>
+      <button id="reset-button" class="button secondary">Clear File List</button>
       <div id="file-link"></div>
     </main>
     <footer>
       <p>
         Supported File Types: PDF, JPG, PNG, GIF, WEBP. Images are automatically resized to optimally fit A4-sized documents. On desktop browsers, the new PDF will automatically save to your Downloads. For mobile devices, manual saving of the file may be required. All processing is performed locally in your browser, using the <a href="https://pdf-lib.js.org/" target="_blank">pdf-lib</a> JavaScript library and the HTML5 FileReader API.
       </p>
     </footer>
-    <script src="js/fontkit.umd.min.js"></script>
-    <script src="js/pdf-lib.min.js"></script>
-    <script src="js/exif-reader.js"></script>
-    <script src="js/pdfmerge.js"></script>
-    <script src="js/theme.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@pdf-lib/[email protected]/dist/fontkit.umd.min.js"></script>
+    <script src="js/utils.js" type="module"></script>
+    <script src="js/fileHandling.js" type="module"></script>
+    <script src="js/watermark.js" type="module"></script>
+    <script src="js/pdfProcessing.js" type="module"></script>
+    <script src="js/theme.js" type="module"></script>
+    <script src="js/main.js" type="module"></script>
   </div>
 </body>
 </html>
diff --git a/js/exif-reader.js b/js/exif-reader.js
diff --git a/js/fileHandling.js b/js/fileHandling.js
@@ -0,0 +1,193 @@
+import { formatFileSize, displayFlashMessage } from './utils.js';
+
+const MAX_FILE_SIZE = 50 * 1024 * 1024; // 50MB
+const selectedFiles = [];
+const addedFilesSet = new Set();
+
+function handleFileInputChange(event) {
+    const fileInput = event.target;
+    const fileLink = document.getElementById("file-link");
+    const spinner = document.getElementById("spinner");
+
+    fileLink.style.display = "none";
+    spinner.style.display = "block";
+
+    Array.from(fileInput.files).forEach((file) => {
+        if (isSupportedFileType(file) && isNewFile(file)) {
+            addedFilesSet.add(file.name);
+            selectedFiles.push(file);
+        }
+    });
+
+    updateSelectedFilesList();
+    spinner.style.display = "none";
+}
+
+function handleDropArea(event) {
+    event.preventDefault();
+    event.target.classList.remove("drag");
+    const spinner = document.getElementById("spinner");
+    const fileLink = document.getElementById("file-link");
+
+    fileLink.style.display = "none";
+    spinner.style.display = "block";
+
+    const newFiles = Array.from(event.dataTransfer.files).filter(
+        (file) => isSupportedFileType(file) && isNewFile(file)
+    );
+
+    newFiles.forEach((file) => {
+        if (!selectedFiles.some((f) => f.name === file.name)) {
+            selectedFiles.push(file);
+        }
+    });
+
+    updateSelectedFilesList();
+    spinner.style.display = "none";
+}
+
+function isSupportedFileType(file) {
+    if (!file) return false;
+    const supportedExtensions = ["pdf", "jpg", "jpeg", "png", "gif", "webp"];
+    const extension = file.name.split(".").pop().toLowerCase();
+    return supportedExtensions.includes(extension);
+}
+
+function isNewFile(file) {
+    if (!file) return false;
+    const fileAlreadyExists = selectedFiles.some((f) => f.name === file.name);
+    return (
+        !fileAlreadyExists &&
+        (file.size <= MAX_FILE_SIZE || file.type === "application/pdf")
+    );
+}
+
+function updateSelectedFilesList() {
+    const fileList = document.getElementById("selected-files-list");
+    const fragment = document.createDocumentFragment();
+    const fileMap = new Map();
+
+    const filteredFiles = selectedFiles.filter((file) => {
+        if (!isSupportedFileType(file) || fileMap.has(file.name)) {
+            return false;
+        }
+        fileMap.set(file.name, true);
+        return true;
+    });
+
+    selectedFiles.length = 0;
+    selectedFiles.push(...filteredFiles);
+
+    filteredFiles.forEach((file, index) => {
+        const listItem = document.createElement("li");
+        listItem.className = "flex-item";
+        listItem.draggable = true;
+        listItem.id = `file-${index}`;
+
+        listItem.addEventListener("dragstart", handleDragStart);
+        listItem.addEventListener("dragover", handleDragOver);
+        listItem.addEventListener("drop", handleDrop);
+
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "material-icons-outlined";
+        iconSpan.style.marginRight = "8px";
+        const fileExtension = file.name.split(".").pop().toLowerCase();
+
+        if (["jpg", "jpeg", "webp", "gif", "png"].includes(fileExtension)) {
+            iconSpan.textContent = "image";
+        } else if (fileExtension === "pdf") {
+            iconSpan.textContent = "description";
+        } else {
+            iconSpan.textContent = "description";
+        }
+
+        const fileSize = formatFileSize(file.size);
+
+        listItem.appendChild(iconSpan);
+        listItem.appendChild(document.createTextNode(`${file.name} (${fileSize})`));
+
+        fragment.appendChild(listItem);
+    });
+
+    fileList.innerHTML = "";
+    fileList.appendChild(fragment);
+
+    updateButtonVisibility();
+    updateToggleItemVisibility();
+}
+
+function handleDragStart(e) {
+    e.dataTransfer.setData('text/plain', e.target.id);
+    e.dataTransfer.effectAllowed = "move";
+}
+
+function handleDragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+    const draggedItemId = e.dataTransfer.getData('text');
+    const draggedItem = document.getElementById(draggedItemId);
+    const dropTarget = e.target.closest('li');
+
+    if (dropTarget && draggedItem !== dropTarget) {
+        const draggedIndex = parseInt(draggedItemId.split('-')[1]);
+        const targetIndex = parseInt(dropTarget.id.split('-')[1]);
+
+        const itemToMove = selectedFiles[draggedIndex];
+        selectedFiles.splice(draggedIndex, 1);
+        selectedFiles.splice(targetIndex, 0, itemToMove);
+
+        updateSelectedFilesList();
+    }
+}
+
+function updateButtonVisibility() {
+    const convertButton = document.getElementById("convert-button");
+    const resetButton = document.getElementById("reset-button");
+
+    if (selectedFiles.length > 0) {
+        convertButton.style.display = "inline-block";
+        resetButton.style.display = "inline-block";
+    } else {
+        convertButton.style.display = "none";
+        resetButton.style.display = "none";
+    }
+}
+
+function updateToggleItemVisibility() {
+    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp"];
+    const hasImageFiles = selectedFiles.some((file) => {
+        const fileName = file.name.toLowerCase();
+        return imageExtensions.some((ext) => fileName.endsWith(ext));
+    });
+
+    const toggleImageItem = document.getElementById("image-details-toggle");
+    const toggleWatermarkItem = document.getElementById("watermark-details-toggle");
+
+    toggleImageItem.style.display = hasImageFiles ? "block" : "none";
+    toggleWatermarkItem.style.display = selectedFiles.length > 0 ? "block" : "none";
+}
+
+function resetFiles() {
+    selectedFiles.length = 0;
+    const fileList = document.getElementById("selected-files-list");
+    fileList.innerHTML = "";
+    const fileInput = document.getElementById("file-input");
+    fileInput.value = "";
+    updateButtonVisibility();
+    updateToggleItemVisibility();
+}
+
+export {
+    handleFileInputChange,
+    handleDropArea,
+    updateSelectedFilesList,
+    resetFiles,
+    selectedFiles,
+    isSupportedFileType,
+    updateButtonVisibility,
+    updateToggleItemVisibility  
+};
diff --git a/js/fontkit.umd.min.js b/js/fontkit.umd.min.js
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,51 @@
+import { handleFileInputChange, handleDropArea, resetFiles, updateButtonVisibility } from './fileHandling.js';
+import { convertToPDF } from './pdfProcessing.js';
+import { initWatermarkControls } from './watermark.js';
+
+function initializeApp() {
+    const fileInput = document.getElementById("file-input");
+    const dropArea = document.getElementById("drop-area");
+    const convertButton = document.getElementById("convert-button");
+    const resetButton = document.getElementById("reset-button");
+
+    fileInput.addEventListener("change", handleFileInputChange);
+
+    dropArea.addEventListener("dragover", (e) => {
+        e.preventDefault();
+        dropArea.classList.add("drag");
+    });
+
+    dropArea.addEventListener("dragleave", () => {
+        dropArea.classList.remove("drag");
+    });
+
+    dropArea.addEventListener("drop", handleDropArea);
+
+    convertButton.addEventListener("click", convertToPDF);
+    resetButton.addEventListener("click", resetFiles);
+
+    updateButtonVisibility();
+    initWatermarkControls();
+    loadCheckboxStates();
+}
+
+function loadCheckboxStates() {
+    const checkboxIds = [
+        "print-image-details",
+        "print-image-page-numbers",
+        "print-image-hash",
+        "landscape-orientation"
+    ];
+
+    checkboxIds.forEach(id => {
+        const checkbox = document.getElementById(id);
+        const savedState = localStorage.getItem(id);
+        checkbox.checked = savedState === "true";
+
+        checkbox.addEventListener("change", function() {
+            localStorage.setItem(id, this.checked);
+        });
+    });
+}
+
+document.addEventListener("DOMContentLoaded", initializeApp);
diff --git a/js/pdf-lib.min.js b/js/pdf-lib.min.js