Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(slider): customizable event selectors #2330

Draft
wants to merge 10 commits into
base: develop
Choose a base branch
from
14 changes: 9 additions & 5 deletions src/definitions/modules/slider.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
selector = settings.selector,
error = settings.error,
keys = settings.keys,
interpretLabel = settings.interpretLabel,
Expand Down Expand Up @@ -248,7 +249,7 @@
},
mouseEvents: function () {
module.verbose('Binding mouse and touch events');
$module.find('.track, .thumb, .inner').on('mousedown' + eventNamespace, function (event) {
$module.find(selector.mouseTarget).on('mousedown' + eventNamespace, function (event) {
event.stopImmediatePropagation();
event.preventDefault();
module.event.down(event);
Expand All @@ -263,7 +264,7 @@
// All touch events are invoked on the element where the touch *started*. Thus, we can bind them all
// on the thumb(s) and don't need to worry about interference with other components, i.e. no dynamic binding
// and unbinding required.
$module.find('.thumb')
$module.find(selector.touchTarget)
.on('touchstart' + eventNamespace, module.event.touchDown)
.on('touchmove' + eventNamespace, module.event.move)
.on('touchend' + eventNamespace, module.event.up)
Expand All @@ -283,11 +284,11 @@

unbind: {
events: function () {
$module.find('.track, .thumb, .inner').off('mousedown' + eventNamespace);
$module.find(selector.mouseTarget).off('mousedown' + eventNamespace);
$module.off('mousedown' + eventNamespace);
$module.off('mouseenter' + eventNamespace);
$module.off('mouseleave' + eventNamespace);
$module.find('.thumb')
$module.find(selector.touchTarget)
.off('touchstart' + eventNamespace)
.off('touchmove' + eventNamespace)
.off('touchend' + eventNamespace)
Expand Down Expand Up @@ -1409,7 +1410,10 @@
// page up/down multiplier. How many more times the steps to take on page up/down press
pageMultiplier: 2,

selector: {},
selector: {
mouseTarget: '.track, .thumb, .inner',
touchTarget: '.thumb',
},

className: {
reversed: 'reversed',
Expand Down