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

assets/javascripts/templates/sidebar_tmpl.coffee +1 −1
assets/javascripts/views/sidebar/doc_list.coffee +27 −17
assets/javascripts/views/sidebar/entry_list.coffee +0 −4
assets/javascripts/views/sidebar/sidebar.coffee +11 −3
assets/javascripts/views/sidebar/sidebar_hover.coffee +4 −1
assets/javascripts/views/sidebar/type_list.coffee +3 −3
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	15	"""<a href="#{entry.fullPath()}" class="_list-item _list-hover">#{$.escape entry.name}</a>"""
16	16
17	17	templates.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
20	20	templates.sidebarPageLink = (count) ->
21	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	35	@append @tmpl('sidebarDoc', app.disabledDocs.all(), disabled: true)
36	36	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	48	onOpen: (event) =>
39	49	$.stopEvent(event)
40	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	66	delete @lists[doc.slug]
57	67	return
58	68
59		− revealType: (type) ->
60		− @openDoc type.doc
	69	+ select: (model) ->
	70	+ @listSelect.selectByHref model?.fullPath()
61	71	return
62	72
63		− revealEntry: (entry) ->
64		− @openDoc entry.doc
65		− @openType entry.getType() if entry.type
66		− @lists[entry.doc.slug]?.revealEntry(entry)
	73	+ reveal: (model) ->
	74	+ @openDoc model.doc
	75	+ @openType model.getType() if model.type
	76	+ @paginateTo model
	77	+ @scrollTo model
67	78	return
68	79
69	80	openDoc: (doc) ->
@@ -74,18 +85,17 @@ class app.views.DocList extends app.View · 4 unmodified lines
74	85	@listFold.open @lists[type.doc.slug].find("[data-slug='#{type.slug}']")
75	86	return
76	87
77		− afterRoute: (route, context) =>
78		− if context.init
79		− switch route
80		− when 'type' then @revealType context.type
81		− when 'entry' then @revealEntry context.entry
	88	+ paginateTo: (model) ->
	89	+ @lists[model.doc.slug]?.paginateTo(model)
	90	+ return
82	91
83		− if route in ['type', 'entry']
84		− @listSelect.selectByHref (context.type or context.entry).fullPath()
85		− else
86		− @listSelect.deselect()
	92	+ scrollTo: (model) ->
	93	+ $.scrollTo @find("a[href='#{model.fullPath()}']")
	94	+ return
87	95
	96	+ afterRoute: (route, context) =>
88	97	if context.init
89		− $.scrollTo @listSelect.getSelection()
90		−
	98	+ @reset()
	99	+ else
	100	+ @select context.type or context.entry
91	101	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	14	render: (entries) ->
15	15	@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	4	@events:
5	5	focus: 'onFocus'
	6	+ click: 'onClick'
6	7
7	8	@shortcuts:
8	9	escape: 'onEscape'
@@ -67,9 +68,11 @@ class app.views.Sidebar extends app.View · 58 unmodified lines
67	68	$.scrollTo event.target, @el, 'continuous', bottomGap: 2
68	69	return
69	70
70		− onEscape: =>
71		− @showDocList()
72		− @scrollToTop()
	71	+ onClick: (event) =>
	72	+ if event.target.hasAttribute? 'data-reset-list'
	73	+ $.stopEvent(event)
	74	+ @showDocList()
	75	+ @docList.reset()
73	76	return
74	77
75	78	onGlobalClick: (event) =>
@@ -79,3 +82,8 @@ class app.views.Sidebar extends app.View · 3 unmodified lines
79	82	else if @view is @docPicker
80	83	@showDocList() unless $.hasChild @el, event.target
81	84	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	55	isTarget: (el) ->
56	56	el.classList.contains @constructor.itemClass
57	57
	58	+ isSelected: (el) ->
	59	+ el.classList.contains 'active'
	60	+
58	61	isTruncated: (el) ->
59	62	el.scrollWidth >= el.offsetWidth
60	63
@@ -68,7 +71,7 @@ class app.views.SidebarHover extends app.View · 7 unmodified lines
68	71	return
69	72
70	73	onMouseover: (event) =>
71		− if @isTarget(event.target) and @mouseActivated()
	74	+ if @isTarget(event.target) and not @isSelected(event.target) and @mouseActivated()
72	75	@show event.target
73	76	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	45	delete @lists[type.slug]
46	46	return
47	47
48		− revealEntry: (entry) ->
49		− if entry.type
50		− @lists[entry.getType().slug]?.revealEntry(entry)
	48	+ paginateTo: (model) ->
	49	+ if model.type
	50	+ @lists[model.getType().slug]?.paginateTo(model)
51	51	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	219	// List hover clone
185	220	//
@@ -189,6 +224,7 @@ · 3 unmodified lines
189	224	z-index: $hoverZ;
190	225	left: 0;
191	226	overflow: visible;
	227	+ padding: 0 .75rem;
192	228	background-color: #e5eaf4;
193	229	pointer-events: none;
194	230	-webkit-font-smoothing: subpixel-antialiased;