Update to Leo v1.7.0

Author: drewbarontini

source/assets/javascripts/application.js.coffee.erb

@@ -1,7 +1,16 @@
-Leo = {}
+# -------------------------------------
+#   Setup
+#   -> Namespace setup
+# -------------------------------------
+
+@Leo = {}
+@Leo.Pager = {}
 
 # -------------------------------------
 #   Heading Links
+#   -> Adds an anchor link next to each heading
+#
+#   options.els - the heading elements
 # -------------------------------------
 
 Leo.headingLinks = (options) ->
@@ -13,14 +22,71 @@ Leo.headingLinks = (options) ->
 
 # -------------------------------------
 #   Read Time
+#   -> Adds an estimated reading time to each page
+#
+#   options.text - the text of the page
+#   options.element - the element to append the reading time to
+#   options.wordsPerMinute - the words-per-minute to calculate against
 # -------------------------------------
 
 Leo.readTime = (options) ->
   time = Math.ceil(options.text.split(' ').length / options.wordsPerMinute)
   options.element.append("<b>#{time} minute read</b>")
 
+# -------------------------------------
+#   Pager
+#   -> Adds keyboard navigation for pages
+#
+#   id - the page id
+# -------------------------------------
+
+Leo.Pager = do ->
+
+  pageIndex = 0
+
+  pages = []
+
+  shortcuts =
+    'next': 39
+    'prev': 37
+
+  init = (id) ->
+    pageIndex = id
+    getPages()
+    setEventHandlers()
+
+  getPages = ->
+    <% get_pages.each do |p| %>
+    pages.push("<%= p.url %>")
+    <% end %>
+
+  setEventHandlers = ->
+    $(document).on 'keydown', (e) ->
+      switch getKeyCode(e)
+        when shortcuts.next then gotoPage('next')
+        when shortcuts.prev then gotoPage('prev')
+
+  getKeyCode = (e) ->
+    e = e || window.event
+    charCode = e.keyCode || e.which
+    charCode
+
+  gotoPage = (dir) ->
+    switch dir
+      when 'next'
+        unless pageIndex == pages.length
+          window.location = pages[pageIndex]
+      when 'prev'
+        unless pageIndex == 1
+          window.location = pages[pageIndex - 2]
+
+  init: init
+
 # -------------------------------------
 #   Slugify
+#   -> Converts a string into a title slug
+#
+#   text - the text to convert
 # -------------------------------------
 
 Leo.slugify = (text) ->
@@ -44,6 +110,8 @@ jQuery ($) ->
   })
   <% end %>
 
+  Leo.Pager.init( $('body').data('id') )
+
   $('.toggle').on 'click', (e) ->
     e.preventDefault()
     $(@).toggleClass('is-active')

source/assets/stylesheets/components/_well.sass

@@ -12,8 +12,9 @@
 // *************************************
 
 .well
-  margin-bottom: $b-whitespace
-  margin-top: $b-whitespace
+  +respond-to($breakpoint-tablet)
+    margin-bottom: $b-whitespace
+    margin-top: $b-whitespace
 
 // -------------------------------------
 //   Modifiers

source/assets/stylesheets/foundation/_base.sass

@@ -14,16 +14,29 @@ html
 
 body
   font-size: 100%
-  overflow-x: hidden
+  &.is-sidebar-open
+    overflow-y: hidden
+    position: fixed
+    +respond-to($breakpoint-tablet)
+      position: static
 
 .content
+  +transform(translateX(0))
+  +transition-transform(0.3s ease-in-out)
   margin-bottom: $b-whitespace-xl
   padding-top: $b-whitespace-xs
   @if $sidebar-collapsible
     .is-sidebar-open &
-      margin-left: $sidebar-width
+      +transform(translateX($sidebar-width))
+      margin-left: 0
+      +respond-to($breakpoint-tablet)
+        +transform(translateX(0))
+        margin-left: $sidebar-width
   @else
-    margin-left: $sidebar-width
+    .is-sidebar-open &
+      +transform(translateX($sidebar-width))
+    +respond-to($breakpoint-tablet)
+      margin-left: $sidebar-width
 
 // -------------------------------------
 //   Block Content
@@ -82,8 +95,9 @@ h4, .h4,
 h5, .h5,
 h6, .h6
   position: relative
-  &:hover > a
-    display: block
+  +respond-to($breakpoint-desk)
+    &:hover > a
+      display: block
 
 h1, .h1
   font-size: 200%

source/assets/stylesheets/foundation/_config.sass

@@ -63,6 +63,11 @@ $f-base: 'Merriweather', serif !default
 $f-header: 'Open Sans', serif !default
 $f-mono: Courier, monospace !default
 
+// ----- Breakpoints ----- //
+
+$breakpoint-desk: 57.5em !default
+$breakpoint-tablet: 41.25em !default
+
 // ----- Header ----- //
 
 $header-background: $c-invert !default

source/assets/stylesheets/structures/_sidebar.sass

@@ -16,11 +16,17 @@
 .sidebar
   @extend .boxSizing
   @if $sidebar-collapsible
+    +transform(translateX(-100%))
     +transition-transform(0.3s ease-in-out)
+  @else
     +transform(translateX(-100%))
+    +transition-transform(0.3s ease-in-out)
+    +respond-to($breakpoint-tablet)
+      +transform(translateX(0))
   background: $sidebar-background
   bottom: 0
   left: 0
+  overflow: scroll
   position: fixed
   top: 0
   width: $sidebar-width
@@ -33,6 +39,9 @@
 @if $sidebar-collapsible
   .sidebar.is-open
     +transform(translateX(0))
+@else
+  .sidebar.is-open
+    +transform(translateX(0))
 
 // -------------------------------------
 //   Scaffolding

source/assets/stylesheets/structures/_toggle.sass

@@ -16,14 +16,17 @@
   @if $sidebar-collapsible
     display: block
   @else
-    display: none
+    +respond-to($breakpoint-tablet)
+      display: none
   height: 5 * $toggle-height
   left: $b-whitespace
-  position: fixed
+  position: absolute
   top: $b-whitespace
   -webkit-backface-visibility: hidden
   width: $toggle-width
   z-index: 20
+  +respond-to($breakpoint-tablet)
+    position: fixed
 
 // -------------------------------------
 //   States

source/layouts/layout.haml

@@ -13,7 +13,7 @@
 
     = partial 'shared/google_analytics' if build?
 
-  %body{ class: page_classes }
+  %body{ class: page_classes, 'data-id' => current_page.data.priority }
 
     = link_to '#', class: 'toggle' do
       .toggle-icn