🎨 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,6 +12,15 @@ export default class StyleguideView {
     this.uri = props.uri
     this.collapsedSections = props.collapsedSections ? new Set(props.collapsedSections) : new Set()
     this.sections = []
+    this.mainSections = null
+    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)) {
@@ -24,6 +33,7 @@ export default class StyleguideView {
 
   destroy () {
     this.sections = null
+    this.mainSections = null
   }
 
   serialize () {
@@ -62,6 +72,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.js

@@ -1,4 +1,5 @@
 const {CompositeDisposable} = require('atom')
+const DOMListener = require('dom-listener')
 let StyleguideView = null
 
 const STYLEGUIDE_URI = 'atom://styleguide'
@@ -9,8 +10,14 @@ module.exports = {
     this.subscriptions.add(atom.workspace.addOpener(filePath => {
       if (filePath === STYLEGUIDE_URI) return this.createStyleguideView({uri: STYLEGUIDE_URI})
     }))
-    this.subscriptions.add(atom.commands.add('atom-workspace', 'styleguide:show', () => atom.workspace.open(STYLEGUIDE_URI))
-    )
+    this.subscriptions.add(atom.commands.add('atom-workspace', 'styleguide:show',
+      () => atom.workspace.open(STYLEGUIDE_URI).then(() => {
+        this.domListener = new DOMListener(document.querySelector('atom-workspace'))
+        return this.domListener.add('.styleguide', 'keydown', event => {
+          return this.styleguideView.onKeyDownScroll(event.keyCode)
+        })
+      })
+    ))
   },
 
   deactivate () {
@@ -19,6 +26,6 @@ module.exports = {
 
   createStyleguideView (state) {
     if (StyleguideView == null) StyleguideView = require('./styleguide-view')
-    return new StyleguideView(state)
+    return this.styleguideView = new StyleguideView(state);
   }
 }

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "atom-select-list": "^0.7.0",
     "dedent": "^0.7.0",
+    "dom-listener": "^0.1.2",
     "etch": "0.9.0",
     "highlights": "^3.1.1"
   },