dullbananas / elm-touch / Touch

This module exposes an API for handling touch events.

Setup


type Msg

Represents messages handled by this library


type Model msg

Represents the internal model used by this library. The msg should be the type of message used in your library; not Touch.Msg.

initModel : List (Listener msg) -> Model msg

Use this to initialize the state of Touch.Model and to specify the listeners.

update : Msg -> Model msg -> (Model msg -> model) -> ( model, Platform.Cmd.Cmd msg )

This is used to update Touch.Model in response to a Touch.Msg. It also creates a Cmd to trigger listeners. Use it like this:

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        TouchMsg touchMsg ->
            Touch.update
                touchMsg
                model.touchMsg
                ( \newTouchModel -> { model | touchModel = newTouchModel } )

element : List (Html.Attribute msg) -> (Msg -> msg) -> Html msg

Creates an HTML element that responds to touch events. The second argument must be a function that converts a Touch.Msg to msg.

Coordinates

Coordinates (returned by some listeners) start at the top left:

┏━━━━━━━━━━━━━━━━━▶
┃(0,0) (1,0) (2,0)
┃
┃(0,1) (1,1) (2,1)
┃
┃(0,2) (1,2) (2,2)
┃
┃(0,3) (1,3) (2,3)
▼

Listeners


type alias Listener msg =
Internal.Listener msg

Listeners are like subscriptions but for touch events. They are triggered by finger movement.

onMove : { fingers : Basics.Int } -> (Basics.Float -> Basics.Float -> msg) -> Listener msg

A listener that triggers when fingers move. The second argument must take the X and Y distances (in pixels) and return a msg. The X and Y values are deltas, so they are higher when the fingers are moving faster and 0 when they don't move.

onPinch : (Basics.Float -> msg) -> Listener msg

Triggers when two fingers move apart. A negative value occurs when the fingers come closer together.

onRotate : (Basics.Float -> msg) -> Listener msg

Triggered when two fingers rotate. This uses standard Elm angles (radians). One full turn is pi * 2.