leforestier/elm-hammer-events/1.0.1

HammerEvents

type alias HammerEvent =
{ deltaX : Float
, deltaY : Float
, deltaTime : Float
, distance : Float
, angle : Float
, velocityX : Float
, velocityY : Float
, velocity : Float
, direction : Direction
, scale : Float
, rotation : Float
, center : Point
, pointerType : String
, eventType : Input
, isFirst : Bool
, isFinal : 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) -> Attribute msg

Press

onPress : (HammerEvent -> msg) -> Attribute msg
onPressUp : (HammerEvent -> msg) -> 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) -> Attribute msg
onSwipeLeft : (HammerEvent -> msg) -> Attribute msg
onSwipeRight : (HammerEvent -> msg) -> Attribute msg
onSwipeUp : (HammerEvent -> msg) -> Attribute msg
onSwipeDown : (HammerEvent -> msg) -> 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) -> Attribute msg
onRotateStart : (HammerEvent -> msg) -> Attribute msg
onRotateMove : (HammerEvent -> msg) -> Attribute msg
onRotateEnd : (HammerEvent -> msg) -> Attribute msg
onRotateCancel : (HammerEvent -> msg) -> 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) -> Attribute msg
onPinchStart : (HammerEvent -> msg) -> Attribute msg
onPinchEnd : (HammerEvent -> msg) -> Attribute msg
onPinchMove : (HammerEvent -> msg) -> Attribute msg
onPinchIn : (HammerEvent -> msg) -> Attribute msg
onPinchOut : (HammerEvent -> msg) -> Attribute msg
onPinchCancel : (HammerEvent -> msg) -> 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) -> Attribute msg
onPanStart : (HammerEvent -> msg) -> Attribute msg
onPanEnd : (HammerEvent -> msg) -> Attribute msg
onPanLeft : (HammerEvent -> msg) -> Attribute msg
onPanRight : (HammerEvent -> msg) -> Attribute msg
onPanUp : (HammerEvent -> msg) -> Attribute msg
onPanDown : (HammerEvent -> msg) -> Attribute msg
onPanMove : (HammerEvent -> msg) -> Attribute msg
onPanCancel : (HammerEvent -> msg) -> Attribute msg

Custom event handler

onHammer : String -> (HammerEvent -> MessageWithAttrs msg) -> 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 : Bool
, preventDefault : Bool
}
type alias Direction =
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
directionVertical : Direction
directionAll : Direction
inputStart : Input
inputMove : Input
inputEnd : Input
inputCancel : Input
type alias Point =
{ x : Float
, y : Float
}
hammerEventDecoder : 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 -> 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.