Skip to content

Instantly share code, notes, and snippets.

@pdamoc pdamoc/Counter.elm
Last active Oct 10, 2016

Embed
What would you like to do?
Multi component elm
{
"name": "elm-counter-exploration",
"authors": [
"Peter Damoc <pdamoc@gmail.com>"
],
"description": "",
"main": "",
"moduleType": [],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"polymer": "polymer/polymer#~1.2.3"
}
}
port module Counter exposing (..)
import Html exposing (..)
import Html.App exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode as Json exposing (Value)
type alias Model =
Int
init : Int -> ( Model, Cmd Msg )
init val =
( val, Cmd.none )
view : Model -> Html Msg
view model =
div [ style [ ( "backgroundColor", "#faa" ) ] ]
[ button [ onClick Decrement ] [ text "-" ]
, span [] [ text <| toString model ]
, button [ onClick Increment ] [ text "+" ]
]
type Msg
= Increment
| Decrement
| Set Int
port change : Int -> Cmd msg
port set : (Model -> msg) -> Sub msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Increment ->
( model + 1, change (model + 1) )
Decrement ->
( model - 1, change (model - 1) )
Set value ->
( value, change value )
main : Program Int
main =
programWithFlags
{ init = init
, view = view
, update = update
, subscriptions = \_ -> set Set
}
----
value : Int -> Attribute msg
value val =
Html.Attributes.attribute "value" (toString val)
counter : List (Attribute msg) -> Html msg
counter attrs =
Html.node "elm-counter" attrs []
detailValue : Json.Decoder Int
detailValue =
Json.at [ "detail", "value" ] Json.int
onValueChanged : (Int -> a) -> Attribute a
onValueChanged tagger =
on "value-changed" <| Json.map tagger detailValue
{
"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.5 <= v < 5.0.0",
"elm-lang/html": "1.1.0 <= v < 2.0.0"
},
"elm-version": "0.17.1 <= v < 0.18.0"
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Elm • Multi</title>
<link rel="import" href="/bower_components/polymer/polymer.html"/>
<script type="text/javascript" src="elm.js"></script>
</head>
<body style="margin: 0px;">
</body>
<script>
// register an element
var counter = Polymer(
{ is: 'elm-counter'
, properties:
{ value :
{ type: Number
, value: 0
, notify: true
}
}
, ready: function()
{
var app = Elm.Counter.embed(this, this.value);
app.ports.change.subscribe(value => {
this.value = value;
});
}
});
</script>
<script type="text/javascript">
Elm.Main.fullscreen();
</script>
</html>
module Main exposing (..)
import Html exposing (..)
import Html.App exposing (..)
import Counter exposing (counter, value, onValueChanged)
type alias Model =
Int
view : Model -> Html Msg
view model =
div []
[ counter [ value 2, onValueChanged ValueChanged ]
]
type Msg
= ValueChanged Int
update : Msg -> Model -> Model
update msg model =
case msg of
ValueChanged val ->
Debug.log "val" val
main : Program Never
main =
beginnerProgram
{ model = 0
, view = view
, update = update
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.