@@ -1,7 +1,9 @@
11module Pages.Navigation exposing
22 ( Config
3+ , MenuConfig
34 , PageStack
4− , menu
5+ , TopButton(..)
6+ , mapMenuConfig
57 , popView
68 , pushView
79 , showNavigationView
@@ -14,78 +16,91 @@ import List.Nonempty as Nonempty exposing (Nonempty)
1416import Utils exposing (..)
1517
1618
17−type TopButton
18− = BackButton
19− | MenuButton
19+type TopButton msg
20+ = BackButton msg
21+ | MenuButton (MenuConfig msg)
2022
2123
2224type alias Config msg =
23− { topButton : Maybe TopButton
25+ { topButton : Maybe (TopButton msg)
2426 , title : String
25− , pop : msg
26− , toggleMenu : msg
2727 }
2828
2929
30−navigation : Config msg -> Html msg
31−navigation { topButton, title, pop, toggleMenu } =
32− nav [ Attr.class "p-tabs p-tabs__list" ]
33− [ h3 [ Attr.class "u-no-margin u-no-padding" ]
34− [ button
35− (Attr.class "p-button--base is-inline u-no-margin" :: optional (Nothing == topButton) (Attr.style "visibility" "hidden"))
36− [ i
37− [ Attr.class
38− (case topButton of
39− Just BackButton ->
40− "p-icon--chevron-up ninety-counter"
30+navigation : Config msg -> List (Html msg)
31+navigation { topButton, title } =
32+ (case topButton of
33+ Just (MenuButton cfg) ->
34+ optional cfg.visible (menu cfg)
4135
42− Just MenuButton ->
43− "p-icon--menu"
44−
45− Nothing ->
46− ""
47− )
48− , Ev.onClick
49− (case topButton of
50− Nothing ->
51− pop
52−
53− Just BackButton ->
54− pop
55−
56− Just MenuButton ->
57− toggleMenu
58− )
36+ _ ->
37+ []
38+ )
39+ ++ [ nav [ Attr.class "p-tabs p-tabs__list" ]
40+ [ h3 [ Attr.class "u-no-margin u-no-padding" ]
41+ [ case topButton of
42+ Nothing ->
43+ button
44+ [ Attr.class "p-button--base is-inline u-no-margin", Attr.style "visibility" "hidden" ]
45+ []
46+
47+ Just (BackButton msg) ->
48+ button
49+ [ Attr.class "p-button--base is-inline u-no-margin", Ev.onClick msg ]
50+ [ i [ Attr.class "p-icon--chevron-up ninety-counter" ] [] ]
51+
52+ Just (MenuButton cfg) ->
53+ button
54+ [ Attr.class "p-button--base is-inline u-no-margin", Ev.onClick cfg.toggle ]
55+ [ i [ Attr.class "p-icon--menu" ] [] ]
56+ , text title
5957 ]
60− []
6158 ]
62− , text title
63− ]
64− ]
59+ ]
6560
6661
6762type alias MenuConfig msg =
6863 { title : String
69− , items : List { icon : String, name : String, trigger : msg }
70− , close : msg
64+ , items : List { icon : String, name : String, trigger : msg, current : Bool }
65+ , toggle : msg
66+ , visible : Bool
67+ }
68+
69+
70+mapMenuConfig : (a -> b) -> MenuConfig a -> MenuConfig b
71+mapMenuConfig f { title, items, toggle, visible } =
72+ { items =
73+ List.map
74+ (\{ icon, name, trigger, current } ->
75+ { icon = icon, name = name, trigger = f trigger, current = current }
76+ )
77+ items
78+ , title = title
79+ , toggle = f toggle
80+ , visible = visible
7181 }
7282
7383
7484menu : MenuConfig msg -> Html msg
75−menu { title, items, close } =
85+menu { title, items, toggle } =
7686 div [ Attr.class "p-side-navigation--icons is-drawer-expanded" ]
7787 [ div [ Attr.class "p-side-navigation__overlay" ] []
7888 , nav [ Attr.class "p-side-navigation__drawer" ]
7989 [ div [ Attr.class "p-side-navigation__drawer-header" ]
80− [ a [ Attr.class "p-side-navigation__toggle--in-drawer", Ev.onClick close ] [ text title ]
90+ [ a [ Attr.class "p-side-navigation__toggle--in-drawer", Ev.onClick toggle ] [ text title ]
8191 ]
8292 , ul [ Attr.class "p-side-navigation__list" ]
8393 (items
8494 |> List.map
85− (\{ icon, name, trigger } ->
95+ (\{ icon, name, trigger, current } ->
8696 li [ Attr.class "p-side-navigation__item" ]
8797 [ a [ Attr.class "p-side-navigation__link", Ev.onClick trigger ]
88− [ i [ Attr.class "p-side-navigation__icon", Attr.class ("p-icon--" ++ icon) ] []
98+ [ i
99+ [ Attr.class "p-side-navigation__icon"
100+ , Attr.class ("p-icon--" ++ icon)
101+ , Attr.classList [ ( "is-active", current ) ]
102+ ]
103+ []
89104 , text name
90105 ]
91106 ]
@@ -110,41 +125,25 @@ popView stack =
110125
111126
112127showNavigationView :
113− { popStack : msg
114− , toggleMenu : msg
115− }
116− -> PageStack model
128+ PageStack model
117129 ->
118130 (model
119131 ->
120132 { title : String
121133 , body : List (Html msg)
122− , menuConfig : Maybe (MenuConfig msg)
123− , menuPossible : Bool
134+ , topButton : Maybe (TopButton msg)
124135 }
125136 )
126137 -> Html msg
127−showNavigationView { popStack, toggleMenu } stack render =
138+showNavigationView stack render =
128139 let
129− { title, body, menuConfig, menuPossible } =
140+ { title, body, topButton } =
130141 render (Nonempty.head stack)
131142 in
132143 div []
133− (maybeList menuConfig menu
134− ++ [ navigation
135− { topButton =
136− if menuPossible then
137− Just MenuButton
138−
139− else if Nonempty.length stack > 1 then
140− Just BackButton
141−
142− else
143− Nothing
144− , title = title
145− , pop = popStack
146− , toggleMenu = toggleMenu
147− }
148− , main_ [] body
149− ]
144+ (navigation
145+ { topButton = topButton
146+ , title = title
147+ }
148+ ++ [ main_ [] body ]
150149 )