mirror of
https://github.com/kiwix/kiwix-js.git
synced 2025-09-22 12:01:15 -04:00
Changes in the layout. Add a few CSS styles to give a better look
Slight modifications in the behavior, so that the configuration zone appears when necessary (on desktop), and can be toggled by a button. Tha about section is now bound to the corresponding button + small fix on the back/forward buttons behavior
This commit is contained in:
mossroy
parent
b1e0a43e70
commit
354f89fe0a
32
css/app.css
32
css/app.css
@ -1,6 +1,30 @@
|
||||
/* Main CSS of the application */
|
||||
|
||||
body {
|
||||
/* Remove spacing to avoid losing borders around the screen*/
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[role=region] {
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
|
||||
position: fixed;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
[role=region] > header {
|
||||
margin: .5rem 0 1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
[role=region] > header > h1 {
|
||||
margin: 0;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,.4);
|
||||
}
|
||||
[role=region] > .view-content {
|
||||
margin: 0 1rem 4rem 1rem;
|
||||
}
|
||||
[role=region] > footer {
|
||||
background: rgba(0,0,0,.2);
|
||||
right: 0; bottom: 0; left: 0;
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
}
|
||||
[role=region] > footer > menu[role=toolbar] {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
151
index.html
151
index.html
@ -33,76 +33,93 @@
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="css/mediawiki-main.css">
|
||||
<!--<link rel="stylesheet" href="css/app.css">-->
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<!-- Bootstrap -->
|
||||
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Evopedia</h1>
|
||||
<input type="button" id="showHideAbout" value="About" class="btn" />
|
||||
<div id="about" style="display: none;">
|
||||
This is a preliminary work on the port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
|
||||
<br />
|
||||
The original application is at <a href="http://www.evopedia.info/">http://www.evopedia.info/</a>
|
||||
<br />
|
||||
<br />
|
||||
To use it, you have to first download locally a dump from <a href="http://dumpathome.evopedia.info/dumps/finished">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
|
||||
<br />
|
||||
<ul>
|
||||
<li>On desktops, it works on recent Firefox and Chrome, and maybe on other browsers. In this case, you have to select manually some files from your dump (see below)</li>
|
||||
<li>On the Firefos OS simulator, you have to put the archive files in a "fake-sdcard" folder of your firefox profile (ex : ~/.mozilla/firefox/xxxx.default/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard). It looks for file titles.idx in it. You need to install the application from the dashboard of the simulator (due to security restrictions in Firefox OS : only certified webapps can access the sdcard)</li>
|
||||
<li>On a real Firefox OS device, you simply have to put the archive files anywhere in your sdcard, so that it finds titles.idx on it. For now, the application has to be installed manually (use the push feature of the Firefos OS Simulator)</li>
|
||||
</ul>
|
||||
<br />
|
||||
It's still a beta version : there are many many ways this could be enhanced (suggestions and patches are welcome : the source code is on <a href="https://github.com/mossroy/evopedia-html5">github</a>). In particular :
|
||||
<ul>
|
||||
<li>I almost did not work on the User Interface so far</li>
|
||||
<li>In some rare cases, the links inside an article do not work, or do not lead to the right article</li>
|
||||
<li>It is not easy to use on the Peak device from Geeksphone because the buttons and inputs are too small</li>
|
||||
<li>Some features of the original application still have to be implemented : in particular geolocation of articles</li>
|
||||
</ul>
|
||||
The <a href="https://github.com/mossroy/evopedia-html5/issues">bugtracker</a> is on github too.
|
||||
</div>
|
||||
<div id="openLocalFiles" style="display: none;">
|
||||
<br /> Please select the file titles.idx :<br />
|
||||
<input type="file" id="titleFile" class="btn" /><br />
|
||||
Please select the files wikipedia_*.dat from the same dump :<br />
|
||||
<input type="file" id="dataFiles" multiple class="btn" /><br />
|
||||
Please select the file math.idx from the same dump:<br />
|
||||
<input type="file" id="mathIndexFile" class="btn" /><br />
|
||||
Please select the file math.dat from the same dump:<br />
|
||||
<input type="file" id="mathDataFile" class="btn" /><br />
|
||||
Please select the file metadata.txt from the same dump:<br />
|
||||
<input type="file" id="metadataFile" class="btn" /><br />
|
||||
</div>
|
||||
<div id="scanningForArchives" style="display: none;">
|
||||
<br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
|
||||
</div>
|
||||
<div id="chooseArchiveFromLocalStorage" style="display: none;">
|
||||
<br /> Please select the archive you want to use : <select id="archiveList"></select>
|
||||
</div>
|
||||
<br />
|
||||
<form id="formTitleSearch" class="form-search">
|
||||
<div class="input-append">
|
||||
<input type="text" id="prefix" value="" placeholder="Find titles starting with..." class="input-medium search-query"/>
|
||||
<a class="btn" id="searchTitles" href="#"><i class="icon-search"></i></a>
|
||||
</div>
|
||||
<img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/>
|
||||
</form>
|
||||
<!-- List of articles matching the typed prefix -->
|
||||
<ul id="titleList">
|
||||
</ul>
|
||||
<br />
|
||||
<div id="readingArticle" style="display: none;">
|
||||
Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
|
||||
</div>
|
||||
<div id="articleContent"> </div>
|
||||
<br />
|
||||
<div id="navigationButtons" class="btn-toolbar">
|
||||
<a class="btn" id="btnBack"><i class="icon-arrow-left"></i></a>
|
||||
<a class="btn" id="btnForward"><i class="icon-arrow-right"></i></a>
|
||||
<a class="btn" id="btnAbout"><i class="icon-question-sign"></i></a>
|
||||
</div>
|
||||
<body role="application">
|
||||
<section id="search-article" role="region">
|
||||
<header>
|
||||
<h1>Evopedia</h1>
|
||||
<br />
|
||||
<form id="formTitleSearch" class="form-search">
|
||||
<div class="input-append">
|
||||
<input type="text" id="prefix" value="" placeholder="Find titles starting with..." class="input-medium search-query"/>
|
||||
<a class="btn" id="searchTitles" href="#"><i class="icon-search"></i></a>
|
||||
</div>
|
||||
<img id="searchingForTitles" src="img/spinner.gif" style="display: none;"/>
|
||||
</form>
|
||||
</header>
|
||||
<article class="view-content">
|
||||
<div id="about">
|
||||
<h2>About</h2>
|
||||
This is a preliminary work on the port of Evopedia (offline wikipedia reader) in HTML5/Javascript, with Firefox OS as the primary target
|
||||
<br />
|
||||
The original application is at <a href="http://www.evopedia.info/" target="_blank">http://www.evopedia.info/</a>
|
||||
<br />
|
||||
<br />
|
||||
To use it, you have to first download locally a dump from <a href="http://dumpathome.evopedia.info/dumps/finished" target="_blank">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
|
||||
<br />
|
||||
<ul>
|
||||
<li>On desktops, it works on recent Firefox and Chrome, and maybe on other browsers. In this case, you have to select manually some files from your dump (see below)</li>
|
||||
<li>On the Firefos OS simulator, you have to put the archive files in a "fake-sdcard" folder of your firefox profile (ex : ~/.mozilla/firefox/xxxx.default/extensions/r2d2b2g@mozilla.org/profile/fake-sdcard). It looks for file titles.idx in it. You need to install the application from the dashboard of the simulator (due to security restrictions in Firefox OS : only certified webapps can access the sdcard)</li>
|
||||
<li>On a real Firefox OS device, you simply have to put the archive files anywhere in your sdcard, so that it finds titles.idx on it. For now, the application has to be installed manually (use the push feature of the Firefos OS Simulator)</li>
|
||||
</ul>
|
||||
<br />
|
||||
It's still a beta version : there are many many ways this could be enhanced (suggestions and patches are welcome : the source code is on <a href="https://github.com/mossroy/evopedia-html5" target="_blank">github</a>). In particular :
|
||||
<ul>
|
||||
<li>The User Interface is very young and has to be improved</li>
|
||||
<li>In some rare cases, the links inside an article do not work, or do not lead to the right article</li>
|
||||
<li>It is not easy to use on the Peak device from Geeksphone because the buttons and inputs are too small</li>
|
||||
<li>Some features of the original application still have to be implemented : in particular geolocation of articles</li>
|
||||
</ul>
|
||||
The <a href="https://github.com/mossroy/evopedia-html5/issues" target="_blank">bugtracker</a> is on github too.
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div id="configuration">
|
||||
<h2>Configuration</h2>
|
||||
<div id="openLocalFiles" style="display: none;">
|
||||
<br /> Please select the file titles.idx :<br />
|
||||
<input type="file" id="titleFile" class="btn" /><br />
|
||||
Please select the files wikipedia_*.dat from the same dump :<br />
|
||||
<input type="file" id="dataFiles" multiple class="btn" /><br />
|
||||
Please select the file math.idx from the same dump:<br />
|
||||
<input type="file" id="mathIndexFile" class="btn" /><br />
|
||||
Please select the file math.dat from the same dump:<br />
|
||||
<input type="file" id="mathDataFile" class="btn" /><br />
|
||||
Please select the file metadata.txt from the same dump:<br />
|
||||
<input type="file" id="metadataFile" class="btn" /><br />
|
||||
</div>
|
||||
<div id="scanningForArchives" style="display: none;">
|
||||
<br /> Scanning your sdcard for archives... Please wait <img src="img/spinner.gif" />
|
||||
</div>
|
||||
<div id="chooseArchiveFromLocalStorage" style="display: none;">
|
||||
<br /> Please select the archive you want to use : <select id="archiveList"></select>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<!-- List of articles matching the typed prefix -->
|
||||
<ul id="titleList">
|
||||
</ul>
|
||||
<br />
|
||||
<div id="readingArticle" style="display: none;">
|
||||
Reading article <span id="articleName"></span> from dump... Please wait <img src="img/spinner.gif" />
|
||||
</div>
|
||||
<div id="articleContent"> </div>
|
||||
<br />
|
||||
</article>
|
||||
<footer>
|
||||
<div id="navigationButtons" class="btn-toolbar">
|
||||
<a class="btn" id="btnBack"><i class="icon-arrow-left"></i></a>
|
||||
<a class="btn" id="btnForward"><i class="icon-arrow-right"></i></a>
|
||||
|
||||
<a class="btn" id="btnConfigure"><i class="icon-cog"></i></a>
|
||||
<a class="btn" id="btnAbout"><i class="icon-question-sign"></i></a>
|
||||
</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
|
||||
|
||||
31
js/app.js
31
js/app.js
@ -16,9 +16,12 @@ define(function(require) {
|
||||
|
||||
// Define behavior of HTML elements
|
||||
$('#about').hide();
|
||||
$('#showHideAbout').on('click', function(e) {
|
||||
$('#btnAbout').on('click', function(e) {
|
||||
$('#about').toggle();
|
||||
});
|
||||
$('#btnConfigure').on('click', function(e) {
|
||||
$('#configuration').toggle();
|
||||
});
|
||||
$('#searchTitles').on('click', function(e) {
|
||||
searchTitlesFromPrefix($('#prefix').val());
|
||||
});
|
||||
@ -53,12 +56,19 @@ define(function(require) {
|
||||
// If DeviceStorage is not available, we display the file select components
|
||||
displayFileSelect();
|
||||
setLocalArchiveFromFileSelect();
|
||||
if (localArchive.dataFiles.length>0) {
|
||||
// Hide the configuration elements if already set
|
||||
$('#configuration').hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Display the article when the user goes back in the browser history
|
||||
window.onpopstate = function(event) {
|
||||
var titleName = event.state.titleName;
|
||||
goToArticle(titleName);
|
||||
if (event.state) {
|
||||
var titleName = event.state.titleName;
|
||||
goToArticle(titleName);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
@ -143,6 +153,7 @@ define(function(require) {
|
||||
*/
|
||||
function searchTitlesFromPrefix(prefix) {
|
||||
$('#searchingForTitles').show();
|
||||
$('#configuration').hide();
|
||||
$('#articleContent').empty();
|
||||
if (localArchive.titleFile) {
|
||||
localArchive.findTitlesWithPrefix(prefix.trim(), populateListOfTitles);
|
||||
@ -164,6 +175,7 @@ define(function(require) {
|
||||
var titleLi = document.createElement('li');
|
||||
var titleA = document.createElement('a');
|
||||
titleA.setAttribute("titleId", title.toStringId());
|
||||
titleA.setAttribute("href", "#");
|
||||
$(titleA).append(title.name);
|
||||
$(titleA).on("click",handleTitleClick);
|
||||
$(titleLi).append(titleA);
|
||||
@ -184,6 +196,7 @@ define(function(require) {
|
||||
findTitleFromTitleIdAndLaunchArticleRead(titleId);
|
||||
var title = evopedia.Title.parseTitleId(localArchive, titleId);
|
||||
pushBrowserHistoryState(title.name);
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
@ -255,22 +268,26 @@ define(function(require) {
|
||||
// It's an anchor link : do nothing
|
||||
}
|
||||
else if (url.substring(0, 4) === "http") {
|
||||
// It's an external link : do nothing
|
||||
// It's an external link : open in a new tab
|
||||
$(this).attr("target", "_blank");
|
||||
}
|
||||
else if (url.match(regexOtherLanguage)) {
|
||||
// It's a link to another language : change the URL to the online version of wikipedia
|
||||
// The regular expression extracts $1 as the language, and $2 as the title name
|
||||
var onlineWikipediaUrl = url.replace(regexOtherLanguage, "https://$1.wikipedia.org/wiki/$2");
|
||||
$(this).attr("href", onlineWikipediaUrl);
|
||||
// Open in a new tab
|
||||
$(this).attr("target", "_blank");
|
||||
}
|
||||
else if (url.match(regexImageLink)
|
||||
&& (evopedia.endsWith(lowerCaseUrl, ".png")
|
||||
|| evopedia.endsWith(lowerCaseUrl, ".svg")
|
||||
|| evopedia.endsWith(lowerCaseUrl, ".jpg")
|
||||
|| evopedia.endsWith(lowerCaseUrl, ".jpeg"))) {
|
||||
// It's a link to a file of wikipedia : change the URL to the online version
|
||||
// It's a link to a file of wikipedia : change the URL to the online version and open in a new tab
|
||||
var onlineWikipediaUrl = url.replace(regexImageLink, "https://"+localArchive.language+".wikipedia.org/wiki/File:$1");
|
||||
$(this).attr("href", onlineWikipediaUrl);
|
||||
$(this).attr("target", "_blank");
|
||||
}
|
||||
else {
|
||||
// It's a link to another article : add an onclick event to go to this article
|
||||
@ -290,8 +307,8 @@ define(function(require) {
|
||||
// Load math images
|
||||
$('#articleContent').find('img').each(function() {
|
||||
var image = $(this);
|
||||
var m;
|
||||
if ((m = image.attr("src").match(/^\/math.*\/([0-9a-f]{32})\.png$/))) {
|
||||
var m = image.attr("src").match(/^\/math.*\/([0-9a-f]{32})\.png$/);
|
||||
if (m) {
|
||||
localArchive.loadMathImage(m[1], function(data) {
|
||||
image.attr("src", 'data:image/png;base64,' + data);
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user