@@ -6,6 +6,7 @@ import Html.Attributes as Attr
66import Html.Events as Ev
77import Html.Keyed as Keyed
88import Html.Lazy as Lazy
9+import InfiniteScroll
910import Page exposing (..)
1011import Pages.Navigation as Navigation
1112import Search
@@ -17,6 +18,8 @@ type alias Model =
1718 , search : String
1819 , menuVisible : Bool
1920 , ciphersListFilter : CiphersFilter
21+ , scroll : InfiniteScroll.Model Msg
22+ , sublist : { end : Int }
2023 }
2124
2225
@@ -77,6 +80,8 @@ type Msg
7780 | ToggleMenu
7881 | UpdateFilter CiphersFilter
7982 | LogOut
83+ | LoadMore InfiniteScroll.Direction
84+ | InfiniteScrollMsg InfiniteScroll.Msg
8085
8186
8287type alias Callbacks msg =
@@ -119,6 +124,8 @@ init ciphers =
119124 , search = ""
120125 , menuVisible = False
121126 , ciphersListFilter = AllCiphers
127+ , scroll = InfiniteScroll.init (LoadMore >> pureCmd)
128+ , sublist = { end = 20 }
122129 }
123130 , Cmd.none
124131 )
@@ -142,6 +149,25 @@ update { logOut } liftMsg msg model =
142149 LogOut ->
143150 ( Ok model, pureCmd logOut )
144151
152+ LoadMore direction ->
153+ let
154+ newSublist =
155+ case direction of
156+ InfiniteScroll.Top ->
157+ { end = model.sublist.end }
158+
159+ InfiniteScroll.Bottom ->
160+ { end = min (model.sublist.end + 10) (List.length model.ciphers) }
161+ in
162+ ( Ok { model | sublist = newSublist, scroll = InfiniteScroll.stopLoading model.scroll }, Cmd.none )
163+
164+ InfiniteScrollMsg msg_ ->
165+ let
166+ ( scroll, cmd ) =
167+ InfiniteScroll.update InfiniteScrollMsg msg_ model.scroll
168+ in
169+ ( Ok { model | scroll = scroll }, Cmd.map liftMsg cmd )
170+
145171
146172subscriptions : Model -> Sub Msg
147173subscriptions _ =
@@ -149,7 +175,7 @@ subscriptions _ =
149175
150176
151177view : Callbacks emsg -> (Msg -> emsg) -> Model -> List (Html emsg)
152−view { selected } liftMsg { ciphers, search, ciphersListFilter } =
178+view { selected } liftMsg { ciphers, search, ciphersListFilter, sublist } =
153179 [ input
154180 [ Attr.type_ "search"
155181 , Attr.value search
@@ -160,13 +186,13 @@ view { selected } liftMsg { ciphers, search, ciphersListFilter } =
160186 []
161187 , ciphers
162188 |> applyCipherFilter ciphersListFilter
163− |> Search.searchList search .name (Lazy.lazy2 showCiphers selected)
189+ |> Search.searchList search .name (List.take sublist.end >> Lazy.lazy3 showCiphers liftMsg selected)
164190 ]
165191
166192
167−showCiphers : (String -> msg) -> Bridge.Sub_LoadCiphers_List -> Html msg
168−showCiphers selected ciphers =
169− Keyed.ul [ Attr.class "p-list--divided" ]
193+showCiphers : (Msg -> msg) -> (String -> msg) -> Bridge.Sub_LoadCiphers_List -> Html msg
194+showCiphers liftMsg selected ciphers =
195+ Keyed.ul [ Attr.class "p-list--divided", InfiniteScroll.infiniteScroll (InfiniteScrollMsg >> liftMsg), Attr.class "ciphers-list no-scroll-bar" ]
170196 (ciphers
171197 |> List.map
172198 (\{ name, date, id } ->