Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

fix(ngTouch): leaving an swipe element must not terminate swiping #8256

Closed
wants to merge 1 commit into from
Closed

fix(ngTouch): leaving an swipe element must not terminate swiping #8256

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
76 changes: 59 additions & 17 deletions src/ngTouch/swipe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,21 +21,25 @@
* documentation for `bind` below.
*/

ngTouch.factory('$swipe', [function() {
ngTouch.factory('$swipe', ['$window', function($window) {
// The total distance in any direction before we make the call on swipe vs. scroll.
var MOVE_BUFFER_RADIUS = 10;

var POINTER_EVENTS = {
'mouse': {
start: 'mousedown',
move: 'mousemove',
end: 'mouseup'
end: 'mouseup',
leave: 'mouseout',
enter: 'mouseover'
},
'touch': {
start: 'touchstart',
move: 'touchmove',
end: 'touchend',
cancel: 'touchcancel'
cancel: 'touchcancel',
leave: 'touchleave',
enter: 'touchenter'
}
};

Expand Down Expand Up @@ -105,25 +109,47 @@ ngTouch.factory('$swipe', [function() {
var lastPos;
// Whether a swipe is active.
var active = false;
// Whether mouse is outside element
var elementOutside = false;

pointerTypes = pointerTypes || ['mouse', 'touch'];
element.on(getEvents(pointerTypes, 'start'), function(event) {

function ifOutside(func) {
return function(event) {
if (!elementOutside) {
return;
}
func(event);
};
}

function swipeStart(event) {
startCoords = getCoordinates(event);
active = true;
totalX = 0;
totalY = 0;
lastPos = startCoords;
eventHandlers['start'] && eventHandlers['start'](startCoords, event);
});
var events = getEvents(pointerTypes, 'cancel');
if (events) {
element.on(events, function(event) {
active = false;
eventHandlers['cancel'] && eventHandlers['cancel'](event);

element.on(getEvents(pointerTypes, 'leave'), function() {
elementOutside = true;
});
element.on(getEvents(pointerTypes, 'enter'), function() {
elementOutside = false;
});
eventHandlers['start'] && eventHandlers['start'](startCoords, event);
}

element.on(getEvents(pointerTypes, 'move'), function(event) {
function swipeEnd(event) {
if (!active) return;
active = false;

element.off(getEvents(pointerTypes, 'enter'));
element.off(getEvents(pointerTypes, 'leave'));

eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event);
}

function swipeMove(event) {
if (!active) return;

// Android will send a touchcancel if it thinks we're starting to scroll.
Expand Down Expand Up @@ -155,13 +181,29 @@ ngTouch.factory('$swipe', [function() {
event.preventDefault();
eventHandlers['move'] && eventHandlers['move'](coords, event);
}
});
}

element.on(getEvents(pointerTypes, 'end'), function(event) {
if (!active) return;
function swipeCancel(event) {
if (!active) {
return;
}
active = false;
eventHandlers['end'] && eventHandlers['end'](getCoordinates(event), event);
});
eventHandlers['cancel'] && eventHandlers['cancel'](event);
}

function bindEvent(eventName, callback) {
var events = getEvents(pointerTypes, eventName);
if (events) {
element.on(events, callback);
angular.element($window).on(events, ifOutside(callback));
}
}

element.on(getEvents(pointerTypes, 'start'), swipeStart);

bindEvent('cancel', swipeCancel);
bindEvent('move', swipeMove);
bindEvent('end', swipeEnd);
}
};
}]);
Expand Down
92 changes: 58 additions & 34 deletions test/ngTouch/directive/ngSwipeSpec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use strict';

// Wrapper to abstract over using touch events or mouse events.
var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, endEvent) {
var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent, endEvent, enterEvent, leaveEvent) {
describe('ngSwipe with ' + description + ' events', function() {
var element;

Expand Down Expand Up @@ -36,11 +36,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent, {
keys : [],
x : 100,
y : 20
keys: [],
x: 100,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 20,
y: 20
Expand All @@ -53,12 +53,12 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
$rootScope.$digest();
expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent,{
browserTrigger(element, startEvent, {
keys: [],
x: 20,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 90,
y: 20
Expand All @@ -72,11 +72,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent, {
keys : [],
x : 100,
y : 20
keys: [],
x: 100,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 20,
y: 20
Expand All @@ -89,11 +89,11 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
$rootScope.$digest();

browserTrigger(element, startEvent, {
keys : [],
x : 100,
y : 20
keys: [],
x: 100,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 20,
y: 20
Expand All @@ -108,17 +108,17 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,

expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent,{
browserTrigger(element, startEvent, {
keys: [],
x: 90,
y: 20
});
browserTrigger(element, moveEvent,{
browserTrigger(element, moveEvent, {
keys: [],
x: 70,
y: 200
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 20,
y: 20
Expand All @@ -134,12 +134,12 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,

expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent,{
browserTrigger(element, startEvent, {
keys: [],
x: 90,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 80,
y: 20
Expand All @@ -148,25 +148,50 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
expect($rootScope.swiped).toBeUndefined();
}));

it('should not swipe if the swipe leaves the element', inject(function($rootScope, $compile, $rootElement) {
it('should swipe to the left if the swipe leaves the element', inject(function($rootScope, $compile, $rootElement, $window) {
element = $compile('<div ng-swipe-left="swiped = true"></div>')($rootScope);

$rootElement.append(element);
$rootScope.$digest();

expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent, {
keys: [],
x: 100,
y: 20
});
browserTrigger(element, leaveEvent, {});
browserTrigger(angular.element($window.document.body), endEvent, {
keys: [],
x: 20,
y: 20
});

expect($rootScope.swiped).toBeDefined();
}));

it('should swipe to the right if the swipe leaves the element', inject(function($rootScope, $compile, $rootElement, $window) {
element = $compile('<div ng-swipe-right="swiped = true"></div>')($rootScope);

$rootElement.append(element);
$rootScope.$digest();

expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, startEvent,{
browserTrigger(element, startEvent, {
keys: [],
x: 20,
y: 20
});
browserTrigger(element, moveEvent,{
browserTrigger(element, leaveEvent, {});
browserTrigger(angular.element($window.document.body), endEvent, {
keys: [],
x: 40,
x: 100,
y: 20
});

expect($rootScope.swiped).toBeUndefined();
expect($rootScope.swiped).toBeDefined();
}));

it('should not swipe if the swipe starts outside the element', inject(function($rootScope, $compile, $rootElement) {
Expand All @@ -176,12 +201,12 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,

expect($rootScope.swiped).toBeUndefined();

browserTrigger(element, moveEvent,{
browserTrigger(element, moveEvent, {
keys: [],
x: 10,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 90,
y: 20
Expand All @@ -201,12 +226,12 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
eventFired = true;
});

browserTrigger(element, startEvent,{
browserTrigger(element, startEvent, {
keys: [],
x: 100,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 20,
y: 20
Expand All @@ -225,12 +250,12 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
eventFired = true;
});

browserTrigger(element, startEvent,{
browserTrigger(element, startEvent, {
keys: [],
x: 20,
y: 20
});
browserTrigger(element, endEvent,{
browserTrigger(element, endEvent, {
keys: [],
x: 100,
y: 20
Expand All @@ -240,6 +265,5 @@ var swipeTests = function(description, restrictBrowsers, startEvent, moveEvent,
});
};

swipeTests('touch', /* restrictBrowers */ true, 'touchstart', 'touchmove', 'touchend');
swipeTests('mouse', /* restrictBrowers */ false, 'mousedown', 'mousemove', 'mouseup');

swipeTests('touch', /* restrictBrowers */ true, 'touchstart', 'touchmove', 'touchend', 'touchenter', 'touchleave');
swipeTests('mouse', /* restrictBrowers */ false, 'mousedown', 'mousemove', 'mouseup', 'mouseenter', 'mouseout');