From f7a8c31b5afc076b487f81e5111e36e6320a6bec Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Fri, 10 Feb 2023 10:41:11 +0000
Subject: [PATCH] Tidy up display of file selector instructions

---
 www/index.html | 12 +++++++++---
 www/js/app.js  | 53 +++++++++++++++++++++++++++++++-------------------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/www/index.html b/www/index.html
index e84e55e7..16a9e897 100644
--- a/www/index.html
+++ b/www/index.html
@@ -712,7 +712,7 @@
                             <div id="noZIMFound" style="display: none;">
                                 <p style="color: red;">There were no ZIM file(s) found in the selected location! Please choose a different folder.</p>
                             </div>
-                            <div id="openLocalFiles" style="display: block;">
+                            <div id="openLocalFiles">
                                 <div class="row">
                                     <div class="col-xs-6">
                                         <input type="button" class="btn btn-primary btn-inline" value="Select file" id="archiveFile" />
@@ -721,7 +721,7 @@
                                         <input type="button" class="btn btn-primary btn-inline" value="Select folder" id="archiveFiles" />
                                     </div>
                                 </div>
-                                <div id="UWPInstructions" class="row">
+                                <div class="row">
                                     <div class="col-xs-6">
                                         <p>For a single unsplit archive</p>
                                     </div>
@@ -729,6 +729,12 @@
                                         <p>For multiple or split archives</p>
                                     </div>
                                 </div>
+                                <div id="UWPInstructions" class="row">
+                                    <p>
+                                        Choose <b>File</b> for one archive, or <b>Folder</b> for multiple or split archive files in a single directory.<br />
+                                        Alternatively, <b>drag-and-drop your file(s) into the app.</b>
+                                    </p>
+                                </div>
                                 <div class="row" style="padding-bottom: 0.5em;">
                                     <input type="file" class="btn btn-primary btn-inline" value="Select folder with ZIM files" id="archiveFilesLegacy" multiple />
                                 </div>
@@ -739,7 +745,7 @@
                                     </p>
                                 </div>
                             </div>
-                            <div id="rescanStorage" style="display:none;" class="row">
+                            <div id="rescanStorage" class="row">
                                 <div class="col-xs-11">
                                     <input style="float:left; margin-right:1em;" type="button" class="btn btn-primary btn-inline" value="Select storage" id="btnRescanDeviceStorage" />
                                     Tap to select app's local storage or to select a file or folder. <b>You can also drag and drop a ZIM file into the app.</b>
diff --git a/www/js/app.js b/www/js/app.js
index c407764e..fc5c13c8 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -787,9 +787,21 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
             } else {
                 cssUIThemeGetOrSet(determinedTheme);
             }
-            if (typeof Windows !== 'undefined' || typeof window.showOpenFilePicker === 'function') {
-                document.getElementById('openLocalFiles').style.display = params.rescan ? "block" : "none";
+            if (typeof Windows === 'undefined' && typeof window.showOpenFilePicker !== 'function' && !window.dialog) {
+                //If not UWP, File System Access API, or Electron methods, display legacy File Select
+                document.getElementById('archiveFile').style.display = 'none';
+                document.getElementById('UWPInstructions').style.display = 'none';
+                document.getElementById('archivesFound').style.display = 'none';
+                document.getElementById('instructions').style.display = appstate.selectedArchive ? 'none' : 'block';
+                document.getElementById('archiveFilesLegacy').style.display = 'block';
+                document.getElementById('btnRefresh').style.display = 'none';
+            } else {
+                document.getElementById('archiveFilesLegacy').style.display = 'none';
+                document.getElementById('instructions').style.display = 'none';
+                // Remove instructions if user has already loaded an archive, and it isn't the packaged archive
+                document.getElementById('UWPInstructions').style.display = appstate.selectedArchive && ~params.packagedFile.indexOf(appstate.selectedArchive._file.name) ? 'none' : 'block';
             }
+            document.getElementById('chooseArchiveFromLocalStorage').style.display = "block";
             document.getElementById('libraryArea').style.borderColor = '';
             document.getElementById('libraryArea').style.borderStyle = '';
             if (params.packagedFile && params.storedFile && params.storedFile !== params.packagedFile) {
@@ -1000,27 +1012,10 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
             //Re-enable top-level scrolling
             document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
             document.getElementById('search-article').style.overflowY = "auto";
-            if (document.getElementById('openLocalFiles').style.display == "none") {
-                document.getElementById('rescanStorage').style.display = "block";
-            }
-
             //If user hadn't previously picked a folder or a file, resort to the local storage folder (UWP functionality)
             if (params.localStorage && !params.pickedFolder && !params.pickedFile) {
                 params.pickedFolder = params.localStorage;
             }
-            if (typeof Windows === 'undefined' && typeof window.showOpenFilePicker !== 'function' && !window.dialog) {
-                //If not UWP, File System Access API, or Electron methods, display legacy File Select
-                document.getElementById('archiveFile').style.display = 'none';
-                document.getElementById('archiveFiles').style.display = 'none';
-                document.getElementById('UWPInstructions').style.display = 'none';
-                document.getElementById('archivesFound').style.display = 'none';
-                if (!appstate.selectedArchive) document.getElementById('instructions').style.display = 'block';
-                document.getElementById('archiveFilesLegacy').style.display = 'block';
-                document.getElementById('btnRefresh').style.display = 'none';
-            } else {
-                document.getElementById('archiveFilesLegacy').style.display = 'none';
-            }
-            document.getElementById('chooseArchiveFromLocalStorage').style.display = "block";
             // If user had previously picked a file using Native FS, offer to re-open
             if (typeof window.showOpenFilePicker === 'function' && !(params.pickedFile || params.pickedFolder)) {
                 getNativeFSHandle();
@@ -1122,6 +1117,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
                         uiUtil.systemAlert('We could not get a handle to the previously picked file or folder!<br>' +
                             'This is probably because the contents of the folder have changed. Please try picking it again.');
                         document.getElementById('openLocalFiles').style.display = 'block';
+                        document.getElementById('rescanStorage').style.display = 'none';
                         return;
                     }
                     if (handle.kind === 'directory') {
@@ -1136,6 +1132,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
                             console.error('Unable to read previously picked file!', err);
                             uiUtil.systemAlert('We could not retrieve the previously picked file or folder!<br>Please try picking it again.');
                             document.getElementById('openLocalFiles').style.display = 'block';
+                            document.getElementById('rescanStorage').style.display = 'none';
                         });
                     }
                 });
