From bd7134f33dbba3073d3f7f0d4204de8edf85ae72 Mon Sep 17 00:00:00 2001 From: Hyunje Alex Jun Date: Mon, 22 Feb 2016 20:53:19 +0900 Subject: [PATCH] Add 'handlers' option to configure scrolling methods Please refer to README.md and examples/options-handlers.html for the usage. --- README.md | 37 +++++++++++------------- examples/options-handlers.html | 49 ++++++++++++++++++++++++++++++++ src/js/plugin/default-setting.js | 3 +- src/js/plugin/handler/touch.js | 9 ++++-- src/js/plugin/initialize.js | 34 +++++++++------------- 5 files changed, 87 insertions(+), 45 deletions(-) create mode 100644 examples/options-handlers.html diff --git a/README.md b/README.md index 042c671..a94a507 100644 --- a/README.md +++ b/README.md @@ -283,61 +283,58 @@ imgLoader.perfectScrollbar(); perfect-scrollbar supports optional parameters. +### handlers +It is a list of handlers to use to scroll the element. +**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']` +**Disabled by default**: `'selection'` + ### wheelSpeed The scroll speed applied to mousewheel event. -**Default: 1** +**Default**: `1` ### wheelPropagation If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element. -**Default: false** +**Default**: `false` ### swipePropagation If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element. -**Default: true** +**Default**: `true` ### minScrollbarLength When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels. -**Default: null** +**Default**: `null` ### maxScrollbarLength When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels. -**Default: null** +**Default**: `null` ### useBothWheelAxes When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar. -**Default: false** - -### useKeyboard -When set to true, the scroll works with arrow keys on the keyboard. The element is scrolled only when the mouse cursor hovers the element. -**Default: true** +**Default**: `false` ### suppressScrollX When set to true, the scroll bar in X axis will not be available, regardless of the content width. -**Default: false** +**Default**: `false` ### suppressScrollY When set to true, the scroll bar in Y axis will not be available, regardless of the content height. -**Default: false** +**Default**: `false` ### scrollXMarginOffset The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels. -**Default: 0** +**Default**: `0` ### scrollYMarginOffset The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels. -**Default: 0** +**Default**: `0` ### stopPropagationOnClick When set to false, when clicking on a rail, the click event will be allowed to propagate. -**Default: true** - -### useSelectionScroll -When set to true, you can scroll the container by selecting text and move the cursor. -**Default: false** +**Default**: `true` ### theme A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. -**Default: 'default'** +**Default**: `'default'` **Example 1:** diff --git a/examples/options-handlers.html b/examples/options-handlers.html new file mode 100644 index 0000000..ba5789e --- /dev/null +++ b/examples/options-handlers.html @@ -0,0 +1,49 @@ + + + + + perfect-scrollbar example + + + + + +

Default

+ 
handlers: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']
+
+
+
+
+ +

No keyboard

+ 
handlers: ['click-rail', 'drag-scrollbar', 'wheel', 'touch']
+
+
+
+
+ +

Click and Drag

+ 
handlers: ['click-rail', 'drag-scrollbar']
+
+
+
+
+ + + + diff --git a/src/js/plugin/default-setting.js b/src/js/plugin/default-setting.js index 521c73e..0228967 100644 --- a/src/js/plugin/default-setting.js +++ b/src/js/plugin/default-setting.js @@ -1,6 +1,7 @@ 'use strict'; module.exports = { + handlers: ['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch'], maxScrollbarLength: null, minScrollbarLength: null, scrollXMarginOffset: 0, @@ -10,8 +11,6 @@ module.exports = { suppressScrollY: false, swipePropagation: true, useBothWheelAxes: false, - useKeyboard: true, - useSelectionScroll: false, wheelPropagation: false, wheelSpeed: 1, theme: 'default' diff --git a/src/js/plugin/handler/touch.js b/src/js/plugin/handler/touch.js index 1104539..7477888 100644 --- a/src/js/plugin/handler/touch.js +++ b/src/js/plugin/handler/touch.js @@ -1,6 +1,7 @@ 'use strict'; var instances = require('../instances') + , h = require('../../lib/helper') , updateGeometry = require('../update-geometry') , updateScroll = require('../update-scroll'); @@ -165,7 +166,11 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) { } } -module.exports = function (element, supportsTouch, supportsIePointer) { +module.exports = function (element) { + if (!h.env.supportsTouch && !h.env.supportsIePointer) { + return; + } + var i = instances.get(element); - bindTouchHandler(element, i, supportsTouch, supportsIePointer); + bindTouchHandler(element, i, h.env.supportsTouch, h.env.supportsIePointer); }; diff --git a/src/js/plugin/initialize.js b/src/js/plugin/initialize.js index a983434..24d3265 100644 --- a/src/js/plugin/initialize.js +++ b/src/js/plugin/initialize.js @@ -6,13 +6,15 @@ var cls = require('../lib/class') , updateGeometry = require('./update-geometry'); // Handlers -var clickRailHandler = require('./handler/click-rail') - , dragScrollbarHandler = require('./handler/drag-scrollbar') - , keyboardHandler = require('./handler/keyboard') - , mouseWheelHandler = require('./handler/mouse-wheel') - , nativeScrollHandler = require('./handler/native-scroll') - , selectionHandler = require('./handler/selection') - , touchHandler = require('./handler/touch'); +var handlers = { + 'click-rail': require('./handler/click-rail'), + 'drag-scrollbar': require('./handler/drag-scrollbar'), + 'keyboard': require('./handler/keyboard'), + 'wheel': require('./handler/mouse-wheel'), + 'touch': require('./handler/touch'), + 'selection': require('./handler/selection') +}; +var nativeScrollHandler = require('./handler/native-scroll'); module.exports = function (element, userSettings) { userSettings = typeof userSettings === 'object' ? userSettings : {}; @@ -25,21 +27,11 @@ module.exports = function (element, userSettings) { i.settings = h.extend(i.settings, userSettings); cls.add(element, 'ps-theme-' + i.settings.theme); - clickRailHandler(element); - dragScrollbarHandler(element); - mouseWheelHandler(element); + i.settings.handlers.forEach(function (handlerName) { + handlers[handlerName](element); + }); + nativeScrollHandler(element); - if (i.settings.useSelectionScroll) { - selectionHandler(element); - } - - if (h.env.supportsTouch || h.env.supportsIePointer) { - touchHandler(element, h.env.supportsTouch, h.env.supportsIePointer); - } - if (i.settings.useKeyboard) { - keyboardHandler(element); - } - updateGeometry(element); };