reactive-touch

    1.0.1 • Public • Published

    reactive-touch

    Configurable touch bindings for reactive with Hammer. Use on-swipe, on-tap, on-rotate and many more in your reactive views. Also supports bindings for custom recognizers, like on-doubletap.

    Jump to: Quickstart - Live example - Install - Usage - Test - License

    Browser support

    Build Status

    See Hammer browser support and reactive for actual browser support.

    Quickstart

    var reactive = require('reactive')
      , touch = require('reactive-touch')
     
    var tpl  = '<div on-swipeleft="swipe">Swipe left</div>'
    var view = reactive(tpl, null, {
      bindings: touch(),
      delegate: {
        swipe: function(ev, ctx) {
          console.log('you swiped left')
        }
      }
    })

    Live example

    This live example demonstrates:

    • Custom recognizers
    • Reactive enabling of events
    • Per-element and per-view options

    Install

    npm i reactive-touch
    

    Then bundle for the browser with browserify.

    Usage

    touch([bindings][, options])

    • bindings: existing bindings to extend
    • options: per-view options (see below)

    Handlers

    Your view can react to any Hammer event by adding attributes in the form of on-[event]="handler name". If no handler name is given, it is assumed to be the event name. These are the same:

    <div on-pan></div>
    <div on-pan="pan"></div>

    The handler will receive two arguments, similar to reactive's built-in on-click:

    • ev: event data
    • ctx: reactive instance

    Options

    Each element with touch bindings gets a set of recognizers. Recognizers can be configured per-view and per-element.

    Per-element

    Add attributes in the form of [recognizer]-[option]="value". Values will be interpolated if wrapped in brackets, and cast to integers, floats or booleans if necessary. Examples:

    <div on-pan pan-direction="horizontal"></div>
    <div on-rotateend="rotate" rotate-threshold="{ modelProperty + 10 }"></div>
    <div on-swipe swipe-velocity="0.65"></div>
    <div on-tap tap-taps="2">double tap</div>
    <div on-pinch on-rotate pinch-with="rotate"></div>
    <div on-press press-enable="{ someMethod }"></div>

    Per-view

    Group options by lowercase recognizer name.

    touch(bindings, {
      swipe: {
        threshold: 100
      }
    })

    Custom recognizers

    Simply add a group to options with a custom name. Optionally set recognizer, required if the name doesn't contain a standard name. In the following example, recognizer could have been left out.

    <div on-tap on-doubletap></div>
    touch(bindings, {
      tap: {
        requireFailure: 'doubletap'
      },
      doubletap: {
        recognizer: 'Tap',
        taps: 2,
        with: 'tap'
      }
    })

    List of options

    Common Description
    enable If false, no events will be emitted. Defaults to true.
    with A lowercase recognizer name (e.g. tap or mycustomtap) to recognize simultaneously. Shortcut for recognizeWith().
    requireFailure A lowercase recognizer name that is required to fail before recognizing. Shortcut for requireFailure().
    setup A view method name, called after recognizer is created and options are set. For advanced usage. Receives three arguments: el, recognizer and ctx.

    For direction, use a Hammer.DIRECTION_* constant or a shorthand like all, horizontal, left, etc. Please follow the links below for a description of the other options.

    Recognizer Options
    Swipe threshold, pointers, direction, velocity
    Pan pointers, threshold, direction
    Pinch pointers, threshold
    Rotate pointers, threshold
    Tap pointers, taps, interval, time, threshold, posThreshold
    Press pointers, threshold, time

    List of events

    Recognizer Events
    Swipe swipe, swipeleft, swiperight, swipeup, swipedown
    Pan pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
    Pinch pinch, pinchstart, pinchmove, pinchend, pinchcancel, pinchin, pinchout
    Rotate rotate, rotatestart, rotatemove, rotateend, rotatecancel
    Tap tap
    Press press

    Test

    npm i zuul -g
    npm test
    

    Or local:

    npm run test-local
    

    License

    MIT © Vincent Weevers

    Install

    npm i reactive-touch

    DownloadsWeekly Downloads

    3

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • vweevers