Last active
June 27, 2016 08:09
-
-
Save pdamoc/bf346e232ae2466923c18101122e3690 to your computer and use it in GitHub Desktop.
Counter through JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Component exposing (..) | |
| import Html exposing (..) | |
| import Html.Attributes exposing (style) | |
| import Html.Events exposing (onClick) | |
| import Ports exposing (..) | |
| -- MODEL | |
| type alias Model = Int | |
| init : (Model, Cmd Msg) | |
| init = 0 ! [] | |
| -- UPDATE | |
| type Msg = Increment | Decrement | UpdateValue Int | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Increment -> model ! [toJS "Increment"] | |
| Decrement -> model ! [toJS "Decrement"] | |
| UpdateValue val -> (model + val) ! [] | |
| -- VIEW | |
| view : Model -> Html Msg | |
| view model = | |
| div [] | |
| [ button [ onClick Decrement ] [ text "-" ] | |
| , div [ countStyle ] [ text (toString model) ] | |
| , button [ onClick Increment ] [ text "+" ] | |
| ] | |
| countStyle : Attribute Msg | |
| countStyle = | |
| style | |
| [ ("font-size", "20px") | |
| , ("font-family", "monospace") | |
| , ("display", "inline-block") | |
| , ("width", "50px") | |
| , ("text-align", "center") | |
| ] | |
| -- WIRING | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| fromJS UpdateValue |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.0.0", | |
| "summary": "helpful summary of your project, less than 80 characters", | |
| "repository": "https://github.com/user/project.git", | |
| "license": "BSD3", | |
| "source-directories": [ | |
| "." | |
| ], | |
| "exposed-modules": [], | |
| "dependencies": { | |
| "elm-lang/core": "4.0.0 <= v < 5.0.0", | |
| "elm-lang/html": "1.0.0 <= v < 2.0.0", | |
| "evancz/elm-http": "3.0.1 <= v < 4.0.0" | |
| }, | |
| "elm-version": "0.17.0 <= v < 0.18.0" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Elm • Counter through JS </title> | |
| <script type="text/javascript" src="elm.js"></script> | |
| </head> | |
| <body style="margin: 0px;"> | |
| </body> | |
| <script type="text/javascript"> | |
| var app = Elm.Main.fullscreen(); | |
| app.ports.toJS.subscribe(function(state) { | |
| if (state == "Increment") { | |
| app.ports.fromJS.send(1); | |
| } else { | |
| app.ports.fromJS.send(-1); | |
| } | |
| }); | |
| </script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import Html.App as App | |
| import Html exposing (..) | |
| import Component | |
| import Ports | |
| -- MODEL | |
| type alias Model = | |
| { comp : Component.Model | |
| , snoop : String | |
| } | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| let | |
| (val, cmd) = Component.init | |
| in | |
| Model val "" ! [Cmd.map MainMsg cmd] | |
| -- UPDATE | |
| type Msg = MainMsg Component.Msg | Snoop Int | |
| update : Msg -> Model -> (Model, Cmd Msg) | |
| update msg model = | |
| case msg of | |
| MainMsg compMsg -> | |
| let | |
| (newComp, cmd) = Component.update compMsg model.comp | |
| in | |
| { model | comp = newComp } ! [Cmd.map MainMsg cmd] | |
| Snoop val -> | |
| { model | snoop = "fromJS: " ++ (toString val) } ! [] | |
| -- VIEW | |
| view : Model -> Html Msg | |
| view model = | |
| div [] | |
| [ App.map MainMsg (Component.view model.comp) | |
| , div [] [text model.snoop] | |
| ] | |
| -- WIRING | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| Sub.batch | |
| [ Sub.map MainMsg (Component.subscriptions model.comp) | |
| , Ports.fromJS Snoop ] | |
| main : Program Never | |
| main = | |
| App.program | |
| { init = init | |
| , update = update | |
| , view = view | |
| , subscriptions = subscriptions} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port module Ports exposing (toJS, fromJS) | |
| port toJS : String -> Cmd msg | |
| port fromJS : (Int -> msg) -> Sub msg | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment