cartodb/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make keyboard handler consistent when focused

Browse Source 
Resolve #437
This commit is contained in:
Hyunje Alex Jun 2015-12-23 23:34:37 +09:00
parent 31434f81d4
commit 4f6ed64b17
3 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/main.scss
View File

@ -96,7 +96,7 @@ $ps-bar-hover: #999;
} }
} }
&:hover { &:hover, &.ps-focus {
@include in-scrolling; @include in-scrolling;
>.ps-scrollbar-x-rail, >.ps-scrollbar-x-rail,

6
src/js/plugin/handler/keyboard.js
View File

@ -4,6 +4,7 @@
'use strict'; 'use strict';
var h = require('../../lib/helper') var h = require('../../lib/helper')
, d = require('../../lib/dom')
, instances = require('../instances') , instances = require('../instances')
, updateGeometry = require('../update-geometry') , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll'); , updateScroll = require('../update-scroll');
@ -46,7 +47,10 @@ function bindKeyboardHandler(element, i) {
return; return;
} }
if (!hovered) { var focused = d.matches(i.scrollbarX, ':focus') ||
d.matches(i.scrollbarY, ':focus');
if (!hovered && !focused) {
return; return;
} }

15
src/js/plugin/instances.js
View File

@ -3,7 +3,8 @@
*/ */
'use strict'; 'use strict';
var d = require('../lib/dom') var cls = require('../lib/class')
, d = require('../lib/dom')
, defaultSettings = require('./default-setting') , defaultSettings = require('./default-setting')
, EventManager = require('../lib/event-manager') , EventManager = require('../lib/event-manager')
, guid = require('../lib/guid') , guid = require('../lib/guid')
@ -33,9 +34,19 @@ function Instance(element) {
i.event = new EventManager(); i.event = new EventManager();
i.ownerDocument = element.ownerDocument || document; 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.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 = d.appendTo(d.e('div', 'ps-scrollbar-x'), i.scrollbarXRail);
i.scrollbarX.setAttribute('tabindex', 0); i.scrollbarX.setAttribute('tabindex', 0);
i.event.bind(i.scrollbarX, 'focus', focus);
i.event.bind(i.scrollbarX, 'blur', blur);
i.scrollbarXActive = null; i.scrollbarXActive = null;
i.scrollbarXWidth = null; i.scrollbarXWidth = null;
i.scrollbarXLeft = null; i.scrollbarXLeft = null;
@ -53,6 +64,8 @@ function Instance(element) {
i.scrollbarYRail = d.appendTo(d.e('div', 'ps-scrollbar-y-rail'), 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 = d.appendTo(d.e('div', 'ps-scrollbar-y'), i.scrollbarYRail);
i.scrollbarY.setAttribute('tabindex', 0); i.scrollbarY.setAttribute('tabindex', 0);
i.event.bind(i.scrollbarY, 'focus', focus);
i.event.bind(i.scrollbarY, 'blur', blur);
i.scrollbarYActive = null; i.scrollbarYActive = null;
i.scrollbarYHeight = null; i.scrollbarYHeight = null;
i.scrollbarYTop = null; i.scrollbarYTop = null;