restore scroll

master
Brian Hicks 2020-03-13 11:51:35 -05:00
parent 663af1c0b8
commit b1e64dd2cf
2 changed files with 45 additions and 2 deletions

View File

@ -10,12 +10,12 @@
"elm/browser": "1.0.2",
"elm/core": "1.0.5",
"elm/html": "1.0.0",
"elm/json": "1.1.3",
"elm-explorations/markdown": "1.0.0",
"rtfeldman/elm-css": "16.0.1"
},
"indirect": {
"Skinney/murmur3": "2.0.8",
"elm/json": "1.1.3",
"elm/time": "1.0.0",
"elm/url": "1.0.0",
"elm/virtual-dom": "1.0.2",

View File

@ -1,6 +1,7 @@
module Main exposing (main)
import Browser
import Browser.Dom as Dom
import Css
import Css.Global as Global
import Css.Reset as Reset
@ -8,24 +9,30 @@ import Dict exposing (Dict)
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Attributes exposing (css)
import Html.Styled.Events as Events
import Json.Decode as Decode
import Markdown
import Task
import Texts
type alias Model =
{ scrollOffsets : Dict String Float
, expandoStates : Dict String ExpandoState
, error : Maybe Dom.Error
}
type Msg
= SetExpandoState String ExpandoState
| SetScroll String Float
| RestoredScroll (Result Dom.Error ())
init : () -> ( Model, Cmd Msg )
init _ =
( { scrollOffsets = Dict.empty
, expandoStates = Dict.empty
, error = Nothing
}
, Cmd.none
)
@ -36,9 +43,30 @@ update msg model =
case msg of
SetExpandoState name state ->
( { model | expandoStates = Dict.insert name state model.expandoStates }
, case state of
Closed ->
Cmd.none
Open ->
Dict.get name model.scrollOffsets
|> Maybe.withDefault 0
|> Dom.setViewportOf (slugify name) 0
|> Task.attempt RestoredScroll
)
SetScroll name scroll ->
( { model | scrollOffsets = Dict.insert name scroll model.scrollOffsets }
, Cmd.none
)
RestoredScroll result ->
case result of
Ok _ ->
( model, Cmd.none )
Err err ->
( { model | error = Just err }, Cmd.none )
view : Model -> Browser.Document Msg
view model =
@ -57,6 +85,7 @@ view model =
name
(Html.fromUnstyled (Markdown.toHtml [] text))
)
|> (::) (Html.text (Debug.toString model.error))
|> frame
]
}
@ -123,7 +152,13 @@ expando state title contents =
, case state of
Open ->
Html.div
[ css
[ Attributes.id (slugify title)
, Events.on "scroll"
(Decode.float
|> Decode.at [ "target", "scrollTop" ]
|> Decode.map (SetScroll title)
)
, css
[ Css.maxHeight (Css.px 300)
, Css.overflowY Css.scroll
, Css.padding (Css.px 10)
@ -142,6 +177,14 @@ expando state title contents =
]
slugify : String -> String
slugify =
String.replace " " "-"
>> String.replace "." ""
>> String.replace "," ""
>> String.replace ";" ""
main : Program () Model Msg
main =
Browser.document