elm header example

Header.elm

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
                             }

nav_script.html

{# Header #}
<script src="{% if page or tag or tags %}../{% endif %}theme/js/Header.js"></script>
<script>
  var node = document.getElementById('header');
  var app = Elm.Header.embed(node, {
    brand: "Monthy's Blog",
    pages: [ ['Blog', '{{ SITEURL  }}/index.html']
           {% for p in pages %}
           , ['{ p.title }}', '{{ SITEURL }}/{{ p.url }}']
           {% endfor %}
           ]
  });

  window.onscroll = function() {updateScroll()};
  function updateScroll() {
    app.ports.onScroll.send(window.pageYOffset);
  }
</script>