====== 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


===== ElmとFirebaseでチャットアプリ作成のためのメモ =====


===== 一番下まで自動スクロール =====

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

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


<code>

jumpToBottom "history"


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


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


<code>

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

</code>

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

===== linuss/smooth-scrollパッケージ =====
https://package.elm-lang.org/packages/linuss/smooth-scroll/latest/

使用例

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

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

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

<code>
elm install linuss/smooth-scroll
</code>

  *以下の2つをimport

<code>
import SmoothScroll exposing (scrollTo)
import Task exposing (Task)
</code>

  *msgに以下の2つを追加

<code>
type Msg
    = NoOp
    | SmoothScroll String
</code>

  *update msg modelに以下を追加

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

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

  *VIEWに以下を追加

<code>
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" ]
            ]
        ]
    }
</code>



===== リンク =====

目次：[[elm:index.html|Elm]]