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 elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
