Ref #25.
Unified · Split
| @@ -35,14 +35,19 @@ templates.sidebarPageLink = (count) -> · 34 unmodified lines | ||
| 35 | 35 | """<span class="_list-item _list-pagelink">Show more\u2026 (#{count})</span>""" |
| 36 | 36 | |
| 37 | 37 | templates.sidebarLabel = (doc, options = {}) -> |
| 38 | − label = """<label class="_list-item _list-label _icon-#{doc.icon}""" | |
| 39 | − label += ' _list-label-off' unless options.checked | |
| 38 | + label = """<label class="_list-item""" | |
| 39 | + label += " _icon-#{doc.icon}" unless doc.version | |
| 40 | 40 | label += """"><input type="checkbox" name="#{doc.slug}" class="_list-checkbox" """ |
| 41 | − label += 'checked' if options.checked | |
| 41 | + label += "checked" if options.checked | |
| 42 | 42 | label += ">#{doc.name}" |
| 43 | − label += " (#{doc.version})" if doc.version | |
| 43 | + label += " #{doc.version}" if doc.version | |
| 44 | 44 | label + "</label>" |
| 45 | 45 | |
| 46 | +templates.sidebarVersionedDoc = (doc, versions, options = {}) -> | |
| 47 | + html = """<div class="_list-item _list-dir _list-rdir _icon-#{doc.icon}""" | |
| 48 | + html += " open" if options.open | |
| 49 | + html + """"><span class="_list-arrow"></span>#{doc.name}</div><div class="_list _list-sub">#{versions}</div>""" | |
| 50 | + | |
| 46 | 51 | templates.sidebarDisabledList = (options) -> |
| 47 | 52 | """<div class="_disabled-list">#{templates.render 'sidebarDoc', options.docs, disabled: true}</div>""" |
| 48 | 53 | |
| @@ -10,7 +10,7 @@ class app.views.ListFold extends app.View · 9 unmodified lines | ||
| 10 | 10 | left: 'onLeft' |
| 11 | 11 | right: 'onRight' |
| 12 | 12 | |
| 13 | − constructor: (@el) -> super | |
| 13 | + constructor: (@el, @options = {}) -> super | |
| 14 | 14 | |
| 15 | 15 | open: (el) -> |
| 16 | 16 | if el and not el.classList.contains @constructor.activeClass |
| @@ -60,5 +60,5 @@ class app.views.ListFold extends app.View · 43 unmodified lines | ||
| 60 | 60 | $.stopEvent(event) |
| 61 | 61 | @toggle el.parentElement |
| 62 | 62 | else if el.classList.contains @constructor.targetClass |
| 63 | − @open el | |
| 63 | + if @options.toggleOnclick then @toggle(el) else @open(el) | |
| 64 | 64 | return |
| @@ -1,5 +1,5 @@ | ||
| 1 | 1 | class app.views.DocPicker extends app.View |
| 2 | − @className: '_list' | |
| 2 | + @className: '_list _list-picker' | |
| 3 | 3 | |
| 4 | 4 | @elements: |
| 5 | 5 | saveLink: '._sidebar-footer-save' |
| @@ -10,6 +10,10 @@ class app.views.DocPicker extends app.View · 4 unmodified lines | ||
| 10 | 10 | @shortcuts: |
| 11 | 11 | enter: 'onEnter' |
| 12 | 12 | |
| 13 | + init: -> | |
| 14 | + @addSubview @listFold = new app.views.ListFold(@el, toggleOnclick: true) | |
| 15 | + return | |
| 16 | + | |
| 13 | 17 | activate: -> |
| 14 | 18 | if super |
| 15 | 19 | @render() |
| @@ -26,11 +30,17 @@ class app.views.DocPicker extends app.View · 10 unmodified lines | ||
| 26 | 30 | return |
| 27 | 31 | |
| 28 | 32 | render: -> |
| 29 | − @html @tmpl('sidebarLabel', app.docs.all(), checked: true) + | |
| 30 | − @tmpl('sidebarLabel', app.disabledDocs.all()) + | |
| 31 | − @tmpl('sidebarPickerNote') + | |
| 32 | − @tmpl('sidebarSave') | |
| 33 | + html = '' | |
| 34 | + docs = app.docs.all().concat(app.disabledDocs.all()...) | |
| 35 | + | |
| 36 | + while doc = docs.shift() | |
| 37 | + if doc.version | |
| 38 | + [docs, versions] = @extractVersions(docs, doc) | |
| 39 | + html += @tmpl('sidebarVersionedDoc', doc, @renderVersions(versions), open: app.docs.contains(doc)) | |
| 40 | + else | |
| 41 | + html += @tmpl('sidebarLabel', doc, checked: app.docs.contains(doc)) | |
| 33 | 42 | |
| 43 | + @html html + @tmpl('sidebarPickerNote') + @tmpl('sidebarSave') | |
| 34 | 44 | @refreshElements() |
| 35 | 45 | |
| 36 | 46 | @delay -> # trigger animation |
| @@ -38,6 +48,18 @@ class app.views.DocPicker extends app.View · 1 unmodified line | ||
| 38 | 48 | @addClass '_in' |
| 39 | 49 | return |
| 40 | 50 | |
| 51 | + renderVersions: (docs) -> | |
| 52 | + html = '' | |
| 53 | + html += @tmpl('sidebarLabel', doc, checked: app.docs.contains(doc)) for doc in docs | |
| 54 | + html | |
| 55 | + | |
| 56 | + extractVersions: (originalDocs, version) -> | |
| 57 | + docs = [] | |
| 58 | + versions = [version] | |
| 59 | + for doc in originalDocs | |
| 60 | + (if doc.name is version.name then versions else docs).push(doc) | |
| 61 | + [docs, versions] | |
| 62 | + | |
| 41 | 63 | empty: -> |
| 42 | 64 | @resetClass() |
| 43 | 65 | super |
| @@ -150,7 +150,7 @@ · 149 unmodified lines | ||
| 150 | 150 | // List hierarchy |
| 151 | 151 | // |
| 152 | 152 | |
| 153 | −._list-dir, | |
| 153 | +._list-dir:not(._list-rdir), | |
| 154 | 154 | %_list-dir { |
| 155 | 155 | padding-left: 2.25rem; |
| 156 | 156 | } |
| @@ -172,6 +172,11 @@ · 15 unmodified lines | ||
| 172 | 172 | |
| 173 | 173 | &:hover { opacity: .65; } |
| 174 | 174 | |
| 175 | + ._list-rdir > & { | |
| 176 | + left: auto; | |
| 177 | + right: .25rem; | |
| 178 | + } | |
| 179 | + | |
| 175 | 180 | &:before { |
| 176 | 181 | @if $style == 'dark' { |
| 177 | 182 | @extend %icon, %icon-dir-white; |
| @@ -187,7 +192,11 @@ · 9 unmodified lines | ||
| 187 | 192 | } |
| 188 | 193 | |
| 189 | 194 | ._list-sub { |
| 190 | − > ._list-item { padding-left: 2.75rem; } | |
| 195 | + display: none; | |
| 196 | + | |
| 197 | + .open + & { display: block; } | |
| 198 | + > ._list-item { padding-left: 2.375rem; } | |
| 199 | + > ._list-dir, > ._list-sub > ._list-item { padding-left: 2.75rem; } | |
| 191 | 200 | > ._list-item:before { content: none; } |
| 192 | 201 | > ._list-dir { line-height: 1.375rem; } |
| 193 | 202 | |
| @@ -288,32 +297,24 @@ · 94 unmodified lines | ||
| 288 | 297 | // List picker |
| 289 | 298 | // |
| 290 | 299 | |
| 300 | +._list-picker { | |
| 301 | + opacity: 0; | |
| 302 | + transition: .2s; | |
| 303 | + | |
| 304 | + &._in { opacity: 1; } | |
| 305 | + ._list-item { cursor: pointer; } | |
| 306 | + ._list-sub > ._list-item { padding-left: 2.375rem; } | |
| 307 | +} | |
| 308 | + | |
| 291 | 309 | ._list-checkbox { |
| 292 | 310 | position: absolute; |
| 293 | 311 | top: .5rem; |
| 294 | − right: -1rem; | |
| 312 | + right: .75rem; | |
| 295 | 313 | width: 1rem; |
| 296 | 314 | height: 1rem; |
| 297 | 315 | transition: .2s; |
| 298 | 316 | } |
| 299 | 317 | |
| 300 | −._list-label { | |
| 301 | − cursor: pointer; | |
| 302 | − transition: .2s; | |
| 303 | − @extend %_list-dir; | |
| 304 | − | |
| 305 | − ._in > & { padding-left: .75rem; } | |
| 306 | − ._in > & > ._list-checkbox { right: .5rem } | |
| 307 | −} | |
| 308 | − | |
| 309 | −._list-label-off { | |
| 310 | − opacity: 0; | |
| 311 | − padding-left: .75rem; | |
| 312 | − | |
| 313 | − ._in > & { opacity: 1; } | |
| 314 | − > ._list-checkbox { right: .5rem; } | |
| 315 | −} | |
| 316 | − | |
| 317 | 318 | ._list-link { |
| 318 | 319 | display: block; |
| 319 | 320 | margin-top: .75rem; |