Thanks ... I think I understand how it works now. I agree on the editing and using input tags but I haven't been able to come up with easy way to prevent the table from jumping around when I set up the input field.
I'll give it a bit more thought. Thanks again for the help. Thomas On Sun, Nov 20, 2016 at 3:30 PM, Wouter In t Velt <[email protected]> wrote: > 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. > -- 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.
