Add path bar

Closes #32.

assets/javascripts/templates/pages/news_tmpl.coffee

@@ -24,7 +24,10 @@ newsItem = (date, news) ->
   result
 
 app.news = [
-  [ 1393027200000, # February 22, 2013
+  [ 1394236800000, # March 8, 2013
+    """ Added path bar. """,
+  ], [
+    1393027200000, # February 22, 2013
     """ New <a href="/c/">C</a> documentation """,
   ], [
     1392508800000, # February 16, 2013

assets/javascripts/templates/path_tmpl.coffee

@@ -0,0 +1,5 @@
+app.templates.path = (doc, type, entry) ->
+  html = """<a href="#{doc.fullPath()}" class="_path-item _icon-#{doc.slug}">#{doc.name}</a>"""
+  html += """<a href="#{type.fullPath()}" class="_path-item">#{type.name}</a>""" if type
+  html += """<span class="_path-item">#{entry.name}</span>""" if entry
+  html

assets/javascripts/views/layout/document.coffee

@@ -11,6 +11,7 @@ class app.views.Document extends app.View
     @addSubview @nav     = new app.views.Nav,
     @addSubview @sidebar = new app.views.Sidebar
     @addSubview @content = new app.views.Content
+    @addSubview @path    = new app.views.Path unless app.isSingleDoc() or app.isMobile()
 
     @setTitle()
     @activate()

assets/javascripts/views/layout/path.coffee

@@ -0,0 +1,36 @@
+class app.views.Path extends app.View
+  @className: '_path'
+
+  @events:
+    click: 'onClick'
+
+  @routes:
+    after: 'afterRoute'
+
+  render: (args...) ->
+    @show()
+    @html @tmpl 'path', args...
+
+  show: ->
+    $.prepend $('._app'), @el unless @el.parentNode
+
+  hide: ->
+    $.remove @el if @el.parentNode
+
+  onClick: (event) =>
+    @clicked = true if link = $.closestLink event.target, @el
+
+  afterRoute: (route, context) =>
+    if context.type
+      @render context.doc, context.type
+    else if context.entry
+      if context.entry.isIndex()
+        @render context.doc
+      else
+        @render context.doc, context.entry.getType(), context.entry
+    else
+      @hide()
+
+    if @clicked
+      @clicked = null
+      app.document.sidebar.reset()

assets/stylesheets/application.css.scss

@@ -24,6 +24,7 @@
         'components/fail',
         'components/notice',
         'components/notif',
+        'components/path',
         'components/prism',
         'components/mobile';
 

assets/stylesheets/components/_path.scss

@@ -0,0 +1,50 @@
+._path {
+  position: absolute;
+  z-index: $noticeZ;
+  bottom: 0;
+  left: $sidebarWidth;
+  right: 0;
+  height: 2rem;
+  line-height: 2rem;
+  padding: 0 .375rem;
+  font-size: .875rem;
+  text-shadow: 0 1px rgba(white, .5);
+  background: #f5f5f7;
+  box-shadow: inset 0 1px #d5d5da,          // top border
+              inset 0 2px rgba(white, .3),  // top inner glow
+              inset 1px 0 rgba(black, .03); // left inner shadow
+
+  @media #{$mediumScreen} { left: $sidebarMediumWidth; }
+
+  ~ ._container { padding-bottom: 2rem; }
+}
+
+._path-item {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+  margin: 0 1rem 0 0;
+  padding: 0 .375rem;
+  color: $textColor;
+
+  &:first-child:before {
+    content: '';
+    float: left;
+    width: 1rem;
+    height: 1rem;
+    margin: .5rem .375rem 0 0;
+    @extend %icon;
+  }
+
+  & + &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    width: 1rem;
+    height: 1rem;
+    margin: -.5rem 0 0 0;
+    pointer-events: none;
+    @extend %icon, %icon-path;
+  }
+}

assets/stylesheets/global/_icons.scss

@@ -49,3 +49,4 @@
 ._icon-knockout:before      { background-position: 0 -7rem; }
 ._icon-moment:before        { background-position: -1rem -7rem; }
 ._icon-c:before             { background-position: -2rem -7rem; }
+%icon-path                  { background-position: -3rem -7rem; }