Elm Html.Events - Pass input value to onBlur message - elm

I have this kind of input:
inputName player =
input
[ type_ "text"
, onInput (Msgs.ChangeName player)
, value player
]
which creates Msgs.ChangeName for every single character added to input.
I would prefer to update model after user leaves input but onBlur doesn't have any payload about input:
inputName player =
input
[ type_ "text"
, onBlur (Msgs.ChangeName player)
, value player
]
Above code doesn't compile ending with error:
The 1st entry has this type:
Html (String -> Msg)
But the 2nd is:
Html (Msg)
Hint: It looks like a function needs 1 more argument.

You can create a variation on the "blur" handler which pulls out target.value like this:
import Html.Events exposing (on, targetValue)
import Json.Decode as Json
onBlurWithTargetValue : (String -> msg) -> Attribute msg
onBlurWithTargetValue tagger =
on "blur" (Json.map tagger targetValue)

Related

How to create SPA with Elm 0.19?

I am trying to build a SPA with Elm and create three pages, that should show the content, depends on URL.
The content of these three pages are similar, for example Page.elm:
module Page.NotFound exposing (Msg(..), content)
import Html exposing (..)
import Html.Attributes exposing (..)
---- UPDATE ----
type Msg
= NotFoundMsg
content : Html Msg
content =
p [] [ text "Sorry can not find page." ]
In the Main.elm, I have the following code:
module Main exposing (Model, Msg(..), init, main, update, view)
import API.Keycloak as Keycloak exposing (..)
import Browser
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Json.Decode as Decode
import Page.Account as Account
import Page.Home as Home
import Page.NotFound as NotFound
import Route
import Url
import Url.Parser exposing ((</>), Parser, int, map, oneOf, parse, s, string)
---- MODEL ----
type alias Model =
{ key : Nav.Key
, url : Url.Url
, auth : Result String Keycloak.Struct
}
init : Decode.Value -> Url.Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url key =
( Model key url (Keycloak.validate flags), Cmd.none )
---- ROUTE ----
type Route
= Account
---- UPDATE ----
type Msg
= PageNotFound NotFound.Msg
| PageAccount Account.Msg
| PageHome Home.Msg
| LinkClicked Browser.UrlRequest
| UrlChanged Url.Url
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
LinkClicked urlRequest ->
case urlRequest of
Browser.Internal url ->
( model, Nav.pushUrl model.key (Url.toString url) )
Browser.External href ->
( model, Nav.load href )
UrlChanged url ->
( { model | url = url }
, Cmd.none
)
-- SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions _ =
Sub.none
---- VIEW ----
info : Html Msg
info =
header [] [ text "Header" ]
createLink : String -> Html Msg
createLink path =
a [ href ("/" ++ path) ] [ text path ]
navigation : Html Msg
navigation =
ul []
[ li [] [ createLink "home" ]
, li [] [ createLink "account" ]
]
content : Model -> Html Msg
content model =
main_ []
[ case parse Route.parser model.url of
Just path ->
matchedRoute path
Nothing ->
NotFound.content
]
matchedRoute : Route.Route -> Html Msg
matchedRoute path =
case path of
Route.Home ->
Home.content
Route.Account ->
Account.content
body : Model -> List (Html Msg)
body model =
[ info
, navigation
, content model
]
view : Model -> Browser.Document Msg
view model =
{ title = "Cockpit"
, body = body model
}
---- PROGRAM ----
main : Program Decode.Value Model Msg
main =
Browser.application
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
, onUrlChange = UrlChanged
, onUrlRequest = LinkClicked
}
The compiler complains:
-- TYPE MISMATCH -------------- /home/developer/Desktop/elm/cockpit/src/Main.elm
The 2nd branch of this `case` does not match all the previous branches:
104| [ case parse Route.parser model.url of
105| Just path ->
106| matchedRoute path
107|
108| Nothing ->
109| NotFound.content
^^^^^^^^^^^^^^^^
This `content` value is a:
Html NotFound.Msg
But all the previous branches result in:
Html Msg
Hint: All branches in a `case` must produce the same type of values. This way,
no matter which branch we take, the result is always a consistent shape. Read
<https://elm-lang.org/0.19.0/union-types> to learn how to “mix” types.
-- TYPE MISMATCH -------------- /home/developer/Desktop/elm/cockpit/src/Main.elm
Something is off with the 2nd branch of this `case` expression:
120| Account.content
^^^^^^^^^^^^^^^
This `content` value is a:
Html Account.Msg
But the type annotation on `matchedRoute` says it should be:
Html Msg
-- TYPE MISMATCH -------------- /home/developer/Desktop/elm/cockpit/src/Main.elm
Something is off with the 1st branch of this `case` expression:
117| Home.content
^^^^^^^^^^^^
This `content` value is a:
Html Home.Msg
But the type annotation on `matchedRoute` says it should be:
Html Msg
Detected errors in 1 module.
I know that the type is wrong, but do not know, how to prove it.
How can I get it to work?
I also looked at the example from https://github.com/rtfeldman/elm-spa-example/blob/master/src/Main.elm but could not figure, how does it work.
You have multiple Msg types, which is OK, but it can lead to confusion. In short: Main.Msg is not the same type as NotFound.Msg.
The function matchedRoute returns a Html Main.Msg while the function NotFound.content returns a Html NotFound.Msg; completely different types.
You're already 99% of the way there because you have a PageNotFound NotFound.Msg type constructor which produces a Main.Msg. This allows you to wrap the NotFound.Msg in a Main.Msg. It should be a matter of doing PageNotFound NotFound.content in your Nothing -> branch.
The problem is that the Msg type referred to by NotFound.content is NotFound.Msg, the Msg type referred to by Main.matchedRoute is Main.Msg, and these do not unify automatically. So when you use these in different branches of a case expression, the compiler will tell you they are different and can't be unified into a single type for the case expression to return.
So you have to convert one to the other, and the usual way to do that is to add a variant to the "outer" msg type (Main.Msg) that wraps the "inner" msg type (NotFound.Msg). Fortunately you've already added that variant as PageNotFound NotFound.Msg, so we can move on.
The next step is to do the wrapping of NotFound.Msgs in PageNotFounds. Unfortunately, we rarely get to handle values of NotFound.Msg alone, it's usually wrapped in some other type like Html or Cmd, which is trickier to deal with. Fortunately, Evan was foreknowing enough to predict this scenario and added Cmd.map and Html.map for us to use. Just like List.map and Maybe.map, Cmd.map and Html.map takes a function a -> b and uses it to convert Html as or Cmd as to Html bs or Cmd bs respectively.
So, all you really need to do here is use Html.map with PageNotFound on NotFound.content:
content : Model -> Html Msg
content model =
main_ []
[ case parse Route.parser model.url of
Just path ->
matchedRoute path
Nothing ->
NotFound.content |> Html.map PageNotFound
]
Both branches will now return Main.Msg and the compiler should be happy :)
And btw, in elm-spa-example, this is being done here

