This package aims at handling pointer events in elm. Pointer events are a unified interface for similar input devices (mouse, pen, touch, ...).

Since maintaining both mouse and touch events for compatibility is really cumbersome, using a unified pointer events interface is a relief. However this API is not well supported by all browsers. So I strongly recommend to use it in pair with the elm-pep polyfill for compatibility with all major browsers.

The following functions can easilly be used to generate attribute messages:

Pointer.onDown : (Pointer.Event -> msg) -> Html.Attribute msg
Pointer.onMove : (Pointer.Event -> msg) -> Html.Attribute msg
Pointer.onUp : (Pointer.Event -> msg) -> Html.Attribute msg

If you are using the elm-pep polyfill for compatibility with Firefox and Safari, you have to add the elm-pep attribute. It is also recommended that you deactivate touch-action to disable browsers scroll behaviors.

div
    [ Pointer.onDown ...
    , Pointer.onMove ...
    , Pointer.onUp ...
    -- no touch-action
    , Html.Attributes.style [ ( "touch-action", "none" ) ]
    -- Add this to your list of attribute messages
    , Html.Attributes.attribute "elm-pep" "true"
    ]
    []

An example is available in the examples/ directory. To test it, compile the elm file with the command:

elm-make PointerEvents.elm --output PointerEvents.js

Then use any static http server like:

python3 -m http.server 8888

And open your browser at localhost:8888 to load the index.html page.

If you are interested in contributing in any way (feedback, bug report, implementation of new functionality, ...) don't hesitate to reach out on slack (user mattpiz) and/or open an issue.

The package documentation is available on the elm package website.

This Source Code Form is subject to the terms of the Mozilla Public License,v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.

Matthieu Pizenberg: [email protected]