akiyoshi83/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try mithril</title>
    <style type="text/css" media="screen">
      #header {
        height: 80px;
        width: 100%;
      }
      #header h1 {
        margin: 0;
        padding: 0;
        font-size: 120%;
      }
      #editor {
        position: absolute;
        top: 80px;
        bottom: 0;
        left: 0;
        width: 49%;
      }
      #result {
        position: absolute;
        top: 80px;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="header">
        <h1>Try Mithril</h1>
        <button id="run" title="Command-Enter">RUN (Command+Enter)</button>
      </div>
      <div id="editor">//namespace
var app = {};

//model
app.PageList = function() {
  //return m.request({method: "GET", url: "pages.json"});
  return m.prop([
    { title: "page 1", url: "http://example.com/1" },
    { title: "page 2", url: "http://example.com/2" },
    { title: "page 3", url: "http://example.com/3" },
  ]);
};

//controller
app.controller = function() {
  var pages = app.PageList();
  return {
    pages: pages,
    rotate: function() {
      pages().push(pages().shift());
    }
  }
};

//view
app.view = function(ctrl) {
  return [
    ctrl.pages().map(function(page) {
      return m("a", {href: page.url}, page.title);
    }),
    m("button", {onclick: ctrl.rotate}, "Rotate links")
  ];
};


//initialize
m.mount(document.getElementById("main"), app);
      </div>
      <iframe id="result" srcdoc='
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>try mithril</title>
  </head>
  <body>
    <div id="main">
      RESULT AREA
    </div>
    <script>
      window.onerror = function(msg, file, line, column, err) {
        parent.console.error(arguments);
      }
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
    <div id="injectable"></div>
  </body>
</html>
      '></iframe>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-github.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-javascript.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/snippets/javascript.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-keybinding_menu.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/keybinding-vim.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/github");
        editor.setKeyboardHandler("ace/keyboard/vim");
        editor.getSession().setMode("ace/mode/javascript");
        editor.getSession().setTabSize(2);
        editor.$blockScrolling = Infinity;
        editor.setOptions({
          enableBasicAutocompletion: true,
          enableSnippets: true,
          enableLiveAutocompletion: true
        });
        function run() {
          var code = editor.getValue();
          var iframe = document.getElementById('result');
          var doc = iframe.contentDocument
          var oldScript = doc.getElementById('injectable');
          var parentNode = oldScript.parentNode;
          var newScript = doc.createElement('script');
          newScript.setAttribute('id', 'injectable');
          newScript.textContent = code;
          parentNode.replaceChild(newScript, oldScript);
        }
        editor.commands.addCommand({
          name: 'myCommand',
          bindKey: {win: 'Ctrl-Enter',  mac: 'Command-Enter'},
          exec: function(editor) {
            run();
          },
          readOnly: true
        });
        document.getElementById('run').addEventListener('click', run);
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>try mithril</title>
	<style type="text/css" media="screen">
	#header {
	height: 80px;
	width: 100%;
	}
	#header h1 {
	margin: 0;
	padding: 0;
	font-size: 120%;
	}
	#editor {
	position: absolute;
	top: 80px;
	bottom: 0;
	left: 0;
	width: 49%;
	}
	#result {
	position: absolute;
	top: 80px;
	bottom: 0;
	right: 0;
	width: 50%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="main">
	<div id="header">
	<h1>Try Mithril</h1>
	<button id="run" title="Command-Enter">RUN (Command+Enter)</button>
	</div>
	<div id="editor">//namespace
	var app = {};

	//model
	app.PageList = function() {
	//return m.request({method: "GET", url: "pages.json"});
	return m.prop([
	{ title: "page 1", url: "http://example.com/1" },
	{ title: "page 2", url: "http://example.com/2" },
	{ title: "page 3", url: "http://example.com/3" },
	]);
	};

	//controller
	app.controller = function() {
	var pages = app.PageList();
	return {
	pages: pages,
	rotate: function() {
	pages().push(pages().shift());
	}
	}
	};

	//view
	app.view = function(ctrl) {
	return [
	ctrl.pages().map(function(page) {
	return m("a", {href: page.url}, page.title);
	}),
	m("button", {onclick: ctrl.rotate}, "Rotate links")
	];
	};


	//initialize
	m.mount(document.getElementById("main"), app);
	</div>
	<iframe id="result" srcdoc='
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>try mithril</title>
	</head>
	<body>
	<div id="main">
	RESULT AREA
	</div>
	<script>
	window.onerror = function(msg, file, line, column, err) {
	parent.console.error(arguments);
	}
	</script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
	<div id="injectable"></div>
	</body>
	</html>
	'></iframe>
	</div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/theme-github.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/mode-javascript.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/snippets/javascript.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-keybinding_menu.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/keybinding-vim.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	var editor = ace.edit("editor");
	editor.setTheme("ace/theme/github");
	editor.setKeyboardHandler("ace/keyboard/vim");
	editor.getSession().setMode("ace/mode/javascript");
	editor.getSession().setTabSize(2);
	editor.$blockScrolling = Infinity;
	editor.setOptions({
	enableBasicAutocompletion: true,
	enableSnippets: true,
	enableLiveAutocompletion: true
	});
	function run() {
	var code = editor.getValue();
	var iframe = document.getElementById('result');
	var doc = iframe.contentDocument
	var oldScript = doc.getElementById('injectable');
	var parentNode = oldScript.parentNode;
	var newScript = doc.createElement('script');
	newScript.setAttribute('id', 'injectable');
	newScript.textContent = code;
	parentNode.replaceChild(newScript, oldScript);
	}
	editor.commands.addCommand({
	name: 'myCommand',
	bindKey: {win: 'Ctrl-Enter', mac: 'Command-Enter'},
	exec: function(editor) {
	run();
	},
	readOnly: true
	});
	document.getElementById('run').addEventListener('click', run);
	});
	</script>
	</body>
	</html>