Make disabled docs list foldable

Thibaut committed 12 years ago

Commit be51ff41 parent 25efa553 files · +37 −5Browse files

Unified · Split

3 files

@@ -27,7 +27,10 @@ templates.sidebarLabel = (doc, options = {}) -> · 26 unmodified lines
27	label += 'checked' if options.checked	27	label += 'checked' if options.checked
28	label + ">#{doc.name}</label>"	28	label + ">#{doc.name}</label>"
29		29
30	templates.sidebarDisabled = '<h6 class="_list-title">Disabled</h6>'	30	templates.sidebarDisabledList = (options) ->
		31	"""<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>"""
		32
		33	templates.sidebarDisabled = '<h6 class="_list-title"><span class="_list-arrow"></span>Disabled</h6>'
31		34
32	templates.sidebarVote = '<a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank">Vote for new documentation</a>'	35	templates.sidebarVote = '<a href="https://trello.com/b/6BmTulfx/devdocs-documentation" class="_list-link" target="_blank">Vote for new documentation</a>'
33		36

   @events:
     open:  'onOpen'
     close: 'onClose'
+    click: 'onClick'
   @routes:
     after: 'afterRoute'
+  @elements:
+    disabledTitle: '._list-title'
+    disabledList: '._disabled-list'
   init: ->
     @lists = {}
   render: =>
     @html @tmpl('sidebarDoc', app.docs.all())
     @renderDisabled() unless app.isSingleDoc() or app.settings.hasDocs()
+    @refreshElements()
     return
   renderDisabled: ->
-    @append @tmpl('sidebarDisabled') +
+    @append @tmpl('sidebarDisabled')
-            @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true)
+    @renderDisabledList()
+    return
+  renderDisabledList: ->
+    @append @tmpl('sidebarDisabledList', docs: app.disabledDocs.all())
+    @refreshElements()
+    @disabledTitle.classList.add('open-title')
+    return
+  removeDisabledList: ->
+    @disabledList.remove()
+    @disabledTitle.classList.remove('open-title')
     return
   reset: ->
     $.scrollTo @find("a[href='#{model.fullPath()}']"), null, 'top', margin: 0
     return
+  onClick: (event) =>
+    return unless @disabledTitle and $.hasChild @disabledTitle, event.target
+    $.stopEvent(event)
+    if @disabledTitle.classList.contains('open-title')
+      @removeDisabledList()
+    else
+      @renderDisabledList()
   afterRoute: (route, context) =>
     if context.init
       @reset()

 }
 ._list-title {
-  margin: 1rem 0 .5rem 2.25rem;
+  position: relative;
+  margin: .5rem 0 0;
+  padding-left: 2.25rem;
+  line-height: 2rem;
   font-size: .75rem;
   color: $textColorLight;
   text-transform: uppercase;
   &:before {
     @extend %icon, %icon-dir;
-    .open > & {
+    .open, .open-title > & {
       -webkit-transform: rotate(90deg);
               transform: rotate(90deg);
     }