- service in module ngTouch
The $swipe
service is a service that abstracts the messier details of hold-and-drag swipe behavior, to make implementing swipe-related directives more convenient.
Requires the ngTouch
module to be installed.
$swipe
is used by the ngSwipeLeft
and ngSwipeRight
directives in ngTouch
.
Usage
The $swipe
service is an object with a single method: bind
. bind
takes an element which is to be watched for swipes, and an object with four handler functions. See the documentation for bind
below.
Methods
-
bind();
The main method of
$swipe
. It takes an element to be watched for swipe motions, and an object containing event handlers. The pointer types that should be used can be specified via the optional third argument, which is an array of strings'mouse'
and'touch'
. By default,$swipe
will listen formouse
andtouch
events.The four events are
start
,move
,end
, andcancel
.start
,move
, andend
receive as a parameter a coordinates object of the form{ x: 150, y: 310 }
and the rawevent
.cancel
receives the rawevent
as its single parameter.start
is called on eithermousedown
ortouchstart
. After this event,$swipe
is watching fortouchmove
ormousemove
events. These events are ignored until the total distance moved in either dimension exceeds a small threshold.Once this threshold is exceeded, either the horizontal or vertical delta is greater.
- If the horizontal distance is greater, this is a swipe and
move
andend
events follow. - If the vertical distance is greater, this is a scroll, and we let the browser take over. A
cancel
event is sent.
move
is called onmousemove
andtouchmove
after the above logic has determined that a swipe is in progress.end
is called when a swipe is successfully completed with atouchend
ormouseup
.cancel
is called either on atouchcancel
from the browser, or when we begin scrolling as described above. - If the horizontal distance is greater, this is a swipe and
Please login to continue.