Skip to content

Commit 7e36034

Browse files
samselikoffsamselikoff
authored
Merge pull request #32 from ember-learn/search-ui
Search UI
2 parents b8d1dd8 + 0a29d69 commit 7e36034

File tree

40 files changed

+1070
-379
lines changed

40 files changed

+1070
-379
lines changed

‎addon/components/docs-keyboard-shortcuts/component.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Component from '@ember/component';
2+
import { on } from '@ember/object/evented';
3+
import { later } from "@ember/runloop";
4+
import layout from './template';
5+
import { EKMixin, keyUp } from 'ember-keyboard';
6+
import { inject as service } from '@ember/service';
7+
8+
/**
9+
A component that renders a hero banner. Useful for your docs site's homepage.
10+
@class DocsKeyboardShortcuts
11+
@public
12+
*/
13+
export default Component.extend(EKMixin, {
14+
layout,
15+
16+
router: service(),
17+
18+
isShowingKeyboardShortcuts: false,
19+
20+
activateKeyboard: on('init', function() {
21+
this.set('keyboardActivated', true);
22+
}),
23+
24+
goto: on(keyUp('KeyG'), function() {
25+
this.set('isGoingTo', true);
26+
later(() => {
27+
this.set('isGoingTo', false);
28+
}, 500);
29+
}),
30+
31+
gotoDocs: on(keyUp('KeyD'), function() {
32+
if (this.get('isGoingTo')) {
33+
this.get('router').transitionTo('docs');
34+
}
35+
}),
36+
37+
gotoHome: on(keyUp('KeyH'), function() {
38+
if (this.get('isGoingTo')) {
39+
this.get('router').transitionTo('index');
40+
}
41+
}),
42+
43+
toggleKeyboardShortcuts: on(keyUp('shift+Slash'), function() {
44+
this.toggleProperty('isShowingKeyboardShortcuts');
45+
}),
46+
47+
actions: {
48+
toggleKeyboardShortcuts() {
49+
this.toggleProperty('isShowingKeyboardShortcuts');
50+
}
51+
}
52+
});

