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.

Sign up for GitHub

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

Jump to bottom

fix(slider): support mouse & touch all the time #2327

Merged
merged 5 commits into from
Apr 18, 2022
Merged

fix(slider): support mouse & touch all the time #2327

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
edf1455
[slider] Remove touch event binding
mhthies Apr 17, 2022
2175e7d
[slider] Add new touch event handling for touch-sliding
mhthies Apr 17, 2022
5e5486a
fix(slider): Correct attribute name event.touches
mhthies Apr 18, 2022
78bd218
fix(slider): stop bubbling/propagation of touchstart event
mhthies Apr 18, 2022
493aa28
Merge branch 'develop' into sliderReworkTouch
lubber-de Apr 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 67 additions & 50 deletions src/definitions/modules/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ $.fn.slider = function(parameters) {

$module = $(this),
$currThumb,
touchIdentifier,
$thumb,
$secondThumb,
$track,
Expand All @@ -86,7 +87,6 @@ $.fn.slider = function(parameters) {
secondPos,
offset,
precision,
isTouch,
gapRatio = 1,
previousValue,

Expand All @@ -104,7 +104,6 @@ $.fn.slider = function(parameters) {
currentRange += 1;
documentEventID = currentRange;

isTouch = module.setup.testOutTouch();
module.setup.layout();
module.setup.labels();

Expand Down Expand Up @@ -175,14 +174,6 @@ $.fn.slider = function(parameters) {
}
}
},
testOutTouch: function() {
try {
document.createEvent('TouchEvent');
return true;
} catch (e) {
return false;
}
},
customLabel: function() {
var
$children = $labels.find('.label'),
Expand Down Expand Up @@ -236,9 +227,6 @@ $.fn.slider = function(parameters) {
module.bind.globalKeyboardEvents();
module.bind.keyboardEvents();
module.bind.mouseEvents();
if(module.is.touch()) {
module.bind.touchEvents();
}
if (settings.autoAdjustLabels) {
module.bind.windowEvents();
}
Expand All @@ -251,7 +239,7 @@ $.fn.slider = function(parameters) {
$(document).on('keydown' + eventNamespace + documentEventID, module.event.activateFocus);
},
mouseEvents: function() {
module.verbose('Binding mouse events');
module.verbose('Binding mouse and touch events');
$module.find('.track, .thumb, .inner').on('mousedown' + eventNamespace, function(event) {
event.stopImmediatePropagation();
event.preventDefault();
Expand All @@ -264,27 +252,20 @@ $.fn.slider = function(parameters) {
$module.on('mouseleave' + eventNamespace, function(event) {
isHover = false;
});
},
touchEvents: function() {
module.verbose('Binding touch events');
$module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
event.stopImmediatePropagation();
event.preventDefault();
module.event.down(event);
});
$module.on('touchstart' + eventNamespace, module.event.down);
// 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')
.on('touchstart' + eventNamespace, module.event.touchDown)
.on('touchmove' + eventNamespace, module.event.move)
.on('touchend' + eventNamespace, module.event.up)
.on('touchcancel' + eventNamespace, module.event.touchCancel);
},
slidingEvents: function() {
// these don't need the identifier because we only ever want one of them to be registered with document
module.verbose('Binding page wide events while handle is being draged');
if(module.is.touch()) {
$(document).on('touchmove' + eventNamespace, module.event.move);
$(document).on('touchend' + eventNamespace, module.event.up);
}
else {
$(document).on('mousemove' + eventNamespace, module.event.move);
$(document).on('mouseup' + eventNamespace, module.event.up);
}
$(document).on('mousemove' + eventNamespace, module.event.move);
$(document).on('mouseup' + eventNamespace, module.event.up);
},
windowEvents: function() {
$window.on('resize' + eventNamespace, module.event.resize);
Expand All @@ -294,24 +275,22 @@ $.fn.slider = function(parameters) {
unbind: {
events: function() {
$module.find('.track, .thumb, .inner').off('mousedown' + eventNamespace);
$module.find('.track, .thumb, .inner').off('touchstart' + eventNamespace);
$module.off('mousedown' + eventNamespace);
$module.off('mouseenter' + eventNamespace);
$module.off('mouseleave' + eventNamespace);
$module.off('touchstart' + eventNamespace);
$module.find('.thumb')
.off('touchstart' + eventNamespace)
.off('touchmove' + eventNamespace)
.off('touchend' + eventNamespace)
.off('touchcancel' + eventNamespace);
$module.off('keydown' + eventNamespace);
$module.off('focusout' + eventNamespace);
$(document).off('keydown' + eventNamespace + documentEventID, module.event.activateFocus);
$window.off('resize' + eventNamespace);
},
slidingEvents: function() {
if(module.is.touch()) {
$(document).off('touchmove' + eventNamespace);
$(document).off('touchend' + eventNamespace);
} else {
$(document).off('mousemove' + eventNamespace);
$(document).off('mouseup' + eventNamespace);
}
$(document).off('mousemove' + eventNamespace);
$(document).off('mouseup' + eventNamespace);
},
},

Expand Down Expand Up @@ -341,10 +320,31 @@ $.fn.slider = function(parameters) {
module.bind.slidingEvents();
}
},
touchDown: function(event) {
event.preventDefault(); // disable mouse emulation and touch-scrolling
mhthies marked this conversation as resolved.
Show resolved Hide resolved
event.stopImmediatePropagation();
if(touchIdentifier !== undefined) {
// ignore multiple touches on the same slider --
// we cannot handle changing both thumbs at once due to shared state
return;
}
$currThumb = $(event.target);
var touchEvent = event.touches ? event : event.originalEvent;
touchIdentifier = touchEvent.targetTouches[0].identifier;
if(previousValue === undefined) {
previousValue = module.get.currentThumbValue();
}
},
move: function(event) {
event.preventDefault();
if(event.type == 'mousemove') {
event.preventDefault(); // prevent text selection etc.
}
if(module.is.disabled()) {
// touch events are always bound, so we need to prevent touch-sliding on disabled sliders here
return;
}
var value = module.determine.valueFromEvent(event);
if($currThumb === undefined) {
if(event.type == 'mousemove' && $currThumb === undefined) {
var
eventPos = module.determine.eventPos(event),
newPos = module.determine.pos(eventPos)
Expand Down Expand Up @@ -381,13 +381,26 @@ $.fn.slider = function(parameters) {
},
up: function(event) {
event.preventDefault();
if(module.is.disabled()) {
// touch events are always bound, so we need to prevent touch-sliding on disabled sliders here
return;
}
var value = module.determine.valueFromEvent(event);
module.set.value(value);
module.unbind.slidingEvents();
touchIdentifier = undefined;
if (previousValue !== undefined) {
previousValue = undefined;
}
},
touchCancel: function(event) {
event.preventDefault();
touchIdentifier = undefined;
if (previousValue !== undefined) {
module.update.value(previousValue);
previousValue = undefined;
}
},
keydown: function(event, first) {
if(settings.preventCrossover && module.is.range() && module.thumbVal === module.secondThumbVal) {
$currThumb = undefined;
Expand Down Expand Up @@ -500,9 +513,6 @@ $.fn.slider = function(parameters) {
},
smooth: function() {
return settings.smooth || $module.hasClass(settings.className.smooth);
},
touch: function() {
return isTouch;
}
},

Expand Down Expand Up @@ -766,12 +776,19 @@ $.fn.slider = function(parameters) {
return value;
},
eventPos: function(event) {
if(module.is.touch()) {
if(event.type === "touchmove" || event.type === "touchend") {
var
touchEvent = event.touches ? event : event.originalEvent,
touch = touchEvent.changedTouches[0]; // fall back to first touch if correct touch not found
for(var i=0; i < touchEvent.touches.length; i++) {
if(touchEvent.touches[i].identifier === touchIdentifier) {
touch = touchEvent.touches[i];
break;
}
}
var
touchEvent = event.changedTouches ? event : event.originalEvent,
touches = touchEvent.changedTouches[0] ? touchEvent.changedTouches : touchEvent.touches,
touchY = touches[0].pageY,
touchX = touches[0].pageX
touchY = touch.pageY,
touchX = touch.pageX
;
return module.is.vertical() ? touchY : touchX;
}
Expand Down