bbqbaron/Test.elm

## index.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
  <div id="elm"><!-- We will insert the elm app here --></div>
    <script src="elm.js"></script>
    <script type="text/javascript">
      var div = document.getElementById('elm');
      // Embed the elm app into a div and pass the initial location
      var p = document.location.pathname;
      var elmApp = Elm.fullscreen(Elm.Test, {
        initialLocation: p,
        pops: ""
      });
      elmApp.ports.pushes.subscribe(function(x) {
        window.history.pushState({}, '', x);
      });
      window.onpopstate = function() {
        elmApp.ports.pops.send(document.location.pathname);
      }
    </script>
    </div>
  </body>
</html>

## Test.elm
module Test where

import Html(..)
import Html.Attributes(..)
import Html.Events(..)
import List(..)
import Maybe(..)
import Signal(..)

port initialLocation : String

port pushes : Signal String
port pushes = actionToUrl <~ (subscribe actions)

port pops : Signal String

type Action = Idle | Edit Int | Index

type alias Model = {
    url : String,
    editing : Maybe Int
}

urlToAction : String -> Action
urlToAction u = case u of
    "/article/33/" -> Edit 33
    otherwise -> Index

actionToUrl : Action -> String
actionToUrl a = case a of
    Edit i -> "/article/33/"
    otherwise -> "/article/"

init : Model
init = {url=initialLocation, editing=Nothing}

update : Action -> Model -> Model
update a m = case a of
    Edit i -> {m|editing <- Just i}
    Index -> {m|editing <- Nothing}
    otherwise -> m

actions : Channel Action
actions = channel Idle

state : Signal Model
state = foldp update init (merge (subscribe actions) (urlToAction <~ pops))

view : Model -> Html
view m = div [] [
        case m.editing of
            Just int -> text "editing!"
            Nothing -> text "index!",
        button [onClick (send actions (Edit 33))] [text "edit"],
        button [onClick (send actions Index)] [text "index"]
    ]

main : Signal Html
main = view <~ state
	<!DOCTYPE html>
	<html>
	<head></head>
	<body>
	<div id="elm"><!-- We will insert the elm app here --></div>
	<script src="elm.js"></script>
	<script type="text/javascript">
	var div = document.getElementById('elm');
	// Embed the elm app into a div and pass the initial location
	var p = document.location.pathname;
	var elmApp = Elm.fullscreen(Elm.Test, {
	initialLocation: p,
	pops: ""
	});
	elmApp.ports.pushes.subscribe(function(x) {
	window.history.pushState({}, '', x);
	});
	window.onpopstate = function() {
	elmApp.ports.pops.send(document.location.pathname);
	}
	</script>
	</div>
	</body>
	</html>
	module Test where

	import Html(..)
	import Html.Attributes(..)
	import Html.Events(..)
	import List(..)
	import Maybe(..)
	import Signal(..)

	port initialLocation : String

	port pushes : Signal String
	port pushes = actionToUrl <~ (subscribe actions)

	port pops : Signal String

	type Action = Idle \| Edit Int \| Index

	type alias Model = {
	url : String,
	editing : Maybe Int
	}

	urlToAction : String -> Action
	urlToAction u = case u of
	"/article/33/" -> Edit 33
	otherwise -> Index

	actionToUrl : Action -> String
	actionToUrl a = case a of
	Edit i -> "/article/33/"
	otherwise -> "/article/"

	init : Model
	init = {url=initialLocation, editing=Nothing}

	update : Action -> Model -> Model
	update a m = case a of
	Edit i -> {m\|editing <- Just i}
	Index -> {m\|editing <- Nothing}
	otherwise -> m

	actions : Channel Action
	actions = channel Idle

	state : Signal Model
	state = foldp update init (merge (subscribe actions) (urlToAction <~ pops))

	view : Model -> Html
	view m = div [] [
	case m.editing of
	Just int -> text "editing!"
	Nothing -> text "index!",
	button [onClick (send actions (Edit 33))] [text "edit"],
	button [onClick (send actions Index)] [text "index"]
	]

	main : Signal Html
	main = view <~ state