Can't check all four directions at once.

[Orasund]

Hi there,
The code as it is currently written can only be used to check Left vs Right or Up vs Down.

In order to differentiate between a Left and an Up motion, one would need to also check the difference in the x-axis vs the y-axis: Is the difference in the x-axis bigger then we are looking at a Left vs Right direction, otherwise it's an Up vs Down direction.

The fix would be quite easy, but because you have not exposed your inner functions, one can not extend your current implementation to allow this behaviour.

[boxed]

Came here to write the exact same thing. The API is much too restrictive.

The API also is quite buggy. A swipe that is mostly down but just a liiiiitle to the left should be a down and NOT a left. A touch that is accidentally dragging 5 pixels should not be treated as a swipe either.

This is my suggestion for a fix for the API and the above issues.

The API is simplified to ( newState, gesture ) = Swiper.hasSwiped event model.swipingState.

-- Forked from https://github.com/marshallformula/elm-swiper/


module Swiper exposing
    ( SwipingState, initialSwipingState
    , SwipeEvent, onSwipeEvents
    , hasSwiped
    , Gesture(..)
    )

{-| This library handles detection of specific touch events (for mobile) that indicates a user swiping across
the specified DOM element.


# State

@docs SwipingState, initialSwipingState


# Events

@docs SwipeEvent, onSwipeEvents


# Swipe Detection

@docs hasSwiped

-}

import Html exposing (Attribute)
import Html.Events exposing (on)
import Json.Decode as Json


threshold =
    20


{-| Coordinates of touch events
-}
type alias Coords =
    { clientX : Float
    , clientY : Float
    }


{-| This event is either a "touchstart" or "touchend" event. You don't need to worry about which -
just need to hang on to it so you can pass it back to a "hasSwipedXXX" function.
-}
type SwipeEvent
    = TouchStart Coords
    | TouchEnd Coords


{-| Swiping Directions
-}
type Gesture
    = RightSwipe
    | LeftSwipe
    | UpSwipe
    | DownSwipe
    | NoSwipe


{-| Since there is no actual "swipe" event - the detection of a swipe is determined by evaluating the coordinates of "touchstart" and "touchend" events. This means some "state" must be stored by the application between events. That state is encapsulated in _SwipingState_. Store this so it can be passed to a hasSwipedXXX function.
-}
type SwipingState
    = SwipingState InternalState


{-| Returns an initial SwipingState with which to initialize the application.
-}
initialSwipingState : SwipingState
initialSwipingState =
    SwipingState <| InternalState Nothing


{-| Internal representation of the state of the swiping events
-}
type alias InternalState =
    { touchStarted : Maybe Coords }


{-| Helper method to set SwipingState based on new coordinates
-}
startTouchSequence : Coords -> SwipingState
startTouchSequence coords =
    SwipingState { touchStarted = Just coords }


{-| Helper function to detect swipe direction.
-}
hasSwiped : SwipeEvent -> SwipingState -> ( SwipingState, Gesture )
hasSwiped evt (SwipingState { touchStarted }) =
    case evt of
        TouchStart coords ->
            ( startTouchSequence coords, NoSwipe )

        TouchEnd coords ->
            case touchStarted of
                Nothing ->
                    ( initialSwipingState, NoSwipe )

                Just firstTouch ->
                    ( initialSwipingState, checkSwiped firstTouch coords )


{-| Checks the swipe direction based on the coords from the touchstart vs the touchend
-}
checkSwiped : Coords -> Coords -> Gesture
checkSwiped start end =
    let
        dx =
            start.clientX - end.clientX

        dy =
            start.clientY - end.clientY
    in
    if abs dx < threshold && abs dy < threshold then
        NoSwipe

    else if abs dx > abs dy then
        if dx > 0 then
            LeftSwipe

        else
            RightSwipe

    else if dy > 0 then
        UpSwipe

    else
        DownSwipe



-- Event handler/decoders


{-| Function that detects the touch events. A message wrapper is passed in to be handled in the application update handler.
It returns a list of Attributes (it must be a list because it can fire both "touchstart" and "touchend" states)
-}
onSwipeEvents : (SwipeEvent -> msg) -> List (Attribute msg)
onSwipeEvents msg =
    [ onTouchStart msg
    , onTouchEnd msg
    ]


{-| Touch start event handler
-}
onTouchStart : (SwipeEvent -> msg) -> Attribute msg
onTouchStart msg =
    touchDecoder "targetTouches"
        |> Json.map TouchStart
        |> Json.map msg
        |> on "touchstart"


{-| Touch end event handler
-}
onTouchEnd : (SwipeEvent -> msg) -> Attribute msg
onTouchEnd msg =
    touchDecoder "changedTouches"
        |> Json.map TouchEnd
        |> Json.map msg
        |> on "touchend"


{-| Decodes touch events
-}
touchDecoder : String -> Json.Decoder Coords
touchDecoder eventType =
    Json.at [ eventType, "0" ] coordDecoder


{-| Decodes the clientX/Y coordinates from touch events
-}
coordDecoder : Json.Decoder Coords
coordDecoder =
    Json.map2 Coords
        (Json.field "clientX" Json.float)
        (Json.field "clientY" Json.float)