ember-learn · samselikoff · Nov 12, 2017 · Nov 3, 2017
diff --git a/addon/components/docs-keyboard-shortcuts/component.js b/addon/components/docs-keyboard-shortcuts/component.js
@@ -0,0 +1,52 @@
+import Component from '@ember/component';
+import { on } from '@ember/object/evented';
+import { later } from "@ember/runloop";
+import layout from './template';
+import { EKMixin, keyUp } from 'ember-keyboard';
+import { inject as service } from '@ember/service';
+
+/**
+  A component that renders a hero banner. Useful for your docs site's homepage.
+  @class DocsKeyboardShortcuts
+  @public
+*/
+export default Component.extend(EKMixin, {
+  layout,
+
+  router: service(),
+
+  isShowingKeyboardShortcuts: false,
+
+  activateKeyboard: on('init', function() {
+    this.set('keyboardActivated', true);
+  }),
+
+  goto: on(keyUp('KeyG'), function() {
+    this.set('isGoingTo', true);
+    later(() => {
+      this.set('isGoingTo', false);
+    }, 500);
+  }),
+
+  gotoDocs: on(keyUp('KeyD'), function() {
+    if (this.get('isGoingTo')) {
+      this.get('router').transitionTo('docs');
+    }
+  }),
+
+  gotoHome: on(keyUp('KeyH'), function() {
+    if (this.get('isGoingTo')) {
+      this.get('router').transitionTo('index');
+    }
+  }),
+
+  toggleKeyboardShortcuts: on(keyUp('shift+Slash'), function() {
+    this.toggleProperty('isShowingKeyboardShortcuts');
+  }),
+
+  actions: {
+    toggleKeyboardShortcuts() {
+      this.toggleProperty('isShowingKeyboardShortcuts');
+    }
+  }
+});
diff --git a/addon/components/docs-keyboard-shortcuts/template.hbs b/addon/components/docs-keyboard-shortcuts/template.hbs
@@ -0,0 +1,160 @@
+{{#if isShowingKeyboardShortcuts}}
+  {{#modal-dialog
+    animatable=true
+    overlay=true
+    wrapperClass='docs-fullscreen-modal docs-keyboard-shortcuts-modal modal-fade'
+    clickOutsideToClose=true
+    onClose=(action 'toggleKeyboardShortcuts')}}
+    <div class="docs-fullscreen-modal__header">
+      <h2 class='docs-fullscreen-modal__title'>Keyboard shortcuts</h2>
+      <a {{action 'toggleKeyboardShortcuts'}}
+        href="#"
+        class='docs-fullscreen-modal__close-button'>
+        &times;
+      </a>
+    </div>
+
+    <div class="docs-fullscreen-modal__body">
+      <table class="docs-keyboard-shortcut-modal">
+        <tbody>
+          <tr>
+            <th></th>
+            <th>
+              <h3 class='docs-fullscreen-modal__subtitle'>Site wide shortcuts</h3>
+            </th>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>g</code>
+              <code class='docs__keyboard-key'>h</code>
+            </td>
+            <td>
+              Go to Home
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>g</code>
+              <code class='docs__keyboard-key'>d</code>
+            </td>
+            <td>
+              Go to Docs
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>?</code>
+            </td>
+            <td>
+              Bring up this help dialog
+            </td>
+          </tr>
+
+          <tr>
+            <th></th>
+            <th>
+              <h3 class='docs-fullscreen-modal__subtitle'>Docs search</h3>
+            </th>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>/</code>
+              or
+              <code class='docs__keyboard-key'>s</code>
+            </td>
+            <td>
+              Focus search bar
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>ctrl</code>
+              <code class='docs__keyboard-key'>n</code>
+            </td>
+            <td>
+              Select next search result
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>ctrl</code>
+              <code class='docs__keyboard-key'>p</code>
+            </td>
+            <td>
+              Select previous search result
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>enter</code>
+            </td>
+            <td>
+              Navigate to selected search result
+            </td>
+          </tr>
+
+          <tr>
+            <th></th>
+            <th>
+              <h3 class='docs-fullscreen-modal__subtitle'>Docs nav</h3>
+            </th>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>l</code>
+              or
+              <code class='docs__keyboard-key'>→</code>
+            </td>
+            <td>
+              Navigate to next page
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>h</code>
+              or
+              <code class='docs__keyboard-key'>←</code>
+            </td>
+            <td>
+              Navigate to previous page
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>j</code>
+            </td>
+            <td>
+              Scroll current page down
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>ctrl</code>
+              <code class='docs__keyboard-key'>j</code>
+            </td>
+            <td>
+              Scroll current page halfway down
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>k</code>
+            </td>
+            <td>
+              Scroll current page up
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <code class='docs__keyboard-key'>ctrl</code>
+              <code class='docs__keyboard-key'>k</code>
+            </td>
+            <td>
+              Scroll current page halfway up
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  {{/modal-dialog}}
+{{/if}}
diff --git a/addon/components/docs-navbar/component.js b/addon/components/docs-navbar/component.js
@@ -2,16 +2,27 @@ import { equal, match } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import layout from './template';
+import config from 'dummy/config/environment';
 
+const packageJson = config['ember-cli-addon-docs'].packageJson;
+
+/**
+  Render a header showing a link to your documentation, your project logo and
+  a GitHub link to your addon's repository.
+
+  @class DocsNavbar
+  @public
+*/
 export default Component.extend({
   layout,
-
   router: service('-routing'),
 
+  tagName: 'nav',
+  classNames: 'docs-navbar',
+
   isHome: equal('router.currentPath', 'index'),
   isViewingDocs: match('router.currentPath', /docs/),
 
-  tagName: 'nav',
-  classNames: 'docs-navbar'
+  githubUrl: packageJson.repository
 
 });
diff --git a/addon/components/docs-viewer/component.js b/addon/components/docs-viewer/component.js
@@ -1,14 +1,23 @@
+import Ember from 'ember';
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import layout from './template';
+import { EKMixin, keyDown } from 'ember-keyboard';
 
-export default Component.extend({
+export default Component.extend(EKMixin, {
   layout,
   docsRoutes: service(),
+  router: service(),
 
   classNames: 'docs-viewer',
 
+  init() {
+    this._super();
+
+    this.set('keyboardActivated', true);
+  },
+
   didInsertElement() {
     $('body').addClass('docs-viewer--showing');
   },
@@ -18,4 +27,72 @@ export default Component.extend({
     this.get('docsRoutes').resetState();
   },
 
+  nextPage: Ember.on(keyDown('KeyL'), keyDown('ArrowRight'), function() {
+    if (this.searchIsNotFocused() && this.get('docsRoutes.nextUrl')) {
+      this.get('router').transitionTo(this.get('docsRoutes.nextUrl'));
+    }
+  }),
+
+  previousPage: Ember.on(keyDown('KeyH'), keyDown('ArrowLeft'), function() {
+    if (this.searchIsNotFocused() && this.get('docsRoutes.previousUrl')) {
+      this.get('router').transitionTo(this.get('docsRoutes.previousUrl'));
+    }
+  }),
+
+  pageDown: Ember.on(keyDown('KeyJ'), function() {
+    if (this.searchIsNotFocused()) {
+      let $el = $("#docs-viewer__scroll-body");
+
+      $el.velocity('stop');
+      $el.velocity('scroll', {
+        offset: ($el.height() - 150),
+        container: $el,
+        duration: 225
+      });
+    }
+  }),
+
+  halfPageDown: Ember.on(keyDown('ctrl+KeyJ'), function() {
+    if (this.searchIsNotFocused()) {
+      let $el = $("#docs-viewer__scroll-body");
+
+      $el.velocity('stop');
+      $el.velocity('scroll', {
+        offset: (($el.height() / 2) - 150),
+        container: $el,
+        duration: 225
+      });
+    }
+  }),
+
+  pageUp: Ember.on(keyDown('KeyK'), function() {
+    if (this.searchIsNotFocused()) {
+      let $el = $("#docs-viewer__scroll-body");
+
+      $el.velocity('stop');
+      $el.velocity('scroll', {
+        offset: -($el.height() - 150),
+        container: $el,
+        duration: 225
+      });
+    }
+  }),
+
+  halfPageUp: Ember.on(keyDown('ctrl+KeyK'), function() {
+    if (this.searchIsNotFocused()) {
+      let $el = $("#docs-viewer__scroll-body");
+
+      $el.velocity('stop');
+      $el.velocity('scroll', {
+        offset: -(($el.height() / 2) - 150),
+        container: $el,
+        duration: 225
+      });
+    }
+  }),
+
+  searchIsNotFocused() {
+    return !this.$('.docs-viewer-search__input').is(':focus');
+  }
+
 });
diff --git a/addon/components/docs-viewer/style.scss b/addon/components/docs-viewer/style.scss
@@ -1,4 +1,4 @@
-body.docs-viewer--showing > .ember-view {
+body.docs-viewer--showing > [class="ember-view"] {
   display: flex;
   flex-direction: column;
   height: 100%;

diff --git a/addon/components/docs-viewer/x-main/template.hbs b/addon/components/docs-viewer/x-main/template.hbs
@@ -2,12 +2,12 @@
 
 {{#if docsRoutes.previousUrl}}
   <a href="{{docsRoutes.previousUrl}}" class='docs-viewer__page-nav'>
-    {{svg-jar 'left-arrow' width=24}}
+    {{svg-jar 'left-arrow' width=32}}
   </a>
 {{/if}}
 
 {{#if docsRoutes.nextUrl}}
   <a href="{{docsRoutes.nextUrl}}" class='docs-viewer__page-nav docs-viewer__page-nav--next'>
-    {{svg-jar 'right-arrow' width=24}}
+    {{svg-jar 'right-arrow' width=32}}
   </a>
 {{/if}}