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
Related
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)
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...
I can't find an example anywhere online that answers the question: how does a parent component respond to different actions coming out of a child module?
Consider a simple chat message input with a submit button:
// child component: text input w/ a submit button
type Action
= InputChanged String
| MessageSent String
view : Signal.Address Action -> Model -> Html
view addr model =
div []
[ input
[ type' "text"
, value model.content
, on "input" targetValue (\val -> Signal.message addr (InputChanged val))
]
[]
, button
[ type' "submit"
, onClick addr (MessageSent model.content)
]
[ text "Send" ]
]
How does the parent component holding onto this input box respond to the two actions that might come out of that input box? A traditional "just passing through" looks like this:
// parent component, holds onto a list of posts and the child component
-- update
type Action
= MessageBoxAction MessageBox.Action
update : Action -> Model -> Model
update act model =
case act of
MessageBoxAction msg ->
{ model |
currentMessage = MessageBox.update msg model.currentMessage
}
-- view
view : Signal.Address Action -> Model -> Html
view addr model =
div []
[ MessageBox.view (Signal.forwardTo addr MessageBoxAction) model.currentMessage ]
What I want to be able to do is capture a message coming out of that child component and respond to it beyond the normal "just passing through". Something like this:
case act of
MessageBoxSubmit msg ->
let updatedMessage = MessageBox.update msg model.currentMessage
newPost = Posts.update msg model.posts
in
{ model |
posts = model.posts :: [ newPost ]
, currentMessage = updatedMessage
}
But I have no idea how to do this, particularly because when forwarding the address to a child it's not like you have the opportunity to provide more than one address...
MessageBox.view (Signal.forwardTo addr MessageBoxAction) model.currentMessage
There are two main routes to do this.
You can change the signature of MessageBox update to return a parent action that you provide to MessageBox init.
init : (String -> parentAction) -> Model
init onSend =
{ onSend = onSend
, content = ""
}
update : Action -> Model -> (Model, Maybe parentAction)
update action model =
case action of
MessageSent msg ->
let
model' = ...
in
(model', Just (model.onSend msg))
InputChanged str ->
let
model' = ...
in
(model', Nothing)
and in the parent module you do:
init =
{ posts = []
, currentMessage = MessageBox.init HandleSent
}
update : Action -> Model -> Model
update act model =
case act of
MessageBoxAction msg ->
let
(currentMessage', send) = MessageBox.update msg model.currentMessage
model' = {model | currentMessage = currentMessage'}
in
case send of
Nothing -> model'
Just act -> update act model' -- you recursively call the update function with the new action that you received from the MessageBox.update
HandleSent str -> { model | posts = str::model.posts }
You can provide a decoder for the action in the MessageBox module.
in MessageBox module
sentMessage action =
case action of
MessageSent msg -> Just msg
_ -> Nothing
in parent
update : Action -> Model -> Model
update act model =
case act of
MessageBoxAction msg ->
let
currentMessage' = MessageBox.update msg model.currentMessage
model' = {model | currentMessage = currentMessage'}
in
case MessageBox.sentMessage msg of
Nothing -> model'
Just str -> update (HandleSent str) model'
HandleSent str -> { model | posts = str::model.posts }
Got a hopefully simple problem. When I receive action A in my update function, I'd like to return a task that does some stuff, then results in action B, which is received by the update function again. Its my understanding that whatever effects are returned from Update will be executed by startapp, but nothing seems to be happening. Here's a whittled down example:
import StartApp exposing (start)
import Effects
import Task
import Html exposing (..)
import Html.Events exposing (..)
main =
(start
{ init = init
, update = update
, view = view
, inputs = []
}).html
type Action
= Click
| Dummy
type alias Model =
{ clicks: Int
}
init : (Model, Effects.Effects Action)
init = (Model 0, Effects.none)
update : Action -> Model -> (Model, Effects.Effects Action)
update action model =
case action of
Click ->
-- the click is received.
(model, Effects.task (Task.succeed Dummy))
Dummy ->
-- this never happens!!
({ model | clicks = model.clicks + 1}, Effects.none)
view : Signal.Address Action -> Model -> Html
view address model =
let start = button [ onClick address Click ] [ text (toString model.clicks) ]
in
div [] ([start])
StartApp requires a port for tasks in addition to main. Change your main function and add the tasks port like this and you'll be all set:
app =
start
{ init = init
, update = update
, view = view
, inputs = []
}
main =
app.html
port tasks : Signal (Task.Task Effects.Never ())
port tasks =
app.tasks
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)