Improve doc list for versioned docs

Ref #25.

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -3,13 +3,15 @@ templates = app.templates
 templates.sidebarDoc = (doc, options = {}) ->
   link  = """<a href="#{doc.fullPath()}" class="_list-item _icon-#{doc.icon} """
   link += if options.disabled then '_list-disabled' else '_list-dir'
-  link += """" data-slug="#{doc.slug}" title="#{doc.name}">"""
+  link += """" data-slug="#{doc.slug}" title="#{doc.name} #{doc.version || ''}">"""
   if options.disabled
     link += """<span class="_list-enable" data-enable="#{doc.slug}">Enable</span>"""
   else
     link += """<span class="_list-arrow"></span>"""
   link += """<span class="_list-count">#{doc.release}</span>""" if doc.release
-  link +  "#{doc.name}</a>"
+  link += "#{doc.name}"
+  link += " #{doc.version}" if options.disabled and doc.version
+  link + "</a>"
 
 templates.sidebarType = (type) ->
   """<a href="#{type.fullPath()}" class="_list-item _list-dir" data-slug="#{type.slug}"><span class="_list-arrow"></span><span class="_list-count">#{type.count}</span>#{type.name}</a>"""
@@ -48,12 +50,15 @@ templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
   html += " open" if options.open
   html + """"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>"""
 
-templates.sidebarDisabledList = (options) ->
-  """<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>"""
-
 templates.sidebarDisabled = (options) ->
   """<h6 class="_list-title"><span class="_list-arrow"></span>Disabled (#{options.count})</h6>"""
 
+templates.sidebarDisabledList = (html) ->
+  """<div class="_disabled-list">#{html}</div>"""
+
+templates.sidebarDisabledVersionedDoc = (doc, versions) ->
+  """<a class="_list-item _list-dir _icon-#{doc.icon} _list-disabled"><span class="_list-arrow"></span>#{doc.name}</a><div class="_list _list-sub">#{versions}</div>"""
+
 templates.sidebarPickerNote = """
   <div class="_list-note">Tip: for faster and better search results, select only the docs you need.</div>
   <a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank">Vote for new documentation</a>

assets/javascripts/views/list/list_focus.coffee

@@ -38,7 +38,10 @@ class app.views.ListFocus extends app.View
         $.click(next)
         @findNext cursor
       else if next.tagName is 'DIV' # sub-list
-        @findFirst(next) or @findNext(next)
+        if cursor.className.indexOf('open') >= 0
+          @findFirst(next) or @findNext(next)
+        else
+          @findNext(next)
       else if next.tagName is 'H6' # title
         @findNext(next)
     else if cursor.parentElement isnt @el
@@ -61,7 +64,10 @@ class app.views.ListFocus extends app.View
         $.click(prev)
         @findPrev cursor
       else if prev.tagName is 'DIV' # sub-list
-        @findLast(prev) or @findPrev(prev)
+        if prev.previousSibling.className.indexOf('open') >= 0
+          @findLast(prev) or @findPrev(prev)
+        else
+          @findPrev(prev)
       else if prev.tagName is 'H6' # title
         @findPrev(prev)
     else if cursor.parentElement isnt @el

assets/javascripts/views/list/list_fold.coffee

@@ -10,7 +10,7 @@ class app.views.ListFold extends app.View
     left:   'onLeft'
     right:  'onRight'
 
-  constructor: (@el, @options = {}) -> super
+  constructor: (@el) -> super
 
   open: (el) ->
     if el and not el.classList.contains @constructor.activeClass
@@ -60,5 +60,5 @@ class app.views.ListFold extends app.View
       $.stopEvent(event)
       @toggle el.parentElement
     else if el.classList.contains @constructor.targetClass
-      if @options.toggleOnclick then @toggle(el) else @open(el)
+      if el.hasAttribute('href') then @open(el) else @toggle(el)
     return

assets/javascripts/views/sidebar/doc_list.coffee

@@ -54,7 +54,21 @@ class app.views.DocList extends app.View
     return
 
   appendDisabledList: ->
-    @append @tmpl('sidebarDisabledList', docs: app.disabledDocs.all())
+    html = ''
+    docs = [].concat(app.disabledDocs.all()...)
+
+    while doc = docs.shift()
+      if doc.version
+        versions = ''
+        loop
+          versions += @tmpl('sidebarDoc', doc, disabled: true)
+          break if docs[0].name isnt doc.name
+          doc = docs.shift()
+        html += @tmpl('sidebarDisabledVersionedDoc', doc, versions)
+      else
+        html += @tmpl('sidebarDoc', doc, disabled: true)
+
+    @append @tmpl('sidebarDisabledList', html)
     @disabledTitle.classList.add('open-title')
     @refreshElements()
     return

assets/javascripts/views/sidebar/doc_picker.coffee

@@ -11,7 +11,7 @@ class app.views.DocPicker extends app.View
     enter: 'onEnter'
 
   init: ->
-    @addSubview @listFold = new app.views.ListFold(@el, toggleOnclick: true)
+    @addSubview @listFold = new app.views.ListFold(@el)
     return
 
   activate: ->

assets/stylesheets/components/_sidebar.scss

@@ -197,6 +197,7 @@
   .open + & { display: block; }
   > ._list-item { padding-left: 2.375rem; }
   > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; }
+  > ._list-disabled { padding-left: 3.875rem; }
   > ._list-item:before { content: none; }
   > ._list-dir { line-height: 1.375rem; }