Create a doc prev and next nav while viewing a doc in collection

site/lib/app.coffee

@@ -96,7 +96,7 @@ setupNavMenus = ->
               url = "/#{doc.type}/#{doc.slug}"
               selectedClass = if window.location.pathname is url then 'active' else ''
               $collectionNavList.append "<li><a href=\"#{url}\" class=\"#{selectedClass}\" data-id=\"#{doc._id}\">#{doc.title}</a></li>"
-            setupCollectionDocsNav(collectionDocs)
+            setupCollectionDocsNav(collectionDocs, $collectionNavList)
 
     $collectionNavIcon.on 'click', (e) ->
       e.stopPropagation()
@@ -105,12 +105,53 @@ setupNavMenus = ->
       $collectionNavIcon.toggleClass('open')
 
 
-setupCollectionDocsNav = (docs) ->
+setupCollectionDocsNav = (docs, $collectionNavList) ->
+  $docNav = $('.doc-nav')
+  $docNavPrev = $docNav.find('> .prev')
+  $docNavNext = $docNav.find('> .next')
+
+  $activeLink = $collectionNavList.find('.active')
+
+  prev = -> $activeLink.parent().prev(':not(.heading)')?.find('a')[0]?.click()
+  next = -> $activeLink.parent().next(':not(.heading)')?.find('a')[0]?.click()
+
+  $docNavPrev.on 'click', ->
+    if prev()
+      $docNav.children().removeClass('disabled')
+    else
+      $docNavPrev.addClass('disabled')
+  
+  $docNavNext.on 'click', ->
+    if next()
+      $docNav.children().removeClass('disabled')
+    else
+      $docNavNext.addClass('disabled')
+
   $(document).on 'keydown', (e) ->
-    if e.which is 37
-      console.log docs[1].title
-    else if e.which is 39
-      console.log docs[1]._id
+    # if Modernizr.history
+    #   currentId = $collectionNavList.find('.active').attr('data-id')
+    #   if currentId
+    #     currentIndex = $.grep(docs, (d, i) -> if d._id is currentId then i)
+    #     if e.which is 37
+    #       # console.log docs[currentIndex-1]?._id
+    #       doc = docs[currentIndex-1]
+    #     else if e.which is 39
+    #       # console.log docs[currentIndex+1]?.title
+    #       doc = docs[currentIndex+1]
+
+    #     if doc
+    #       $('article.view > .title').html(doc.title)
+    #       $('article.view > .photo img')
+    #         .attr('src', "/file/{{doc._id}}/{{doc.photo}}")
+    #         .attr('alt', "#{doc.title}")
+    #       $('article.view > .intro').html(doc.intro_html)
+    #       $('article.view > .body').html(doc.body_html)
+    # else
+    if $activeLink
+      if e.which is 37
+        $docNavPrev.click()
+      else if e.which is 39
+        $docNavNext.click()
 
 setupSmoothScrolling = ->
   smoothScroll = (hash) ->

site/static/css/responsive.styl

@@ -176,6 +176,19 @@
       left: -20px
 
 
+@media (min-width: 1100px)
+
+  .doc-nav
+    display: block
+    right: 1%
+
+@media (min-width: 1200px)
+
+  .doc-nav
+    display: block
+    right: 5%
+
+
 // Heights
 @media (min-height: 768px)
   .main-nav

site/static/css/setup-theme.styl

@@ -54,6 +54,13 @@ setupTheme($primaryColor = $blueColor, $secondaryColor = $lightGrey, $linkColor
           &.active
             background: darken($primaryColor, 10%)
 
+  .doc-nav
+    > div
+      color: $linkColor
+      html.no-touch &:hover
+      html.touch &:active
+        color: darken($linkColor, 10%)
+
   article
     h3, h4
       a

site/static/css/theme.styl

@@ -228,6 +228,32 @@
       right: 140px
 
 
+.doc-nav
+  display: none
+  position: fixed
+  top: 50%
+  right: 5%
+  > div
+    display: inline-block
+    font-size: 4em
+    line-height: 1em
+    padding: 10px
+    margin: 0
+    cursor: pointer
+    html.no-touch &:hover
+    html.touch &:active
+      color: darken($linkColor, 10%)
+      background: $faintGrey
+
+    &.disabled
+      color: $faintGrey
+      cursor: default
+      html.no-touch &:hover
+      html.touch &:active
+        color: $faintGrey
+        background: transparent
+
+
 article
 
   h3, h4
@@ -516,6 +542,20 @@ article.scene
     max-height: initial
     margin-bottom: 1em
 
+    .scene-prev
+    .scene-next
+      position: absolute
+      bottom: -20px
+      width: 40px
+      height: 40px
+      border: 4px solid #fff
+
+    .scene-prev
+      left: -4px
+
+    .scene-next
+      right: -4px
+
   > .body
     font-size: 1.3em
     line-height: 1.5em

site/templates/partials/doc-navigation.html

@@ -1,3 +1,8 @@
+<nav class="doc-nav">
+  <div class="prev"><i class="icon icon-left-open"></i></div>
+  <div class="next"><i class="icon icon-right-open"></i></div>
+</nav>
+
 <nav class="toc-nav {{doc.type}}">
   <div class="icon" data-track-click="Document Nav Icon">
     <div><span></span><span></span><span></span></div><i class="icon-down-open"></i>