How to listen for both keypress and keydown events in Elm?

I want to listen to both keypress and keydown events in Elm. But if I have the following, only the keydown events will be listened to:
textarea
[ onWithOptions "keypress" (Options False True) <| Json.Decode.map KeyPress keyCode
, onWithOptions "keydown" (Options False True) <| Json.Decode.map KeyDown keyCode
] []
If I change the Options to not preventDefault, then both events will be listened to. But I need to preventDefault in order to not let tab keys from changing focus.
Any way to do this in Elm?
In Elm 19, to access keys pressed, you can use Browser.Events which is a part of the Elm Browser library. If you want to capture what key is down, you could use something like this:
import Json.Decode as Decode
type Key
= Character Char
| Control String
subscriptions : Model -> Sub Msg
subscriptions model =
Browser.Events.onKeyDown keyDecoder
keyDecoder : Decode.Decoder Msg
keyDecoder =
Decode.map toKey (Decode.field "key" Decode.string)
toKey : String -> Msg
toKey string =
case String.uncons string of
Just ( char, "" ) ->
PressedLetter char
_ ->
Control string
Adapted from here.
Pre Elm 0.19, I recommend you to use elm-lang/keyboard. This package uses subscriptions and it's very easy to use. You can subscribe to keydown and keyup at the same time.
For your specific case:
The default action for a keydown event is to trigger a keypress event. If you prevent that default behaviour, you will not get the keypress events.
You can read more about keydown events here
Maybe you just need to use keyup and keydown.
I hope it helps you.
Inspired by the docs and HParker's answer, I wrote up a more complete solution using Elm 0.19 and subscriptions.
It adds a Subscription for Browser.Events.onKeyUp/Down, and handles them in a top-level Msg with a subMsg for easier processing. It includes Alt, Ctrl, Shift, and Meta (Windows Key/Option).
Remember that onKeyUp/Down and onKeyPressed handle characters differently (where up/down use the appropriate case, where pressed does not).
import Browser.Events
import Json.Decode as Decode
type KeyEventMsg
= KeyEventControl
| KeyEventAlt
| KeyEventShift
| KeyEventMeta
| KeyEventLetter Char
| KeyEventUnknown String
type Msg
= KeyPressedMsg KeyEventMsg
| KeyReleasedMsg KeyEventMsg
update : Msg -> ( Model, Cmd Msg )
update msg =
case msg of
KeyPressedMsg keyEventMsg ->
case keyEventMsg of
KeyEventShift ->
( { model | shiftIsPressed = True }, Cmd.none )
_ ->
( model, Cmd.none )
KeyReleasedMsg keyEventMsg ->
case keyEventMsg of
KeyEventShift ->
( { model | shiftIsPressed = False }, Cmd.none )
_ ->
( model, Cmd.none )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Browser.Events.onKeyDown keyPressedDecoder
, Browser.Events.onKeyUp keyReleasedDecoder
]
keyPressedDecoder : Decode.Decoder Msg
keyPressedDecoder =
Decode.map (toKeyEventMsg >> KeyPressedMsg) (Decode.field "key" Decode.string)
keyReleasedDecoder : Decode.Decoder Msg
keyReleasedDecoder =
Decode.map (toKeyEventMsg >> KeyReleasedMsg) (Decode.field "key" Decode.string)
toKeyEventMsg : String -> KeyEventMsg
toKeyEventMsg eventKeyString =
case eventKeyString of
"Control" ->
KeyEventControl
"Shift" ->
KeyEventShift
"Alt" ->
KeyEventAlt
"Meta" ->
KeyEventMeta
string_ ->
case String.uncons string_ of
Just ( char, "" ) ->
KeyEventLetter char
_ ->
KeyEventUnknown eventKeyString

