update example to 0.18, add getDirection function

examples/SwipeExample.elm

@@ -1,36 +1,33 @@
 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
         }
 
 
 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 ]

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 =