From f65b151bc3e97a795f8cd1f25421f6620130ac73 Mon Sep 17 00:00:00 2001
From: Ryan <ryantl66@gmail.com>
Date: Tue, 8 Apr 2025 20:30:17 -0400
Subject: [PATCH] Progress Modal on download buttons

---
 CHANGELOG.md       |  8 ++++
 css/styles.css     | 14 +++++++
 index.html         | 22 +++++++++++
 js/domUtils.js     | 11 +++---
 js/fileActions.js  | 98 ++++++++++++++++++++++++++++++++++++++++++----
 js/fileListView.js | 11 +++---
 js/i18n.js         |  2 +
 js/main.js         |  4 +-
 8 files changed, 152 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 82f13a7..099c502 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,14 @@
   - Updated the t() function to be more defensive against missing keys.
   - Provided instructions and code examples to ensure the language change settings are reliably saved and applied across sessions.
 
+- **ZIP Download Flow**
+  - Progress Modal: In the ZIP download handler (confirmDownloadZip), added code to show a progress modal (with a spinning icon) as soon as the user confirms the download and before the request to create the ZIP begins. Once the blob is received or an error occurs, we hide the progress modal.
+  - Inline Handlers and Global Exposure: Ensured that functions like confirmDownloadZip are attached to the global window object (or called via appropriate inline handlers) so that the inline onclick events in the HTML work without reference errors.
+
+- **Single File Download Flow**
+  - Modal Popup for Single File: Replaced the direct download link for single files with a modal-driven flow. When the download button is clicked, the openDownloadModal(fileName, folder) function is called. This stores the file details and shows a modal where the user can confirm (or edit) the file name.
+  - Confirm Download Function: When the user clicks the Download button in the modal, the confirmSingleDownload() function is called. This function constructs a URL for download.php (using GET parameters for folder and file), fetches the file as a blob, and triggers a download using a temporary anchor element. A progress modal is also used here to give feedback during the download process.
+
 ---
 
 ## Changes 4/7/2025 v1.0.9
diff --git a/css/styles.css b/css/styles.css
index 506521e..eb611b3 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -2065,6 +2065,20 @@ body.dark-mode .admin-panel-content label {
   animation: spin 1s linear infinite;
 }
 
