Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- port module Header exposing ( .. )
- -- Library imports
- --------------------------------------------------------------------------------
- import Html exposing (Html, button, div, text, h4, p, hr, nav, text, ul, li, a)
- import Html.Attributes exposing (class, id, attribute, href)
- import Html.Events exposing (onClick)
- import List
- import Platform.Sub
- -- Model
- --------------------------------------------------------------------------------
- type alias NavElement = (String, String)
- type alias Model = { nav_elements : List NavElement
- , title : String
- , is_fixed : Bool
- }
- model : List NavElement -> String -> Model
- model nav_elements title = { nav_elements = nav_elements
- , title = title
- , is_fixed = False
- }
- type alias Flags = { brand : String
- , pages : List (String, String)
- }
- init : Flags -> (Model, Cmd Msg)
- init flags =
- ( (model flags.pages flags.brand)
- , Cmd.none
- )
- -- Update
- --------------------------------------------------------------------------------
- type Msg = UpdateScrollPos Float
- update : Msg -> Model -> (Model, Cmd Msg)
- update msg model =
- case msg of
- UpdateScrollPos x ->
- ( { model | is_fixed = x >= 81.3 }
- , Cmd.none
- )
- -- Subscriptions
- --------------------------------------------------------------------------------
- port onScroll : (Float -> msg) -> Sub msg
- subscriptions : Model -> Sub Msg
- subscriptions model = onScroll UpdateScrollPos
- -- View
- --------------------------------------------------------------------------------
- viewNavElement : NavElement -> Html Msg
- viewNavElement (txt, url) =
- li []
- [ a [ href url ]
- [ text txt ]
- ]
- viewNavElements : List NavElement -> Bool -> Html Msg
- viewNavElements nav_elements is_fixed =
- let
- att = [ class "nav"
- , class "navbar-nav"
- , class "banner-background"
- , class "banner-background-bottom"
- ]
- in
- ul ( if is_fixed then ( class "sticky" ) :: att else att )
- ( List.map viewNavElement nav_elements )
- view : Model -> Html Msg
- view model =
- let
- brand = div ( if model.is_fixed then
- [ class "navbar-brand"
- , class "banner-background"
- , class "fixed-padding"
- ]
- else
- [ class "navbar-brand"
- , class "banner-background"
- ]
- )
- [ text model.title ]
- navbar = viewNavElements model.nav_elements model.is_fixed
- in
- div [ id "banner"
- ]
- [ nav [ id "site-navigation"
- , class "navbar"
- , attribute "role" "navigation"
- ]
- [ brand
- , navbar
- ]
- ]
- -- Main statement
- --------------------------------------------------------------------------------
- main = Html.programWithFlags { init = init
- , update = update
- , subscriptions = subscriptions
- , view = view
- }
Add Comment
Please, Sign In to add comment