🎨 scroll on key press (pageup/pagedown/up/down/home/end)

- use dom-listener to handle keydown event
- add styleguideView, domListener in styleguide.coffee
- add onKeyDownScroll() to change scrollTop property in styleguide-view.js

Author: liuderchi

lib/styleguide-view.js

@@ -12,7 +12,16 @@ export default class StyleguideView {
   constructor (props) {
     this.uri = props.uri
     this.collapsedSections = props.collapsedSections ? new Set(props.collapsedSections) : new Set()
+    this.mainSections = null
     this.sections = []
+    this.keyCodeToScrollStep = {
+      '33': -200,                     // pageup
+      '34': 200,                      // pagedown
+      '38': -100,                     // up
+      '40': 100,                      // down
+      '36': Number.MIN_SAFE_INTEGER,  // home
+      '35': Number.MAX_SAFE_INTEGER,  // end
+    }
     etch.initialize(this)
     for (const section of this.sections) {
       if (this.collapsedSections.has(section.name)) {
@@ -25,6 +34,7 @@ export default class StyleguideView {
 
   destroy () {
     this.sections = null
+    this.mainSections = null
   }
 
   serialize () {
@@ -59,6 +69,16 @@ export default class StyleguideView {
     }
   }
 
+  onKeyDownScroll(keyCode) {
+    if (!this.keyCodeToScrollStep[keyCode]) return
+    if (!this.mainSections) {
+      this.mainSections = document.querySelector('.styleguide main.styleguide-sections')
+    }
+    if (this.mainSections) {
+      this.mainSections.scrollTop += this.keyCodeToScrollStep[keyCode]
+    }
+  }
+
   render () {
     return (
       <div className='styleguide pane-item native-key-bindings' tabIndex='-1'>

lib/styleguide.coffee

@@ -1,17 +1,21 @@
 {CompositeDisposable} = require 'atom'
+DOMListener = require 'dom-listener'
 StyleguideUri = 'atom://styleguide'
 
 module.exports =
   activate: ->
     @subscriptions = new CompositeDisposable
     @subscriptions.add atom.workspace.addOpener (filePath) =>
       @createStyleguideView(uri: StyleguideUri) if filePath is StyleguideUri
-    @subscriptions.add atom.commands.add 'atom-workspace', 'styleguide:show', ->
-      atom.workspace.open(StyleguideUri)
+    @subscriptions.add atom.commands.add 'atom-workspace', 'styleguide:show', =>
+      atom.workspace.open(StyleguideUri).then =>
+        @domListener = new DOMListener(document.querySelector('atom-workspace'))
+        @domListener.add '.styleguide', 'keydown', (event) =>
+          @styleguideView.onKeyDownScroll(event.keyCode)
 
   deactivate: ->
     @subscriptions.dispose()
 
   createStyleguideView: (state) ->
     StyleguideView = require './styleguide-view'
-    new StyleguideView(state)
+    @styleguideView = new StyleguideView(state)

package.json

@@ -9,6 +9,7 @@
     "atom-select-list": "0.0.12",
     "coffee-script": "~1.8.0",
     "dedent": "^0.6.0",
+    "dom-listener": "^0.1.2",
     "highlights": "2.1.1",
     "js-beautify": "^1.4.0",
     "underscore-plus": "^1.0.0"