Show a 'loading placeholder' in Elm while it is rendering DOM elements

When Elm has a lot of DOM manipulation to do, there is some lag before the results show up. I'm trying to figure out how to show a placeholder div that says "Loading..." while Elm is doing its thing.
To demonstrate the lag, I've modified one of the Elm examples to render an increasingly huge number of text elements upon a button click:
import Html exposing (beginnerProgram, div, button, text)
import Html.Events exposing (onClick)
main =
beginnerProgram { model = 0, view = view, update = update }
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
, div [] (List.repeat (2 ^ model) (text ". ")) -- this is my addition
]
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
When running the example, clicking the '+' button will show a '.' characters in powers of 2. When the number is sufficiently high (around 16 on my machine), there is a multi-second delay after clicking before the '.' characters are shown.
What is a good way to show a 'loading...' element (in a 'div', say) before rendering the '.' elements?
You'll need to use a regular Html.program and return a Cmd from the Increment/Decrement update handlers that will pause to let the DOM render the "Loading" and then reenter the update:
import Html exposing (program, div, button, text)
import Html.Events exposing (onClick)
import Process
import Task
main =
program { init = (Model 0 False, Cmd.none), view = view, update = update, subscriptions = \_ -> Sub.none }
type alias Model =
{ count: Int
, loading: Bool
}
view model =
let
dotsDisplay =
if model.loading then
div [] [text "Loading..."]
else
div [] (List.repeat (2 ^ model.count) (text ". "))
in
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model.count) ]
, button [ onClick Increment ] [ text "+" ]
, dotsDisplay
]
type Msg = Increment | Decrement | FinishLoading
finishLoadingCmd =
Task.map2 (\_ b -> b) (Process.sleep 10) (Task.succeed FinishLoading)
|> Task.perform identity
update msg model =
case msg of
Increment ->
{model | count = model.count + 1, loading = True} ! [finishLoadingCmd]
Decrement ->
{model | count = model.count - 1, loading = True} ! [finishLoadingCmd]
FinishLoading ->
{model | loading = False} ! []
It's still going to lock up the browser while it renders all those nodes though, so you probably still want to look for a way to not be rendering 100k+ DOM elements...

Elm check whether ctrl key pressed onClick

Using elm-html, how can I check whether the ctrl key is pressed at the time of the click?
Is "control key down" some state I'd need to maintain elsewhere, perhaps using the Keyboard module? If so, how would that fit into elm-html?
I've adapted the code below from one of the well-known elm examples:
import Keyboard
import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import Signal exposing(Signal, Mailbox)
type alias Model =
{ count: Int
, ctrl : Bool
}
initialModel : Model
initialModel = { count = 0, ctrl = False}
type Action = Increment | Decrement | NoOp
update : Action -> Model -> Model
update action model =
case action of
Increment ->
{ model | count = model.count + 1 }
Decrement ->
{ model | count = model.count - 1 }
NoOp ->
model
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ button [ onClick address Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick address Increment ] [ text "+" ]
]
actions : Mailbox Action
actions =
Signal.mailbox NoOp
model : Signal Model
model =
Signal.foldp update initialModel actions.signal -- Keyboard.ctrl ?
main =
Signal.map (view actions.address) model
How can I update the value of the model's "ctrl" field?
You first need an Action capable of setting the value of whether CTRL is pressed:
type Action = Increment | Decrement | SetCtrl Bool | NoOp
Your case statement in the update function needs to handle that new action:
SetCtrl bool -> { model | ctrl = bool }
And now you need a port that can map the Keyboard.ctrl boolean to a task which sends a signal with the new Action:
port ctrlToAction : Signal (Task.Task Effects.Never ())
port ctrlToAction =
Signal.map (Signal.send actions.address << SetCtrl) Keyboard.ctrl

