A module providing swipe gesture services and directives.
Services
$swipe service
- bind - method
An adaptation of ngTouch.$swipe
, it is basically the same despite of:
- It is based on $touch
- Swipes are recognized by touch velocity and direction
- It does not require
ngTouch
thus is better compatible with fastclick.js - Swipe directives are nestable
- It allows to unbind
It has only one difference in interface, and its about how to pass
pointerTypes
:// ngTouch.$swipe $swipe.bind(..., ['mouse', ... }); // mobile-angular-ui.gestures.swipe.$swipe $swipe.bind(..., pointerTypes: { mouse: { start: 'mousedown', ...} });
This is due to the fact that the second parameter of
$swipe.bind
is destinated to options for underlying$touch
service.
Methods in $swipe
bind
method in $swipe
$swipe.bind(element, eventHandlers, [options]) ⟶ function
Bind swipe gesture handlers for an element.
var unbind = $swipe.bind(elem, {
end: function(touch) {
console.log('Swiped:', touch.direction);
unbind();
}
});
Swipes Detection
Before consider a touch to be a swipe Mobile Angular UI verifies that:
- Movement is quick. Average touch velocity should exceed a
VELOCITY_THRESHOLD
. - Movement is linear.
- Movement has a clear, non-ambiguous direction. So we can assume without error that underlying
touch.direction
is exactly the swipe direction. For that movement is checked against anANGLE_THRESHOLD
.
Param | Type | Description |
---|---|---|
element | Element | $element | The element to observe for swipe gestures. |
eventHandlers | object | An object with handlers for specific swipe events. |
[eventHandlers.start] | function | The callback for swipe start event. |
[eventHandlers.end] | function | The callback for swipe end event. |
[eventHandlers.move] | function | The callback for swipe move event. |
[eventHandlers.cancel] | function | The callback for swipe cancel event. |
[options] | object | Options to be passed to underlying $touch.bind function. |
Directives
uiSwipeLeft directive
Specify custom behavior when an element is swiped to the left on a touchscreen device. A leftward swipe is a quick, right-to-left slide of the finger.
Param | Type | Description |
---|---|---|
uiSwipeLeft | expression | An expression to be evaluated on leftward swipe. |
uiSwipeRight directive
Specify custom behavior when an element is swiped to the right on a touchscreen device. A rightward swipe is a quick, left-to-right slide of the finger.
Param | Type | Description |
---|---|---|
uiSwipeRight | expression | An expression to be evaluated on rightward swipe. |
comments powered by Disqus