git.iko.soy/warden
on master help sign in
Added lazy list loading
8fc07d9iko
elm.json+1
compare with master
unifiedsplit
@@ -6,6 +6,7 @@
6 "elm-version": "0.19.1",
6 "elm-version": "0.19.1",
7 "dependencies": {
7 "dependencies": {
8 "direct": {
8 "direct": {
9+ "FabienHenon/elm-infinite-scroll": "3.0.3",
9 "bartavelle/json-helpers": "2.0.2",
10 "bartavelle/json-helpers": "2.0.2",
10 "elm/browser": "1.0.2",
11 "elm/browser": "1.0.2",
11 "elm/core": "1.0.5",
12 "elm/core": "1.0.5",
frontend/Pages/Ciphers.elm+31−5
@@ -6,6 +6,7 @@ import Html.Attributes as Attr
6import Html.Events as Ev
6import Html.Events as Ev
7import Html.Keyed as Keyed
7import Html.Keyed as Keyed
8import Html.Lazy as Lazy
8import Html.Lazy as Lazy
9+import InfiniteScroll
9import Page exposing (..)
10import Page exposing (..)
10import Pages.Navigation as Navigation
11import Pages.Navigation as Navigation
11import Search
12import Search
@@ -17,6 +18,8 @@ type alias Model =
17 , search : String
18 , search : String
18 , menuVisible : Bool
19 , menuVisible : Bool
19 , ciphersListFilter : CiphersFilter
20 , ciphersListFilter : CiphersFilter
21+ , scroll : InfiniteScroll.Model Msg
22+ , sublist : { end : Int }
20 }
23 }
21
24
22
25
@@ -77,6 +80,8 @@ type Msg
77 | ToggleMenu
80 | ToggleMenu
78 | UpdateFilter CiphersFilter
81 | UpdateFilter CiphersFilter
79 | LogOut
82 | LogOut
83+ | LoadMore InfiniteScroll.Direction
84+ | InfiniteScrollMsg InfiniteScroll.Msg
80
85
81
86
82type alias Callbacks msg =
87type alias Callbacks msg =
@@ -119,6 +124,8 @@ init ciphers =
119 , search = ""
124 , search = ""
120 , menuVisible = False
125 , menuVisible = False
121 , ciphersListFilter = AllCiphers
126 , ciphersListFilter = AllCiphers
127+ , scroll = InfiniteScroll.init (LoadMore >> pureCmd)
128+ , sublist = { end = 20 }
122 }
129 }
123 , Cmd.none
130 , Cmd.none
124 )
131 )
@@ -142,6 +149,25 @@ update { logOut } liftMsg msg model =
142 LogOut ->
149 LogOut ->
143 ( Ok model, pureCmd logOut )
150 ( Ok model, pureCmd logOut )
144
151
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+
145
171
146subscriptions : Model -> Sub Msg
172subscriptions : Model -> Sub Msg
147subscriptions _ =
173subscriptions _ =
@@ -149,7 +175,7 @@ subscriptions _ =
149
175
150
176
151view : Callbacks emsg -> (Msg -> emsg) -> Model -> List (Html emsg)
177view : Callbacks emsg -> (Msg -> emsg) -> Model -> List (Html emsg)
152−view { selected } liftMsg { ciphers, search, ciphersListFilter } =
178+view { selected } liftMsg { ciphers, search, ciphersListFilter, sublist } =
153 [ input
179 [ input
154 [ Attr.type_ "search"
180 [ Attr.type_ "search"
155 , Attr.value search
181 , Attr.value search
@@ -160,13 +186,13 @@ view { selected } liftMsg { ciphers, search, ciphersListFilter } =
160 []
186 []
161 , ciphers
187 , ciphers
162 |> applyCipherFilter ciphersListFilter
188 |> 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)
164 ]
190 ]
165
191
166
192
167−showCiphers : (String -> msg) -> Bridge.Sub_LoadCiphers_List -> Html msg
193+showCiphers : (Msg -> msg) -> (String -> msg) -> Bridge.Sub_LoadCiphers_List -> Html msg
168−showCiphers selected ciphers =
194+showCiphers liftMsg selected ciphers =
169− Keyed.ul [ Attr.class "p-list--divided" ]
195+ Keyed.ul [ Attr.class "p-list--divided", InfiniteScroll.infiniteScroll (InfiniteScrollMsg >> liftMsg), Attr.class "ciphers-list no-scroll-bar" ]
170 (ciphers
196 (ciphers
171 |> List.map
197 |> List.map
172 (\{ name, date, id } ->
198 (\{ name, date, id } ->
frontend/Pages/Navigation.elm+1−1
@@ -38,7 +38,7 @@ navigation { topButton, title } =
38 _ ->
38 _ ->
39 []
39 []
40 )
40 )
41− ++ [ nav [ Attr.class "p-tabs p-tabs__list" ]
41+ ++ [ nav [ Attr.class "p-tabs p-tabs__list no-scroll-bar" ]
42 [ h3 []
42 [ h3 []
43 [ case topButton of
43 [ case topButton of
44 Nothing ->
44 Nothing ->
style.css+10
@@ -59,6 +59,16 @@ nav.p-tabs__list {
59 margin-bottom: 0.5rem;
59 margin-bottom: 0.5rem;
60}
60}
61
61
62+.ciphers-list {
63+ height: calc(100vh - 9.5rem);
64+ overflow: auto;
65+ margin: 0;
66+}
67+
62p {
68p {
63 word-break: break-word;
69 word-break: break-word;
64}
70}
71+
72+.no-scroll-bar::-webkit-scrollbar {
73+ display: none;
74+}