Skip to content

fix: Fix for wrong slider drag when having many touches simultaneous #535

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

Merged
merged 1 commit into from
May 25, 2017
Merged

fix: Fix for wrong slider drag when having many touches simultaneous #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions dist/rzslider.css
View file
Open in desktop

Large diffs are not rendered by default.

82 changes: 67 additions & 15 deletions dist/rzslider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*! angularjs-slider - v6.1.2 -
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
https://github.com/angular-slider/angularjs-slider -
2017-05-15 */
2017-05-25 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
Expand Down Expand Up @@ -158,7 +158,7 @@

.factory('RzSlider', ['$timeout', '$document', '$window', '$compile', 'RzSliderOptions', 'rzThrottle', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
'use strict';

/**
* Slider
*
Expand Down Expand Up @@ -458,7 +458,7 @@
}
return index;
},

syncLowValue: function() {
if (this.options.stepsArray) {
if (!this.options.bindIndexForStepsArray)
Expand Down Expand Up @@ -1560,32 +1560,46 @@
* Get the X-coordinate or Y-coordinate of an event
*
* @param {Object} event The event
* @param targetTouchId The identifier of the touch for that we will get the x and y coordinates
* @returns {number}
*/
getEventXY: function(event) {
getEventXY: function(event, targetTouchId) {
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
var clientXY = this.options.vertical ? 'clientY' : 'clientX';
if (event[clientXY] !== undefined) {
return event[clientXY];
}

return event.originalEvent === undefined ?
event.touches[0][clientXY] : event.originalEvent.touches[0][clientXY];

var eventXY;
var touches = event.originalEvent === undefined ? event.touches : event.originalEvent.touches;

if (targetTouchId !== undefined) {
for (var i = 0; i < touches.length; i++) {
if (touches[i].identifier == targetTouchId) {
return touches[i][clientXY];
}
}
}

// If the target touch was not found in the event
// returns the coordinates of the first touch
return touches[0][clientXY];
},

/**
* Compute the event position depending on whether the slider is horizontal or vertical
* @param event
* @param targetTouchId If targetTouchId is provided it will be considered the position of that
* @returns {number}
*/
getEventPosition: function(event) {
getEventPosition: function(event, targetTouchId) {
var sliderPos = this.sliderElem.rzsp,
eventPos = 0;
if (this.options.vertical)
eventPos = -this.getEventXY(event) + sliderPos;
eventPos = -this.getEventXY(event, targetTouchId) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
eventPos = this.getEventXY(event, targetTouchId) - sliderPos;
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
},

Expand Down Expand Up @@ -1763,8 +1777,19 @@
ehEnd = angular.bind(this, this.onEnd, ehMove);

$document.on(eventNames.moveEvent, ehMove);
$document.one(eventNames.endEvent, ehEnd);

$document.on(eventNames.endEvent, ehEnd);
this.ehEndToBeRemovedOnEnd = ehEnd;
this.callOnStart();

var changedTouches = event.originalEvent === undefined ? event.changedTouches : event.originalEvent.changedTouches;
if (changedTouches) {
// Store the touch identifier
if (!this.touchId) {
this.isDragging = true;
this.touchId = changedTouches[0].identifier;
}
}
},

/**
Expand All @@ -1776,7 +1801,22 @@
* @returns {undefined}
*/
onMove: function(pointer, event, fromTick) {
var newPos = this.getEventPosition(event),
var changedTouches = event.originalEvent === undefined ? event.changedTouches : event.originalEvent.changedTouches;
var touchForThisSlider;
if (changedTouches) {
for (var i = 0; i < changedTouches.length; i++) {
if (changedTouches[i].identifier == this.touchId) {
touchForThisSlider = changedTouches[i];
break;
}
}
}

if (changedTouches && !touchForThisSlider) {
return;
}

var newPos = this.getEventPosition(event, touchForThisSlider ? touchForThisSlider.identifier : undefined),
newValue,
ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
flrValue = this.options.rightToLeft ? this.maxValue : this.minValue;
Expand All @@ -1794,7 +1834,7 @@
}
this.positionTrackingHandle(newValue);
},

/**
* onEnd event handler
*
Expand All @@ -1803,6 +1843,16 @@
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var changedTouches = event.originalEvent === undefined ? event.changedTouches : event.originalEvent.changedTouches;
if (changedTouches && changedTouches[0].identifier != this.touchId) {
return;
}
this.isDragging = false;
this.touchId = null;

// Touch event, the listener was added by us so we need to remove it
$document.off("touchend", this.ehEndToBeRemovedOnEnd);

var moveEventName = this.getEventNames(event).moveEvent;

if (!this.options.keyboardSupport) {
Expand Down Expand Up @@ -1842,9 +1892,11 @@
onPointerBlur: function(pointer) {
pointer.off('keydown');
pointer.off('keyup');
this.tracking = '';
pointer.removeClass('rz-active');
this.currentFocusElement = null
if (!this.isDragging) {
this.tracking = '';
this.currentFocusElement = null
}
},

/**
Expand Down
2 changes: 1 addition & 1 deletion dist/rzslider.min.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions dist/rzslider.min.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/rzslider.scss
View file
Open in desktop

Large diffs are not rendered by default.

80 changes: 66 additions & 14 deletions src/rzslider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@

.factory('RzSlider', function($timeout, $document, $window, $compile, RzSliderOptions, rzThrottle) {
'use strict';

/**
* Slider
*
Expand Down Expand Up @@ -462,7 +462,7 @@
}
return index;
},

syncLowValue: function() {
if (this.options.stepsArray) {
if (!this.options.bindIndexForStepsArray)
Expand Down Expand Up @@ -1564,32 +1564,46 @@
* Get the X-coordinate or Y-coordinate of an event
*
* @param {Object} event The event
* @param targetTouchId The identifier of the touch with the X/Y coordinates
* @returns {number}
*/
getEventXY: function(event) {
getEventXY: function(event, targetTouchId) {
/* http://stackoverflow.com/a/12336075/282882 */
//noinspection JSLint
var clientXY = this.options.vertical ? 'clientY' : 'clientX';
if (event[clientXY] !== undefined) {
return event[clientXY];
}

return event.originalEvent === undefined ?
event.touches[0][clientXY] : event.originalEvent.touches[0][clientXY];

var eventXY;
var touches = event.originalEvent === undefined ? event.touches : event.originalEvent.touches;

if (targetTouchId !== undefined) {
for (var i = 0; i < touches.length; i++) {
if (touches[i].identifier == targetTouchId) {
return touches[i][clientXY];
}
}
}

// If no target touch or the target touch was not found in the event
// returns the coordinates of the first touch
return touches[0][clientXY];
},

/**
* Compute the event position depending on whether the slider is horizontal or vertical
* @param event
* @param targetTouchId If targetTouchId is provided it will be considered the position of that
* @returns {number}
*/
getEventPosition: function(event) {
getEventPosition: function(event, targetTouchId) {
var sliderPos = this.sliderElem.rzsp,
eventPos = 0;
if (this.options.vertical)
eventPos = -this.getEventXY(event) + sliderPos;
eventPos = -this.getEventXY(event, targetTouchId) + sliderPos;
else
eventPos = this.getEventXY(event) - sliderPos;
eventPos = this.getEventXY(event, targetTouchId) - sliderPos;
return eventPos * this.options.scale - this.handleHalfDim; // #346 handleHalfDim is already scaled
},

Expand Down Expand Up @@ -1767,8 +1781,19 @@
ehEnd = angular.bind(this, this.onEnd, ehMove);

$document.on(eventNames.moveEvent, ehMove);
$document.one(eventNames.endEvent, ehEnd);

$document.on(eventNames.endEvent, ehEnd);
this.ehEndToBeRemovedOnEnd = ehEnd;
this.callOnStart();

var changedTouches = event.originalEvent === undefined ? event.changedTouches : event.originalEvent.changedTouches;
if (changedTouches) {
// Store the touch identifier
if (!this.touchId) {
this.isDragging = true;
this.touchId = changedTouches[0].identifier;
}
}
},

/**
Expand All @@ -1780,7 +1805,22 @@
* @returns {undefined}
*/
onMove: function(pointer, event, fromTick) {
var newPos = this.getEventPosition(event),
var changedTouches = event.originalEvent === undefined ? event.changedTouches : event.originalEvent.changedTouches;
var touchForThisSlider;
if (changedTouches) {
for (var i = 0; i < changedTouches.length; i++) {
if (changedTouches[i].identifier == this.touchId) {
touchForThisSlider = changedTouches[i];
break;
}
}
}

if (changedTouches && !touchForThisSlider) {
return;
}

var newPos = this.getEventPosition(event, touchForThisSlider ? touchForThisSlider.identifier : undefined),
newValue,
ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
flrValue = this.options.rightToLeft ? this.maxValue : this.minValue;
Expand All @@ -1798,7 +1838,7 @@
}
this.positionTrackingHandle(newValue);
},

/**
* onEnd event handler
*
Expand All @@ -1807,6 +1847,16 @@
* @returns {undefined}
*/
onEnd: function(ehMove, event) {
var changedTouches = event.originalEvent === undefined ? event.changedTouches : event.originalEvent.changedTouches;
if (changedTouches && changedTouches[0].identifier != this.touchId) {
return;
}
this.isDragging = false;
this.touchId = null;

// Touch event, the listener was added by us so we need to remove it
$document.off("touchend", this.ehEndToBeRemovedOnEnd);

var moveEventName = this.getEventNames(event).moveEvent;

if (!this.options.keyboardSupport) {
Expand Down Expand Up @@ -1846,9 +1896,11 @@
onPointerBlur: function(pointer) {
pointer.off('keydown');
pointer.off('keyup');
this.tracking = '';
pointer.removeClass('rz-active');
this.currentFocusElement = null
if (!this.isDragging) {
this.tracking = '';
this.currentFocusElement = null
}
},

/**
Expand Down
Loading