Skip to content
Swiping gesture detection in Elm
Elm
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
.gitignore
LICENSE
README.md
elm.json

README.md

elm-swiper

This package has a very specific use-case. It's purpose is to make it easier to detect and react to "swiping" gestures on mobile devices. There are no actual "swipe" events in the DOM - so this package evaluates "touchstart" and "touchend" events to determine if a user swiped in a specific direction.

Because this has to be handled in a two-step fashion, the application using this library must store some "state" that can be passed back to the library to determine a swipe event.

Installation

elm-package install marshallformula/elm-swiper

Usage

import Swiper

-- Application Model
type alias Model =
    { swipingState : Swiper.SwipingState
    , userSwipedLeft : Bool
    }

-- Messages
type Msg
    = Swiped Swiper.SwipeEvent

-- Update
init : ( Model, Cmd Msg )
init =
    let
        initialModel =
            { swipingState = Swiper.initialSwipingState
            , userSwipedLeft = False
            }
    in
        ( initialModel, Cmd.none )


update : Msg -> Model -> ( Model, Cmd Msg)
update msg model =
    let
        threshold = 100
    in
    case msg of
        Swiped evt ->
            let
                ( newState, swipedLeft) =
                    Swiper.hasSwipedLeft threshold evt model.swipingState
            in
                ( { model | swipingState = newState, userSwipedLeft = swipedLeft }, Cmd.none )

-- View
view : Model -> Html Msg
view model =
    div ( [ id "Main" ] ++ Swiper.onSwipeEvents Swiped ) [ text "main website" ]
You can’t perform that action at this time.