elmでchatアプリ

http://i-doctor.sakura.ne.jp/font/?p=38884
ElmとFirebaseでチャットアプリを写経してみる（２）複数ファイルを1個のファイルにする
2019年6月16日

ソースコード
（index.htmlの55行目のFirebaseのアドレスはご自身のものを入力してください。）
https://github.com/adash333/elm-firebase-chat2

DEMOサイト
https://romantic-noyce-862b75.netlify.com/

https://github.com/heartscry4423/elm-chat

https://github.com/qnoyxu/chat-room

Browser.Domの、
getViewportOf関数と、
setViewportOf関数
について調べる必要あり。

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom

jumpToBottom "history"


jumpToBottom : String -> Cmd Msg
jumpToBottom id =
    Dom.getViewportOf id
        |> Task.andThen (\info -> Dom.setViewportOf id 0 info.scene.height)
        |> Task.attempt (\_ -> NoOp)

https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#setViewportOf

https://qiita.com/uzimaru0000/items/e92e672ab06d77389641
@uzimaru0000
2018年12月19日に更新
任意のイベントデータを含んだメッセージを作る方法とBrowser.Domについて

https://dev.danilafe.com/Matrix-Programs/Scylla/commit/fe065130fe6619c78c305fffb640ddd8f8a68213?lang=ja-JP

requestScrollCmd : Cmd Msg
requestScrollCmd = Task.attempt ViewportAfterMessage (Browser.Dom.getViewportOf "messages-wrapper")

どうしても、getViewportOf でやろうとしてもうまくいかない。
201906時点

https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/

使用例

https://ellie-app.com/5Q2PJn9nHdsa1

https://ellie-app.com/5Q6J4RdVfkca1

• パッケージのインストール

elm install linuss/smooth-scroll

• 以下の2つをimport

import SmoothScroll exposing (scrollTo)
import Task exposing (Task)

• msgに以下の2つを追加

type Msg
    = NoOp
    | SmoothScroll String

• update msg modelに以下を追加

update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

        SmoothScroll id ->
            ( model, Task.attempt (always NoOp) (scrollTo id) )

• VIEWに以下を追加

view model =
    { title = "Foo"
    , body =
        [ div []
            [ p
                [ id "p-one"
                , onClick (SmoothScroll "p-two")
                ]
                [ text "p one" ]
            , div [ style "margin-top" "500px"][ text "555555" ]
            , p
                [ id "p-two"
                , style "margin-top" "1500px"
                , onClick (SmoothScroll "p-one")
                ]
                [ text "p two" ]
            ]
        ]
    }

目次：Elm