kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-10 12:53:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Tidy up display of file selector instructions

Browse Source
This commit is contained in:
Jaifroid 2023-02-10 10:41:11 +00:00
parent d019889e85
commit f7a8c31b5a
2 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
www/index.html
View File

@ -712,7 +712,7 @@
<div id="noZIMFound" style="display: none;"> <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> <p style="color: red;">There were no ZIM file(s) found in the selected location! Please choose a different folder.</p>
</div> </div>
<div id="openLocalFiles" style="display: block;"> <div id="openLocalFiles">
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<input type="button" class="btn btn-primary btn-inline" value="Select file" id="archiveFile" /> <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" /> <input type="button" class="btn btn-primary btn-inline" value="Select folder" id="archiveFiles" />
</div> </div>
</div> </div>
<div id="UWPInstructions" class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<p>For a single unsplit archive</p> <p>For a single unsplit archive</p>
</div> </div>
@ -729,6 +729,12 @@
<p>For multiple or split archives</p> <p>For multiple or split archives</p>
</div> </div>
</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;"> <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 /> <input type="file" class="btn btn-primary btn-inline" value="Select folder with ZIM files" id="archiveFilesLegacy" multiple />
</div> </div>
@ -739,7 +745,7 @@
</p> </p>
</div> </div>
</div> </div>
<div id="rescanStorage" style="display:none;" class="row"> <div id="rescanStorage" class="row">
<div class="col-xs-11"> <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" /> <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> 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>

53
www/js/app.js
View File

@ -787,9 +787,21 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
} else { } else {
cssUIThemeGetOrSet(determinedTheme); cssUIThemeGetOrSet(determinedTheme);
} }
if (typeof Windows !== 'undefined' || typeof window.showOpenFilePicker === 'function') { if (typeof Windows === 'undefined' && typeof window.showOpenFilePicker !== 'function' && !window.dialog) {
document.getElementById('openLocalFiles').style.display = params.rescan ? "block" : "none"; //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.borderColor = '';
document.getElementById('libraryArea').style.borderStyle = ''; document.getElementById('libraryArea').style.borderStyle = '';
if (params.packagedFile && params.storedFile && params.storedFile !== params.packagedFile) { 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 //Re-enable top-level scrolling
document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px'; document.getElementById('scrollbox').style.height = window.innerHeight - document.getElementById('top').getBoundingClientRect().height + 'px';
document.getElementById('search-article').style.overflowY = "auto"; 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 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) { if (params.localStorage && !params.pickedFolder && !params.pickedFile) {
params.pickedFolder = params.localStorage; 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 user had previously picked a file using Native FS, offer to re-open
if (typeof window.showOpenFilePicker === 'function' && !(params.pickedFile || params.pickedFolder)) { if (typeof window.showOpenFilePicker === 'function' && !(params.pickedFile || params.pickedFolder)) {
getNativeFSHandle(); 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>' + 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.'); 'This is probably because the contents of the folder have changed. Please try picking it again.');
document.getElementById('openLocalFiles').style.display = 'block'; document.getElementById('openLocalFiles').style.display = 'block';
document.getElementById('rescanStorage').style.display = 'none';
return; return;
} }
if (handle.kind === 'directory') { 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); 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.'); 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('openLocalFiles').style.display = 'block';
document.getElementById('rescanStorage').style.display = 'none';
}); });
} }
}); });
@ -1144,6 +1141,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
} }
setTimeout(function () { setTimeout(function () {
document.getElementById('openLocalFiles').style.display = 'none'; document.getElementById('openLocalFiles').style.display = 'none';
document.getElementById('rescanStorage').style.display = 'block';
document.getElementById('usage').style.display = 'none'; document.getElementById('usage').style.display = 'none';
selectFired = false; selectFired = false;
}, 0); }, 0);
@ -2608,8 +2606,12 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
function populateDropDownListOfArchives(archiveDirectories, displayOnly) { function populateDropDownListOfArchives(archiveDirectories, displayOnly) {
document.getElementById('scanningForArchives').style.display = 'none'; document.getElementById('scanningForArchives').style.display = 'none';
document.getElementById('chooseArchiveFromLocalStorage').style.display = ''; 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"; 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'; var plural = 's';
plural = archiveDirectories.length === 1 ? '' : plural; plural = archiveDirectories.length === 1 ? '' : plural;
document.getElementById('archiveNumber').innerHTML = '<b>' + archiveDirectories.length + '</b> Archive' + plural + ' found in selected location (tap "Select storage" to change)'; 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; params.rescan = false;
} else { } else {
document.getElementById('openLocalFiles').style.display = 'none'; document.getElementById('openLocalFiles').style.display = 'none';
document.getElementById('rescanStorage').style.display = 'block';
document.getElementById('usage').style.display = 'none'; document.getElementById('usage').style.display = 'none';
document.getElementById('btnHome').click(); document.getElementById('btnHome').click();
} }
@ -2947,6 +2950,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
*/ */
function displayFileSelect() { function displayFileSelect() {
document.getElementById('openLocalFiles').style.display = 'block'; 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 // This handles use of the file picker
document.getElementById('archiveFiles').addEventListener('change', setLocalArchiveFromFileSelect); document.getElementById('archiveFiles').addEventListener('change', setLocalArchiveFromFileSelect);
} }
@ -2986,6 +2997,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
} else { } else {
var files = packet.dataTransfer.files; var files = packet.dataTransfer.files;
document.getElementById('openLocalFiles').style.display = 'none'; document.getElementById('openLocalFiles').style.display = 'none';
document.getElementById('rescanStorage').style.display = 'block';
document.getElementById('usage').style.display = 'none'; document.getElementById('usage').style.display = 'none';
params.rescan = false; params.rescan = false;
setLocalArchiveFromFileList(files); setLocalArchiveFromFileList(files);
@ -3329,6 +3341,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'utf8', 'cache', 'images
document.getElementById('instructions').style.display = 'none'; document.getElementById('instructions').style.display = 'none';
} else { } else {
document.getElementById('openLocalFiles').style.display = 'none'; document.getElementById('openLocalFiles').style.display = 'none';
document.getElementById('rescanStorage').style.display = 'block';
} }
document.getElementById('usage').style.display = 'none'; document.getElementById('usage').style.display = 'none';
if (params.rememberLastPage && ~params.lastPageVisit.indexOf(params.storedFile.replace(/\.zim(\w\w)?$/, ''))) { if (params.rememberLastPage && ~params.lastPageVisit.indexOf(params.storedFile.replace(/\.zim(\w\w)?$/, ''))) {