From 10a312485951ee590cb9a310650a9243e388e25e Mon Sep 17 00:00:00 2001 From: Krzysztof Urbas Date: Sun, 21 Jan 2018 14:14:09 +0100 Subject: [PATCH] update example to 0.18, add getDirection function --- examples/SwipeExample.elm | 31 +++++++--------- src/TouchEvents.elm | 78 +++++++++++++++++++++++++-------------- 2 files changed, 63 insertions(+), 46 deletions(-) diff --git a/examples/SwipeExample.elm b/examples/SwipeExample.elm index 4d0233d..f1af3a1 100644 --- a/examples/SwipeExample.elm +++ b/examples/SwipeExample.elm @@ -1,14 +1,13 @@ module SwipeExample exposing (..) import Html exposing (..) -import Html.App as App import Html.Attributes exposing (style) -import TouchEvents as TE +import TouchEvents -main : Program Never +main : Program Never Model Msg main = - App.beginnerProgram + Html.beginnerProgram { model = init , view = view , update = update @@ -16,21 +15,19 @@ main = type alias Model = - { touchPositionX : Maybe Float - , touchPositionY : Maybe Float - , direction : Maybe TE.Direction + { lastTouch : TouchEvents.Touch + , direction : Maybe TouchEvents.Direction } type Msg - = OnTouchStart TE.Touch - | OnTouchEnd TE.Touch + = OnTouchStart TouchEvents.Touch + | OnTouchEnd TouchEvents.Touch init : Model init = - { touchPositionX = Nothing - , touchPositionY = Nothing + { lastTouch = TouchEvents.Touch 0 0 , direction = Nothing } @@ -40,16 +37,14 @@ update msg model = case msg of OnTouchStart touchEvent -> { model - | touchPositionX = Just touchEvent.clientX - , touchPositionY = Just touchEvent.clientY + | lastTouch = touchEvent } OnTouchEnd touchEvent -> { model - | touchPositionX = Just touchEvent.clientX - , touchPositionY = Just touchEvent.clientY + | lastTouch = touchEvent , direction = - model.touchPositionX `Maybe.andThen` (\x -> Just <| TE.getDirectionX x touchEvent.clientX) + TouchEvents.getDirection model.lastTouch touchEvent } @@ -59,8 +54,8 @@ view model = [] [ div [ style divStyle - , TE.onTouchEvent TE.TouchStart OnTouchStart - , TE.onTouchEvent TE.TouchEnd OnTouchEnd + , TouchEvents.onTouchEvent TouchEvents.TouchStart OnTouchStart + , TouchEvents.onTouchEvent TouchEvents.TouchEnd OnTouchEnd ] [] , span [ style [ ( "display", "block" ) ] ] [ text <| toString model ] diff --git a/src/TouchEvents.elm b/src/TouchEvents.elm index 32fe444..074acb9 100644 --- a/src/TouchEvents.elm +++ b/src/TouchEvents.elm @@ -4,6 +4,7 @@ module TouchEvents , Direction(..) , Touch , emptyTouch + , getDirection , getDirectionX , getDirectionY , onTouchEvent @@ -14,13 +15,19 @@ module TouchEvents {-| The is a library to provide touch event helpers + # Types + @docs TouchEvent, Direction, Touch + # Helpers -@docs emptyTouch, getDirectionX, getDirectionY + +@docs emptyTouch, getDirection, getDirectionX, getDirectionY + # Event Handlers + @docs onTouchEvent, onTouchEnd, onTouchStart, onTouchMove -} @@ -64,6 +71,33 @@ emptyTouch = } +{-| Gets the direction of the swipe +-} +getDirection : Touch -> Touch -> Maybe Direction +getDirection startTouch endTouch = + let + treshold = + 50 + + diffX = + endTouch.clientX - startTouch.clientX + + diffY = + startTouch.clientY - endTouch.clientY + in + if (abs diffX) < treshold && (abs diffY) < treshold then + Nothing + else if (abs diffX) > (abs diffY) then + if diffX > 0 then + Just Right + else + Just Left + else if diffY > 0 then + Just Up + else + Just Down + + {-| Gets the direction of the swipe on the x axis (`Left` or `Right`) -} getDirectionX : Float -> Float -> Direction @@ -89,16 +123,12 @@ getDirectionY start end = This takes a TouchEvent type and application `Msg` type. The `Msg` type should take a `TouchEvent.Touch` type. -``` -type Msg - = UserSwipeStart TouchEvents.Touch + type Msg + = UserSwipeStart TouchEvents.Touch + + view model = + div [ TouchEvents.onTouchEvent TouchEvents.TouchStart UserSwipeStart ] [] -view model = - div - [ TouchEvents.onTouchEvent TouchEvents.TouchStart UserSwipeStart - ] - [] -``` -} onTouchEvent : TouchEvent -> (Touch -> msg) -> Attribute msg onTouchEvent eventType msg = @@ -118,16 +148,12 @@ onTouchEvent eventType msg = Takes the application `Msg` type which should take `TouchEvents.Touch` as a payload -``` -type Msg - = UserSwipeEnd TouchEvents.Touch + type Msg + = UserSwipeEnd TouchEvents.Touch + + view model = + div [ TouchEvents.onTouchEnd UserSwipeEnd ] [] -view model = - div - [ TouchEvents.onTouchEnd UserSwipeEnd - ] - [] -``` -} onTouchEnd : (Touch -> msg) -> Attribute msg onTouchEnd msg = @@ -139,16 +165,12 @@ onTouchEnd msg = Takes the application `Msg` type which should take `TouchEvents.Touch` as a payload -``` -type Msg - = UserSwipeStart TouchEvents.Touch + type Msg + = UserSwipeStart TouchEvents.Touch + + view model = + div [ TouchEvents.onTouchStart UserSwipeStart ] [] -view model = - div - [ TouchEvents.onTouchStart UserSwipeStart - ] - [] -``` -} onTouchStart : (Touch -> msg) -> Attribute msg onTouchStart msg =