Improve doc picker for versioned docs

Ref #25.

assets/javascripts/templates/sidebar_tmpl.coffee

@@ -35,14 +35,19 @@ templates.sidebarPageLink = (count) ->
   """<span class="_list-item _list-pagelink">Show more\u2026 (#{count})</span>"""
 
 templates.sidebarLabel = (doc, options = {}) ->
-  label = """<label class="_list-item _list-label _icon-#{doc.icon}"""
-  label += ' _list-label-off' unless options.checked
+  label = """<label class="_list-item"""
+  label += " _icon-#{doc.icon}" unless doc.version
   label += """"><input type="checkbox" name="#{doc.slug}" class="_list-checkbox" """
-  label += 'checked' if options.checked
+  label += "checked" if options.checked
   label += ">#{doc.name}"
-  label += " (#{doc.version})" if doc.version
+  label += " #{doc.version}" if doc.version
   label + "</label>"
 
+templates.sidebarVersionedDoc = (doc, versions, options = {}) ->
+  html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}"""
+  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>"""
 

assets/javascripts/views/list/list_fold.coffee

@@ -10,7 +10,7 @@ class app.views.ListFold extends app.View
     left:   'onLeft'
     right:  'onRight'
 
-  constructor: (@el) -> super
+  constructor: (@el, @options = {}) -> 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
-      @open el
+      if @options.toggleOnclick then @toggle(el) else @open(el)
     return

assets/javascripts/views/sidebar/doc_picker.coffee

@@ -1,5 +1,5 @@
 class app.views.DocPicker extends app.View
-  @className: '_list'
+  @className: '_list _list-picker'
 
   @elements:
     saveLink: '._sidebar-footer-save'
@@ -10,6 +10,10 @@ class app.views.DocPicker extends app.View
   @shortcuts:
     enter: 'onEnter'
 
+  init: ->
+    @addSubview @listFold = new app.views.ListFold(@el, toggleOnclick: true)
+    return
+
   activate: ->
     if super
       @render()
@@ -26,11 +30,17 @@ class app.views.DocPicker extends app.View
     return
 
   render: ->
-    @html @tmpl('sidebarLabel', app.docs.all(), checked: true) +
-          @tmpl('sidebarLabel', app.disabledDocs.all()) +
-          @tmpl('sidebarPickerNote') +
-          @tmpl('sidebarSave')
+    html = ''
+    docs = app.docs.all().concat(app.disabledDocs.all()...)
+
+    while doc = docs.shift()
+      if doc.version
+        [docs, versions] = @extractVersions(docs, doc)
+        html += @tmpl('sidebarVersionedDoc', doc, @renderVersions(versions), open: app.docs.contains(doc))
+      else
+        html += @tmpl('sidebarLabel', doc, checked: app.docs.contains(doc))
 
+    @html html + @tmpl('sidebarPickerNote') + @tmpl('sidebarSave')
     @refreshElements()
 
     @delay -> # trigger animation
@@ -38,6 +48,18 @@ class app.views.DocPicker extends app.View
       @addClass '_in'
     return
 
+  renderVersions: (docs) ->
+    html = ''
+    html += @tmpl('sidebarLabel', doc, checked: app.docs.contains(doc)) for doc in docs
+    html
+
+  extractVersions: (originalDocs, version) ->
+    docs = []
+    versions = [version]
+    for doc in originalDocs
+      (if doc.name is version.name then versions else docs).push(doc)
+    [docs, versions]
+
   empty: ->
     @resetClass()
     super

assets/stylesheets/components/_sidebar.scss

@@ -150,7 +150,7 @@
 // List hierarchy
 //
 
-._list-dir,
+._list-dir:not(._list-rdir),
 %_list-dir {
   padding-left: 2.25rem;
 }
@@ -172,6 +172,11 @@
 
   &:hover { opacity: .65; }
 
+  ._list-rdir > & {
+    left: auto;
+    right: .25rem;
+  }
+
   &:before {
     @if $style == 'dark' {
       @extend %icon, %icon-dir-white;
@@ -187,7 +192,11 @@
 }
 
 ._list-sub {
-  > ._list-item { padding-left: 2.75rem; }
+  display: none;
+
+  .open + & { display: block; }
+  > ._list-item { padding-left: 2.375rem; }
+  > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; }
   > ._list-item:before { content: none; }
   > ._list-dir { line-height: 1.375rem; }
 
@@ -288,32 +297,24 @@
 // List picker
 //
 
+._list-picker {
+  opacity: 0;
+  transition: .2s;
+
+  &._in { opacity: 1; }
+  ._list-item { cursor: pointer; }
+  ._list-sub > ._list-item { padding-left: 2.375rem; }
+}
+
 ._list-checkbox {
   position: absolute;
   top: .5rem;
-  right: -1rem;
+  right: .75rem;
   width: 1rem;
   height: 1rem;
   transition: .2s;
 }
 
-._list-label {
-  cursor: pointer;
-  transition: .2s;
-  @extend %_list-dir;
-
-  ._in > & { padding-left: .75rem; }
-  ._in > & > ._list-checkbox { right: .5rem }
-}
-
-._list-label-off {
-  opacity: 0;
-  padding-left: .75rem;
-
-  ._in > & { opacity: 1; }
-  > ._list-checkbox { right: .5rem; }
-}
-
 ._list-link {
   display: block;
   margin-top: .75rem;