I am a beginner in Elm and to learn it I have started ts-converter, a tiny browser extension to convert timestamps in a readable format. This is one of my daily needs.
I want to use what I have learnt from it, sharing some notes on how to manage event listeners in a Elm application.
onEnter event in the examples.
To capture a key pressed in the whole application we need to introduce a
subscription is an operation allowing us to register to an external event.
Creating a subscription we say to Elm runtime that we want to do an action when a particular event is spawned. When the runtime captures an event, produces an update message.
subscriptions _ = onKeyPress keyDecoder
A subscription is created on event
onKeyPress and when this event will be intercepted by the Elm runtime the function
keyCoder will be invoked.
keyDecoder : Decode.Decoder Msg keyDecoder = Decode.map toKey (Decode.field "key" Decode.string)
The event object is serialized as a JSON object and its field
key contains the key pressed value,
Decode.field "key" Decode.string extracts this number and puts it into a valid Elm value.
The extracted value is then passed to
toKey : String -> Msg toKey keyValue = case String.uncons keyValue of Just ( char, "" ) -> CharacterKey char _ -> ControlKey keyValue
String.uncons takes a string as a characters array and splits it into its head and tail.
Depending on whether the leading character is an alphanumeric value
or not, produces the related
CharacterKey k -> YOUR CODE ControlKey k -> YOUR CODE
The two messages will be managed into the
At the moment (v0.19) Elm doesn't support natively
onEnter event, but it offers a function
on that permits to create a custom event listener.
onEnter: Msg -> Attribute Msg onEnter msg = let isEnter code = if code == 13 then Decode.succeed msg else Decode.fail "not ENTER" in on "keydown" (Decode.andThen isEnter keyCode)
on "keydown" (Decode.andThen isEnter keyCode) we'll create a listener on
keydown event and the Elm runtime will execute
(Decode.andThen isEnter keyCode) on its capture.
keyCode is a bultin function of
Html.Events module and it returns the value of pressed key as an integer.
isEnter checks if key
enter has been pressed (enter value is 13) producing respectively a message for the
update function or a failure.
onEnter is used into the input field we will listen for events.
input [ size 20, value (tsToString model.ts), onInput SetTs, onEnter Convert, autofocus True]