How to get query parameters in Elm?

In my Elm program, I'd like to initialize my model based on the query string.
For example, if the query string is ?w=3&h=5 I'd like to have:
initialModel =
{ width = 3
, height = 5
}
Is that possible to achieve this in Elm, or the only way to do this is to get the query parameters in Javascript and pass them via a port?
Elm 0.19
For elm 0.19 the below concept is the same. Both of these packages still exist but have been moved and relabeled as the official elm/url and elm/browser libraries.
Elm 0.18
This example uses evancz/url-parser and elm-lang/navigation. There are a few kinks that aren't straightforward in the documentation, but I've explained them briefly below. The example should speak for itself.
module Main exposing (..)
import Html as H exposing (..)
import Navigation exposing (Location)
import UrlParser as UP exposing ((</>), (<?>), top, parsePath, oneOf, s, stringParam, Parser)
import Maybe.Extra as MaybeExtra exposing (unwrap)
type Route
= UrlRoute (Maybe String) (Maybe String)
| NotFoundRoute
type Msg
= UrlParser Navigation.Location
type alias Model =
{ location : Route
, w : String
, h : String
}
type alias SearchParams =
{ w : Maybe String, h : Maybe String }
main =
Navigation.program UrlParser
{ init = init
, view = view
, update = update
, subscriptions = (\_ -> Sub.none)
}
init : Location -> ( Model, Cmd Msg )
init location =
let
currentPath =
parseLocation location
in
( initialModel currentPath
, Cmd.none
)
parseLocation : Location -> Route
parseLocation location =
case (parsePath matchers location) of
Just route ->
route
Nothing ->
NotFoundRoute
matchers : Parser (Route -> a) a
matchers =
UP.map UrlRoute (UP.s "index" <?> UP.stringParam "w" <?> UP.stringParam "h")
initialModel : Route -> Model
initialModel route =
{ location = route
, w = MaybeExtra.unwrap "" (\x -> Maybe.withDefault "" x.w) (parseParams route)
, h = MaybeExtra.unwrap "" (\x -> Maybe.withDefault "" x.h) (parseParams route)
}
parseParams : Route -> Maybe SearchParams
parseParams route =
case route of
UrlRoute w h ->
Just { w = w, h = h }
NotFoundRoute ->
Nothing
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
UrlParser location ->
( model
, Cmd.none
)
view : Model -> Html msg
view model =
div []
[ h1 [] [ text "URL Info" ]
, div [] [ text ("W is: " ++ model.w) ]
, div [] [ text ("H is: " ++ model.h) ]
]
The "trick" is to create another type alias to place your query params inside of. In the above example I've created the type SearchParams. After creating this type we just use an initialModel that takes in the currentPath.
From there, our model can extract the query params with Maybe.withDefault (it needs to be a Maybe type because the params may not be there). Once we have our data in the model we just print it out in the view.
Hope this helps!
There is no built-in core library way to access the URL. You can use ports and the community library jessitron/elm-param-parsing.
If you also want to set the URL, you can again use ports, or you can use the History API, for which there are bindings in TheSeamau5/elm-history.
Unfortunately jessitron/elm-param-parsing doesn't work with Elm 0.18.
Use elm-lang/navigation package:
http://package.elm-lang.org/packages/elm-lang/navigation/latest/Navigation
https://github.com/elm-lang/navigation/tree/2.1.0
especially this function:
program
: (Location -> msg)
-> { init : Location -> (model, Cmd msg), update : msg -> model -> (model, Cmd msg), view : model -> Html msg, subscriptions : model -> Sub msg }
-> Program Never model msg
In the second parameter you can see "init : Location -> (model, Cmd msg)". This should handle reading of initial URL. To complement that, first parameter is a function which gets called every time URL changes.
(I am aware it's an old question, but this link popped out when I was looking for the solution to the same problem and accepted answer didn't help)