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
ngTouchthus 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.bindis destinated to options for underlying$touchservice.
Methods in $swipe
bind
method in $swipe
$swipe.bind(element, eventHandlers, [options]) ⟶ functionBind 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.directionis 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