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

Changes in the layout. Add a few CSS styles to give a better look

Browse Source 
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 2013-07-26 20:18:57 +02:00
parent b1e0a43e70
commit 354f89fe0a
3 changed files with 136 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/app.css
View File

@ -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;
}

47
index.html
View File

@ -33,20 +33,32 @@
-->
<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>
<body role="application">
<section id="search-article" role="region">
<header>
<h1>Evopedia</h1>
<input type="button" id="showHideAbout" value="About" class="btn" />
<div id="about" style="display: none;">
<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"/>&nbsp;
<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/">http://www.evopedia.info/</a>
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">http://dumpathome.evopedia.info/dumps/finished</a> (with a Bittorrent client).
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>
@ -54,15 +66,19 @@
<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 :
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>I almost did not work on the User Interface so far</li>
<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">bugtracker</a> is on github too.
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 />
@ -82,13 +98,8 @@
<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"/>&nbsp;
<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>
@ -98,11 +109,17 @@
</div>
<div id="articleContent">&nbsp;</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>
&nbsp;
<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

27
js/app.js
View File

@ -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) {
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);
});