Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    fingertipspublic

    fingertips

    (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.

    Installing

    Currently only structured for use with Browserify/CommonJS. Install from npm.

    npm i fingertips

    Changelog

    • 0.0.1 diff Switching to statey instead of human-model
    • 0.0.0 initial publish

    Credits

    Written by @HenrikJoreteg, still rough, use with caution.

    License

    MIT

    Keywords

    install

    npm i fingertips

    Downloadsweekly downloads

    4

    version

    0.0.4

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar