aurelia-hammer
This is a Aurelia plugin providing the hammer-swipe
and hammer-tap
and hammer-press
and hammer-hold
Custom Attributes.
It uses HammerJS to detect the gesture.
swipe
, tap
, longtap
, press
, and hold
are the only gestures supported at the moment. If you need another, feel free to open an issue or send a PR.
- Swipe - Captures left/right swipe gestures
- Tap - Captures when the pointer is down for up to 250ms without movement and released
- Press - Captures when the pointer is down for 251ms without movement
- LongTap - Captures tap and press events.
- Hold - Captures when the pointer is down for 1000ms without movement
Installation
jspm install github:benib/aurelia-hammer
Then load like this in your apps configure function:
aurelia.use
//...
.plugin('benib/aurelia-hammer')
//...
Swipe Usage
In your View
<div hammer-swipe.call="handleSwipe($event)">
</div>
In your View Model
handleSwipe($event) {
if ($event.direction === 'left') {
} else if ($event.direction === 'right') {
}
// here you have $event.hammerEvent holding the original event from HammerJS.
}
Tap Usage
In your View
<div hammer-tap.call="handleTap($event)">
</div>
In your View Model
handleTap($event) {
// here you have $event.hammerEvent holding the original event from HammerJS.
}
LongTap Usage
In your View
<div hammer-longtap.call="handleLongTap($event)">
</div>
In your View Model
handleLongTap($event) {
// here you have $event.hammerEvent holding the original event from HammerJS.
}
Press Usage
In your View
<div hammer-press.call="handlePress($event)">
</div>
In your View Model
handlePress($event) {
// here you have $event.hammerEvent holding the original event from HammerJS.
}
Hold Usage
In your View
<div hammer-hold.call="handleHold($event)">
</div>
In your View Model
handleHold($event) {
// here you have $event.hammerEvent holding the original event from HammerJS.
}