vector-touch

Represent multitouch with vec2

Rant

If you desire reusable software modules, you must implement ideas that are broadly applicable. They should be based on ideas that are true in many places.

So much "front-end" stuff is just about generating HTML or CSS. But, there is nothing particularily true about html or css. It's just a tool for typesetting, and by no means the best one.

But what is true is geometry. Geometry is true everywhere. It will still be true when no body uses HTML, if that ever happens. Yet, everything on the html page is a rectangle or a point.

Call something by it's true name and you have power over it.

Html is merely theurgy, speak the right incartations and the browser spirits with appear, but say the wrong ones and the will hurt you.

But, geometry is true Rule Magic!

If you can speak the words of power, you will control that which breaths life into the browser spirits and they will be forced to do your bidding.

See also: vec2

Example

track all touches on the page.

var touches = require('vector-touch')

touches(function (touch) {
  //handle start here...

  //follow touch...
  touch.change(function (touch) {
    //handle move

    if(touch.end) {
      //handle end of touch.

    }
  })
  //the change listener is automatically removed when finger is lifted!
})

Note that this pattern is kinda like a server A touch is like a stream, and your app recieves many touches, potentially in parallel!

API

touches(el?, listener(touch, touches))

Listen for touches - when a touch starts, the listener is called. The listener should then call touch.change(onChange) to receive updates as the touch moves.

Optionally, you may pass in an element to detect touches on, by default it will detect touches on the body itself.

Touch

Object representing a touch. This is an subclass of Vec2 with a few extra properties.

touch.x      //x coord (clientX)
touch.y      //y coord (clientY)
touch.force  //firmness of touch
touch.target //element being touched
touch.event  //DOM original dom touch event
touch.type   //'start' 'move' or 'end'
touch.end    //boolean - is the touch ended.
touch.change(function () {
  //called whenever x or y changes.
})

License

MIT