History

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

Thibaut committed 12 years ago

Commit 2b20c091 parent 791de077 files · +82 −29Browse files

Unified · Split

7 files
  1. assets/javascripts/templates/sidebar_tmpl.coffee +1 −1
  2. assets/javascripts/views/sidebar/doc_list.coffee +27 −17
  3. assets/javascripts/views/sidebar/entry_list.coffee +0 −4
  4. assets/javascripts/views/sidebar/sidebar.coffee +11 −3
  5. assets/javascripts/views/sidebar/sidebar_hover.coffee +4 −1
  6. assets/javascripts/views/sidebar/type_list.coffee +3 −3
  7. assets/stylesheets/components/_sidebar.scss +36 −0
assets/javascripts/templates/sidebar_tmpl.coffee+1−1
@@ -15,7 +15,7 @@ templates.sidebarEntry = (entry) -> · 14 unmodified lines
15 """<a href="#{entry.fullPath()}" class="_list-item _list-hover">#{$.escape entry.name}</a>"""15 """<a href="#{entry.fullPath()}" class="_list-item _list-hover">#{$.escape entry.name}</a>"""
16 16
17templates.sidebarResult = (entry) ->17templates.sidebarResult = (entry) ->
18 """<a href="#{entry.fullPath()}" class="_list-item _list-hover _list-result _icon-#{entry.doc.slug}">#{$.escape entry.name}</a>"""18 """<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>"""
19 19
20templates.sidebarPageLink = (count) ->20templates.sidebarPageLink = (count) ->
21 """<span class="_list-item _list-pagelink">Show more… (#{count})</span>"""21 """<span class="_list-item _list-pagelink">Show more… (#{count})</span>"""
assets/javascripts/views/sidebar/doc_list.coffee+27−17
@@ -35,6 +35,16 @@ class app.views.DocList extends app.View · 34 unmodified lines
35 @append @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true)35 @append @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true)
36 return36 return
37 37
38 reset: ->
39 @listSelect.deselect()
40 @listFocus?.blur()
41 @listFold.reset()
42
43 if model = app.router.context.type or app.router.context.entry
44 @reveal model
45 @select model
46 return
47
38 onOpen: (event) =>48 onOpen: (event) =>
39 $.stopEvent(event)49 $.stopEvent(event)
40 doc = app.docs.findBy 'slug', event.target.getAttribute('data-slug')50 doc = app.docs.findBy 'slug', event.target.getAttribute('data-slug')
@@ -56,14 +66,15 @@ class app.views.DocList extends app.View · 15 unmodified lines
56 delete @lists[doc.slug]66 delete @lists[doc.slug]
57 return67 return
58 68
59 revealType: (type) ->69 select: (model) ->
60 @openDoc type.doc70 @listSelect.selectByHref model?.fullPath()
61 return71 return
62 72
63 revealEntry: (entry) ->73 reveal: (model) ->
64 @openDoc entry.doc74 @openDoc model.doc
65 @openType entry.getType() if entry.type75 @openType model.getType() if model.type
66 @lists[entry.doc.slug]?.revealEntry(entry)76 @paginateTo model
77 @scrollTo model
67 return78 return
68 79
69 openDoc: (doc) ->80 openDoc: (doc) ->
@@ -74,18 +85,17 @@ class app.views.DocList extends app.View · 4 unmodified lines
74 @listFold.open @lists[type.doc.slug].find("[data-slug='#{type.slug}']")85 @listFold.open @lists[type.doc.slug].find("[data-slug='#{type.slug}']")
75 return86 return
76 87
77 afterRoute: (route, context) =>88 paginateTo: (model) ->
78 if context.init89 @lists[model.doc.slug]?.paginateTo(model)
79 switch route90 return
80 when 'type' then @revealType context.type
81 when 'entry' then @revealEntry context.entry
82 91
83 if route in ['type', 'entry']92 scrollTo: (model) ->
84 @listSelect.selectByHref (context.type or context.entry).fullPath()93 $.scrollTo @find("a[href='#{model.fullPath()}']")
85 else94 return
86 @listSelect.deselect()
87 95
96 afterRoute: (route, context) =>
88 if context.init97 if context.init
89 $.scrollTo @listSelect.getSelection()98 @reset()
90 99 else
100 @select context.type or context.entry
91 return101 return
assets/javascripts/views/sidebar/entry_list.coffee+0−4
@@ -13,7 +13,3 @@ class app.views.EntryList extends app.views.PaginatedList · 12 unmodified lines
13 13
14 render: (entries) ->14 render: (entries) ->
15 @tmpl 'sidebarEntry', entries15 @tmpl 'sidebarEntry', entries
16
17 revealEntry: (entry) ->
18 @paginateTo entry
19 return
assets/javascripts/views/sidebar/sidebar.coffee+11−3
@@ -3,6 +3,7 @@ class app.views.Sidebar extends app.View · 2 unmodified lines
3 3
4 @events:4 @events:
5 focus: 'onFocus'5 focus: 'onFocus'
6 click: 'onClick'
6 7
7 @shortcuts:8 @shortcuts:
8 escape: 'onEscape'9 escape: 'onEscape'
@@ -67,9 +68,11 @@ class app.views.Sidebar extends app.View · 58 unmodified lines
67 $.scrollTo event.target, @el, 'continuous', bottomGap: 268 $.scrollTo event.target, @el, 'continuous', bottomGap: 2
68 return69 return
69 70
70 onEscape: =>71 onClick: (event) =>
71 @showDocList()72 if event.target.hasAttribute? 'data-reset-list'
72 @scrollToTop()73 $.stopEvent(event)
74 @showDocList()
75 @docList.reset()
73 return76 return
74 77
75 onGlobalClick: (event) =>78 onGlobalClick: (event) =>
@@ -79,3 +82,8 @@ class app.views.Sidebar extends app.View · 3 unmodified lines
79 else if @view is @docPicker82 else if @view is @docPicker
80 @showDocList() unless $.hasChild @el, event.target83 @showDocList() unless $.hasChild @el, event.target
81 return84 return
85
86 onEscape: =>
87 @showDocList()
88 @scrollToTop()
89 return
assets/javascripts/views/sidebar/sidebar_hover.coffee+4−1
@@ -55,6 +55,9 @@ class app.views.SidebarHover extends app.View · 54 unmodified lines
55 isTarget: (el) ->55 isTarget: (el) ->
56 el.classList.contains @constructor.itemClass56 el.classList.contains @constructor.itemClass
57 57
58 isSelected: (el) ->
59 el.classList.contains 'active'
60
58 isTruncated: (el) ->61 isTruncated: (el) ->
59 el.scrollWidth >= el.offsetWidth62 el.scrollWidth >= el.offsetWidth
60 63
@@ -68,7 +71,7 @@ class app.views.SidebarHover extends app.View · 7 unmodified lines
68 return71 return
69 72
70 onMouseover: (event) =>73 onMouseover: (event) =>
71 if @isTarget(event.target) and @mouseActivated()74 if @isTarget(event.target) and not @isSelected(event.target) and @mouseActivated()
72 @show event.target75 @show event.target
73 return76 return
74 77
assets/javascripts/views/sidebar/type_list.coffee+3−3
@@ -45,7 +45,7 @@ class app.views.TypeList extends app.View · 44 unmodified lines
45 delete @lists[type.slug]45 delete @lists[type.slug]
46 return46 return
47 47
48 revealEntry: (entry) ->48 paginateTo: (model) ->
49 if entry.type49 if model.type
50 @lists[entry.getType().slug]?.revealEntry(entry)50 @lists[model.getType().slug]?.paginateTo(model)
51 return51 return
assets/stylesheets/components/_sidebar.scss+36−0
@@ -180,6 +180,41 @@ · 179 unmodified lines
180 }180 }
181}181}
182 182
183//
184// Search results
185//
186
187._list-result.active {
188 padding-right: 1.75rem;
189
190 > ._list-reveal { display: block; }
191}
192
193._list-reveal {
194 display: none;
195 position: absolute;
196 top: 0;
197 bottom: 0;
198 right: 0;
199 width: 1.75rem;
200 cursor: pointer;
201
202 &:before {
203 content: '';
204 position: absolute;
205 bottom: 50%;
206 left: .5rem;
207 width: .75rem;
208 height: 1px;
209 background: rgba(white, .9);
210 box-shadow: 0 -3px rgba(white, .9), // top line
211 0 3px rgba(white, .9), // bottom line
212 0 -2px rgba(black, .15), // top shadow
213 0 1px rgba(black, .15), // middle shadow
214 0 4px rgba(black, .15); // bottom shadow
215 }
216}
217
183//218//
184// List hover clone219// List hover clone
185//220//
@@ -189,6 +224,7 @@ · 3 unmodified lines
189 z-index: $hoverZ;224 z-index: $hoverZ;
190 left: 0;225 left: 0;
191 overflow: visible;226 overflow: visible;
227 padding: 0 .75rem;
192 background-color: #e5eaf4;228 background-color: #e5eaf4;
193 pointer-events: none;229 pointer-events: none;
194 -webkit-font-smoothing: subpixel-antialiased;230 -webkit-font-smoothing: subpixel-antialiased;