kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-08 11:48:26 -04:00
Code Issues Packages Projects Releases Wiki Activity
kiwix-js-pwa/www/index.html
Jaifroid 07831853d2 Changelogs and bump version 
Former-commit-id: d87069bded67b6adeadc7f611a35dc4cd890e9dd [formerly 392beefecb49e1564270987a1561f1d901d8b66d [formerly fb251ac5c3f95da171b1dd541b00c592415c03c1]]
Former-commit-id: bce73027238cc0713bf6794c13d798fc2db8e779
Former-commit-id: 4412278a6a20bbffe686a2ab5f1c2738025a0866
2021-07-26 18:36:48 +01:00

951 lines
75 KiB
HTML
Raw 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 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">&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">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 sample ZIM archive 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&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>
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>New dropdown in Download Library allows filtering the list of archives by subject (for wikimedia, stackexchange, TED)</li>
<li>The app can now take advantage of native Promises, speeding up intensive searches considerably</li>
<li>Decompressors now loaded as fast binary WASM modules if the brower supports WebAssembly</li>
<li>Intalled PWA can now be opened offline when double-clicking ZIM archive (depends on File Handling API)</li>
<li>More displaced hatnotes are now corrected</li>
<li>Fixed style injection code that would (rarely) cause an exception on some ZIM types</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 Service Worker 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">&times;</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">&times;</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="#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 the app, 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) 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).
</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>
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="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>&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: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 class="packagedInfo" style="display: none;">
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>
<p id="moreInfo">For more information see <a href="#" onclick="document.getElementById('btnAbout').click();">About tab <span class="glyphicon glyphicon-info-sign"></span></a> (top right)<br><br></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-12">
<table>
<tr>
<td><input style="float:left; margin-right:1em;" type="button" class="btn btn-primary" value="Select storage" id="btnRescanDeviceStorage" /></td>
<td style="width:100%;">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></td>
</tr>
</table>
</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">
<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">
<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">
<input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
<span class="radiobtn"></span>
<b>Select style automatically</b> (<i>recommended</i>: matches the ZIM style)
</label>
<label class="radio">
<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">
<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">
<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">
<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">
<input type="checkbox" name="hideToolbars" id="hideToolbarsCheck" title="Tap three times for both | top | never">
<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>
<label class="checkbox">
<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>
<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="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="Max number 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="Open article in new tab">
<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>
<label class="checkbox" id="openInNewWindow" hidden 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 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">
<input type="radio" name="contentInjectionMode" value="jquery" id="jQueryModeRadio" checked>
<span class="radiobtn"></span>
<strong>JQuery</strong> (stable and safe)
</label>
<label class="radio">
<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>
</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>&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 "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>
Reference in New Issue View Git Blame Copy Permalink