leforestier / elm-hammer-events / HammerEvents


type alias HammerEvent =
{ deltaX : Basics.Float
, deltaY : Basics.Float
, deltaTime : Basics.Float
, distance : Basics.Float
, angle : Basics.Float
, velocityX : Basics.Float
, velocityY : Basics.Float
, velocity : Basics.Float
, direction : Direction
, scale : Basics.Float
, rotation : Basics.Float
, center : Point
, pointerType : String
, eventType : Input
, isFirst : Basics.Bool
, isFinal : Basics.Bool 
}

Record representing an event as emitted by the Hammer.js library.

See https://hammerjs.github.io/api/#event-object for explanation about the fields.

Tap

onTap : (HammerEvent -> msg) -> Html.Attribute msg

Press

onPress : (HammerEvent -> msg) -> Html.Attribute msg

onPressUp : (HammerEvent -> msg) -> Html.Attribute msg

Swipe

By default, only horizontal swipe gestures are detected (onSwipeLeft and onSwipeRight will work, but onSwipeDown or onSwipeUp won't).

To detect in all directions, add this to your initialization script in Javascript:

hammertime.get('swipe').set({direction: Hammer.DIRECTION_ALL })

To detect only vertical swipes, use:

hammertime.get('swipe').set({direction: Hammer.DIRECTION_VERTICAL })

onSwipe : (HammerEvent -> msg) -> Html.Attribute msg

onSwipeLeft : (HammerEvent -> msg) -> Html.Attribute msg

onSwipeRight : (HammerEvent -> msg) -> Html.Attribute msg

onSwipeUp : (HammerEvent -> msg) -> Html.Attribute msg

onSwipeDown : (HammerEvent -> msg) -> Html.Attribute msg

Rotation

To be able to use onRotate, onRotateStart, onRotateEnd and onRotateCancel, you need to add this line to your Javascript initialization script:

hammertime.get('rotate').set({ enable: true });

onRotate : (HammerEvent -> msg) -> Html.Attribute msg

onRotateStart : (HammerEvent -> msg) -> Html.Attribute msg

onRotateMove : (HammerEvent -> msg) -> Html.Attribute msg

onRotateEnd : (HammerEvent -> msg) -> Html.Attribute msg

onRotateCancel : (HammerEvent -> msg) -> Html.Attribute msg

Pinch

To be able to use onPinch, onPinchStart, onPinchEnd, onPinchMove etc... you need to add this line to your Javascript initialization script:

hammertime.get('pinch').set({ enable: true });

onPinch : (HammerEvent -> msg) -> Html.Attribute msg

onPinchStart : (HammerEvent -> msg) -> Html.Attribute msg

onPinchEnd : (HammerEvent -> msg) -> Html.Attribute msg

onPinchMove : (HammerEvent -> msg) -> Html.Attribute msg

onPinchIn : (HammerEvent -> msg) -> Html.Attribute msg

onPinchOut : (HammerEvent -> msg) -> Html.Attribute msg

onPinchCancel : (HammerEvent -> msg) -> Html.Attribute msg

Pan

By default, only horizontal pan gestures are detected (onPanLeft and onPanRight will work, but onPanDown or onPanUp won't).

To detect in all directions, add this to your initialization script in Javascript:

hammertime.get('pan').set({direction: Hammer.DIRECTION_ALL })

To detect only in the vertical direction, use:

hammertime.get('pan').set({direction: Hammer.DIRECTION_VERTICAL })

onPan : (HammerEvent -> msg) -> Html.Attribute msg

onPanStart : (HammerEvent -> msg) -> Html.Attribute msg

onPanEnd : (HammerEvent -> msg) -> Html.Attribute msg

onPanLeft : (HammerEvent -> msg) -> Html.Attribute msg

onPanRight : (HammerEvent -> msg) -> Html.Attribute msg

onPanUp : (HammerEvent -> msg) -> Html.Attribute msg

onPanDown : (HammerEvent -> msg) -> Html.Attribute msg

onPanMove : (HammerEvent -> msg) -> Html.Attribute msg

onPanCancel : (HammerEvent -> msg) -> Html.Attribute msg

Custom event handler

onHammer : String -> (HammerEvent -> MessageWithAttrs msg) -> Html.Attribute msg

All the functions onTap, onSwipe, onRotate etc... have been defined using the onHammer function.

You probably don't need to use it directly unless you've defined a custom type event using Hammer.js in Javascript.


type alias MessageWithAttrs msg =
{ message : msg
, stopPropagation : Basics.Bool
, preventDefault : Basics.Bool 
}


type alias Direction =
Basics.Int

An integer representing the direction of the movement. It's a combination of flags (see https://hammerjs.github.io/api/#directions)

directionNone : Direction

directionLeft : Direction

directionRight : Direction

directionUp : Direction

directionDown : Direction

directionHorizontal : Direction

directionVertical : Direction

directionAll : Direction


type alias Input =
Basics.Int

see https://hammerjs.github.io/api/#input-events

inputStart : Input

inputMove : Input

inputEnd : Input

inputCancel : Input


type alias Point =
{ x : Basics.Float, y : Basics.Float }

hammerEventDecoder : Json.Decode.Decoder HammerEvent

You shouldn't need this. The events you receive from onTap, onSwipe etc... are already decoded into an HammerEvent Elm record.

I let this function public just in case you want to use it to make very custom things.

hammerEventToValue : HammerEvent -> Json.Encode.Value

This function encodes a HammerEvent Elm record back to a Javascript object.

You probably won't need this unless you want to display an event as a Json string in your views.