(still in early development)
For what I've been working on I needed an abstraction for reasoning about and dealing with touch events.
If you want to do something on touchhold
for example. There is no such thing natively. There's just touchstart
, touchmove
, touchend
(and a couple others for determining how the touch ended).
In order to let your app respond to a hold
event you're really wanting to listen for an event that doesn't exist.
I started with Hammer.js, a very nice, and far more mature touch library than this.
But, ultimately it didn't fit my needs because I wanted something that would let me very selectively preventDefault
on events to either allow or disallow normal browser scrolling based on rules and conditions or even the direction of the first touchmove
event. There may be a way to do that with Hammer.js but I didn't find one.
I also wanted to be able to handle multiple individual touches individually if I so chose.
So I started modeling touches with... Model code. Specifically statey as it turns out intelligently evented derived properties are very useful for efficiently modeling user behavior.
Unfortunately, in order to give this level of control I've ended up with an API that's a bit trickier to wrap your mind around.
You create a single touch listener that gets called with each touch event (real or similated, like hold) and gives your callback two arguments:
- event {Event | undefined} The native undecorated browser touch event if it exists.
- touch {TouchModel} The model that represents the touch currently in progress.
This TouchModel contains all the information it has about that whole touch up to that point. So, if you initiate a touch, move it a bit, then lift it. At each point along the way that same event handlers is being called, with increasingly more information added to the touch model it gets called with.
var TouchListener = require('fingertips');
var listener = new TouchListener(this.el, function (event, touch) {
// do stuff here
// for example prevent sideways native scrolling, but allow native up and down scrolling
if (touch.firstAxis === 'x' && !model.sorting) {
// on hold `e` won't exist
if (e) e.preventDefault();
return;
}
// something else
if (touch.x > 75) {
// do something
return;
}
// some other condition
if (touch.done) {
// touch event is over
myapp.kaboom();
return;
}
});
For a full reference of what you can learn from the touch model. See the props
, session
and derived
properties in the touch-model.js
file.
Currently only structured for use with Browserify/CommonJS. Install from npm.
npm i fingertips
- 0.0.1 diff Switching to statey instead of human-model
- 0.0.0 initial publish
Written by @HenrikJoreteg, still rough, use with caution.
MIT