kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-09 20:32:45 -04:00
Code Issues Packages Projects Releases Wiki Activity
kiwix-js-pwa/www/index.html
Jaifroid 49a94f76c6 Test using libzim for reading content
2023-04-23 21:24:17 +01:00

1220 lines
105 KiB
HTML
Raw Permalink Blame History

<!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 'self' data: https://download.kiwix.org https://master.download.kiwix.org https://pwa.kiwix.org https://kiwix.github.io https://api.github.com 'unsafe-inline' 'unsafe-eval'; frame-src 'self' moz-extension: chrome-extension:; object-src 'none';">
<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="icon" type="image/png" href="img/icons/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="img/icons/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="img/icons/favicon-192x192.png" sizes="192x192" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="css/app.css" />
<!-- 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
var nwjsVersion = '';
if (typeof window.nw !== 'undefined') {
window.requireNode = window.require;
window.require = undefined;
window.fs = requireNode('fs');
nwjsVersion = nw.process.versions.nw;
}
</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">&times;</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&nbsp;JS <span class="identity">for Windows</span>
</h2>
<h4>Version <span class="version">2.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 official archives is free, open source and provided by volunteers.
<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;">
<span id="sampleZIM">This application is packaged with a basic sample ZIM archive of the top 100 Wikipedia articles. To keep the app size small
<i>the archive does not contain images</i>, and each article contains only the article summary (the introductory section). For the full experience,</span>
<span id="noSampleZIM"> you <strong>must download an offline ZIM archive</strong> and store it on your device!</span> You can do this from the <b>Configuration page&nbsp;
<span class="glyphicon glyphicon-wrench"></span></b>, or else see the <b>About page&nbsp;<span class="glyphicon glyphicon-info-sign"></span></b> for more information.
</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">2.0</span></h3>
<ul style="padding-left: 15px;">
<li>Provide fuzzy search for case-insensitive links in Zimit archives</li>
<li>Include broader pseudo-case-insensitive search in title search</li>
<li>Strengthen Content Security Policy via response headers and meta http-equiv</li>
<li>Add iframe referrer policy 'no-referrer'</li>
<li>Sample archive changed to wikipedia_en_100_mini_2023-04</li>
<li>Streamline the splashscreen display and make it dynamic</li>
<li>Add more complete language support to the Download Library languages dropdown</li>
<li>Fix Stack Exchange ZIM detection</li>
<li>Display of external icons in Stack Exchange articles</li>
<li>Dark mode style tweaks for Wiktionary</li>
<li>Fix missing full-text search cancellation which caused race condition in search</li>
</ul>
<p><a href="https://github.com/kiwix/kiwix-js-windows/blob/main/CHANGELOG.md" target="_blank" rel="noopener">And there's more...<img alt="external link" src="I/s/Icon_External_Link.png"></a></p>
</div>
<div id="features">
<h3>Features in Version 2.x</h3>
<ul style="padding-left:15px;">
<li>Download ZIM archives in-app from Download Library</li>
<li>Read Zimit archives you create yourself with <a href="https://youzim.it" target="_blank" rel="noopener">youzim.it</a>
<li>Light and dark themes available</li>
<li>Open a new browsable tab or window with long-press or Ctrl-click</li>
<li>In-page searching and highlighting (Ctrl-Shift-F, Alt-F, Ctrl-F)</li>
<li>Title search with wildcards .* or regexes</li>
<li>Show alphabetical index of all articles in archive (type space in search field)</li>
<li>Search for all assets in ZIM archive by prefixing namespace (or type space + / in search)</li>
<li>User-selectable font scaling</li>
<li>Printing articles (with optional filtering for Wikipedia articles)</li>
<li>Fast equation typesetting with KaTeX</li>
<li>Transform Wikipedia layout from mobile to desktop style and vice versa</li>
<li>Disable image display and load one-by-one if your device is slow</li>
<li>Export article to self-contained HTML page to view in browser</li>
<li>Export images, PDFs, EPUBs, videos</li>
<li>PWA mode to support archives with dynamic content on supported systems</li>
<li>Support full-screen mode in most browsers and frameworks</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>
<!--Bootstrap modal for alert and confirmation pop up-->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="modalCloseBtn" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h5 class="panel-group-heading" id="modalLabel">Modal title goes here</h5>
</div>
<div class="modal-body">
<p id="modalText">Modal text goes here</p>
</div>
<div class="modal-footer" id="modalFooter">
<button type="button" class="btn btn-primary" id="approveConfirm" data-dismiss="modal">Confirm</button>
<button type="button" class="btn btn-secondary" id="declineConfirm" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="closeMessage" data-dismiss="modal">OK</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">&times;</button>
<h3 style="margin-top:10px;">
Please choose print options
</h3>
</div>
<div class="modal-body">
<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>
<label id="printImages" class="checkbox">
<input type="checkbox" name="printImage" id="printImageCheck" checked>
<b>Print images</b> (<i>default: yes</i>)
</label>
<p style="color:red;font-weight:bold;">Options below ONLY apply to Wikimedia ZIMs</p>
<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>
</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="alertModalSmall" 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">&times;</button>
<h4>Information</h4>
</div>
<div class="modal-body">
<p 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" 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 alt="Kiwix icon" 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="Ctrl-Shift-F or 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="#fullTextSearch">Full-text search</a></li>
<li><a href="#linkHandling">Link handling, dynamic content and image download</a></li>
<li><a href="#windows">Window and tab management</a></li>
<li><a href="#modes">Technical Information</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" rel="noopener">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 official 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). There is provisional support for <a href="https://download.kiwix.org/zim/zimit/" target="_blank">Zimit archives</a>:
for more information on Zimit and how to make your own ZIM archives, see <a href="https://youzim.it/" target="_blank">youzim.it</a>.
Zimit archives usually work best in browsers/frameworks that support Service Worker mode (see below).
</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>There is experimental support for full-text search in the PWA and Electron apps (for ZIM archives that
include a full-text index). Please note that UWP and NWJS apps are not yet supported.</i></b>
</p>
<p>
On some Wikipedia and Wikivoyage (English and German) pages you will see map pins: <img src="img/icons/map_marker-30px.png" width="18px" />. By default, on
Windows 10/11, you can tap this icon to open the <b>Windows 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 Windows Settings for <b>Offline Maps</b>. If you are not using Windows, then
in Configuration, you can change this action so that the pin opens an <b>online</b> OpenStreetMap centred on the map pin instead.
</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> or
<a href="https://library.kiwix.org" target="_blank">https://library.kiwix.org</a> using a regular computer. To use all the features of ZIM archives
that have dynamic content (e.g. PhET), the needs to be running in PWA/ServiceWorker mode (see Performance/compatibility settings in
configuration), which is available in modern browsers (on iOS devices it is only available in Safari).
</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, ensure you save the file to the device and note the location of the file once the download 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) 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 (you may need to tap
"Select Storage" first). In most modern contexts the archive will be remembered on next launch (Firefox, Safari 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 (note that on iOS devices, ServiceWorker mode only works in Safari). If you
install, bookmark or add the PWA version to your home screen, then it will work offline (if ServiceWorker Mode is available),
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>
Electron and NWJS versions of the app may access GitHub on each start of the app to check for an update. The installer
(setup) version for Windows, and the AppImage version for Linux, will also self-update. You can block the update check
in these apps by unchecking the Allow Internet Access checkbox.
</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 controlled 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>
All versions of this app support basic <b>title search</b>, which is very fast and matches the <b>start</b> of an article title. Some versions
may also support <b>full-text searching</b> (<a href="#fullTextSearch">see below</a>).
</p>
<p>
With title search, 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 if full-text
search is not available, using a wildcard 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>
You can now <b>search for assets like images</b> or other non-HTML files in a ZIM by prefixing a namespace. For example, in older ZIMs, all images are in namesapce <code>I</code>,
so you would type, e.g., <code>I/aquarius</code>. In newer ZIMs, all contents (including assets) are in namespace <code>C</code>, so to distinguish images, you might
need to add a file extesnions, like <code>C/aquarius.*webp</code>.
</p>
<p id='zimIndex'>
You can see the full alphabetical <b>ZIM Archive Index</b> by typing a <b><i>space</i></b> 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. You can also show the <b>full URL index</b> by typing <b><i>space /</i></b> (a space followed by forward slash).
</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 (under 'Other display settings
and search').
</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="fullTextSearch">Full-text search</h3>
<p>
Some versions of this app (PWA and Electron, but not UWP) support <b>full-text search <i>if your ZIM has a full-text index</i></b>. The API panel in Configuration will tell you
whether the loaded ZIM and app support full-text search. A full-text search will be launched automatically after the title search if the latter didn't return the maximum number
of results you have set in Configuration (default is 30).
</p>
<p>
Full-text results are displayed <i>after</i> any matching title search results. Full-text search results can be considerably slower than title search with very large ZIM archives.
If you see the search result you want, you can click on it without having to wait for the full-text results.
</p>
<p id="Android">
If you are using the <b>PWA on Android</b>, please note that full-text search is disabled by default because file access on most Android versions is far too slow. If you want to try anyway,
open the 'Troubleshooting and development' section in Configuration and select 'WASM' from the dropdown next to 'Force use of libzim W/ASM'. This may be OK with small ZIM archives,
but don't be surprised if you have to wait 60-90 seconds just for full-text search to become available. With large ZIMs, you could have to wait several minutes, if it loads at all.
Returning full-text search results can also be very slow on Android.
</p>
<h3 id="linkHandling">Link handling, dynamic content and image download</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="#modes">Technical information</a> for a fuller explanation). <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>
<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>
<h3 id="windows">Window and tab management</h3>
<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>
<b><i>Help! - when I click on an external link it gets blocked!</i></b> Don't panic, this is the Content Security Policy potecting you. You have probably activated Service Worker mode. To open
external web sites, you need to turn on the option <b>Open links in a new tab</b> (in Service Worker mode). In JQuery mode, external links will open in a new tab/window regardliness of this
setting. Additionally, please note that your browser's <b>popup blocker</b> may be interfering 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>
In most browsers and frameworks you can set the app to <b>full-screen mode</b> using the option in Configuration, and in Chromium and Firefox browsers you can also <b>lock the orientation</b> of
the app while it is in full-screen mode. Because the browser may throw you out of full-screen mode, for example, when you select an archive or when opening a new window, you may need to click in
the app to re-activate full-screen mode. Full-screen mode needs to be activated by a user gesture: it is not possible to activate it automatically.
</p>
<h3 id="modes">Technical information</h3>
<p>
Depending on your browser or framework, this app may be capable of running in two different modes, which we call
"ServiceWorker Mode" and "JQuery Mode" for short. There is a toggle under Performance/compatibility settings
in Configuration. Here is an explanation of what these modes do:
<ul>
<li>
<b>ServiceWorker Mode</b> (defualt): 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>
<li>
<b>JQuery Mode (deprecated)</b>: This mode, which does not in fact require JQuery, is fine for everyday use with
Wikipedia / WikiMedia archives. 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>
</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>
<li><a href="https://github.com/darkreader/darkreader" target="_blank">DarkReader</a> for converting Web pages to dark mode, released under an <a href="https://github.com/darkreader/darkreader/blob/main/LICENSE" target="_blank">MIT 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>&nbsp;</p>
<div class="returntoArticle" style="text-align:center;"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="configuration" style="display: none;" class="container category-padding">
<div id="returntoArticle" class="returntoArticle" style="text-align:center;padding-top:20px;"></div>
<div id="divInstall2" style="display:none; float:right;">
<button id="btnInstall2" class="btn btn-xs btn-primary btn-inline">Install PWA</button>
</div>
<div class="row">
<h2 style="margin-top:0;">Configuration</h2>
<div id="alertBoxPersistent"></div>
<p style="margin: 1em auto 1em;">
Version: <b>Kiwix JS <span id="appType"></span><span class="version"></span></b> <span id="updateCheck">[<a class="unhideLibrary" href="#btnRescanDeviceStorage">check for updates</a>]</span>&nbsp;
<button title="This performs a simple page reload. May be useful if the app has become unresponsive."
id="btnRefreshApp" class="btn btn-xs btn-inline" style="border-color: gray" type="button">
Refresh
</button>
<button title="WARNING! Make sure you have an Internet connection! This will erase the app's Service Worker and all settings, returning it to a freshly installed state."
id="btnReset2" class="btn btn-xs btn-inline" style="border-color: palevioletred" type="button">
Reset
</button>
</p>
<p id="usage">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 btn-inline">Reload</button>
</p>
<p id="currentArchive" style="display: none;">
Current archive: <b><a href="#" id="currentArchiveLink"></a></b>
<button id="openCurrentArchive" style="display: none;" type="button" class="btn btn-primary btn-xs btn-inline">Open</button>
</p>
<p id="downloadLinksText">
<a class="unhideLibrary" 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">
<div id="archiveFilesDiv">
<div class="row">
<div class="col-xs-6">
<input type="button" class="btn btn-primary btn-inline" value="Select file" id="archiveFile" />
</div>
<div class="col-xs-6">
<input type="button" class="btn btn-primary btn-inline" value="Select folder" id="archiveFiles" />
</div>
</div>
<div 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="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>
<div id="archiveFilesLegacyDiv">
<div class="row" style="padding-bottom: 0.5em;">
<input type="file" 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"
class="btn btn-primary btn-inline" value="Select folder with ZIM files" id="archiveFilesLegacy" multiple />
</div>
<div id="instructions" class="row">
<p>
Please choose the location of your ZIM archive <b>or drag-and-drop the file(s) here</b>.<br />
For a split archive (.zimaa, .zimab, etc.) you must select <b>all</b> the split parts.
</p>
</div>
</div>
</div>
<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>
</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">
<h4 class="panel-group-heading">Download library</h4>
<div id="libraryArea" class="col-xs-12">
<table>
<tr>
<td><input id="downloadTrigger" type="button" class="btn btn-primary btn-inline" 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> <span id="updateStatus">and <b>check for updates</b></span>
</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">
<button style="float: right; border-color: gray;" title="Open all the setting panels."
id="btnToggleSettings" class="btn btn-xs btn-inline" type="button">▶ Open all</button>
<h4 class="panel-group-heading">Display settings</h4>
<div class="column">
<div id="displaySettingsDiv" class="panel panel-info" style="clear: left;">
<div class="panel-heading">Display size, theme and orientation</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12">
<b title="Put app into full-screen mode and optionally attempt to lock the display orientation (intended for mobile, if the app is installed: may not work in other contexts).">
Full-screen mode / lock orientation:
</b>
<select title="Put app into full-screen mode and optionally attempt to lock the display orientation (intended for mobile, if the app is installed: may not work in other contexts)." name="lockDisplayOrientation" id="lockDisplayOrientationDrop" class="dropdown">
<option value="">Normal</option>
<option value="fullscreen">Full screen</option>
<option value="natural">Natural</option>
<option value="portrait">Portrait</option>
<option value="landscape">Landscape</option>
</select>
</div>
</div>
<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">
<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> ] (for Wikimedia, Gutenberg and Stackexchange ZIMs only)
</label>
<label id="darkDarkReader" style="display:none;" class="checkbox" title="This uses the DarkReader plugin, and should work with a wider range of archives. It is automatically set if you load a Zimit archive, but can be unset.">
<input type="checkbox" name="cssWikiDarkThemeDarkReader" id="cssWikiDarkThemeDarkReaderCheck">
<span class="checkmark"></span>
<b>Use the <a href="https://github.com/darkreader/darkreader" target="_blank">DarkReader plugin</a></b> (<i>experimental</i>: should work with wider range of archive types)<br />
</label>
<label id="darkInvert" style="display:none;" class="checkbox" title="This is a generic inversion style, and may work with some other 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> (may work with some other archive types)
</label>
<label id="resetDisplayOnResize" style="display:none;" class="checkbox" title="This resets the display on app launch or when the app is resized, to fix UI on excternal monitors. It increases load time, so turn off if you do not use a secondary display.">
<input type="checkbox" name="resetDisplayOnResize" id="resetDisplayOnResizeCheck">
<span class="checkmark"></span>
<b>Fix UI bug with secondary displays</b> (increases load and resize time, turn off if not needed)
</label>
</div>
</div>
</div>
</div>
<div class="panel panel-info" id="cssSettingsDiv">
<div class="panel-heading">Display style (mobile, desktop)</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 most Wikimedia ZIM types by using our own copies of common stylesheets and removing JavaScript that is unused. 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 Wikimedia styles</b> (<i>recommended</i>: also removes unused JS)
</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 id="displayHiddenBlockElementsDiv">
<label class="checkbox" title="Show navboxes, tables and other elements that tend to be hidden in Wikipedia mobile style. Not needed if you select Desktop display style. 'Auto' applies setting only to Wikimedia archives in mobile style.">
<input name="displayHiddenBlockElements" id="displayHiddenBlockElementsCheck" type="checkbox" value="false">
<span class="checkmark"></span>
<b>Display hidden block elements</b>: [ <b><span id="displayHiddenElementsState"></span></b> ] (<i>for Wikimedia ZIMs</i>: shows elements that are hidden in mobile style)
</label>
</div>
</div>
</div>
<div class="panel panel-info" id="imageSettingsDiv">
<div class="panel-heading">Image and map settings</div>
<div class="panel-body">
<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;">&nbsp;blue area&nbsp;</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> (may interfere with dynamic content)
</label>
</div>
</div>
<label class="checkbox" title="If a Wikipedia ZIM is loaded, you can hyperlink each image to its high resolution version online. This will then open if you click on an image. NB Setting does not work on the landing page or on image maps, and images are not guaranteed to exist on the server.">
<input type="checkbox" name="linkToWikimediaImageFile" id="linkToWikimediaImageFileCheck">
<span class="checkmark"></span>
<b>In Wikipedia ZIMs, hyperlink images to high-res Wikimedia versions</b> (click image to open the external site in a new window, disabled for imagemaps and landing page)
</label>
<label class="checkbox" title="By default, this app will use the Windows Maps app when you click on a map pin (you can download offline maps in Windows Settings -> Offline maps). If you prefer to use OpenStreetMap (online), then check this box.">
<input type="checkbox" name="useOSM" id="useOSMCheck">
<span class="checkmark"></span>
<b>Use online OpenStreetMap for map pins instead of offline Windows Maps</b> (for some Wikipedia and English / German Wikivoyage)
</label>
</div>
</div>
<div class="panel panel-info" id="otherSettingsDiv">
<div class="panel-heading">Other display settings and search</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-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:&nbsp;&nbsp;
<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 and external links in a new tab. In ServiceWorker mode (see 'Performance/compatibility settings' below), this also causes links to be parsed, which (in the UWP app) makes it possible to download EPUBs and PDFs from Gutenberg ZIMs, and to open external links without them being blocked by the CSP. 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 links in a 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 most browsers: <i>disable popup blocking!</i>)
</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="row">
<h4 class="panel-group-heading" id="privacy">Privacy settings</h4>
<div class="column">
<div class="panel panel-warning" style="min-width:16em;" id="dataPersistence">
<div class="panel-heading">Control of browsing data</div>
<div class="panel-body">
<label class="checkbox" title="Turn this off if you are researching sensitive topics that you do not want to be revealed when you next launch the app.">
<input type="checkbox" name="rememberLastPage" id="rememberLastPageCheck">
<span class="checkmark"></span>
<b>Reopen last-visited page</b> on next app launch (<i>turn off if researching sensitive topics</i>)
</label>
<label class="checkbox" title="Prevents accidental navigation to external sites (and avoids some side-effects that can compromise the UI).">
<input type="checkbox" name="openExternalLinksInNewTabs" id="openExternalLinksInNewTabsCheck" checked>
<span class="checkmark"></span>
<strong>Warn before opening external links</strong> (<i>recommended</i>)
</label>
<p><i>To clear all data from the app, consider a full app reset after your browsing session</i> (see under <a href="#expertSettingsDiv"><b>Expert settings</b></a>)</p>
</div>
</div>
</div>
</div>
<div class="row">
<h4 class="panel-group-heading">Performance / compatibility</h4>
<div class="panel panel-warning" id="performanceSettingsDiv">
<div class="panel-heading">Speed up archive access</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<p>Speed up the display of articles by caching assets:</p>
<label class="radio" title="The cache provides high-speed access to ZIM assets such as stylesheets and scripts, which will improve article load times.">
<input type="radio" name="cachedAssetsMode" value="true" id="cachedAssetsModeRadioTrue" checked>
<strong>Cache assets</strong> (<i>recommended</i>)
<span class="radiobtn"></span>
</label>
<label class="radio" title="For low-memory devices, caching assets may cause app instability. This option allows you to disable the cache.">
<input type="radio" name="cachedAssetsMode" value="false" id="cachedAssetsModeRadioFalse">
<strong>Do not cache assets</strong> (empties caches: for low-memory devices)
<span class="radiobtn"></span>
</label>
</div>
<div class="col-sm-6">
<div id="cacheStatusPanel" class="panel panel-footer" style="overflow: hidden">
<div>
<p><b>Cache status:</b></p>
</div>
<div>
<div class="col-7">
<p>Cache used: <b id="cacheUsed"></b></p>
</div>
<div class="col-5">
<p>Assets: <b id="assetsCount"></b></p>
</div>
</div>
</div>
</div>
</div>
</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> (slow and memory-hungry, but will dislplay all symbols)
</label>
</div>
</div>
<div class="panel panel-warning" id="contentInjectionModeDiv">
<div class="panel-heading">Content injection mode</div>
<div class="panel-body">
<p>See <a href="#modes" class="aboutLink">About (Technical settings)</a> for an explanation of the difference between these modes:</p>
<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> (default - supports all archives with dynamic content)
</label>
<label class="radio"
title="This mode is deprecated. It 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> (deprecated - only for older browsers and frameworks)
</label>
<label class="checkbox" title="Experimentally use the libzim W/ASM to read ZIM content if available.">
<input type="checkbox" name="useLibzimReader" id="useLibzimReaderCheck">
<span class="checkmark"></span>
<strong>Use libzim to read all ZIM content if avaiable</strong> (<i>experimental</i>)
</label>
</div>
</div>
<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>
<div class="row">
<h4 class="panel-group-heading">Expert settings</h4>
<div class="panel panel-warning" id="expertSettingsDiv">
<div class="panel-heading">Troubleshooting and development</div>
<div class="panel-body">
<div class="column">
<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>
<b title="You can force the app to use libzim full-text searching if the ZIM has a full-text index. Useful for earlier versions of Android, for example.">Force use of libzim W/ASM for reading full-text index:</b>
<select title="You can force the app to use libzim full-text searching if the ZIM has a full-text index. Useful for earlier versions of Android, for example." name="debugLibzimASM" id="debugLibzimASMDrop" class="dropdown">
<option value="">Default</option>
<option value="wasm">WASM</option>
<option value="asm">ASM</option>
<option value="wasm.dev">WASM debug</option>
<option value="asm.dev">ASM debug</option>
</select>
<p><i>Warning! Disables OS/ZIM checks and may make title search unresponsive!</i></p>
<label class="checkbox" title="In some browsers on some platforms, drag-and-drop may malfunction and make it difficult to select text, and other operations. Disable it here if it is causing issues." >
<input type="checkbox" name="disableDragAndDrop" id="disableDragAndDropCheck">
<span class="checkmark"></span>
<b>Disable drag-and-drop</b> (in case it is causing anomalies)
</label>
<label id="bypassAppCacheDiv" class="checkbox" title="WARNING: Leaving this checked will prevent offline usage of the PWA. Setting will clear all existing Cache API caches, but assetsCache will be used unless also disabled above. For testing new code with the PWA.">
<input type="checkbox" name="bypassAppCache" id="bypassAppCacheCheck">
<span class="checkmark"></span>
<b>Bypass AppCache</b> (<i>disables offline use of PWA!</i>)
</label>
<p>Reset the app to default settings and erase all caches:</p>
<label class="button" title="This will return the app to its original settings on launch, and will empty all caches and settings and deregister Service Workers. The app will then reload.">
<button type="button" class="btn btn-danger" id="btnReset">Reset app</button>
</label>
</div>
</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 id="searchProviderStatus"></div>
<div id="pwaOriginStatus"></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" referrerpolicy="no-referrer" sandbox="allow-same-origin allow-scripts allow-modals allow-forms allow-popups allow-downloads" 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>&nbsp;ToC&nbsp;</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 "init.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>
Reference in New Issue View Git Blame Copy Permalink