From 4f6ed64b17fe4fcd14a5a33bd7dbb8febf843280 Mon Sep 17 00:00:00 2001
From: Hyunje Alex Jun <me@noraesae.net>
Date: Wed, 23 Dec 2015 23:34:37 +0900
Subject: [PATCH] Make keyboard handler consistent when focused

Resolve #437
---
 src/css/main.scss                 |  2 +-
 src/js/plugin/handler/keyboard.js |  6 +++++-
 src/js/plugin/instances.js        | 15 ++++++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/css/main.scss b/src/css/main.scss
index bad2da6..e4de879 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -96,7 +96,7 @@ $ps-bar-hover: #999;
     }
   }
 
-  &:hover {
+  &:hover, &.ps-focus {
     @include in-scrolling;
 
     >.ps-scrollbar-x-rail,
diff --git a/src/js/plugin/handler/keyboard.js b/src/js/plugin/handler/keyboard.js
index 3fc8155..bc459e8 100644
--- a/src/js/plugin/handler/keyboard.js
+++ b/src/js/plugin/handler/keyboard.js
@@ -4,6 +4,7 @@
 'use strict';
 
 var h = require('../../lib/helper')
+  , d = require('../../lib/dom')
   , instances = require('../instances')
   , updateGeometry = require('../update-geometry')
   , updateScroll = require('../update-scroll');
@@ -46,7 +47,10 @@ function bindKeyboardHandler(element, i) {
       return;
     }
 
-    if (!hovered) {
+    var focused = d.matches(i.scrollbarX, ':focus') ||
+                  d.matches(i.scrollbarY, ':focus');
+
+    if (!hovered && !focused) {
       return;
     }
 
diff --git a/src/js/plugin/instances.js b/src/js/plugin/instances.js
index 0236097..e3738ab 100644
--- a/src/js/plugin/instances.js
+++ b/src/js/plugin/instances.js
@@ -3,7 +3,8 @@
  */
 'use strict';
 
-var d = require('../lib/dom')
+var cls = require('../lib/class')
+  , d = require('../lib/dom')
   , defaultSettings = require('./default-setting')
   , EventManager = require('../lib/event-manager')
   , guid = require('../lib/guid')
@@ -33,9 +34,19 @@ function Instance(element) {
   i.event = new EventManager();
   i.ownerDocument = element.ownerDocument || document;
 
+  function focus() {
+    cls.add(element, 'ps-focus');
+  }
+
+  function blur() {
+    cls.remove(element, 'ps-focus');
+  }
+
   i.scrollbarXRail = d.appendTo(d.e('div', 'ps-scrollbar-x-rail'), element);
   i.scrollbarX = d.appendTo(d.e('div', 'ps-scrollbar-x'), i.scrollbarXRail);
   i.scrollbarX.setAttribute('tabindex', 0);
+  i.event.bind(i.scrollbarX, 'focus', focus);
+  i.event.bind(i.scrollbarX, 'blur', blur);
   i.scrollbarXActive = null;
   i.scrollbarXWidth = null;
   i.scrollbarXLeft = null;
@@ -53,6 +64,8 @@ function Instance(element) {
   i.scrollbarYRail = d.appendTo(d.e('div', 'ps-scrollbar-y-rail'), element);
   i.scrollbarY = d.appendTo(d.e('div', 'ps-scrollbar-y'), i.scrollbarYRail);
   i.scrollbarY.setAttribute('tabindex', 0);
+  i.event.bind(i.scrollbarY, 'focus', focus);
+  i.event.bind(i.scrollbarY, 'blur', blur);
   i.scrollbarYActive = null;
   i.scrollbarYHeight = null;
   i.scrollbarYTop = null;