‎addon/components/docs-keyboard-shortcuts/template.hbs‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
{{#if isShowingKeyboardShortcuts}}
2+
{{#modal-dialog
3+
animatable=true
4+
overlay=true
5+
wrapperClass='docs-fullscreen-modal docs-keyboard-shortcuts-modal modal-fade'
6+
clickOutsideToClose=true
7+
onClose=(action 'toggleKeyboardShortcuts')}}
8+
<div class="docs-fullscreen-modal__header">
9+
<h2 class='docs-fullscreen-modal__title'>Keyboard shortcuts</h2>
10+
<a {{action 'toggleKeyboardShortcuts'}}
11+
href="#"
12+
class='docs-fullscreen-modal__close-button'>
13+
&times;
14+
</a>
15+
</div>
16+
17+
<div class="docs-fullscreen-modal__body">
18+
<table class="docs-keyboard-shortcut-modal">
19+
<tbody>
20+
<tr>
21+
<th></th>
22+
<th>
23+
<h3 class='docs-fullscreen-modal__subtitle'>Site wide shortcuts</h3>
24+
</th>
25+
</tr>
26+
<tr>
27+
<td>
28+
<code class='docs__keyboard-key'>g</code>
29+
<code class='docs__keyboard-key'>h</code>
30+
</td>
31+
<td>
32+
Go to Home
33+
</td>
34+
</tr>
35+
<tr>
36+
<td>
37+
<code class='docs__keyboard-key'>g</code>
38+
<code class='docs__keyboard-key'>d</code>
39+
</td>
40+
<td>
41+
Go to Docs
42+
</td>
43+
</tr>
44+
<tr>
45+
<td>
46+
<code class='docs__keyboard-key'>?</code>
47+
</td>
48+
<td>
49+
Bring up this help dialog
50+
</td>
51+
</tr>
52+
53+
<tr>
54+
<th></th>
55+
<th>
56+
<h3 class='docs-fullscreen-modal__subtitle'>Docs search</h3>
57+
</th>
58+
</tr>
59+
<tr>
60+
<td>
61+
<code class='docs__keyboard-key'>/</code>
62+
or
63+
<code class='docs__keyboard-key'>s</code>
64+
</td>
65+
<td>
66+
Focus search bar
67+
</td>
68+
</tr>
69+
<tr>
70+
<td>
71+
<code class='docs__keyboard-key'>ctrl</code>
72+
<code class='docs__keyboard-key'>n</code>
73+
</td>
74+
<td>
75+
Select next search result
76+
</td>
77+
</tr>
78+
<tr>
79+
<td>
80+
<code class='docs__keyboard-key'>ctrl</code>
81+
<code class='docs__keyboard-key'>p</code>
82+
</td>
83+
<td>
84+
Select previous search result
85+
</td>
86+
</tr>
87+
<tr>
88+
<td>
89+
<code class='docs__keyboard-key'>enter</code>
90+
</td>
91+
<td>
92+
Navigate to selected search result
93+
</td>
94+
</tr>
95+
96+
<tr>
97+
<th></th>
98+
<th>
99+
<h3 class='docs-fullscreen-modal__subtitle'>Docs nav</h3>
100+
</th>
101+
</tr>
102+
<tr>
103+
<td>
104+
<code class='docs__keyboard-key'>l</code>
105+
or
106+
<code class='docs__keyboard-key'>→</code>
107+
</td>
108+
<td>
109+
Navigate to next page
110+
</td>
111+
</tr>
112+
<tr>
113+
<td>
114+
<code class='docs__keyboard-key'>h</code>
115+
or
116+
<code class='docs__keyboard-key'>←</code>
117+
</td>
118+
<td>
119+
Navigate to previous page
120+
</td>
121+
</tr>
122+
<tr>
123+
<td>
124+
<code class='docs__keyboard-key'>j</code>
125+
</td>
126+
<td>
127+
Scroll current page down
128+
</td>
129+
</tr>
130+
<tr>
131+
<td>
132+
<code class='docs__keyboard-key'>ctrl</code>
133+
<code class='docs__keyboard-key'>j</code>
134+
</td>
135+
<td>
136+
Scroll current page halfway down
137+
</td>
138+
</tr>
139+
<tr>
140+
<td>
141+
<code class='docs__keyboard-key'>k</code>
142+
</td>
143+
<td>
144+
Scroll current page up
145+
</td>
146+
</tr>
147+
<tr>
148+
<td>
149+
<code class='docs__keyboard-key'>ctrl</code>
150+
<code class='docs__keyboard-key'>k</code>
151+
</td>
152+
<td>
153+
Scroll current page halfway up
154+
</td>
155+
</tr>
156+
</tbody>
157+
</table>
158+
</div>
159+
{{/modal-dialog}}
160+
{{/if}}

‎addon/components/docs-navbar/component.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,27 @@ import { equal, match } from '@ember/object/computed';
22
import { inject as service } from '@ember/service';
33
import Component from '@ember/component';
44
import layout from './template';
5+
import config from 'dummy/config/environment';
56

7+
const packageJson = config['ember-cli-addon-docs'].packageJson;
8+
9+
/**
10+
Render a header showing a link to your documentation, your project logo and
11+
a GitHub link to your addon's repository.
12+
13+
@class DocsNavbar
14+
@public
15+
*/
616
export default Component.extend({
717
layout,
8-
918
router: service('-routing'),
1019

20+
tagName: 'nav',
21+
classNames: 'docs-navbar',
22+
1123
isHome: equal('router.currentPath', 'index'),
1224
isViewingDocs: match('router.currentPath', /docs/),
1325

14-
tagName: 'nav',
15-
classNames: 'docs-navbar'
26+
githubUrl: packageJson.repository
1627

1728
});

‎addon/components/docs-viewer/component.js‎

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
1+
import Ember from 'ember';
12
import $ from 'jquery';
23
import { inject as service } from '@ember/service';
34
import Component from '@ember/component';
45
import layout from './template';
6+
import { EKMixin, keyDown } from 'ember-keyboard';
57

6-
export default Component.extend({
8+
export default Component.extend(EKMixin, {
79
layout,
810
docsRoutes: service(),
11+
router: service(),
912

1013
classNames: 'docs-viewer',
1114

15+
init() {
16+
this._super();
17+
18+
this.set('keyboardActivated', true);
19+
},
20+
1221
didInsertElement() {
1322
$('body').addClass('docs-viewer--showing');
1423
},
@@ -18,4 +27,72 @@ export default Component.extend({
1827
this.get('docsRoutes').resetState();
1928
},
2029

30+
nextPage: Ember.on(keyDown('KeyL'), keyDown('ArrowRight'), function() {
31+
if (this.searchIsNotFocused() && this.get('docsRoutes.nextUrl')) {
32+
this.get('router').transitionTo(this.get('docsRoutes.nextUrl'));
33+
}
34+
}),
35+
36+
previousPage: Ember.on(keyDown('KeyH'), keyDown('ArrowLeft'), function() {
37+
if (this.searchIsNotFocused() && this.get('docsRoutes.previousUrl')) {
38+
this.get('router').transitionTo(this.get('docsRoutes.previousUrl'));
39+
}
40+
}),
41+
42+
pageDown: Ember.on(keyDown('KeyJ'), function() {
43+
if (this.searchIsNotFocused()) {
44+
let $el = $("#docs-viewer__scroll-body");
45+
46+
$el.velocity('stop');
47+
$el.velocity('scroll', {
48+
offset: ($el.height() - 150),
49+
container: $el,
50+
duration: 225
51+
});
52+
}
53+
}),
54+
55+
halfPageDown: Ember.on(keyDown('ctrl+KeyJ'), function() {
56+
if (this.searchIsNotFocused()) {
57+
let $el = $("#docs-viewer__scroll-body");
58+
59+
$el.velocity('stop');
60+
$el.velocity('scroll', {
61+
offset: (($el.height() / 2) - 150),
62+
container: $el,
63+
duration: 225
64+
});
65+
}
66+
}),
67+
68+
pageUp: Ember.on(keyDown('KeyK'), function() {
69+
if (this.searchIsNotFocused()) {
70+
let $el = $("#docs-viewer__scroll-body");
71+
72+
$el.velocity('stop');
73+
$el.velocity('scroll', {
74+
offset: -($el.height() - 150),
75+
container: $el,
76+
duration: 225
77+
});
78+
}
79+
}),
80+
81+
halfPageUp: Ember.on(keyDown('ctrl+KeyK'), function() {
82+
if (this.searchIsNotFocused()) {
83+
let $el = $("#docs-viewer__scroll-body");
84+
85+
$el.velocity('stop');
86+
$el.velocity('scroll', {
87+
offset: -(($el.height() / 2) - 150),
88+
container: $el,
89+
duration: 225
90+
});
91+
}
92+
}),
93+
94+
searchIsNotFocused() {
95+
return !this.$('.docs-viewer-search__input').is(':focus');
96+
}
97+
2198
});

‎addon/components/docs-viewer/style.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
body.docs-viewer--showing > .ember-view {
1+
body.docs-viewer--showing > [class="ember-view"] {
22
display: flex;
33
flex-direction: column;
44
height: 100%;

‎addon/components/docs-viewer/x-main/template.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22

33
{{#if docsRoutes.previousUrl}}
44
<a href="{{docsRoutes.previousUrl}}" class='docs-viewer__page-nav'>
5-
{{svg-jar 'left-arrow' width=24}}
5+
{{svg-jar 'left-arrow' width=32}}
66
</a>
77
{{/if}}
88

99
{{#if docsRoutes.nextUrl}}
1010
<a href="{{docsRoutes.nextUrl}}" class='docs-viewer__page-nav docs-viewer__page-nav--next'>
11-
{{svg-jar 'right-arrow' width=24}}
11+
{{svg-jar 'right-arrow' width=32}}
1212
</a>
1313
{{/if}}

0 commit comments

Comments
 (0)