@@ -1144,6 +1141,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
             }
             setTimeout(function () {
                 document.getElementById('openLocalFiles').style.display = 'none';
+                document.getElementById('rescanStorage').style.display = 'block';
                 document.getElementById('usage').style.display = 'none';
                 selectFired = false;
             }, 0);
@@ -2608,8 +2606,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
         function populateDropDownListOfArchives(archiveDirectories, displayOnly) {
             document.getElementById('scanningForArchives').style.display = 'none';
             document.getElementById('chooseArchiveFromLocalStorage').style.display = '';
-            document.getElementById('rescanStorage').style.display = params.rescan ? "none" : "block";
+            document.getElementById('rescanStorage').style.display = params.rescan ? 'none' : 'block';
             document.getElementById('openLocalFiles').style.display = params.rescan ? "block" : "none";
+            // Hide instructions now user has selected a folder, unless the packaged archive is still loaded
+            if (appstate.selectedArchive && !~params.packagedFile.indexOf(appstate.selectedArchive._file.name)) {
+                document.getElementById('UWPInstructions').style.display = 'none';
+            }
             var plural = 's';
             plural = archiveDirectories.length === 1 ? '' : plural;
             document.getElementById('archiveNumber').innerHTML = '<b>' + archiveDirectories.length + '</b> Archive' + plural + ' found in selected location (tap "Select storage" to change)';
@@ -2921,6 +2923,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
                         params.rescan = false;
                     } else {
                         document.getElementById('openLocalFiles').style.display = 'none';
+                        document.getElementById('rescanStorage').style.display = 'block';
                         document.getElementById('usage').style.display = 'none';
                         document.getElementById('btnHome').click();
                     }
@@ -2947,6 +2950,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
          */
         function displayFileSelect() {
             document.getElementById('openLocalFiles').style.display = 'block';
+            // Remove instructions if user has already loaded an archive, and it isn't the packaged archive
+            var UWPInstructions = document.getElementById('UWPInstructions');
+            if (appstate.selectedArchive) {
+                UWPInstructions.style.display = ~params.packagedFile.indexOf(appstate.selectedArchive._file.name) ? 'block' : 'none';
+            } else {
+                UWPInstructions.style.display = 'block';
+            }
+            document.getElementById('rescanStorage').style.display = 'none';
             // This handles use of the file picker
             document.getElementById('archiveFiles').addEventListener('change', setLocalArchiveFromFileSelect);
         }
@@ -2986,6 +2997,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
             } else {
                 var files = packet.dataTransfer.files;
                 document.getElementById('openLocalFiles').style.display = 'none';
+                document.getElementById('rescanStorage').style.display = 'block';
                 document.getElementById('usage').style.display = 'none';
                 params.rescan = false;
                 setLocalArchiveFromFileList(files);
@@ -3329,6 +3341,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
                         document.getElementById('instructions').style.display = 'none';
                     } else {
                         document.getElementById('openLocalFiles').style.display = 'none';
+                        document.getElementById('rescanStorage').style.display = 'block';
                     }
                     document.getElementById('usage').style.display = 'none';
                     if (params.rememberLastPage && ~params.lastPageVisit.indexOf(params.storedFile.replace(/\.zim(\w\w)?$/, ''))) {