textarea-autoresize.elm

module TextThing exposing (..)

import Html.App as App
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Dom.Scroll
import Dom.Size
import Task


main : Program Never
main =
    App.program
        { update = update
        , view = view
        , init = { minHeight = 100, content = "", scrollY = 0, outerHeight = 0, innerHeight = 0, scrollHeight = 0 } ! [ getScrollY, getOuterHeight, getInnerHeight, getScrollHeight ]
        , subscriptions = (\model -> Sub.none)
        }


-- model


type alias Model =
    { content : String
    , scrollY : Float
    , outerHeight : Float
    , innerHeight : Float
    , scrollHeight : Float
    , minHeight : Float
    }


-- update


type Msg
    = InputText String
    | GetScrollFailed ()
    | GetScrollSuccess Float
    | GetOuterHeightFailed ()
    | GetOuterHeightSuccess Float
    | GetInnerHeightFailed ()
    | GetInnerHeightSuccess Float
    | GetScrollHeightFailed ()
    | GetScrollHeightSuccess Float

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        InputText newContent ->
            { model
                | content = newContent
            }
                !
                    [ getScrollY
                    , getOuterHeight
                    , getInnerHeight
                    , getScrollHeight
                    ]

        GetScrollFailed _ ->
            model ! []

        GetScrollSuccess scroll ->
            { model | scrollY = scroll } ! []

        GetOuterHeightFailed _ ->
            model ! []

        GetOuterHeightSuccess height ->
            { model | outerHeight = height } ! []

        GetInnerHeightFailed _ ->
            model ! []

        GetInnerHeightSuccess height ->
            { model | innerHeight = height } ! []


        GetScrollHeightFailed _ ->
            model ! []

        GetScrollHeightSuccess height ->
            { model | scrollHeight = height } ! []


-- view


view : Model -> Html Msg
view model =
    let
        diff =
            model.outerHeight - model.innerHeight

        height =
           Basics.max model.minHeight <| model.scrollHeight - 4
    in
        textarea
            [ onInput InputText
            , id "textarea"
            , style
                [ ("height", toString height ++ "px")
                , ("overflow", "hidden")
                , ("transition", "height 50ms linear")
                ]
            ]
            [ text model.content ]


-- utils


getScrollHeight : Cmd Msg
getScrollHeight =
    Dom.Size.height Dom.Size.Content "textarea"
        |> Task.toResult
        |> Task.perform
            GetScrollHeightFailed
            (\result ->
                case result of
                    Ok height -> GetScrollHeightSuccess height
                    Err _ -> GetScrollHeightSuccess 0.0
            )

getOuterHeight : Cmd Msg
getOuterHeight =
    Dom.Size.height Dom.Size.VisibleContentWithBordersAndMargins "textarea"
        |> Task.toResult
        |> Task.perform
            GetOuterHeightFailed
            (\result ->
                case result of
                    Ok height -> GetOuterHeightSuccess height
                    Err _ -> GetOuterHeightSuccess 0.0
            )


getInnerHeight : Cmd Msg
getInnerHeight =
    Dom.Size.height Dom.Size.VisibleContent "textarea"
        |> Task.toResult
        |> Task.perform
            GetInnerHeightFailed
            (\result ->
                case result of
                    Ok height -> GetInnerHeightSuccess height
                    Err _ -> GetInnerHeightSuccess 0.0
            )


getScrollY : Cmd Msg
getScrollY =
    Dom.Scroll.y "textarea"
        |> Task.toResult
        |> Task.perform
            GetScrollFailed
            (\result ->
                case result of
                    Ok scrollY -> GetScrollSuccess scrollY
                    Err _ -> GetScrollSuccess 0.0
            )