robx/elm-mouse-events

Handle mouse events in elm with more details than in Html.Events

elm-mouse-events

WARNING: This package will be merged into elm-pointer-events when the release 0.19 of elm will be out. It won't be updated to elm 0.19.

This package aims at handling mouse events in elm with more details than in Html.Events.

Motivation

When dealing with mouse events, I often need to access mouse coordinates. Functions onMouseDown and others from elm Html.Events module do not provide the coordinates of the mouse event.

Thanks to the use of the on function from Html.Events and some custom json decoders, this package provides mouse events with coordinates.

Usage

A functional example is available in the examples/ folder. But to have an overview of how to use this package, see below what a Msg type and an Attribute Msg might look like using this Mouse module:

import Mouse

type Msg
    = MouseDown Mouse.Event
    | MouseMove Mouse.Event
    | MouseUp Mouse.Event

mouseEvents : List (Html.Attribute Msg)
mouseEvents =
    [ Mouse.onDown MouseDown
    , Mouse.onMove MouseMove
    , Mouse.onUp MouseUp
    ]

The Mouse.Event type

The Mouse.Event type is a reflection of the JavaScript specification of a mouse event. The attributes kept are:

• altKey
• ctrlKey
• shiftKey
• clientX
• clientY
• offsetX
• offsetY

Go see it's definition in the Mouse module to know its exact record structure.

Documentation

The package documentation is available on the elm package website.

License

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/.

Authors

Original author: Matthieu Pizenberg ([email protected])