mirror of
https://github.com/kiwix/kiwix-js-pwa.git
synced 2025-08-07 13:28:30 -04:00
dd0157f260
Former-commit-id: 2cc9e196e7da61e8c8fe108c85495e48ce16ca9f Former-commit-id: 7245f922a7d5210a259feb750927886760d8828f Former-commit-id: 6f4ec3269affe10cf5417fcb2de00a9540418fe5
1028 lines
86 KiB
HTML
1028 lines
86 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
|
|
<title>Kiwix JS PWA</title>
|
|
<meta name="description" content="Offline Wikipedia reader">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src http: https: file: data: blob: chrome-extension: ms-appx-web: 'unsafe-inline' 'unsafe-eval';">
|
|
<meta name="theme-color" content="black">
|
|
<!--
|
|
Kiwix (offline Wikipedia reader) - HTML5/Javascript version
|
|
Home page : https://www.kiwix.org
|
|
|
|
Main authors of this application:
|
|
Mossroy - https://github.com/mossroy - mossroy@mossroy.fr
|
|
Peter-x - https://github.com/peter-x
|
|
Jaifroid - Adapted for UWP for Windows 10 and Windows Mobile 10, Electron, NWJS and PWA:
|
|
Geoffrey Kantaris egk10@cam.ac.uk
|
|
|
|
Copyright 2013-2018 Mossroy, Peter-x, Jaifroid, sharun-s and contributors
|
|
License GPL v3:
|
|
|
|
This file is part of Kiwix.
|
|
|
|
Kiwix is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
Kiwix is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License
|
|
along with Kiwix (file LICENSE-GPLv3.txt). If not, see <https://www.gnu.org/licenses/>
|
|
|
|
-->
|
|
<link rel="manifest" href="../manifest.json" />
|
|
<link rel="stylesheet" href="css/app.css" />
|
|
<meta http-equiv="origin-trial" content="AnG+5F+rjlKjrAQRS51rH/ROl3ettQ4qi/bXUGlH1bL7576BZJv3EcCK5vYLq713XXKGxZ09KY7jePkxO7uhkg4AAABTeyJvcmlnaW4iOiJodHRwczovL3B3YS5raXdpeC5vcmc6NDQzIiwiZmVhdHVyZSI6IkZpbGVIYW5kbGluZyIsImV4cGlyeSI6MTYzNDA4MzE5OX0=">
|
|
<meta http-equiv="origin-trial" content="Arnv6Dpvw32+gIU8oM8yiU6ZWhcTvPa3QjmbO2e+TWT7+t53LD0s2KRowUtljbmqNXuB+XlDcld5P/60jcHbMgIAAABVeyJvcmlnaW4iOiJodHRwczovL2tpd2l4LmdpdGh1Yi5pbzo0NDMiLCJmZWF0dXJlIjoiRmlsZUhhbmRsaW5nIiwiZXhwaXJ5IjoxNjM0MDgzMTk5fQ==">
|
|
<!-- Bootstrap -->
|
|
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
|
|
<!-- link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen" /-->
|
|
<script type="text/javascript">
|
|
// This script is needed to retrieve launch arguments when the app is started by double-clicking on a file
|
|
var launchArguments = null;
|
|
if (typeof Windows !== 'undefined' && Windows.UI && Windows.UI.WebUI && Windows.UI.WebUI.WebUIApplication) {
|
|
Windows.UI.WebUI.WebUIApplication.addEventListener('activated', function (eventArgs) {
|
|
if (eventArgs.kind === Windows.ApplicationModel.Activation.ActivationKind.file) {
|
|
console.log("App was activated with a file: " + eventArgs.files[0].name);
|
|
launchArguments = eventArgs;
|
|
}
|
|
}, false);
|
|
}
|
|
// If we're running in NWJS context, rename NWJS require and add needed functions
|
|
if (typeof window.nw !== 'undefined') {
|
|
window.requireNode = window.require;
|
|
window.require = undefined;
|
|
window.fs = requireNode('fs');
|
|
}
|
|
if ('serviceWorker' in navigator && !/^ms-appx-web/i.test(window.location.protocol)) {
|
|
console.log('Trying to activate Service Worker...');
|
|
if (navigator.serviceWorker.controller) {
|
|
console.log('Service Worker is already active');
|
|
} else {
|
|
// Register the service worker
|
|
navigator.serviceWorker.register("../pwabuilder-sw.js", {
|
|
scope: "../"
|
|
}).then(function (reg) {
|
|
console.log("Service Worker has been registered for scope: " + reg.scope);
|
|
}).catch(function (err) {
|
|
console.err('Service Worker could not be registered', err);
|
|
});
|
|
}
|
|
} else {
|
|
console.log('Service Worker not (re-)registered in this context...');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body role="application" class="dark">
|
|
<!-- Modal info -->
|
|
<div id="myModal" class="modal">
|
|
<div class="modal-dialog modal-full">
|
|
<div id="modalTheme" class="modal-content dark">
|
|
<div id="largeModal" class="modal-body">
|
|
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
|
|
<img style="float:left; padding-right:1em;" alt="Kiwix icon" src="img/icons/kiwix-midnightblue-90.png">
|
|
|
|
<h2 style="font-size:32px;margin-top:10px;">
|
|
Welcome to Kiwix JS <span class="identity">for Windows</span>
|
|
</h2>
|
|
<h4>Version <span class="version">1.0</span> (<a href="#update">changes</a>)</h4>
|
|
<h3>Please read this important information</h3>
|
|
<div class="disclaimer">
|
|
<p>
|
|
<b>DISCLAIMER:</b> Please be aware that Kiwix works with offline archives. To get updated info, you will need to
|
|
download a new archive periodically. Information in archives is free, open source and provided by volunteers.<br>
|
|
<strong>Kiwix gives no guarantee as to the accuracy of information in the archives you access with this app.</strong>
|
|
</p>
|
|
</div>
|
|
<p style="padding-top:10px;">
|
|
This application may be packaged with a small sample ZIM archive WITHOUT PICTURES of the top 100 Wikipedia articles so that you
|
|
can get a feel for how offline Wikipedia browsing works. For the full experience you <strong>must download an offline ZIM archive</strong>
|
|
and store it on your device! You can do this from the <b>Configuration page <span class="glyphicon glyphicon-wrench"></span></b>,
|
|
or else see the <b>About page <span class="glyphicon glyphicon-info-sign"></span></b> for more information.
|
|
</p>
|
|
<p>
|
|
Alternatively, if you only want Wikivoyage or WikiMed in English, look for "Wikivoyage by Kiwix" or "WikiMed" in the Microsoft Store
|
|
(Windows 10) and install those apps instead.
|
|
</p>
|
|
<p>
|
|
Kiwix JS is <b>free</b> and <b>open source</b>. If you like it, please leave a positive review. Constructive feedback and help with
|
|
improving the app are very welcome: see About section.
|
|
</p>
|
|
<div id="update" class="update">
|
|
<h3 style="margin-top:0;">Changes in version <span class="version">1.0</span></h3>
|
|
<ul style="padding-left: 15px;">
|
|
<li>Sample ZIM changed to no-picture version wikipedia_en_100_nopic_2021-08.zim to reduce download size of app</li>
|
|
<li>Added refresh button for picked folder in Configuration</li>
|
|
<li>Added some extra directories of useful ZIM archives to Donwload library</li>
|
|
<li>Added more diagnostic APIs to the API panel in Configuration</li>
|
|
<li>Provide option for image manipulation (saving to disk or opening in new tab via right-click)</li>
|
|
<li>Provide contextual warnings for features that do not work well with active content</li>
|
|
<li>Added help section in About concerning link handling, dynamic content, new windows, etc.</li>
|
|
<li>Verbose tooltips provided for several options in Configuration</li>
|
|
<li>New option to change single right click to double right click for opening new window or tab</li>
|
|
<li>Fixed issue preventing correct parsing of ZIM archive links in some contexts in SW mode</li>
|
|
<li>Fixed printing in SW mode (all images are now loaded correctly before printing)</li>
|
|
<li>Fixed restoring the DOM after printing in SW mode</li>
|
|
<li>Fixed some app crashes when switching to SW mode</li>
|
|
<li>Fixed issues with toolbars getting stuck on after searching for text in article</li>
|
|
<li>Better replication of infobox mobile and desktop styles</li>
|
|
</ul>
|
|
<p><a href="https://github.com/kiwix/kiwix-js-windows/blob/master/CHANGELOG.md" target="_blank">Full changelog...<img src="I/s/Icon_External_Link.png"></a></p>
|
|
</div>
|
|
<div id="features">
|
|
<h3>Features in Version 1.0</h3>
|
|
<ul style="padding-left:15px;">
|
|
<li>Compatible with Continuum!</li>
|
|
<li>Open a new browsable tab or window with right-click, long-press or ctrl-click</li>
|
|
<li>Printing the article contents is supported on mobile and desktop</li>
|
|
<li>Front page (of ZIM) cached for faster return to home page</li>
|
|
<li>Wikivoyage pages (English and German) display map location markers: tap to open Maps app</li>
|
|
<li>Last-visited page remembered between sessions (optional)</li>
|
|
<li>In-page search / highlighting (search button/Ctrl-F/Alt-F)</li>
|
|
<li>Dark-theme for UI and content</li>
|
|
<li>Equations typeset with KaTeX if original TeX string is available</li>
|
|
<li>Transform layout: Wikipedia mobile or desktop styles</li>
|
|
<li>Optionally disable images if device is slow</li>
|
|
<li>Export page to view in browser (using breakout link)</li>
|
|
<li>Support for dynamic content in ZIMs with ServiceWorker mode</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div id="extraModalFooterContent"></div>
|
|
<button class="btn btn-primary" type="button" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="printModal" class="modal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div id="print-modal-content" class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
|
|
<h3 style="margin-top:10px;">
|
|
Please choose print options
|
|
</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<label id="printDesktopStyle" class="checkbox">
|
|
<input type="checkbox" name="printDesktop" id="printDesktopCheck" checked>
|
|
<b>Print the desktop (not mobile) style</b> (<i>default: yes</i>)
|
|
</label>
|
|
<label id="printNavBoxes" class="checkbox">
|
|
<input type="checkbox" name="printNavBox" id="printNavBoxCheck">
|
|
<b>Print navigation boxes</b> (<i>default: no</i>)
|
|
</label>
|
|
<label id="printEndNotes" class="checkbox">
|
|
<input type="checkbox" name="printEndNote" id="printEndNoteCheck">
|
|
<b>Print endnotes</b> (<i>default: no</i>)
|
|
</label>
|
|
<label id="externalLinks" class="checkbox">
|
|
<input type="checkbox" name="externalLink" id="externalLinkCheck">
|
|
<b>Print External Links / Further Reading</b> (<i>default: no</i>)
|
|
</label>
|
|
<label id="seeAlsoLinks" class="checkbox">
|
|
<input type="checkbox" name="seeAlsoLink" id="seeAlsoLinkCheck">
|
|
<b>Print See Also</b> (<i>default: no</i>)
|
|
</label>
|
|
<label id="printInfoboxes" class="checkbox">
|
|
<input type="checkbox" name="printInfobox" id="printInfoboxCheck" checked>
|
|
<b>Print infoboxes</b> (<i>default: yes</i>)
|
|
</label>
|
|
<label id="printImages" class="checkbox">
|
|
<input type="checkbox" name="printImage" id="printImageCheck" checked>
|
|
<b>Print images</b> (<i>default: yes</i>)
|
|
</label>
|
|
<label oninput="document.getElementById('zoomSliderVal').innerHTML = documentZoomSlider.value + '%';" style="width: 90%;">
|
|
<b>Resize document for printing:</b>
|
|
<input type="range" name="documentZoom" id="documentZoomSlider" min="10" max="200" step="1" value="75">
|
|
Current value: <b><span id="zoomSliderVal">75%</span></b>
|
|
</label>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button name="confirm-print" id="confirm-print-cancel" class="btn btn-warning" style="float:right; margin-left: 1em;" type="button" data-dismiss="modal">Cancel</button>
|
|
<button name="confirm-print" id="confirm-print-continue" class="btn btn-primary" style="float:right; margin-left: 1em;" type="button" data-dismiss="modal">Continue</button>
|
|
<p style="text-align:left"><b>Important:</b> This app has limited control over the printer. If there is no option to limit pages, we recommend you choose a PDF or XPS printer, and then print the file with another app.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="alertModal" class="modal" role="dialog">
|
|
<div id="alert-modal" class="modal-dialog modal-sm">
|
|
<div id="alert-modal-content" class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
|
|
<h4 class="modal-title" style="color:#333333;">Information</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p style="color:#333333;" id="alert-content"></p>
|
|
</div>
|
|
<div class="modal-footer" style="padding:10px;">
|
|
<button id="alert-modal-button" class="btn btn-primary" type="button" data-dismiss="modal">OK</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Status indicators -->
|
|
<div id="searchingArticles" style="display: none;" class="status">
|
|
<div class="loader"></div>
|
|
<div id="cachingAssets" style="display: none;" class="message"></div>
|
|
</div>
|
|
<section id="search-article" role="region">
|
|
<header id="top" style="width:100%; transition: top 0.3s;">
|
|
<nav id="navbar" class="navbar navbar-inverse" style="" role="navigation">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header" id="container">
|
|
<form id="formArticleSearch">
|
|
<div class="" id="row">
|
|
<span class="input-group">
|
|
<span class="input-group-btn">
|
|
<!-- button id="btnHome" type="button" class="btn btn-default" -->
|
|
<a id="btnHome" title="Home" class="btn btn-primary"><img id="kiwixIcon" style="margin-left:5px;" src="./img/icons/kiwix-blue-32.png" /></a>
|
|
<!--button -->
|
|
<a class="btn btn-primary" style="display:none;" title="Back" id="btnBackAlt"><span class="glyphicon glyphicon-circle-arrow-left"></span></a>
|
|
<a class="btn btn-primary" style="display:none;" title="Forward" id="btnForwardAlt"><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
|
|
</span>
|
|
<input type="search" id="prefix" placeholder="Search [.*] or space key..."
|
|
class="form-control" style="z-index: 0; width: 99.5%" />
|
|
<span class="input-group-btn">
|
|
<a class="btn btn-primary" title="Article Search" id="searchArticles" style="display:none;"><span class="glyphicon glyphicon-book"></span></a>
|
|
<a class="btn btn-primary" title="Alt-F: Find and highlight text in article..." id="findText"><span class="glyphicon glyphicon-search"></span></a>
|
|
<a class="btn btn-primary" title="Random Article" id="btnRandomArticle"><span class="glyphicon glyphicon-random"></span></a>
|
|
<a class="btn btn-primary" title="Settings" id="btnConfigure"><span class="glyphicon glyphicon-wrench"></span></a>
|
|
<a class="btn btn-primary" title="About" id="btnAbout" style="margin-right:5px;"><span class="glyphicon glyphicon-info-sign"></span></a>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="" id="row2" style="display:none;">
|
|
<span class="input-group" style="padding-bottom: 5px; padding-left: 15px; margin-left: 5px;">
|
|
<input class="form-control" id="findInArticle" style="display:inline;" type="search" placeholder="Highlight in article...">
|
|
<span class="input-group-addon" id="matches">Full: 0</span>
|
|
<span class="input-group-addon" id="partial">Partial: 0</span>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<article class="view-content" id="article">
|
|
<div id="scrollbox" class="container" style="position:relative;overflow:auto;width:100%;">
|
|
<div id="about" style="display: none;" class="category-padding">
|
|
<div class="returntoArticle" style="text-align:center;padding-top:30px;"></div>
|
|
<h2>
|
|
<img src="img/icons/kiwix-60.png" alt="Kiwix icon" id="kiwixIconAbout" />
|
|
Kiwix JS <span class="identity">Windows</span>
|
|
</h2>
|
|
<h3 style="margin-top:0;">
|
|
Offline Wikipedia Viewer <small>(Version <span class="version"></span>)</small>
|
|
</h3>
|
|
<p class="packagedInfo" style="display: none">Packaged ZIM archive: <b><span class="fileVersion"></span></b></p>
|
|
<ul style="padding-left:1em;">
|
|
<li><a href="#addingArchives">Adding archives and languages</a></li>
|
|
<li><a href="#changelog">Changelog and Features</a></li>
|
|
<li><a href="#searchSyntax">Title search syntax and alphabetical ZIM Archive Index</a></li>
|
|
<li><a href="#linkHandling">Link handling, image download, tabs and windows</a></li>
|
|
<li><a href="#expert">Expert or Experimental Settings</a></li>
|
|
<li><a href="#privacy">Privacy Policy</a></li>
|
|
<li><a href="#feedback">Feedback and Support</a></li>
|
|
<li><a href="#credits">Credits and Licence</a></li>
|
|
<li>Official site : <a href="https://www.kiwix.org/" target="_blank">https://www.kiwix.org/</a><img src="I/s/Icon_External_Link.png" /></li>
|
|
</ul>
|
|
<div class="disclaimer">
|
|
<p>
|
|
<b>DISCLAIMER:</b> Please be aware that Kiwix works with offline archives. To get updated info, you will need to
|
|
download a new archive periodically. Information in archives is free, open source and provided by volunteers.<br>
|
|
<strong>Kiwix gives no guarantee as to the accuracy of information in the archives you access with this app.</strong>
|
|
</p>
|
|
</div>
|
|
<br>
|
|
<p>
|
|
Kiwix aspires to make the world's knowledge available to everyone for free. If your Internet access is expensive, slow, unreliable, insecure or censored,
|
|
you can still gain access to a huge repository of knowledge and culture in almost every language using Kiwix offline archives.
|
|
</p>
|
|
<p>
|
|
To use this app, you will need to obtain/download one or more archives (called ZIM archives). You can download them in this app (see <a href="#addingArchives">Usage</a>
|
|
below), or if you know someone with an archive you want, you can also share archives, e.g. on a USB stick. Archives are available in many different languages
|
|
for resources such as Wikipedia, WikiMed, Wiktionary, Wikivoyage, Project Gutenberg, TED Talks, Stackexchange, etc. You can access this virtual offline
|
|
encyclopaedia even if you are undertaking a long plane journey, hiking, and travelling or living in areas with weak or non-existent Internet access.
|
|
</p>
|
|
<p>
|
|
Offline archives use the <a href="https://www.openzim.org//wiki/OpenZIM" target="_blank">OpenZIM format</a>. This app is regularly tested with a range of
|
|
different archives, and works with almost all of them -- but note that our main focus is on Wikipedia-related archives (Wikipedia, Wikivoyage, WikiMed,
|
|
Wiktionary).
|
|
</p>
|
|
<p>
|
|
You can search through the titles of articles in each archive to find the one you want, or view all the article titles with the ZIM Archive Index (see
|
|
<a href="#searchSyntax">Title search</a>). <b><i>Note that this app cannot (yet) do full text search of the contents of all articles in a ZIM.</i></b>
|
|
</p>
|
|
<p>
|
|
On some Wikivoyage (English and German) pages you will see a map location marker: <img src="img/icons/map_marker-18px.png" />. On Windows 10/11, you can
|
|
tap this icon to open the <b>Maps app</b> at the selected location. In the UWP and PWA versions of this app, this will work offline if you have downloaded
|
|
the map for the relevant country or region in the Settings for <b>Offline Maps</b>.
|
|
</p>
|
|
<h3 id="addingArchives">Usage</h3>
|
|
<h4>Step 1: Download some content</h4>
|
|
<p>
|
|
You can browse the Kiwix repository on the <a href="#downloads" onclick="document.getElementById('btnConfigure').click();">Configuration</a> page,
|
|
and the app will provide instructions according to the type of file you download. Alternatively, visit
|
|
<a href="https://download.kiwix.org/zim" target="_blank">https://download.kiwix.org/zim/</a> using a regular computer. To use all the features of
|
|
ZIM archives that have dynamic content (e.g. PhET), you may need to switch the app to the experimental PWA/ServiceWorker mode (see Expert Settings in
|
|
configuration, but this mode is not available on Windows Mobile or on old browsers).
|
|
</p>
|
|
<h4>Step 2: Copy the content onto your device</h4>
|
|
<p>
|
|
If you have enough space, you can put several archives on your device storage. If you download the content
|
|
directly in the app, note the location of the saved file when you get the notification that it has
|
|
completed. For PC users: if you see that the ZIM archive has a Kiwix icon, you may be able to open it by double-clicking it.
|
|
For Mobile users: if you downloaded via a PC, you will generally need to use a USB cable to copy the ZIM
|
|
archive(s) to an accessible location on your device, such as the SD card or the main storage area if
|
|
there is enough space there.
|
|
</p>
|
|
<h4>Step 3: Go to the "Configure" menu and select your ZIM file (or double-click / drag-and-drop your file into the app)</h4>
|
|
<p>
|
|
On the Configuration page, tap the "Select storage" button. If you have downloaded more than one archive, or you have a
|
|
split ZIM archive consisting of several 2GB files, then you will need to pick the <b>folder</b> that contains these files
|
|
or else (in older browsers or Electron) you will need to select all the split parts. If you have just one unsplit ZIM archive, you
|
|
can instead pick the <b>file</b> directly, using the respective buttons on the
|
|
<a href="#" onclick="document.getElementById('btnConfigure').click();">Configuration</a> page (note that these buttons
|
|
only appear after you tap "Select Storage"). In most modern contexts the archive will be remembered on next launch
|
|
(Firefox and IE11 are exceptions). If in the future you add more files to a folder you have selected, then you can use the rescan
|
|
button <span class="glyphicon glyphicon-refresh"></span> to refresh the list of archives in the folder.
|
|
</p>
|
|
<p>
|
|
Alternatively, in the UWP app, and experimentally in an installed PWA on the PC, you can simply <b>double-click</b> the ZIM
|
|
file to launch it in the app, even if the app is closed (your choice will be remembered on next launch). You can also
|
|
<b>drag-and-drop</b> your ZIM file into the app, but it may not be remembered on next launch in all contexts (try it if this method interests you!).
|
|
</p>
|
|
<h4>Step 4: Enjoy your content offline!</h4>
|
|
<h3 id="changelog">Changes in <span class="version">1.0</span></h3>
|
|
<div id="logUpdate" class="update"></div>
|
|
<div id="logFeatures"></div>
|
|
<h3 id="privacy">Privacy policy</h3>
|
|
<p>
|
|
When installed, Kiwix JS <span class="identity">Windows</span> works offline, and does not collect or record any of your personal data. It
|
|
only remembers your browsing history for the duration of a session (for the purpose of returning to previously
|
|
viewed pages). This history is lost on exiting the app with the optional exception of the last-visited page.
|
|
</p>
|
|
<p>
|
|
If you access this app from a secure web server (e.g. the PWA server), it will only work offline if your browser is
|
|
capable of installing a Service Worker. If you install or bookmark the PWA version, then it will work offline, but
|
|
note that <b>by design</b> any PWA will periodically check the PWA server (in this case, https://pwa.kiwix.org/), if it
|
|
is available, to check for an updated Service Worker.
|
|
</p>
|
|
<p>
|
|
By default, this application will remember your last-visited page for each ZIM between sessions using local storage
|
|
or a cookie that is accessible only by this app on this device. If you are accessing sensitive information that you do
|
|
not wish to be displayed next time you open this app, we recommend that you <a href="#privacy"
|
|
onclick="document.getElementById('btnConfigure').click();">turn this option off</a> in the Configuration options.
|
|
</p>
|
|
<p>
|
|
This application only reads the archive files that you explicitly select on your device and files included in
|
|
its own package: it is not capable of reading any other files. It will only access the Kiwix download server if
|
|
you specifically request it to access the download library for ZIM archives on the Configuration page. If you
|
|
run the app as a PWA, it will cache its own code from the secure PWA server and then can be used offline.
|
|
Some ZIM archives contain active content (scripts) which may, in rare circumstances, attempt to
|
|
contact external servers for incidental files such as fonts. These scripts will only run if you enable Service
|
|
Worker mode in Configuration.
|
|
</p>
|
|
<p>
|
|
<b>
|
|
If you believe your Internet access is insecure, or is being observed or censored, we recommend that you completely
|
|
shut down your Internet access (Data or WiFi) before using the application.
|
|
</b>
|
|
</p>
|
|
<p>
|
|
Additionally, if you obtained this app from a Vendor Store (including extensions), then the Store operator may
|
|
track your usage of the app (e.g. download, install, uninstall, date and number of sessions) for the purpose of
|
|
providing anonymous, aggregate usage statistics to developers. If this concerns you, you should check the relevant
|
|
Store Privacy Policy for further information.
|
|
</p>
|
|
<p>
|
|
<b>Builds of this app are available that do not use a Store or an online Service Worker.</b> Please see:
|
|
<ul>
|
|
<li><a href="https://github.com/kiwix/kiwix-js-windows/releases">Releases</a></li>
|
|
<li><a href="https://kiwix.github.io/kiwix-js-windows/kiwix-js-nwjs.html">NWJS version</a> - this version is completely standalone and will never self-update.</li>
|
|
</ul>
|
|
</p>
|
|
<h3 id="searchSyntax">Title search syntax and alphabetical ZIM Archive Index</h3>
|
|
<p>
|
|
Basic title search matches the <b>start</b> of an article title, so if you search for 'France' you will get 'France (country)', 'France (disambiguation)',
|
|
'France (film)', etc. This kind of search tries to be <b>case-insensitive</b>, but the number of case variants tried is necessarily limited, e.g. if you
|
|
search for 'unesco world heritiage', it will try 'Unesco world heritage', 'UNESCO world heritage', 'unesco World heritage', 'Unesco WORLD heritage',
|
|
etc., but it won't try 'uNesCO' and other non-obvious case combinations. If you want to search for 'uNesCO', then you must type it exactly like that.
|
|
</p>
|
|
<p>
|
|
You can also use the <b>wildcards</b> <code>.*</code> or <code>.+</code> as part of your title search (these follow regular expression syntax: if you
|
|
don't know the difference then use <code>.*</code>). For example, you can search for 'list.*medieval', and you will get (in full English Wikipedia)
|
|
'List of Medieval bestiaries', 'List of Medieval topics', etc.
|
|
</p>
|
|
<p id="searchSyntaxError">
|
|
<b>Incorrect search syntax!</b> If you get this message, it's because you used a wildcard but the syntax was incorrect. <i>
|
|
Everything after
|
|
the wildcard must be a valid regular expression or else the search will fail!
|
|
</i> For simple text or numbers after a wildcard, don't worry, it'll work fine,
|
|
but you need to be aware that regular expressions reserve characters like '?', '(', '^', '$', '*', '+', so these (and others) must be used correctly if you
|
|
use wildcards with them. You might be able to correct an error by placing a backslash before each reserved character, e.g. <code>list.*\(france</code>.
|
|
</p>
|
|
<p>
|
|
Wildcards can come anywhere in a string, including at the beginning. This works fine for Stackexchange, Gutenberg, PhET and similar ZIMs, and it is the only way to get
|
|
all the Stackexchange questions on topics/words that don't have a tag. For Wikipedia, <b>wildcards work best when they come after a simple string</b>.
|
|
If your search text starts with a wildcard in full English Wikipedia, it will start searching at the very beginning of the index and try to search through everything
|
|
(there are millions of titles)! It will give up after somewhere between 250,000 and 1,000,000 searches (this is 10,000 x the value you set in Configuration for max
|
|
search results).
|
|
</p>
|
|
<p id='zimIndex'>
|
|
You can see the full alphabetical <b>ZIM Archive Index</b> by typing a space in the title search box. This is useful for ZIMs that have descriptive titles where
|
|
you don't know the exact title you are searching for (e.g. Gutenberg or TED Talks, especially in jQuery mode, or for browsing Stackexchange or PhET). You can change
|
|
your alphabet in Configuration for non-Roman alphabets.
|
|
</p>
|
|
<p>
|
|
If not enough results are returned in your searches, you can increase the maximum number of search results using the slider in Configuration. Please note that we are
|
|
currently unable to support full text search of articles, though we have plans to do so in the future if it becomes technically possible.
|
|
</p>
|
|
<p>
|
|
<i>For the geeks</i>, you can also use <b>full regular expressions</b> enclosed in non-capturing parentheses, like <code>(?:My\sCrazy\sSearch(es)?$)</code>. Alternatively, you
|
|
can use full regex syntax after a wildcard (not before, except that '\s' will be converted to a space). Regex syntax will match titles in a case-insensitive manner.
|
|
You can search for different diacritics with a regex like 'discours.*m[eé]thode' or `Gonz.*[áa]lez I[nñ][áa]rrit[uùú]`. Long searches will give up after
|
|
maxSearchResultsSize * 10^4 title scans.
|
|
</p>
|
|
<h3 id="linkHandling">Link handling, image download, tabs and windows</h3>
|
|
<p>
|
|
This app does its best to handle links to <b>special ZIM content</b>, like active (dynamic) content, embedded videos, downladable content (EPUBs, PDFs) and images, but not everything
|
|
works smoothly with every option.
|
|
</p>
|
|
<p>The app can usually operate in two modes: "JQuery" (which manipulates the content of the article) and "ServiceWorker" (which tries to get out of the way and let the ZIM do its
|
|
thing - see below under <a href="#expert">Expert settings</a> for a fuller explanation). Some contexts, like mobile or old browsers, only support JQuery mode. Desktop systems
|
|
and modern browsers support both modes. <b><i>JQuery mode doesn't support active or dynamic content.</i></b> You will usually get an <b>Active Content Warning</b> popping up at the
|
|
top of the landing page (Home) if you open a ZIM that requires you to switch to ServiceWorker mode. If you can't switch, you can often still access content in these archives
|
|
by using title search or typing a space in title search to show the <a href="#zimIndex">ZIM Archive Index</a> (see above), but some things, especially any proprietary User Interface,
|
|
won't work.
|
|
</p>
|
|
<p>
|
|
You can <b>download images</b> (as long as they haven't been inserted dynamically) by turning on the option <b>Allow image manipulation</b> in Configuration. Then you will be
|
|
able to right-click an image and save it to disk or open it in a new tab (only tested in Wikimedia ZIMs). However, <b><i>this doesn't work in the UWP or NWJS apps</i></b>. Workaround
|
|
for the UWP app: you can enable the <b>Insert breakout link</b> option, export the article to a new browser tab (by clicking the Breakout link), and then you will be able to manipulate
|
|
images in the browser tab. Please note that enabling Image manipulation or the Breakout link feature can interfere badly with some ZIMs that rely heavily on active content. So turn
|
|
these options off if you are using such ZIMs.
|
|
</p>
|
|
<p>
|
|
You can <b>download EPUBs and PDFs</b>, e.g. from Gutenberg ZIMs, in JQuery mode, but the proprietary User Interface doesn't work (use title search instead). In the UWP Desktop app
|
|
in ServiceWorker mode, you need to enable the option <b>Open ZIM links in new tab</b> (or window) in Configuration to be able to download EPUBs and PDFs. This isn't necessary in
|
|
JQuery mode or in the PWA/ Electron/ NWJS apps. In JQuery mode, the app will offer to download videos so you can view them in a different application. This is useful if your system
|
|
doesn't support the WebP video format (e.g. the mobile UWP app).
|
|
</p>
|
|
<p>
|
|
You can <b>open ZIM links in a new browsable tab (or window)</b> by setting the options in Configuration. Right-click (or double right-click if you set that option), ctrl-click, middle click
|
|
and long press should all work. Somne contexts (e.g. mobile) don't support this option, or it works badly or very slowly. For those contexts, use the <b>Insert breakout link</b> feature
|
|
instead. With the Breakout link feature, the tab is non-browsable, but you can save the page to PDF or print it, etc., from that tab.
|
|
</p>
|
|
<p>
|
|
Note that your browser's <b>popup blocker</b> may interfere with options that open new tabs or windows. When asked, enable popups always for the app (if you trust Kiwix), and then reload the app.
|
|
</p>
|
|
<p>
|
|
<b>PhET ZIMs:</b> These science and maths simulations only work in ServiceWorker mode. There is currently a bug which causes the experiment/ simulation to be shifted by several pixels, making
|
|
it hard to click on the experiment's controls. WORKAROUND: Please switch the <b>Hide toolbars while scrolling</b> option to <b>never</b>. This eliminates the pixel shift. You may also have to use the title
|
|
search or <a href="#zimIndex">ZIM Archive Index</a> (press a space in title seaarch) to find the experiments, as there is an unresolved issue with displaying the ZIM's User Interface.
|
|
</p>
|
|
<p>
|
|
|
|
</p>
|
|
<h3 id="expert">Expert or experimental settings</h3>
|
|
<p>
|
|
Depending on your browser or framework, this app may be capable of running in two different modes, which we call
|
|
"JQuery Mode" and "ServiceWorker Mode" for short. There is a toggle under Expert Settings
|
|
in Configuration. Here is an explanation of what these modes do:
|
|
<ul>
|
|
<li>
|
|
<b>JQuery Mode</b>: This mode (which does not in fact require JQuery) is fine for everyday use with
|
|
Wikipedia / WikiMedia archives, and is stable and safe. It is a way of inserting articles extracted from the
|
|
ZIM into the DOM (browser document) by injecting the content into an iframe or tab. We then use
|
|
native DOM methods, or sometimes JQuery, to parse the article's HTML and insert required assets
|
|
(images, stylesheets, event listeners for hyperlinks, etc.). On old devices DOM traversal can be slow,
|
|
but it is compensated for because we do not extract or run JavaScript assets (which would be technically
|
|
extremely complicated). As a result, for WikiMedia archives this mode is usually quite fast. On the downside,
|
|
ZIMs that have a proprietary dynamic UI (such as Gutenberg or TED talks) are only partially supported in this
|
|
mode: the UI does not work, but articles can be searched for and loaded from the search bar.
|
|
</li>
|
|
<li>
|
|
<b>ServiceWorker Mode</b>: This mode, as its name implies, requires that the browser or framework be capable of
|
|
installing a Service Worker. It works by intercepting the browser or framework's Fetch calls (network requests)
|
|
and supplying the requested content from the ZIM. This mode requires no DOM traversal, and the content is
|
|
read and supplied as-is from the archive. Dynamic content (e.g. JavaScript) and proprietary UIs are fully
|
|
supported in this mode. It can feel initially a little slower while commonly used assets are being cached,
|
|
but it soon equals JQuery mode in speed, at least in modern browsers. However, older browsers such as IE11 do
|
|
not support this mode, and the app must be running in a secure context (https:, localhost, or certain browser
|
|
extensions). Note that this mode also cannot run under the file: protocol (but only IE11 and old Edge allow the
|
|
app to run this way).
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
<h3 id="feedback">Feedback / helping / contributing</h3>
|
|
<p>
|
|
This application is still a work in progress. There are bugs that need fixing and improvements that
|
|
need to be implemented. Suggestions and patches/pull requests are welcome: the source code is on
|
|
<a href="https://github.com/kiwix/kiwix-js-windows" target="_blank">github</a>.
|
|
The <a href="https://github.com/kiwix/kiwix-js-windows/issues" target="_blank">Kiwix JS <span class="identity">Windows</span> issue tracker</a>
|
|
is on GitHub too, though also check the <a href="https://github.com/kiwix/kiwix-js/issues"
|
|
target="_blank">tracker for Kiwix JS</a> as a lot of the development is done for both apps.
|
|
</p>
|
|
<p>
|
|
Alternatively, you can send your feedback <a href="mailto:egk10@cam.ac.uk?subject=%5BKiwix%5D%20Feedback%20about%20Kiwix-JS-Windows">
|
|
by email
|
|
</a>.
|
|
</p>
|
|
<p>
|
|
In all cases, please give as much detail as you can: which device you are using, which version of Kiwix, which archive, which articles etc.
|
|
</p>
|
|
<p>If you like the Kiwix project and use it, please consider giving donations:</p>
|
|
<ul>
|
|
<li>to the Wikimedia foundation, to help maintaining their servers and article contents. See the <a href="https://donate.wikimedia.org/" target="_blank">donation page</a></li>
|
|
<li>to Kiwix, to help maintaining the ZIM files and applications. There is a donation button in the <a href="https://www.kiwix.org" target="_blank">home page of kiwix.org</a></li>
|
|
</ul>
|
|
<p>You can also help by:</p>
|
|
<ul>
|
|
<li>Adding articles or improving the existing ones, by <a href="https://en.wikipedia.org/wiki/Wikipedia:Introduction" target="_blank">editing online Wikipedia articles</a></li>
|
|
<li><a href="https://www.kiwix.org/wiki/Special:MyLanguage/Participate" target="_blank">Participating</a> in the Kiwix project</li>
|
|
</ul>
|
|
<h3 id="credits">Credits</h3>
|
|
<p>Thanks are due to:</p>
|
|
<ul>
|
|
<li>Kelson and all the Kiwix community for welcoming peter-x, mossroy, jaifroid and sharun-s onto this project</li>
|
|
<li>Wikipedia teams and contributors for helping to spread knowledge to everybody</li>
|
|
<li>All the developers of libraries and tools we use for releasing them as Free software (see Licence paragraph)</li>
|
|
</ul>
|
|
<h3>Licence information</h3>
|
|
<p>
|
|
Copyright 2013-2019 Mossroy, Peter-x, Jaifroid, sharun-s and other contributors
|
|
<br />Jaifroid for adaptation and development of the app on the Universal Windows, Electron, NWJS and PWA Platforms
|
|
<br />
|
|
<br />This application is licensed under the GPL v3 licence:
|
|
<br />
|
|
<i>
|
|
<br />Kiwix is free software: you can redistribute it and/or modify
|
|
<br />it under the terms of the GNU General Public Licence as published by
|
|
<br />the Free Software Foundation, either version 3 of the Licence, or
|
|
<br />(at your option) any later version.
|
|
<br />
|
|
<br />Kiwix is distributed in the hope that it will be useful,
|
|
<br />but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
<br />MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
<br />GNU General Public Licence for more details.
|
|
<br />
|
|
<br />You should have received a copy of the GNU General Public Licence
|
|
<br />along with Kiwix (file LICENSE-GPLv3.txt). If not, see <a href="https://www.gnu.org/licenses/" target="_blank">https://www.gnu.org/licenses/</a>
|
|
</i>
|
|
</p>
|
|
<p>Main libraries and resources used:</p>
|
|
<ul>
|
|
<li><a href="https://jquery.com/" target="_blank">jQuery</a> 3, released under the <a href="https://jquery.org/license" target="_blank">MIT Licence</a></li>
|
|
<li><a href="https://getbootstrap.com/" target="_blank">Bootstrap</a> 3, released under the <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache Licence 2.0</a>, which includes icons from <a href="https://glyphicons.com/">Glyphicons</a></li>
|
|
<li><a href="https://requirejs.org/" target="_blank">RequireJS</a> 2, released under the <a href="https://github.com/jrburke/requirejs/blob/master/LICENSE" target="_blank">MIT licence or new BSD Licence</a></li>
|
|
<li><a href="https://qunitjs.com/" target="_blank">QUnit</a> 2, released under the <a href="https://jquery.org/license" target="_blank">MIT Licence</a></li>
|
|
<li>Kiwix logo from <a href="https://www.kiwix.org/" target="_blank">kiwix.org</a>, released under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution Share Alike Licence</a></li>
|
|
<li>OpenZIM specifications from <a href="https://wiki.openzim.org/wiki/OpenZIM" target="_blank">www.openzim.org</a>, released under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" target="_blank">Creative Commons Attribution Share Alike Licence</a></li>
|
|
<li>Emscripten to generate a XZ decompressor in javascript : <a href="https://github.com/kripken/emscripten" target="_blank">https://github.com/kripken/emscripten</a>, released under the <a href="https://github.com/kripken/emscripten" target="_blank">MIT Licence</a></li>
|
|
<li><a href="https://tukaani.org/xz/embedded.html" target="_blank">XZ Embedded</a> (the XZ library converted to Javascript with Emscripten), in public domain</li>
|
|
<li>The <a href="https://github.com/facebook/zstd" target="_blank">Zstandard library</a>, released under a <a href="https://github.com/facebook/zstd/blob/dev/LICENSE" target="_blank">BSD Licence</a> and a <a href="https://github.com/facebook/zstd/blob/dev/COPYING" target="_blank">GPLv2 Copying Licence</a></li>
|
|
<li><a href="https://katex.org/" target="_blank">KaTeX</a> for typesetting mathematical and chemical equations, released under the <a href="https://github.com/KaTeX/KaTeX/blob/master/LICENSE" target="_blank">MIT licence</a></li>
|
|
<li><a href="https://www.the-art-of-web.com/javascript/search-highlight/" target="_blank">Hilitor</a> for finding and hilighting text inside an article, released under <a href="https://www.the-art-of-web.com/copyright.html" target="_blank">this licence</a></li>
|
|
</ul>
|
|
<h3>Other platforms/versions</h3>
|
|
<p>Other Kiwix clients exist on various platforms. See the official site : <a href="https://www.kiwix.org/" target="_blank">https://www.kiwix.org/</a>.</p>
|
|
<p> </p>
|
|
<div class="returntoArticle" style="text-align:center;"></div>
|
|
<p> </p>
|
|
<p> </p>
|
|
</div>
|
|
<div id="configuration" style="display: none;" class="container category-padding">
|
|
<div id="returntoArticle" class="returntoArticle" style="text-align:center;padding-top:30px;"></div>
|
|
<div id="divInstall2" style="display:none; float:right;">
|
|
<button id="btnInstall2" class="btn btn-xs btn-primary">Install PWA</button>
|
|
</div>
|
|
<div class="row" style="padding-bottom:1em;">
|
|
<h2 style="margin-top:0;">Configuration</h2>
|
|
<div id="alertBoxPersistent"></div>
|
|
<p id="usage" style="margin: 1em auto 1em;">For <b>instructions</b> and <b>usage guide</b>, please see the <a href="#" class="aboutLink"><b>About tab</b> <span class="glyphicon glyphicon-info-sign"></span></a> (top right).</p>
|
|
<p class="packagedInfo" style="display: none; margin-top: 1em;">
|
|
Packaged ZIM archive: <b><span class="fileVersion"></span></b>
|
|
<button style="display:none;" id="reloadPackagedArchive" type="button" class="btn btn-primary btn-xs">Reload</button>
|
|
</p>
|
|
<p id="currentArchive" style="display: none;"></p>
|
|
<p id="downloadLinksText">
|
|
<a id="otherLangs" href="#btnRescanDeviceStorage"><i>Download more archives from the <b>Archive Library</b>.</i></a>
|
|
</p>
|
|
<p></p>
|
|
</div>
|
|
<div id="hideFileSelectors">
|
|
<div id="scanningForArchives" style="display: none;">
|
|
<br /> Scanning for archives... Please wait <img src="img/spinner.gif" alt="Please wait..." />
|
|
</div>
|
|
<div id="chooseArchiveFromLocalStorage" style="display: none;">
|
|
<div id="archivesFound" class="row">
|
|
<p><span id="archiveNumber">Archives found on this device (tap "Select storage" to rescan)</span>:</p>
|
|
<div class="col-xs-12">
|
|
<select id="archiveList" class="form-control" multiple></select><br />
|
|
</div>
|
|
</div>
|
|
<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 class="row">
|
|
<div class="col-xs-6">
|
|
<input type="button" class="btn btn-primary" value="Select file" id="archiveFile" accept=".zim" />
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<input type="button" class="btn btn-primary" value="Select folder" id="archiveFiles" 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" />
|
|
</div>
|
|
</div>
|
|
<div id="UWPInstructions" class="row">
|
|
<div class="col-xs-6">
|
|
<p>For a single unsplit archive</p>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<p>For multiple or split archives</p>
|
|
</div>
|
|
</div>
|
|
<div id="instructions" class="row" style="display:none;">
|
|
<p>
|
|
Please choose the location of your ZIM archive or drag-and-drop the file(s) here.<br />
|
|
For a split archive (.zimaa, .zimab, etc.) you must select <b>all</b> the split parts.
|
|
</p>
|
|
</div>
|
|
<div class="row">
|
|
<input style="display:none;" type="file" class="btn btn-primary" value="Select folder with ZIM files" id="archiveFilesLegacy" multiple 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" />
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
<p style="padding-top:0.5em;"><strong>Only Wikimedia contents (wiki*.zim* files)</strong> have been tested well with this app.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="rescanStorage" style="display:none;" class="row">
|
|
<div class="col-xs-11">
|
|
<input style="float:left; margin-right:1em;" type="button" class="btn btn-primary" 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>
|
|
</div>
|
|
<div class="col-xs-1">
|
|
<a href="#" title="Refresh archive list" id="btnRefresh"><span class="glyphicon glyphicon-refresh"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="downloads">
|
|
<div class="row">
|
|
<h3>Download library</h3>
|
|
<div id="libraryArea" class="col-xs-12">
|
|
<p>
|
|
Get more ZIM archives here. Archives can be very large, <b>do not attempt to download using mobile data!</b>
|
|
</p>
|
|
<table>
|
|
<tr>
|
|
<td><input id="downloadTrigger" type="button" class="btn btn-primary" value="Open library" style="float:left; margin-right:1em;" /></td>
|
|
<td style="width:100%;">Opens library of archives for download:<br /><i>Warning:</i> this will use data</td>
|
|
</tr>
|
|
</table>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="allowInternetAccess" id="allowInternetAccessCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Allow Internet access?</b>
|
|
</label>
|
|
</div>
|
|
<div id="downloadLinks" style="display: none;"></div>
|
|
<pre id="serverResponse" class="panel-footer" style="display:none;"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="row">
|
|
<h3>Display settings</h3>
|
|
<div class="column">
|
|
<div id="displaySettingsDiv" class="panel panel-info" style="clear: left;">
|
|
<div class="panel-heading">Display options:</div>
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<b>Change font size for the User Interface:</b>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<label oninput="document.getElementById('spinnerVal').innerHTML = relativeUIFontSizeSlider.value + '%';" style="width: 80%;">
|
|
<div class="col-sm-12">
|
|
(to change <b>article</b> font size, tap <span class="glyphicon glyphicon-zoom-in"></span> and <span class="glyphicon glyphicon-zoom-out"></span>)
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<input type="range" name="relativeUIFontSize" id="relativeUIFontSizeSlider" min="60" max="200" step="1" value="100">
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<b><span id="spinnerVal">100%</span></b>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
|
|
</div>
|
|
</div>
|
|
<label class="checkbox" title="Tap three times for dark | auto | light">
|
|
<input type="checkbox" name="cssUIDarkTheme" id="cssUIDarkThemeCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Set dark mode for User Interface</b>: [ <b><span id="cssUIDarkThemeState"></span></b> ] (<i>auto</i> mode uses OS Settings if available)
|
|
</label>
|
|
<label class="checkbox" title="Tap three times for dark | auto | light. This is tuned to work with Wikimedia ZIMs, but will also work with some other common ZIM types.">
|
|
<input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Set dark theme for articles</b>: [ <b><span id="cssWikiDarkThemeState"></span></b> ] (<i>experimental</i>: tested with Wikimedia ZIMs)
|
|
</label>
|
|
<label id="darkInvert" style="display:none;" class="checkbox" title="This is a generic inversion style, and should work with all ZIM types. It tries not to invert images, but transparent images sometimes fail to show against the background.">
|
|
<input type="checkbox" name="cssWikiDarkThemeInvert" id="cssWikiDarkThemeInvertCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Use simple inversion for dark theme</b> (should work with all archive types)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-info" id="cssSettingsDiv">
|
|
<div class="panel-heading">Display style:</div>
|
|
<div class="panel-body">
|
|
<label class="radio" title="The uses the style that is the default for the ZIM file you load. For Wikimedia ZIMs, this is now usually a 'mobile' display style. Note that 'mobile' hides certain elements, like some navigation boxes. If you want to see these in Wikimedia ZIMs, switch to 'desktop' style below.">
|
|
<input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
|
|
<span class="radiobtn"></span>
|
|
<b>Default ZIM style</b> (in recent WikiMedia ZIMs, this is usually mobile)
|
|
</label>
|
|
<label class="radio" title="This is only relevant for Wikimedia ZIMs. It simulates the Wikipedia 'desktop' display style even for ZIMs with an embedded mobile style. Please note that this simulation involves adding in our own stylesheets and moving some elements, so it may not be 100% accurate.">
|
|
<input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop">
|
|
<span class="radiobtn"></span>
|
|
<b>Use Wikimedia desktop style</b> (and transform if necessary)
|
|
</label>
|
|
<label class="radio" title="This is only relevant for Wikimedia ZIMs. If the ZIM is coded with a 'desktop' display style, then this setting transforms it to 'mobile'. Only older ZIMs have a 'desktop' style.">
|
|
<input name="cssInjectionMode" id="cssModeMobileRadio" type="radio" value="mobile">
|
|
<span class="radiobtn"></span>
|
|
<b>Use Wikimedia mobile style</b> (and transform if necessary)
|
|
</label>
|
|
<label class="checkbox" title="This speeds up the display of articles for some ZIM types by using our own copies of common stylesheets. Note that our copies may not be 100% correct for all languages. We also do some optimizations that may result in minor infidelities. If you want to use the ZIM's own styles for full fidelity, turn this off.">
|
|
<input type="checkbox" name="cssCacheMode" id="cssCacheModeCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIM)
|
|
</label>
|
|
<label class="checkbox" title="Tap three times for always | auto | never. This is only relevant when you maximize the app window (e.g. on a PC). It ensures the article uses the full screen width.">
|
|
<input name="pageMaxWidth" id="removePageMaxWidthCheck" type="checkbox" value="false">
|
|
<span class="checkmark"></span>
|
|
<b>Remove max page width restriction</b>: [ <b><span id="pageMaxWidthState"></span></b> ] (useful for recent Wikipedia archives)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-info" id="otherSettingsDiv">
|
|
<div class="panel-heading">Other settings:</div>
|
|
<div class="panel-body">
|
|
<label class="checkbox" title="Tap three times for both | top | never">
|
|
<input type="checkbox" name="hideToolbars" id="hideToolbarsCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Hide toolbars while scrolling:</b> [ <b><span id="hideToolbarsState"></span></b> ] (scroll slightly up to reveal)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="navButtonsPos" id="navButtonsPosCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Move navigation buttons to top toolbar</b> (note that Kiwix icon acts as Home button)
|
|
</label>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<label class="checkbox" title="This is useful for very low-memory devices, or to increase page rendering speed.">
|
|
<input type="checkbox" name="imageDisplayMode" id="imageDisplayModeCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Display images if any</b> (if hidden, tap the <span style="background-color:lightblue; color:black;"> blue area </span> to display one-by-one)
|
|
</label>
|
|
</div>
|
|
<div class="col-sm-6" id="imageManipulationDiv">
|
|
<label class="checkbox" title="This allows saving images to disk (with right-click/long-press), or opening them in a new tab, but uses slightly more memory because images are stored in the document as dataURIs. WARNING: setting may interfere with dynamic content in non-Wikimedia ZIMs.">
|
|
<input type="checkbox" name="manipulateImages" id="manipulateImagesCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Allow image manipulation</b> (increases app memory usage and may interfere with dynamic content)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="hideActiveContentWarning" id="hideActiveContentWarningCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Permanently hide active content warning</b> (for experienced users)
|
|
</label>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<b>Alphabetical ZIM Archive Index:</b>
|
|
</div>
|
|
<label title="Press space bar in search field to show the ZIM Archive Index.">
|
|
<div class="col-sm-6">
|
|
<b>Start character</b> of alphabet:
|
|
<input type="text" name="alphaChar" id="alphaCharTxt" value="A" style="width:2em;color:steelblue;">
|
|
(use capital letters if they exist in your locale)<br />
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<b>End character</b> of alphabet:
|
|
<input type="text" name="omegaChar" id="omegaCharTxt" value="Z" style="width:2em;color:steelblue;">
|
|
(these are used to set appropriate alphabet for the Archive Index)
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<div class="row" style="padding-top: 10px">
|
|
<div class="col-sm-12">
|
|
<b>Title search:</b>
|
|
</div>
|
|
<label title="Set the maximum number of title search results">
|
|
<div class="col-sm-12">
|
|
<p>Wildcards <code>.*</code> or <code>.+</code> are permitted, e.g. <code>list.+medieval</code>, but
|
|
<a href="#searchSyntax" class="aboutLink">see usage</a></p>
|
|
</div>
|
|
<div class="col-sm-12">
|
|
<p><b>Select max number of title search results:</b> (<i>default 30, higher values increase search time</i>)</p>
|
|
</div>
|
|
<div class="col-sm-10">
|
|
<div class="range">
|
|
<input type="range" class="form-control-range" min="5" max="100" id="titleSearchRange" value="30">
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<b><span id="titleSearchRangeVal"></span></b>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
<label class="checkbox" id="openInNewTab" title="Opens articles in a new tab. In the UWP app (in ServiceWorker mode - see 'Expert settings' below), this also causes links to be parsed, which makes it possible to download EPUBs and PDFs from Gutenberg ZIMs, and possibly other ZIM types. This isn't necessary for the PWA app. N.B. This setting may interfere with some other ZIM types containing active content.">
|
|
<input type="checkbox" name="tabOpener" id="tabOpenerCheck">
|
|
<span class="checkmark"></span>
|
|
<strong>Open ZIM links in new tab</strong> with right-click, ctrl-click, middle-click or long-press
|
|
</label>
|
|
<div class="row" id="openInNewWindow" hidden>
|
|
<div class="col-sm-6">
|
|
<label class="checkbox" title="Open article in new window">
|
|
<input type="checkbox" name="windowOpener" id="winOpenerCheck">
|
|
<span class="checkmark"></span>
|
|
<strong>Open in new window instead</strong>
|
|
</label>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<label class="checkbox" title="Use double right-click to open window/tab">
|
|
<input type="checkbox" name="dblRightClick" id="dblRightClickCheck">
|
|
<span class="checkmark"></span>
|
|
<strong>Use <i>double</i> right-click to open window/tab</strong>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div id="winOpenerHelp" style="padding-bottom:1em;"></div>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="allowHTMLExtraction" id="allowHTMLExtractionCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Add breakout link to open <i>current</i> article in new (non-browsable) window</b> (supported by all browsers)
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="openAllSections" id="openAllSectionsCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Open all headings</b> (<i>for WikiMedia ZIMs</i>: sets the state of collapsible headings on article load)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="returntoArticle" style="text-align:center;"></div>
|
|
<div>
|
|
<div class="row">
|
|
<h3 id="privacy">Privacy settings</h3>
|
|
<div class="column">
|
|
<div class="panel panel-warning" style="min-width:16em;" id="dataPersistence">
|
|
<div class="panel-heading">Persistence of data:</div>
|
|
<div class="panel-body">
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="rememberLastPage" id="rememberLastPageCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Reopen last-visited page</b> on next app launch
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="row">
|
|
<h3>Expert settings</h3>
|
|
<div class="column">
|
|
<div class="panel panel-warning" style="min-width:16em; display: none;" id="packagedAppFileSelectors">
|
|
<div class="panel-heading">Display hidden ZIM archive selectors:</div>
|
|
<div class="panel-body">
|
|
<label class="checkbox">
|
|
<input type="checkbox" name="displayFileSelectors" id="displayFileSelectorsCheck">
|
|
<span class="checkmark"></span>
|
|
<b>Display selectors</b> for files and folders : <i>This is for downloading other ZIM archives</i>.
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-warning" style="min-width:16em;" id="mathsProcessingMode">
|
|
<div class="panel-heading">Mathematical and chemical equations and symbols:</div>
|
|
<div class="panel-body">
|
|
<label class="radio">
|
|
<input type="radio" name="useMathJax" id="useMathJaxRadioTrue" value="true">
|
|
<span class="radiobtn"></span>
|
|
<b>Typeset TeX equations with KaTeX</b> (<i>recommended</i>: very fast, but not all symbols may be supported in all languages; will use SVG fallbacks if TeX string not available)
|
|
</label>
|
|
<label class="radio">
|
|
<input type="radio" name="useMathJax" id="useMathJaxRadioFalse" value="false">
|
|
<span class="radiobtn"></span>
|
|
<b>Use SVG fallback images</b> (very slow and memory hungry, but will dislplay all symbols)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-danger" id="contentInjectionModeDiv">
|
|
<div class="panel-heading">Content injection mode</div>
|
|
<div class="panel-body">
|
|
<p>See <a href="#expert" class="aboutLink">About (Expert Settings)</a> for an explanation of the difference between these modes:</p>
|
|
<label class="radio" title="This mode tends to be faster, and works well with Wikimedia ZIMs, but active/dynamic content doesn't work.">
|
|
<input type="radio" name="contentInjectionMode" value="jquery" id="jQueryModeRadio" checked>
|
|
<span class="radiobtn"></span>
|
|
<strong>JQuery</strong> (stable and safe)
|
|
</label>
|
|
<label class="radio" title="This mode can run JavaScript in the ZIM, so if it's available, use it for ZIMs with active content.">
|
|
<input type="radio" name="contentInjectionMode" value="serviceworker" id="serviceworkerModeRadio">
|
|
<span class="radiobtn"></span>
|
|
<strong>ServiceWorker</strong> (not available on all platforms, but supports more ZIM files)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-warning" id="apiStatusDiv">
|
|
<div class="panel-heading">API Status</div>
|
|
<div class="panel-body">
|
|
<div id="serviceWorkerStatus"></div>
|
|
<div id="messageChannelStatus"></div>
|
|
<div id="settingsStoreStatus"></div>
|
|
<div id="decompressorAPIStatus"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="returntoArticle" style="text-align:center;"></div>
|
|
<br />
|
|
<br />
|
|
<br />
|
|
</div>
|
|
<div id="welcomeText" class="container category-padding">
|
|
You can search the content of your ZIM archive by typing in the above search field.
|
|
<br />It will suggest articles starting with the letters you type.
|
|
</div>
|
|
<!-- List of articles matching the typed prefix -->
|
|
<div id="articleListWithHeader" style="display: none;" class="container">
|
|
<span id="articleListHeaderMessage"></span>
|
|
<div id="articleList" class="list-group">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Bootstrap alert box -->
|
|
<div id="alertBoxHeader" style="text-align: center; position: relative; z-index: 1; display: none;"></div>
|
|
<!-- Attribute nwdisable prevents scripts in iframe accessing the nwjs node APIs -->
|
|
<iframe id="articleContent" class="articleIFrame" style="touch-action:none" nwdisable></iframe>
|
|
</article>
|
|
<footer id="footer">
|
|
<!-- Bootstrap alert box -->
|
|
<div id="alertBoxFooter"></div>
|
|
<div id="divInstall1" style="display:none">
|
|
Install app on this device?
|
|
<button id="btnInstall1" class="btn btn-xs btn-primary">Now</button>
|
|
<button id="btnLater" class="btn btn-xs btn-primary">Later</button>
|
|
</div>
|
|
<div id="navigationButtons" class="btn-group btn-group-justified">
|
|
<div class="row">
|
|
<a class="btn btn-default col-xs-2" id="btnHomeBottom" title="Home"><span class="glyphicon glyphicon-home"></span></a>
|
|
<a class="btn btn-default col-xs-1" id="btnBack" title="Back"><span class="glyphicon glyphicon-circle-arrow-left"></span></a>
|
|
<a class="btn btn-default col-xs-1" id="btnForward" title="Forward"><span class="glyphicon glyphicon-circle-arrow-right"></span></a>
|
|
<a class="btn btn-default col-xs-2" style="display:none;" id="btnRandomArticleAlt" title="Random Article"><span class="glyphicon glyphicon-random"></span></a>
|
|
<div class="dropup">
|
|
<a href="#" class="btn btn-default dropdown-toggle col-xs-4" role="button" id="dropup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<b> ToC </b>
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul id="ToCList" class="dropdown-menu" style="overflow-y:auto;"></ul>
|
|
</div>
|
|
<a class="btn btn-default col-xs-1" id="btnZoomout" title="Zoom out"><span class="glyphicon glyphicon-zoom-out"></span></a>
|
|
<a class="btn btn-default col-xs-1" id="btnZoomin" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></a>
|
|
<span class="label label-default" id="lblZoom"></span>
|
|
<a class="btn btn-default col-xs-2" id="btnTop" title="Top" href="#top"><span class="glyphicon glyphicon-arrow-up"></span></a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</section>
|
|
|
|
<!-- Using require.js, a module system for javascript, include the
|
|
js files. This loads "main.js", which in turn can load other
|
|
files, all handled by require.js:
|
|
https://requirejs.org/docs/api.html#jsfiles -->
|
|
<script type="text/javascript"
|
|
data-main="js/init.js"
|
|
src="js/lib/require.js">
|
|
</script>
|
|
</body>
|
|
</html>
|