Add link to reveal the selected search result in the sidebar list

pull/15/head
Thibaut 11 years ago
parent 791de07d0a
commit 2b20c09f17

@ -15,7 +15,7 @@ templates.sidebarEntry = (entry) ->
"""<a href="#{entry.fullPath()}" class="_list-item _list-hover">#{$.escape entry.name}</a>""" """<a href="#{entry.fullPath()}" class="_list-item _list-hover">#{$.escape entry.name}</a>"""
templates.sidebarResult = (entry) -> templates.sidebarResult = (entry) ->
"""<a href="#{entry.fullPath()}" class="_list-item _list-hover _list-result _icon-#{entry.doc.slug}">#{$.escape entry.name}</a>""" """<a href="#{entry.fullPath()}" class="_list-item _list-hover _list-result _icon-#{entry.doc.slug}"><span class="_list-reveal" data-reset-list></span>#{$.escape entry.name}</a>"""
templates.sidebarPageLink = (count) -> templates.sidebarPageLink = (count) ->
"""<span class="_list-item _list-pagelink">Show more… (#{count})</span>""" """<span class="_list-item _list-pagelink">Show more… (#{count})</span>"""

@ -35,6 +35,16 @@ class app.views.DocList extends app.View
@append @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true) @append @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true)
return return
reset: ->
@listSelect.deselect()
@listFocus?.blur()
@listFold.reset()
if model = app.router.context.type or app.router.context.entry
@reveal model
@select model
return
onOpen: (event) => onOpen: (event) =>
$.stopEvent(event) $.stopEvent(event)
doc = app.docs.findBy 'slug', event.target.getAttribute('data-slug') doc = app.docs.findBy 'slug', event.target.getAttribute('data-slug')
@ -56,14 +66,15 @@ class app.views.DocList extends app.View
delete @lists[doc.slug] delete @lists[doc.slug]
return return
revealType: (type) -> select: (model) ->
@openDoc type.doc @listSelect.selectByHref model?.fullPath()
return return
revealEntry: (entry) -> reveal: (model) ->
@openDoc entry.doc @openDoc model.doc
@openType entry.getType() if entry.type @openType model.getType() if model.type
@lists[entry.doc.slug]?.revealEntry(entry) @paginateTo model
@scrollTo model
return return
openDoc: (doc) -> openDoc: (doc) ->
@ -74,18 +85,17 @@ class app.views.DocList extends app.View
@listFold.open @lists[type.doc.slug].find("[data-slug='#{type.slug}']") @listFold.open @lists[type.doc.slug].find("[data-slug='#{type.slug}']")
return return
afterRoute: (route, context) => paginateTo: (model) ->
if context.init @lists[model.doc.slug]?.paginateTo(model)
switch route return
when 'type' then @revealType context.type
when 'entry' then @revealEntry context.entry
if route in ['type', 'entry'] scrollTo: (model) ->
@listSelect.selectByHref (context.type or context.entry).fullPath() $.scrollTo @find("a[href='#{model.fullPath()}']")
else return
@listSelect.deselect()
afterRoute: (route, context) =>
if context.init if context.init
$.scrollTo @listSelect.getSelection() @reset()
else
@select context.type or context.entry
return return

@ -13,7 +13,3 @@ class app.views.EntryList extends app.views.PaginatedList
render: (entries) -> render: (entries) ->
@tmpl 'sidebarEntry', entries @tmpl 'sidebarEntry', entries
revealEntry: (entry) ->
@paginateTo entry
return

@ -3,6 +3,7 @@ class app.views.Sidebar extends app.View
@events: @events:
focus: 'onFocus' focus: 'onFocus'
click: 'onClick'
@shortcuts: @shortcuts:
escape: 'onEscape' escape: 'onEscape'
@ -67,9 +68,11 @@ class app.views.Sidebar extends app.View
$.scrollTo event.target, @el, 'continuous', bottomGap: 2 $.scrollTo event.target, @el, 'continuous', bottomGap: 2
return return
onEscape: => onClick: (event) =>
@showDocList() if event.target.hasAttribute? 'data-reset-list'
@scrollToTop() $.stopEvent(event)
@showDocList()
@docList.reset()
return return
onGlobalClick: (event) => onGlobalClick: (event) =>
@ -79,3 +82,8 @@ class app.views.Sidebar extends app.View
else if @view is @docPicker else if @view is @docPicker
@showDocList() unless $.hasChild @el, event.target @showDocList() unless $.hasChild @el, event.target
return return
onEscape: =>
@showDocList()
@scrollToTop()
return

@ -55,6 +55,9 @@ class app.views.SidebarHover extends app.View
isTarget: (el) -> isTarget: (el) ->
el.classList.contains @constructor.itemClass el.classList.contains @constructor.itemClass
isSelected: (el) ->
el.classList.contains 'active'
isTruncated: (el) -> isTruncated: (el) ->
el.scrollWidth >= el.offsetWidth el.scrollWidth >= el.offsetWidth
@ -68,7 +71,7 @@ class app.views.SidebarHover extends app.View
return return
onMouseover: (event) => onMouseover: (event) =>
if @isTarget(event.target) and @mouseActivated() if @isTarget(event.target) and not @isSelected(event.target) and @mouseActivated()
@show event.target @show event.target
return return

@ -45,7 +45,7 @@ class app.views.TypeList extends app.View
delete @lists[type.slug] delete @lists[type.slug]
return return
revealEntry: (entry) -> paginateTo: (model) ->
if entry.type if model.type
@lists[entry.getType().slug]?.revealEntry(entry) @lists[model.getType().slug]?.paginateTo(model)
return return

@ -180,6 +180,41 @@
} }
} }
//
// Search results
//
._list-result.active {
padding-right: 1.75rem;
> ._list-reveal { display: block; }
}
._list-reveal {
display: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1.75rem;
cursor: pointer;
&:before {
content: '';
position: absolute;
bottom: 50%;
left: .5rem;
width: .75rem;
height: 1px;
background: rgba(white, .9);
box-shadow: 0 -3px rgba(white, .9), // top line
0 3px rgba(white, .9), // bottom line
0 -2px rgba(black, .15), // top shadow
0 1px rgba(black, .15), // middle shadow
0 4px rgba(black, .15); // bottom shadow
}
}
// //
// List hover clone // List hover clone
// //
@ -189,6 +224,7 @@
z-index: $hoverZ; z-index: $hoverZ;
left: 0; left: 0;
overflow: visible; overflow: visible;
padding: 0 .75rem;
background-color: #e5eaf4; background-color: #e5eaf4;
pointer-events: none; pointer-events: none;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;

Loading…
Cancel
Save