Commits: 1
Create a navigation bar
index a0c8d8f..5d2609b 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -37,6 +37,7 @@ import FeatherIcons exposing (icons)
=import Html exposing (Html)
=import Html.Attributes
=import Http
+import List.Extra as List
=import Mark
=import Mark.Custom
=import Parser
@@ -66,7 +67,7 @@ type alias Flags =
=
=
=type alias Model =
- { url : Url
+ { location : Url
= , key : Navigation.Key
= , content : Content
= , examples : Examples.Model
@@ -85,7 +86,7 @@ type Content
= = Loading
= | FetchError Http.Error
= | ParseError (List DeadEnd)
- | Loaded (Examples.Model -> View)
+ | Loaded (Model -> View)
=
=
=type alias DeadEnd =
@@ -99,7 +100,7 @@ type alias View =
=
=
=type alias Document =
- Mark.Document (Examples.Model -> View)
+ Mark.Document (Model -> View)
=
=
=init : Flags -> Url -> Navigation.Key -> ( Model, Cmd Msg )
@@ -108,7 +109,7 @@ init flags url key =
= ( examplesModel, examplesCmd ) =
= Examples.init
= in
- ( { url = url
+ ( { location = url
= , key = key
= , content = Loading
= , examples = examplesModel
@@ -155,7 +156,7 @@ view model =
= deadEndsView deadEnds
=
= Loaded documentView ->
- documentView model.examples
+ documentView model
=
= loadingView : View
= loadingView =
@@ -329,7 +330,7 @@ update msg model =
=
= UrlChanged url ->
= ( { model
- | url = url
+ | location = url
= , content = Loading
= }
= , Cmd.batch
@@ -393,23 +394,145 @@ loadContent route =
= Cmd.none
=
=
+contentNavigationBar : Url -> Element Msg
+contentNavigationBar location =
+ let
+ links : List { url : String, label : String }
+ links =
+ [ { url = "http://localhost:8001"
+ , label = "Home"
+ }
+ , { url = "/preparation.html"
+ , label = "Get ready"
+ }
+ , { url = "/day-1.html"
+ , label = "Day 1"
+ }
+ , { url = "/day-2.html"
+ , label = "Day 2"
+ }
+ , { url = "/day-3.html"
+ , label = "Day 3"
+ }
+ , { url = "/day-4.html"
+ , label = "Day 4"
+ }
+ , { url = "/day-5.html"
+ , label = "Day 5"
+ }
+ ]
+
+ linkElement : { url : String, label : String } -> Element Msg
+ linkElement link =
+ Element.link
+ [ Element.width Element.fill
+ , Element.padding 20
+ ]
+ { url = link.url
+ , label = Element.el [ Element.centerX ] (Element.text link.label)
+ }
+
+ linksRow =
+ links
+ |> List.map linkElement
+ |> Element.row
+ [ Element.width Element.fill
+ , Element.spaceEvenly
+ , Font.bold
+ ]
+
+ progressBar : Int -> Int -> Float -> Element Msg
+ progressBar total done progress =
+ Element.row [ Element.width Element.fill ]
+ [ Element.el
+ [ Element.width (Element.fillPortion done)
+ , Element.height (Element.px 4)
+ , Background.color (Element.rgb 0 0.6 0)
+ ]
+ Element.none
+ , Element.row
+ [ Element.width (Element.fillPortion 1)
+ , Element.height (Element.px 4)
+ ]
+ [ Element.el
+ [ Element.width (Element.fillPortion (round (progress * 1000)))
+ , Element.height (Element.px 4)
+ , Background.color (Element.rgb 0 0.6 0)
+ ]
+ Element.none
+ , Element.el
+ [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
+ , Element.height (Element.px 4)
+ ]
+ Element.none
+ ]
+ , Element.el
+ [ Element.width (Element.fillPortion (total - done - 1))
+ , Element.height (Element.px 4)
+ ]
+ Element.none
+ ]
+
+ route =
+ Routes.parse location
+
+ past : Int
+ past =
+ links
+ |> List.map .url
+ |> List.map (\newPath -> { location | path = newPath })
+ |> List.map Routes.parse
+ |> List.elemIndex route
+ |> Maybe.withDefault 0
+ in
+ Element.column [ Element.width Element.fill ]
+ [ linksRow
+ , progressBar
+ (List.length links)
+ -- index of current route
+ past
+ -- scroll position (0 - 1)
+ 0.5
+ ]
+
+
=document : Document
=document =
= let
- content :
+ page :
= { title : String
= , children : List (Examples.Model -> Element Msg)
= }
- -> Examples.Model
+ -> Model
= -> View
- content { title, children } model =
- children
- |> List.map (\child -> child model)
- |> Element.textColumn
- [ Element.centerX
- , Element.spacing 20
- , Element.paddingXY 0 80
- ]
+ page { title, children } model =
+ let
+ navigationBar =
+ case Routes.parse model.location of
+ Routes.Home ->
+ -- TODO: Implement different navigation bar for home
+ contentNavigationBar model.location
+
+ Routes.Content _ ->
+ contentNavigationBar model.location
+
+ Routes.NotFound ->
+ contentNavigationBar model.location
+
+ content =
+ children
+ |> List.map (\child -> child model.examples)
+ |> Element.textColumn
+ [ Element.centerX
+ , Element.spacing 20
+ , Element.paddingXY 0 80
+ ]
+ in
+ [ navigationBar
+ , content
+ ]
+ |> Element.column
+ [ Element.width Element.fill ]
= |> View title
=
= {- The document has to start with a Title block containing a String (i.e. single line of unforamtted text). This String will be used in two ways:
@@ -714,5 +837,5 @@ document =
= Mark.stub "ViewBox" render
= in
= Mark.document
- content
+ page
= structure