Swipe

Early stages of gesture recognition for touch-events.

This is intended to be used in qualified form.

Hooking it up

In your model:

{ gesture = Swipe.Gesture }

In your init:

{ gesture = Swipe.blanco }

In your Msg:

type Msg
    = Swipe Swipe.Event
    | SwipeEnd Swipe.Event

In your view:

Html.div
    [ Swipe.onStart Swipe
    , Swipe.onMove Swipe
    , Swipe.onEnd SwipeEnd
    ]
    [ Html.text "Swipe me!" ]

In your update:

Swipe touch ->
    { model | gesture = Swipe.record touch model.gesture }


SwipeEnd touch ->
    let
        gesture : Swipe.Gesture
        gesture =
            Swipe.record touch model.gesture


        -- use inspection functions like `isTap` and `isLeftSwipe`
    in
    { model | gesture = Swipe.blanco }

Events stuff

onMove : (Event -> msg) -> Attribute msg

Record an ongoing touch gesture.

onEnd : (Event -> msg) -> Attribute msg

Record the end of a touch gesture.

Note: This sets preventDefault = True to avoid double events from occuring when the same DOM node also has an onClick attribute. Using preventDefault means that if a touchend event happens, the onClick handler won't fire.

If you have a case where you need to support a regular onClick event nested in a node that has onEnd on it (for example; a container with swipe support, which contains a button from an external package), please see onEndWithOptions.

onStart : (Event -> msg) -> Attribute msg

Record the start of a touch gesture.

onEndWithOptions :

{ stopPropagation : Bool

, preventDefault : Bool

}

-> (Event -> msg)

-> Attribute msg

Record the end of a touch gesture with options.

Keep some state around

type Gesture

A Gesture! You'll want to keep one of these around in your model and update it whenever applicable.

type Event

A single Swipe.Event. Gestures are made up of these, internally.

blanco : Gesture

Get yourself a blanco gesture, as if no touches have happened at all.

After a touchend event, you'll probably want to reset to this, too.

record : Event -> Gesture -> Gesture

Our cute little update-like function!

Get yourself some info

type alias Position =

{ x : Float

, y : Float

}

A position, similar to the one in the elm-lang/mouse package.

locate : Event -> Position

Useful if you want to know the current position during a stream of events.

deltaX : Gesture -> Maybe Float

For a finished move, checks how much you move horizontally, from start to finish.

deltaY : Gesture -> Maybe Float

For a finished move, checks how much you move vertically, from start to finish.

isTap : Gesture -> Bool

Checks if a given gesture is actually a (single) tap

isUpSwipe : Float -> Gesture -> Bool

Is this gesture finished and did we move more than sensitivity (difference between touchstart and touchend in px) to the top?

isDownSwipe : Float -> Gesture -> Bool

Is this gesture finished and did we move more than sensitivity (difference between touchstart and touchend in px) to the bottom?

isLeftSwipe : Float -> Gesture -> Bool

Is this gesture finished and did we move more than sensitivity (difference between touchstart and touchend in px) to the left?

isRightSwipe : Float -> Gesture -> Bool

Is this gesture finished and did we move more than sensitivity (difference between touchstart and touchend in px) to the right?

Modules

Swipe