This question already has answers here:
How to set focus on an element in Elm?
(6 answers)
Closed 4 years ago.
Anyone know if there's a way to programmatically set focus on an Element.Input.text element using stylish-elephants (or style-element v5)?
It requires "elm-lang/dom": "1.1.1 <= v < 2.0.0" in elm-package.json
import Dom exposing (focus)
update msg model =
case msg of
FocusOn id ->
{ model | current_focus_id = id } ! [ Task.attempt FocusResult (focus (id)) ]
FocusResult result ->
case result of
Err (Dom.NotFound id) ->
model ! [ YourMsg]
Ok () ->
model ! []
view model = Element.layout [] <| el [onClick <| (FocusOn "id01")] (text "click here")
Related
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 }
This question already has answers here:
elm generate random number
(2 answers)
Closed 7 years ago.
What's a simple way to do this?
The documentation for Random.initialSeed says:
"A good way to get an unexpected seed is to use the current time."
http://package.elm-lang.org/packages/elm-lang/core/2.1.0/Random#initialSeed
After a ton of reading, I can only find "solutions" that are well beyond my understanding of Elm and Functional Programming. They also don't seem to be solutions to this problem.
I'm currently hardcoding:
Random.initialSeed 314
If you use a library, please include the name used to get it from elm package. I've seen a solution that says use Native.now but I can't figure out how to get that one.
stackoverflow is suggesting this one but I can't understand how to apply it to my usecase Elm Current Date
You can try case nelson's answer from How do I get the current time in Elm?
From elm repl:
> import Now
> import Random
> Now.loadTime |> round -- get current time in Int
1455406828183 : Int
> Now.loadTime |> round |> Random.initialSeed -- get the Seed
Seed { state = State 1560073230 678, next = <function>, split = <function>, range = <function> }
: Random.Seed
I also have the code on my repo here.
Note: don't forget "native-modules": true in elm-package.json.
Edit:
to try the code,
git clone https://github.com/prt2121/elm-backup.git
cd elm-backup/now
elm make Now.elm
add "native-modules": true in elm-package.json
elm repl
The simplest way I can think of is to use the Elm Architecture and Effects.tick mechanism to initialise the seed with a time value.
Here is an example of how this works:
import Html exposing (..)
import Html.Events exposing (onClick)
import Random exposing (Seed, generate, int, initialSeed)
import Time exposing (Time)
import Effects exposing (Effects, Never)
import Task exposing (Task)
import StartApp
type alias Model = { seed : Seed, value : Int}
type Action = Init Time | Generate
init : (Model, Effects Action)
init = (Model (initialSeed 42) 0, Effects.tick Init)
modelFromSeed : Seed -> (Model, Effects Action)
modelFromSeed seed =
let
(value', seed') = generate (int 1 1000) seed
in
(Model seed' value', Effects.none)
update : Action -> Model -> (Model, Effects Action)
update action model =
case action of
Init time ->
modelFromSeed (initialSeed (round time))
Generate ->
modelFromSeed model.seed
view : Signal.Address Action -> Model -> Html
view address model =
div []
[ text ("Current value: " ++ (toString model.value))
, br [] []
, button [onClick address Generate] [text "New Value"]
]
app : StartApp.App Model
app = StartApp.start
{ init = init
, update = update
, view = view
, inputs = []
}
main : Signal Html
main = app.html
port tasks : Signal (Task Never ())
port tasks = app.tasks
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
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)