+.download-spinner {
+  font-size: 48px;
+  animation: spin 2s linear infinite;
+  color: var(--download-spinner-color, #000);
+}
+
+body:not(.dark-mode) {
+  --download-spinner-color: #000;
+}
+
+body.dark-mode {
+  --download-spinner-color: #fff;
+}
+
 .rise-effect {
   transform: translateY(-20px);
   transition: transform 0.3s ease;
diff --git a/index.html b/index.html
index c82b48b..96462e8 100644
--- a/index.html
+++ b/index.html
@@ -342,6 +342,28 @@
     </div> <!-- end mainColumn -->
   </div> <!-- end main-wrapper -->
 
+  <!-- Download Progress Modal -->
+  <div id="downloadProgressModal" class="modal" style="display: none;">
+    <div class="modal-content" style="text-align: center; padding: 20px;">
+      <!-- Material icon spinner with a dedicated class -->
+      <span class="material-icons download-spinner">autorenew</span>
+      <p>Preparing your download...</p>
+    </div>
+  </div>
+
+  <!-- Single File Download Modal -->
+<div id="downloadFileModal" class="modal" style="display: none;">
+  <div class="modal-content" style="text-align: center; padding: 20px;">
+    <h4>Download File</h4>
+    <p>Confirm or change the download file name:</p>
+    <input type="text" id="downloadFileNameInput" class="form-control" placeholder="Filename" />
+    <div style="margin-top: 15px; text-align: right;">
+      <button id="cancelDownloadFile" class="btn btn-secondary" onclick="document.getElementById('downloadFileModal').style.display = 'none';">Cancel</button>
+      <button id="confirmSingleDownloadButton" class="btn btn-primary" onclick="confirmSingleDownload()">Download</button>
+    </div>
+  </div>
+</div>
+
   <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
   <div id="changePasswordModal" class="modal" style="display:none;">
     <div class="modal-content" style="max-width:400px; margin:auto;">
diff --git a/js/domUtils.js b/js/domUtils.js
index 109ce7e..91188ab 100644
--- a/js/domUtils.js
+++ b/js/domUtils.js
@@ -1,5 +1,6 @@
 // domUtils.js
 import { t } from './i18n.js';
+import { openDownloadModal } from './fileActions.js';
 
 // Basic DOM Helpers
 export function toggleVisibility(elementId, shouldShow) {
@@ -165,11 +166,11 @@ export function buildFileTableRow(file, folderPath) {
     <td class="hide-small hide-medium nowrap">${safeUploader}</td>
     <td>
       <div class="button-wrap" style="display: flex; justify-content: left; gap: 5px;">
-        <a class="btn btn-sm btn-success download-btn" 
-           href="download.php?folder=${encodeURIComponent(file.folder || 'root')}&file=${encodeURIComponent(file.name)}" 
-           title="Download">
-          <i class="material-icons">file_download</i>
-        </a>
+        <button type="button" class="btn btn-sm btn-success download-btn" 
+          onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
+          title="Download">
+        <i class="material-icons">file_download</i>
+        </button>
         ${file.editable ? `
           <button class="btn btn-sm edit-btn" 
                   onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})'
diff --git a/js/fileActions.js b/js/fileActions.js
index fcd84d8..ed55e7d 100644
--- a/js/fileActions.js
+++ b/js/fileActions.js
@@ -28,7 +28,7 @@ document.addEventListener("DOMContentLoaded", function () {
       window.filesToDelete = [];
     });
   }
-  
+
   const confirmDelete = document.getElementById("confirmDeleteFiles");
   if (confirmDelete) {
     confirmDelete.addEventListener("click", function () {
@@ -76,6 +76,81 @@ export function handleDownloadZipSelected(e) {
   }, 100);
 };
 
+export function openDownloadModal(fileName, folder) {
+  // Store file details globally for the download confirmation function.
+  window.singleFileToDownload = fileName;
+  window.currentFolder = folder || "root";
+  
+  // Optionally pre-fill the file name input in the modal.
+  const input = document.getElementById("downloadFileNameInput");
+  if (input) {
+    input.value = fileName; // Use file name as-is (or modify if desired)
+  }
+  
+  // Show the single file download modal (a new modal element).
+  document.getElementById("downloadFileModal").style.display = "block";
+  
+  // Optionally focus the input after a short delay.
+  setTimeout(() => {
+    if (input) input.focus();
+  }, 100);
+}
+
+export function confirmSingleDownload() {
+  // Get the file name from the modal. Users can change it if desired.
+  let fileName = document.getElementById("downloadFileNameInput").value.trim();
+  if (!fileName) {
+    showToast("Please enter a name for the file.");
+    return;
+  }
+  
+  // Hide the download modal.
+  document.getElementById("downloadFileModal").style.display = "none";
+  // Show the progress modal (same as in your ZIP download flow).
+  document.getElementById("downloadProgressModal").style.display = "block";
+  
+  // Build the URL for download.php using GET parameters.
+  const folder = window.currentFolder || "root";
+  const downloadURL = "download.php?folder=" + encodeURIComponent(folder) +
+                      "&file=" + encodeURIComponent(window.singleFileToDownload);
+  
+  fetch(downloadURL, {
+    method: "GET",
+    credentials: "include"
+  })
+    .then(response => {
+      if (!response.ok) {
+        return response.text().then(text => {
+          throw new Error("Failed to download file: " + text);
+        });
+      }
+      return response.blob();
+    })
+    .then(blob => {
+      if (!blob || blob.size === 0) {
+        throw new Error("Received empty file.");
+      }
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.style.display = "none";
+      a.href = url;
+      a.download = fileName;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      a.remove();
+      // Hide the progress modal.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      showToast("Download started.");
+    })
+    .catch(error => {
+      // Hide progress modal and show error.
+      document.getElementById("downloadProgressModal").style.display = "none";
+      console.error("Error downloading file:", error);
+      showToast("Error downloading file: " + error.message);
+    });
+}
+
 export function handleExtractZipSelected(e) {
   if (e) {
     e.preventDefault();
@@ -137,7 +212,8 @@ document.addEventListener("DOMContentLoaded", function () {
       document.getElementById("downloadZipModal").style.display = "none";
     });
   }
-  
+
+  // This part remains in your confirmDownloadZip event handler:
   const confirmDownloadZip = document.getElementById("confirmDownloadZip");
   if (confirmDownloadZip) {
     confirmDownloadZip.addEventListener("click", function () {
@@ -149,7 +225,11 @@ document.addEventListener("DOMContentLoaded", function () {
       if (!zipName.toLowerCase().endsWith(".zip")) {
         zipName += ".zip";
       }
+      // Hide the ZIP name input modal
       document.getElementById("downloadZipModal").style.display = "none";
+      // Show the progress modal here only on confirm
+      console.log("Download confirmed. Showing progress modal.");
+      document.getElementById("downloadProgressModal").style.display = "block";
       const folder = window.currentFolder || "root";
       fetch("downloadZip.php", {
         method: "POST",
@@ -181,9 +261,13 @@ document.addEventListener("DOMContentLoaded", function () {
           a.click();
           window.URL.revokeObjectURL(url);
           a.remove();
+          // Hide the progress modal after download starts
+          document.getElementById("downloadProgressModal").style.display = "none";
           showToast("Download started.");
         })
         .catch(error => {
+          // Hide the progress modal on error
+          document.getElementById("downloadProgressModal").style.display = "none";
           console.error("Error downloading zip:", error);
           showToast("Error downloading selected files as zip: " + error.message);
         });
@@ -220,12 +304,12 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
         folder.toLowerCase() !== "trash" &&
         (folder === username || folder.indexOf(username + "/") === 0)
       );
-      
+
       const rootOption = document.createElement("option");
       rootOption.value = username;
       rootOption.textContent = formatFolderName(username);
       folderSelect.appendChild(rootOption);
-      
+
       folders.forEach(folder => {
         if (folder !== username) {
           const option = document.createElement("option");
@@ -239,7 +323,7 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
     }
     return;
   }
-  
+
   try {
     const response = await fetch("getFolderList.php");
     let folders = await response.json();
@@ -247,12 +331,12 @@ export async function loadCopyMoveFolderListForModal(dropdownId) {
       folders = folders.map(item => item.folder);
     }
     folders = folders.filter(folder => folder !== "root" && folder.toLowerCase() !== "trash");
-    
+
     const rootOption = document.createElement("option");
     rootOption.value = "root";
     rootOption.textContent = "(Root)";
     folderSelect.appendChild(rootOption);
-    
+
     if (Array.isArray(folders) && folders.length > 0) {
       folders.forEach(folder => {
         const option = document.createElement("option");
diff --git a/js/fileListView.js b/js/fileListView.js
index 3c42704..6f3c7a5 100644
--- a/js/fileListView.js
+++ b/js/fileListView.js
@@ -14,6 +14,7 @@ import {
 } from './domUtils.js';
 import { t } from './i18n.js';
 import { bindFileListContextMenu } from './fileMenu.js';
+import { openDownloadModal } from './fileActions.js';
 
 export let fileData = [];
 export let sortOrder = { column: "uploaded", ascending: true };
@@ -284,11 +285,11 @@ export function renderGalleryView(folder) {
           <span class="gallery-file-name" style="display: block;">${escapeHTML(file.name)}</span>
           ${tagBadgesHTML}
           <div class="button-wrap" style="display: flex; justify-content: center; gap: 5px;">
-            <a class="btn btn-sm btn-success download-btn" 
-               href="download.php?folder=${encodeURIComponent(file.folder || 'root')}&file=${encodeURIComponent(file.name)}" 
-               title="Download">
-              <i class="material-icons">file_download</i>
-            </a>
+            <button type="button" class="btn btn-sm btn-success download-btn" 
+                onclick="openDownloadModal('${file.name}', '${file.folder || 'root'}')" 
+                title="Download">
+                <i class="material-icons">file_download</i>
+            </button>
             ${file.editable ? `
               <button class="btn btn-sm edit-btn" onclick='editFile(${JSON.stringify(file.name)}, ${JSON.stringify(file.folder || "root")})' title="Edit">
                 <i class="material-icons">edit</i>
diff --git a/js/i18n.js b/js/i18n.js
index dbee6ee..fdb6bda 100644
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -135,6 +135,8 @@ const translations = {
       "upload": "Upload",
       "copy": "Copy",
       "extract": "Extract",
+      "user": "User:",
+      "password": "Password:",
   
       // Dark Mode Toggle
       "dark_mode_toggle": "Dark Mode",
diff --git a/js/main.js b/js/main.js
index 4c513b2..1aaf2df 100644
--- a/js/main.js
+++ b/js/main.js
@@ -8,7 +8,7 @@ import { initDragAndDrop, loadSidebarOrder, loadHeaderOrder } from './dragAndDro
 import { initTagSearch, openTagModal, filterFilesByTag } from './fileTags.js';
 import { displayFilePreview } from './filePreview.js';
 import { loadFileList } from './fileListView.js';
-import { initFileActions, renameFile } from './fileActions.js';
+import { initFileActions, renameFile, openDownloadModal, confirmSingleDownload } from './fileActions.js';
 import { editFile, saveFile } from './fileEditor.js';
 import { t, applyTranslations, setLocale } from './i18n.js';
 
@@ -64,6 +64,8 @@ window.toggleAllCheckboxes = toggleAllCheckboxes;
 window.editFile = editFile;
 window.saveFile = saveFile;
 window.renameFile = renameFile;
+window.confirmSingleDownload = confirmSingleDownload;
+window.openDownloadModal = openDownloadModal;
 
 // Global variable for the current folder.
 window.currentFolder = "root";