From 33bfaf87d9200d2bed7e0adc5f208c0367e24f39 Mon Sep 17 00:00:00 2001
From: liuderchi <liuderchi@gmail.com>
Date: Mon, 25 Dec 2017 14:15:15 +0800
Subject: [PATCH] :art: 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
---
 lib/styleguide-view.js | 20 ++++++++++++++++++++
 lib/styleguide.js      | 14 +++++++++++---
 package.json           |  1 +
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/lib/styleguide-view.js b/lib/styleguide-view.js
index b75b24d..d90b78c 100644
--- a/lib/styleguide-view.js
+++ b/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'>
diff --git a/lib/styleguide.js b/lib/styleguide.js
index 709a536..c65a9ea 100644
--- a/lib/styleguide.js
+++ b/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,7 @@ module.exports = {
 
   createStyleguideView (state) {
     if (StyleguideView == null) StyleguideView = require('./styleguide-view')
-    return new StyleguideView(state)
+    this.styleguideView = new StyleguideView(state)
+    return this.styleguideView
   }
 }
diff --git a/package.json b/package.json
index c4f58e8..3793279 100644
--- a/package.json
+++ b/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"
   },