Op zondag 20 november 2016 20:17:04 UTC+1 schreef Thomas Shelton:
>
> I'm not sure onInput will work with TD's though. I'm not seeing any
> messages logged in the console.
>
Yeah, you are right. `onInput` does not fire on TDs.
I have changed my example to include your custom `on` handler for the
innerHTML (see below).
Here I also pass the extra info on row and column to your Msg and update.
(and log).
There is another problem with contenteditable however:
If you run the example, you will see that everything you enter will be
displayed in reverse. So "you" will be displayed as "uoy".
This is because elm/ DOM does not change the cursor position if you change
the content.
You may need some other tricks to ensure that the cursor will move as well.
I normally use simple (but styled) <input> fields for text editing in Elm.
Updated example:
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (on)
import Json.Decode as JD exposing (Decoder)
main =
beginnerProgram { model = model, view = view, update = update }
model =
{ table = myTable
, log = ""
}
myTable : List (List String)
myTable =
[ [ "Name", "Age", "Comment" ]
, [ "Abe", "45", "" ]
, [ "Bill", "69", "" ]
, [ "Claire", "54", "" ]
]
view model =
div
[]
[ table []
(List.indexedMap viewRow model.table)
, div [] [ text <| "LOG = " ++ toString model.log ]
]
viewRow : Int -> List String -> Html Msg
viewRow rowIndex rowCells =
tr []
(List.indexedMap (viewCell rowIndex) rowCells)
viewCell : Int -> Int -> String -> Html Msg
viewCell rowIndex colIndex content =
td
[ attribute "data-x" "1"
, attribute "data-y" "1"
, on "input" (JD.map (Input rowIndex colIndex) targetInnerHtml)
, contenteditable True
, style [("border","solid black 1px")]
]
[ text content ]
type Msg = Input Int Int String
targetInnerHtml : Decoder String
targetInnerHtml =
JD.at ["target", "innerHTML"] JD.string
update msg model =
case (Debug.log "msg:" msg) of
Input rowIndex colIndex str ->
{ model
| log = toString msg
, table =
model.table
|> updateList rowIndex (updateList colIndex (always str))
}
updateList : Int -> (a -> a) -> List a -> List a
updateList index func list =
list
|> List.indexedMap (\i item -> if i == index then func item else item)
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
