Add next-prev buttons

Fixes #22

content/js/main.js

@@ -7,13 +7,6 @@ function setVisibleTags(){
    }
 }
 
-var isMobile = window.screen.width < 720;
-if (localStorage.getItem("openside") === null) {
-  window.sidebarExpanded = !isMobile;
-} else {
-  window.sidebarExpanded = (localStorage.getItem("openside") === "true");
-}
-
 function updateSidebar(notransition) {
   if (notransition) {
     document.querySelectorAll("#sidebar")[0].classList.add("notransition");
@@ -40,8 +33,42 @@ function sidebarClick() {
   updateSidebar(false);
 }
 
+function getNextPrev() {
+  // thanks iznogoodd from #nim @ freenode.net
+  var links = document.querySelectorAll('#sidebar a[href]');
+
+  var nav = {prev: null, next: null};
+  for(var i = 0; i < links.length; i++){
+    var item = links.item(i);
+    if(item && item.getAttribute('href') === window.location.pathname){
+      nav.prev = links.item(i - 1) && links.item(i - 1).getAttribute('href');
+      nav.next = links.item(i + 1) && links.item(i + 1).getAttribute('href');
+      return nav;
+    }
+  }
+}
+
+function updateNextPrevButtons() {
+  var nav = getNextPrev();
+
+  var prev = document.getElementById("arrow-prev");
+  var next = document.getElementById("arrow-next");
+
+  if (nav.prev != null) { prev.classList.remove("disabled"); prev.href = nav.prev; }
+  if (nav.next != null) { next.classList.remove("disabled"); next.href = nav.next; }
+}
+
+
+var isMobile = window.screen.width < 720;
+if (localStorage.getItem("openside") === null) {
+  window.sidebarExpanded = !isMobile;
+} else {
+  window.sidebarExpanded = (localStorage.getItem("openside") === "true");
+}
+
 localStorage.setItem(window.location.pathname, true);
 window.onload = function(){
   updateSidebar(true);
   setVisibleTags();
+  updateNextPrevButtons();
 }

content/stylesheets/main.css

@@ -58,6 +58,16 @@ body {
 .nav-toggle span { margin-top: 9.5px; }
 
 
+#nextprev {
+  overflow: hidden;
+  padding: .5em 1em;
+}
+
+.text-icon { font-size: 5em; }
+#arrow-prev { float: left; }
+#arrow-next { float: right; }
+
+
 article {
   margin: 15px;
 
@@ -70,6 +80,9 @@ a { text-decoration: none; }
 a:link, a:visited { color: #B45D47; }
 a:hover { color: #FE3B3B; }
 
+a.disabled, a:link.disabled, a:visited.disabled { color: #999; pointer-events: none; }
+a:hover.disabled { color: #888; }
+
 
 pre, code { font-family: Monaco, Menlo, Consolas, "Courier New", monospace; }
 code {

layouts/default.html

@@ -41,6 +41,11 @@
       <%= yield %>
     </article>
 
+    <div id=nextprev>
+      <a id=arrow-prev class="text-icon disabled" href="https://please-enable-js/">↽</a>
+      <a id=arrow-next class="text-icon disabled" href="https://please-enable-js/">⇁</a>
+    </div>
+
     <footer>
       <%= @items["/footer/"].compiled_content(snapshot: :last) %>
     </footer>