mobile: add article navigation (closes #269)

mobile/functions.php

@@ -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\">

mobile/index.php

@@ -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">

mobile/mobile.css

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

mobile/mobile.js

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