mobile: add article navigation (closes #269)
This commit is contained in:
parent
e74fbbf8cc
commit
a6d56d81b1
4 changed files with 121 additions and 0 deletions
|
@ -477,6 +477,12 @@
|
|||
|
||||
print "<p>$content</p>";
|
||||
|
||||
print "<div class='nav'>
|
||||
<label>Navigation</label>
|
||||
<div class='button left' onclick='goPrev($id, $feed_id, this)'>Prev</div>
|
||||
<div class='button right' onclick='goNext($id, $feed_id, this)'>Next</div>
|
||||
</div>";
|
||||
|
||||
print "<fieldset>";
|
||||
|
||||
print "<div class=\"row\">
|
||||
|
|
|
@ -34,6 +34,7 @@
|
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<script type="text/javascript" src="../lib/prototype.js"></script>
|
||||
<script type="text/javascript" src="mobile.js"></script>
|
||||
<style type="text/css" media="screen">@import "mobile.css";</style>
|
||||
</head>
|
||||
|
||||
<style type="text/css">
|
||||
|
|
32
mobile/mobile.css
Normal file
32
mobile/mobile.css
Normal file
|
@ -0,0 +1,32 @@
|
|||
div.nav {
|
||||
height: 40px;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #999999;
|
||||
text-align: center;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
div.nav label {
|
||||
line-height: 40px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
}
|
||||
div.nav .button {
|
||||
position: static;
|
||||
margin: 5px 10px;
|
||||
-webkit-border-image: url(../lib/iui/whiteButton.png) 0 12 0 12;
|
||||
text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
|
||||
color: black;
|
||||
cursor: pointer; /* On a touch screen ? */
|
||||
}
|
||||
div.nav .button.left {
|
||||
float: left;
|
||||
}
|
||||
div.nav .button.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul li a.read {
|
||||
color: #666666;
|
||||
}
|
|
@ -58,3 +58,85 @@ function setPref(elem) {
|
|||
} });
|
||||
|
||||
}
|
||||
|
||||
// Go directly to another item in the same feed
|
||||
function goToSibling(article_id, feed_id, link, step) {
|
||||
var links = linksInFeed(feed_id);
|
||||
for (var i=0 ; i<links.length ; i++) {
|
||||
var re = new RegExp(".*article\\.php\\?id="+article_id+"&.*");
|
||||
if (!re.test(links[i].href)) continue;
|
||||
// here, we've found the current article
|
||||
var index = i + step;
|
||||
if (index < 0) {
|
||||
markAsRead(feed_id);
|
||||
iui.showPage($("feed-"+feed_id), true);
|
||||
return false;
|
||||
}
|
||||
if (index >= links.length) {
|
||||
showRestOfFeed(feed_id);
|
||||
return false;
|
||||
}
|
||||
console.log(links[index]);
|
||||
var match = links[index].href.match(/.*article\.php\?(.*)/);
|
||||
var qs = match[1];
|
||||
var backwards = false;
|
||||
if (step < 0) backwards = true;
|
||||
link.setAttribute("selected", "progress");
|
||||
function unselect() { link.removeAttribute("selected"); }
|
||||
iui.showPageByHref("article.php?"+qs, null, null, null, unselect, backwards);
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function goPrev(article_id, feed_id, link) {
|
||||
return goToSibling(article_id, feed_id, link, -1);
|
||||
}
|
||||
function goNext(article_id, feed_id, link) {
|
||||
return goToSibling(article_id, feed_id, link, 1);
|
||||
}
|
||||
|
||||
// Get all the links in the feed. The all_links variable includes the "get more article" link
|
||||
function linksInFeed(feed_id, all_links) {
|
||||
var feed_content = $("feed-"+feed_id);
|
||||
var links_raw = feed_content.getElementsByTagName("a");
|
||||
if (all_links) return links_raw;
|
||||
var links = [];
|
||||
// filter the array to remove the "get more articles" link
|
||||
// and the "search" link (which is always first)
|
||||
for (var i=1 ; i<links_raw.length ; i++) {
|
||||
if (links_raw[i].href.match(/.*article\.php\?id=.*/)) {
|
||||
links.push(links_raw[i]);
|
||||
}
|
||||
}
|
||||
return links;
|
||||
}
|
||||
|
||||
// Adds the "read" class to all read links in the feed
|
||||
function markAsRead(feed_id) {
|
||||
var links = linksInFeed(feed_id);
|
||||
for (var j=0 ; j<links.length ; j++) {
|
||||
var match = links[j].href.match(/.*article\.php\?id=(\d+)&.*/);
|
||||
if ($("article-"+match[1])) {
|
||||
links[j].className = "read";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Go the the articles list and expand the "get more articles" link
|
||||
function showRestOfFeed(feed_id) {
|
||||
var links_raw = linksInFeed(feed_id, true);
|
||||
var lastlink = links_raw[links_raw.length - 1];
|
||||
if (lastlink.target == "_replace") {
|
||||
// It's a "get more articles" link
|
||||
iui.showPage($("feed-"+feed_id), true);
|
||||
// Mark old items a "read"
|
||||
markAsRead(feed_id);
|
||||
// Simulate click on the "get more articles" link
|
||||
lastlink.setAttribute("selected", "progress");
|
||||
function unselect() { lastlink.removeAttribute("selected"); }
|
||||
setTimeout(window.scrollTo, 0, 0, 1000);
|
||||
iui.showPageByHref(lastlink.href, null, null, lastlink, unselect);
|
||||
} else {
|
||||
iui.showPage($("home"), true);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue