pdamoc/Counter.elm

## Readme.md

      
    Raw
  

              Readme.md
            
          
    bower install
elm-package install 
elm-make Main.elm Counter.elm --output=elm.js
elm-reactor

and then visit:
http://localhost:8000/index.html

  
## bower.json
{
  "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"
  }
}

## Counter.elm
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

## elm-package.json
{
    "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"
}

## index.html
<!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>

## Main.elm
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
        }
	{
	"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
	}