From bff1dad681d17365919762d8db990b67297035dc Mon Sep 17 00:00:00 2001 From: flip111 Date: Wed, 22 Feb 2017 23:50:55 +0100 Subject: [PATCH] Added events to elm version --- index.elm | 73 -------------------------------- index_elm.html | 31 ++++++++++++++ main.elm | 113 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 144 insertions(+), 73 deletions(-) delete mode 100644 index.elm create mode 100644 index_elm.html create mode 100644 main.elm diff --git a/index.elm b/index.elm deleted file mode 100644 index b99b756..0000000 --- a/index.elm +++ /dev/null @@ -1,73 +0,0 @@ -import Html exposing (beginnerProgram, div, a, text, nav, ul, li, i) -import Html.Events exposing (onClick) -import Html.Attributes exposing (rel, class, href, rel, media) -import List exposing (map) - -main = - beginnerProgram { model = 0, view = view, update = update } - -update msg model = model - -view model = - div [ class "wrapper" ] - [ Html.node "link" [ rel "stylesheet", href "https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" ] [] - , Html.node "link" [ rel "stylesheet", href "stylesheets/main.css", media "screen, projection" ] [] - , Html.node "link" [ rel "stylesheet", href "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" ] [] - , div [ class "navbar" ] - [ a [ class "logo", href "#" ] - [ text "DEV-KIT" ] - , a [ class "menu", href "#" ] - [ text "Menu" ] - , nav [ class "prim-nav" ] - [ ul [] (map linkToLi links ++ socialLinks) - ] - ] - ] - --- Stuff for view -type alias Link = - { href : String - , text : String - } - -links = - [ { href = "#", text = "Home" } - , { href = "#", text = "About" } - , { href = "#", text = "Pricing" } - , { href = "#", text = "Partners" } - , { href = "#", text = "Articles" } - , { href = "#", text = "Contact" } - ] - -linkToLi link = - li [] - [ a [ href link.href ] - [ text link.text ] - ] - -socialLinks = - [ li [ class "social" ] - [ a [ href "#" ] - [ i [ class "fa fa-facebook" ] - [] - ] - ] - , li [ class "social" ] - [ a [ href "#" ] - [ i [ class "fa fa-twitter" ] - [] - ] - ] - , li [ class "social" ] - [ a [ href "#" ] - [ i [ class "fa fa-instagram" ] - [] - ] - ] - , li [ class "social" ] - [ a [ href "#" ] - [ i [ class "fa fa-pinterest" ] - [] - ] - ] - ] \ No newline at end of file diff --git a/index_elm.html b/index_elm.html new file mode 100644 index 0000000..1e62206 --- /dev/null +++ b/index_elm.html @@ -0,0 +1,31 @@ + + + + + + FlexNav - Playground + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.elm b/main.elm new file mode 100644 index 0000000..2ac5118 --- /dev/null +++ b/main.elm @@ -0,0 +1,113 @@ +port module Main exposing (main) + +import Html exposing (beginnerProgram, div, a, text, nav, ul, li, i) +import Html.Events exposing (onClick, on, targetValue) +import Html.Attributes exposing (rel, class, href, rel, media, classList) +import List exposing (map) +import Json.Decode as Json + +main = Html.program + { init = initModel ! [] + , update = update + , view = view + , subscriptions = subscriptions + } + +-- model +type alias Model = + { menu : Bool + } + +initModel : Model +initModel = + { menu = False + } + +-- ports +subscriptions _ = + bodyClick BodyMenuClick + +port bodyClick : (Bool -> msg) -> Sub msg + +-- update +update msg model = + case msg of + MenuOpen -> if model.menu then + { model | menu = False } ! [] + else + { model | menu = True } ! [] + MenuClose -> { model | menu = False } ! [] + BodyMenuClick isMenu -> if isMenu then + model ! [] + else + { model | menu = False } ! [] + NoOp -> model ! [] + +type MenuActions = NoOp | MenuOpen | MenuClose | BodyMenuClick Bool + +-- view +view model = + div [ class "wrapper"] + [ div [ class "navbar" ] + [ a [ class "logo", href "#" ] + [ text "DEV-KIT" ] + , a [ class "menu", onClick MenuOpen] + [ text "Menu" ] + , nav [ classList + [ ("prim-nav", True) + , ("open", model.menu) + ] + ] + [ ul [] (map linkToLi links ++ socialLinks) + ] + ] + ] + +-- Stuff for view +type alias Link = + { href : String + , text : String + } + +links = + [ { href = "#", text = "Home" } + , { href = "#", text = "About" } + , { href = "#", text = "Pricing" } + , { href = "#", text = "Partners" } + , { href = "#", text = "Articles" } + , { href = "#", text = "Contact" } + ] + +linkToLi : Link -> Html.Html msg +linkToLi link = + li [] + [ a [ href link.href ] + [ text link.text ] + ] + +socialLinks = + [ li [ class "social" ] + [ a [ href "#" ] + [ i [ class "fa fa-facebook" ] + [] + ] + ] + , li [ class "social" ] + [ a [ href "#" ] + [ i [ class "fa fa-twitter" ] + [] + ] + ] + , li [ class "social" ] + [ a [ href "#" ] + [ i [ class "fa fa-instagram" ] + [] + ] + ] + , li [ class "social" ] + [ a [ href "#" ] + [ i [ class "fa fa-pinterest" ] + [] + ] + ] + ] \ No newline at end of file