Handling wheel events.
{ mouseEvent : Html.Events.Extra.Mouse.Event
, deltaY : Basics.Float
, deltaMode : DeltaMode
}
Type that get returned by a browser wheel event. Its purpose is to provide all useful properties of JavaScript WheelEvent in the context of the elm programming language.
deltaX
and deltaZ
properties are not provided by default
since not compatible with Safari.
If you really need them, you can very easily build your own wheel event
decoder by extending this one,
or looking at the source code of this module and recoding one.
The deltaMode property of a Wheel event.
onWheel : (Event -> msg) -> Html.Attribute msg
Listen to wheel
events.
Let's say that we have a message type like this:
type Msg
= ZoomIn
| ZoomOut
And we want to zoom in or out on an element depending on a wheel event:
chooseZoom : Wheel.Event -> Msg
chooseZoom wheelEvent =
if wheelEvent.deltaY > 0 then
ZoomOut
else
ZoomIn
div
[ Wheel.onWheel chooseZoom ]
[ text "some zoomable area like an image" ]
{ stopPropagation : Basics.Bool
, preventDefault : Basics.Bool
}
Options for the event.
onWithOptions : EventOptions -> (Event -> msg) -> Html.Attribute msg
Enable personalization of html events options (prevent default) in case the default options do not fit your needs. You can change options like follows:
onWheel : (Wheel.Event -> msg) -> Html.Attribute msg
onWheel =
{ stopPropagation = False, preventDefault = True }
|> Wheel.onWithOptions
eventDecoder : Json.Decode.Decoder Event
Wheel event decoder.
It is provided in case you want to extend this Wheel.Event
type with
non provided properties (like deltaX
, deltaZ
).