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

Enable drag and drop of ZIM files #29 (#493)

Browse Source 
Closes #29 .
This commit is contained in:
Jaifroid 2019-05-18 19:54:46 +01:00 committed by GitHub
parent 9cc7cb9ff0
commit 4b74685f34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 99 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
www/index.html
View File

@ -122,7 +122,7 @@
<br />
<h4>Step 2 : copy the content onto your device</h4>
If you have enough space, you can put several archives.
<h4>Step 3 : open the extension, go to the "Configure" menu and select your ZIM file</h4>
<h4>Step 3 : drag and drop the archive file into the open the app, or go to the "Configure" menu and select your ZIM file</h4>
<h4>Step 4 : enjoy Wikipedia offline!</h4>
<h3>Privacy policy</h3>
<h4>Short answer :</h4>
@ -131,7 +131,7 @@
Anyway, if you think your Internet access can be watched and/or if you are paranoid, you should shut down your 3G and Wifi access before using the application.
<br />This application only reads the archive files of your device : it does not read any other files.
<h3>Feedback / helping / contributing</h3>
This application is still a work in progress. There are many bugs and improvements that need to be done.
This application is still work in progress. There may be bugs and issues, and new features are planned.
Suggestions and patches/pull requests are welcome : the source code is on <a href="https://github.com/kiwix/kiwix-js" target="_blank">github</a>.
The <a href="https://github.com/kiwix/kiwix-js/issues" target="_blank">bugtracker</a> is on github too. We use it as our roadmap.
<br />Alternatively, you can send your feedback <a href="mailto:mossroy@mossroy.fr?subject=%5BKiwix%5D%20Feedback%20about%20Kiwix%20JS">by email</a>.
@ -198,10 +198,13 @@
<div class="row">
<h2>Configuration</h2>
<div class="column">
This application needs a ZIM archive to work. If you did not download one yet, please see the About section
<p id="downloadInstruction">This application needs a ZIM archive to work. For download instructions, please see the About section</p>
<div id="selectorsDisplay" style="display: none;">
<p>Drag and drop a new ZIM file, or <a href="#" id="selectorsDisplayLink">display file selectors</a></p>
</div>
<div id="openLocalFiles" style="display: none;">
Please select the .zim file (or all the .zimaa, .zimab etc in case of a split ZIM file)<br />
<input type="file" id="archiveFiles" multiple class="btn" accept=".zim,.dat,.idx,.txt,.zimaa,.zimab,.zimac,.zimad,.zimae,.zimaf,.zimag,.zimah,.zimai,.zimaj,.zimak,.zimal,.zimam,.ziman,.zimao,.zimap,.zimaq,.zimar,.zimas,.zimat,.zimau,.zimav,.zimaw,.zimax,.zimay,.zimaz,.zimba,.zimbb,.zimbc,.zimbd,.zimbe,.zimbf,.zimbg,.zimbh,.zimbi,.zimbj,.zimbk,.zimbl,.zimbm,.zimbn,.zimbo,.zimbp,.zimbq,.zimbr,.zimbs,.zimbt,.zimbu,.zimbv,.zimbw,.zimbx,.zimby,.zimbz" /><br />
<p>Please select or drag and drop the .zim file (or all the .zimaa, .zimab etc in case of a split ZIM file)</p>
<input type="file" id="archiveFiles" multiple class="btn" accept=".zim,.zimaa,.zimab,.zimac,.zimad,.zimae,.zimaf,.zimag,.zimah,.zimai,.zimaj,.zimak,.zimal,.zimam,.ziman,.zimao,.zimap,.zimaq,.zimar,.zimas,.zimat,.zimau,.zimav,.zimaw,.zimax,.zimay,.zimaz,.zimba,.zimbb,.zimbc,.zimbd,.zimbe,.zimbf,.zimbg,.zimbh,.zimbi,.zimbj,.zimbk,.zimbl,.zimbm,.zimbn,.zimbo,.zimbp,.zimbq,.zimbr,.zimbs,.zimbt,.zimbu,.zimbv,.zimbw,.zimbx,.zimby,.zimbz" /><br />
<strong>Only Mediawiki-based (wiki*.zim* files, like wikipedia), StackExchange and some video-based ZIMs (e.g. TEDx) have been tested</strong>.
Dynamic content is not currently supported in jQuery mode.<br />
</div>

97
www/js/app.js
View File

