Early stages of gesture recognition for touch-events.
This is intended to be used in qualified form.
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 }
onMove : (Event -> msg) -> Html.Attribute msg
Record an ongoing touch gesture.
onEnd : (Event -> msg) -> Html.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) -> Html.Attribute msg
Record the start of a touch gesture.
onEndWithOptions : { stopPropagation : Basics.Bool, preventDefault : Basics.Bool } -> (Event -> msg) -> Html.Attribute msg
Record the end of a touch gesture with options.
A Gesture
! You'll want to keep one of these around in your model and
update it whenever applicable.
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!
{ x : Basics.Float, y : Basics.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 Basics.Float
For a finished move, checks how much you move horizontally, from start to finish.
deltaY : Gesture -> Maybe Basics.Float
For a finished move, checks how much you move vertically, from start to finish.
isTap : Gesture -> Basics.Bool
Checks if a given gesture is actually a (single) tap
isUpSwipe : Basics.Float -> Gesture -> Basics.Bool
Is this gesture finished and did we move more than sensitivity
(difference between touchstart
and touchend
in px) to the top?
isDownSwipe : Basics.Float -> Gesture -> Basics.Bool
Is this gesture finished and did we move more than sensitivity
(difference between touchstart
and touchend
in px) to the bottom?
isLeftSwipe : Basics.Float -> Gesture -> Basics.Bool
Is this gesture finished and did we move more than sensitivity
(difference between touchstart
and touchend
in px) to the left?
isRightSwipe : Basics.Float -> Gesture -> Basics.Bool
Is this gesture finished and did we move more than sensitivity
(difference between touchstart
and touchend
in px) to the right?