@ -61,6 +61,10 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
params['hideActiveContentWarning'] = cookies.getItem('hideActiveContentWarning') === 'true';
document.getElementById('hideActiveContentWarningCheck').checked = params.hideActiveContentWarning;
// Define globalDropZone (universal drop area) and configDropZone (highlighting area on Config page)
var globalDropZone = document.getElementById('search-article');
var configDropZone = document.getElementById('configuration');
/**
* Resize the IFrame height, so that it fills the whole available height in the window
*/
@ -580,17 +584,78 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
* Displays the zone to select files from the archive
*/
function displayFileSelect() {
$('#openLocalFiles').show();
$('#archiveFiles').on('change', setLocalArchiveFromFileSelect);
document.getElementById('openLocalFiles').style.display = 'block';
// Set the main drop zone
configDropZone.addEventListener('dragover', handleGlobalDragover);
configDropZone.addEventListener('dragleave', function(e) {
configDropZone.style.border = '';
});
// Also set a global drop zone (allows us to ensure Config is always displayed for the file drop)
globalDropZone.addEventListener('dragover', function(e) {
e.preventDefault();
if (configDropZone.style.display === 'none') document.getElementById('btnConfigure').click();
e.dataTransfer.dropEffect = 'link';
});
globalDropZone.addEventListener('drop', handleFileDrop);
// This handles use of the file picker
document.getElementById('archiveFiles').addEventListener('change', setLocalArchiveFromFileSelect);
}
function handleGlobalDragover(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'link';
configDropZone.style.border = '3px dotted red';
}
function handleIframeDragover(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'link';
document.getElementById('btnConfigure').click();
}
function handleIframeDrop(e) {
e.stopPropagation();
e.preventDefault();
return;
}
function handleFileDrop(packet) {
packet.stopPropagation();
packet.preventDefault();
configDropZone.style.border = '';
var files = packet.dataTransfer.files;
document.getElementById('openLocalFiles').style.display = 'none';
document.getElementById('downloadInstruction').style.display = 'none';
document.getElementById('selectorsDisplay').style.display = 'inline';
setLocalArchiveFromFileList(files);
// This clears the display of any previously picked archive in the file selector
document.getElementById('archiveFiles').value = null;
}
// Add event listener to link which allows user to show file selectors
document.getElementById('selectorsDisplayLink').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('openLocalFiles').style.display = 'block';
document.getElementById('selectorsDisplay').style.display = 'none';
});
function setLocalArchiveFromFileList(files) {
// Check for usable file types
for (var i = files.length; i--;) {
// DEV: you can support other file types by adding (e.g.) '|dat|idx' after 'zim\w{0,2}'
if (!/\.(?:zim\w{0,2})$/i.test(files[i].name)) {
alert("One or more files does not appear to be a ZIM file!");
return;
}
}
resetCssCache();
selectedArchive = zimArchiveLoader.loadArchiveFromFiles(files, function (archive) {
// The archive is set : go back to home page to start searching
$("#btnHome").click();
document.getElementById('downloadInstruction').style.display = 'none';
});
}
/**
* Sets the localArchive from the File selects populated by user
*/
@ -768,10 +833,20 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
$('#articleListHeaderMessage').empty();
$('#articleListWithHeader').hide();
$("#prefix").val("");
iframeArticleContent.onload = function () {
iframeArticleContent.onload = function() {
// The content is fully loaded by the browser : we can hide the spinner
iframeArticleContent.onload = function () {};
$("#searchingArticles").hide();
// Deflect drag-and-drop of ZIM file on the iframe to Config
var doc = iframeArticleContent.contentDocument.documentElement;
var docBody = doc ? doc.getElementsByTagName('body') : null;
docBody = docBody ? docBody[0] : null;
if (docBody) {
docBody.addEventListener('dragover', handleIframeDragover);
docBody.addEventListener('drop', handleIframeDrop);
}
iframeArticleContent.contentWindow.onunload = function() {
$("#searchingArticles").show();
};
};
iframeArticleContent.src = dirEntry.namespace + "/" + encodeURIComponent(dirEntry.url);
// Display the iframe content
@ -910,11 +985,21 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
$('#articleListHeaderMessage').empty();
$('#articleListWithHeader').hide();
$("#prefix").val("");
// Inject the new article's HTML into the iframe
var articleContent = iframeArticleContent.contentDocument.documentElement;
articleContent.innerHTML = htmlArticle;
// Add any missing classes stripped from the <html> tag
if (htmlCSS) articleContent.getElementsByTagName('body')[0].classList.add(htmlCSS);
var docBody = articleContent.getElementsByTagName('body');
docBody = docBody ? docBody[0] : null;
if (docBody) {
// Add any missing classes stripped from the <html> tag
if (htmlCSS) docBody.classList.add(htmlCSS);
// Deflect drag-and-drop of ZIM file on the iframe to Config
docBody.addEventListener('dragover', handleIframeDragover);
docBody.addEventListener('drop', handleIframeDrop);
}
// Allow back/forward in browser history
pushBrowserHistoryState(dirEntry.namespace + "/" + dirEntry.url);