initial release
This commit is contained in:
Leo Horie
parent
554e8358cf
commit
70b2489539
81 changed files with 6702 additions and 2 deletions
77
docs/layout/api.html
Normal file
77
docs/layout/api.html
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
||||
<a href="getting-started.html">Guide</a>
|
||||
<a href="mithril.html">API</a>
|
||||
<a href="mithril.min.zip">Download</a>
|
||||
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col(3,3,12)">
|
||||
<h2 id="api">API (v$version)</h2>
|
||||
<h3 id="core">Core</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.html">m</a></li>
|
||||
<li><a href="mithril.prop.html">m.prop</a></li>
|
||||
<li><a href="mithril.withAttr.html">m.withAttr</a></li>
|
||||
<li><a href="mithril.module.html">m.module</a></li>
|
||||
<li><a href="mithril.trust.html">m.trust</a></li>
|
||||
<li><a href="mithril.render.html">m.render</a></li>
|
||||
<li><a href="mithril.redraw.html">m.redraw</a></li>
|
||||
</ul>
|
||||
<h3 id="routing">Routing</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.route.html">m.route</a>
|
||||
<ul>
|
||||
<li><a href="mithril.route.html#defining-routes">m.route(rootElement, defaultRoute, routes)</a></li>
|
||||
<li><a href="mithril.route.html#redirecting">m.route(path)</a></li>
|
||||
<li><a href="mithril.route.html#mode-abstraction">m.route(element)</a></li>
|
||||
<li><a href="mithril.route.html#mode">m.route.mode</a></li>
|
||||
<li><a href="mithril.route.html#param">m.route.param</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<h3 id="data">Data</h3>
|
||||
<ul>
|
||||
<li><a href="mithril.request.html">m.request</a></li>
|
||||
<li><a href="mithril.deferred.html">m.deferred</a></li>
|
||||
<li><a href="mithril.sync.html">m.sync</a></li>
|
||||
<li><a href="mithril.computation.html">m.startComputation / m.endComputation</a></li>
|
||||
</ul>
|
||||
|
||||
<h2 id="archive">History</h2>
|
||||
<ul>
|
||||
<li><a href="roadmap.html">Roadmap</a></li>
|
||||
<li><a href="change-log.html">Change log</a></li>
|
||||
<li><a href="archive">Mithril versions</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
{DOC}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
||||
<br />© 2014 Leo Horie
|
||||
</div>
|
||||
</footer>
|
||||
<script src="lib/prism/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
2
docs/layout/comparisons/angular.parsing.html
Normal file
2
docs/layout/comparisons/angular.parsing.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
|
||||
To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)
|
||||
14
docs/layout/comparisons/angular.rendering.html
Normal file
14
docs/layout/comparisons/angular.rendering.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<html ng-app>
|
||||
<head><script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script></head>
|
||||
<body ng-controller="TestCtrl">
|
||||
<p>To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<div id="container">
|
||||
<span ng-repeat="item in items"><input value="{{item.name}}"></span>
|
||||
</div>
|
||||
<script>
|
||||
function TestCtrl($scope) {
|
||||
$scope.items = [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
13
docs/layout/comparisons/angular.safety.html
Normal file
13
docs/layout/comparisons/angular.safety.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<html ng-app>
|
||||
<head><script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script></head>
|
||||
<body ng-controller="TestCtrl">
|
||||
<div id="container">
|
||||
<span ng-repeat="item in items"><input value="{{item.name}}"></span>
|
||||
</div>
|
||||
<script>
|
||||
function TestCtrl($scope) {
|
||||
$scope.items = [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a\"><img src='javascript:;' onerror=\"alert('alert box should not appear')\">"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}];
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
4
docs/layout/comparisons/backbone.parsing.html
Normal file
4
docs/layout/comparisons/backbone.parsing.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
|
||||
To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)
|
||||
30
docs/layout/comparisons/backbone.rendering.html
Normal file
30
docs/layout/comparisons/backbone.rendering.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<div id="container"></div>
|
||||
<script type="text/template" id="template">
|
||||
<% _.each(items, function( item ){ %><input value="<%= item.name %>" /><% })%>
|
||||
</script>
|
||||
<script>
|
||||
var View = Backbone.View.extend({
|
||||
el: $("#container"),
|
||||
template: _.template(document.getElementById("template").innerHTML),
|
||||
initialize: function() {
|
||||
this.render()
|
||||
},
|
||||
render: function() {
|
||||
this.$el.html(this.template({items: this.model}))
|
||||
}
|
||||
})
|
||||
new View({
|
||||
model: [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}]
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
29
docs/layout/comparisons/backbone.safety.html
Normal file
29
docs/layout/comparisons/backbone.safety.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<html>
|
||||
<head>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.0/backbone-min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script type="text/template" id="template">
|
||||
<% _.each(items, function( item ){ %><input value="<%= item.name %>" /><% })%>
|
||||
</script>
|
||||
<script>
|
||||
var View = Backbone.View.extend({
|
||||
el: $("#container"),
|
||||
template: _.template(document.getElementById("template").innerHTML),
|
||||
initialize: function() {
|
||||
this.render()
|
||||
},
|
||||
render: function() {
|
||||
this.$el.html(this.template({items: this.model}))
|
||||
}
|
||||
})
|
||||
new View({
|
||||
model: [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a\"><img src='javascript:;' onerror=\"alert('alert box should not appear')\">"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}]
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2
docs/layout/comparisons/jquery.parsing.html
Normal file
2
docs/layout/comparisons/jquery.parsing.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
|
||||
To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)
|
||||
17
docs/layout/comparisons/jquery.rendering.html
Normal file
17
docs/layout/comparisons/jquery.rendering.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<html>
|
||||
<head><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script></head>
|
||||
<body>
|
||||
<p>To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
var items = [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}];
|
||||
var view = function() {
|
||||
var container = $("#container").html("");
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
container.append("<input value=\"" + items[i].name + "\" />");
|
||||
}
|
||||
}
|
||||
$(view);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
16
docs/layout/comparisons/jquery.safety.html
Normal file
16
docs/layout/comparisons/jquery.safety.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<html>
|
||||
<head><script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script></head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
var items = [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a\"><img src='javascript:;' onerror=\"alert('alert box should not appear')\">"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}];
|
||||
var view = function() {
|
||||
var container = $("#container").html("");
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
container.append("<input value=\"" + items[i].name + "\" />");
|
||||
}
|
||||
}
|
||||
$(view);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
2
docs/layout/comparisons/mithril.parsing.html
Normal file
2
docs/layout/comparisons/mithril.parsing.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<script src="../mithril.min.js"></script>
|
||||
To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)
|
||||
20
docs/layout/comparisons/mithril.rendering.html
Normal file
20
docs/layout/comparisons/mithril.rendering.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<html>
|
||||
<head><script src="../mithril.min.js"></script></head>
|
||||
<body>
|
||||
<p>To run an execution time test on this page, run the profiler from your browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
var app = {}
|
||||
app.controller = function() {
|
||||
this.items = [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}];
|
||||
}
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.items
|
||||
.map(function(item) {
|
||||
return m("input", {value: item.name})
|
||||
});
|
||||
}
|
||||
m.module(document.getElementById("container"), app);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
19
docs/layout/comparisons/mithril.safety.html
Normal file
19
docs/layout/comparisons/mithril.safety.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<html>
|
||||
<head><script src="../mithril.min.js"></script></head>
|
||||
<body>
|
||||
<div id="container"></div>
|
||||
<script>
|
||||
var app = {}
|
||||
app.controller = function() {
|
||||
this.items = [{name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a\"><img src='javascript:;' onerror=\"alert('alert box should not appear')\">"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}, {name: "a"}, {name: "b"}, {name: "c"}];
|
||||
}
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.items
|
||||
.map(function(item) {
|
||||
return m("input", {value: item.name})
|
||||
});
|
||||
}
|
||||
m.module(document.getElementById("container"), app);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
docs/layout/guide.html
Normal file
59
docs/layout/guide.html
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
||||
<a href="getting-started.html">Guide</a>
|
||||
<a href="mithril.html">API</a>
|
||||
<a href="mithril.min.zip">Download</a>
|
||||
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col(3,3,12)">
|
||||
<h2 id="core-topics">Core Topics</h2>
|
||||
<ul>
|
||||
<li><a href="getting-started.html">Getting Started</a></li>
|
||||
<li><a href="routing.html">Routing</a></li>
|
||||
<li><a href="web-services.html">Web Services</a></li>
|
||||
<li><a href="components.html">Components</a></li>
|
||||
</ul>
|
||||
<h2 id="advanced-topics.html">Advanced Topics</h2>
|
||||
<ul>
|
||||
<li><a href="compiling-templates.html">Compiling Templates</a></li>
|
||||
<li><a href="auto-redrawing.html">The Auto-Redrawing System</a></li>
|
||||
<li><a href="integration.html">Integrating with Other Libraries</a></li>
|
||||
</ul>
|
||||
<h2 id="misc">Misc</h2>
|
||||
<ul>
|
||||
<li><a href="comparison.html">Differences from Other MVC Frameworks</a></li>
|
||||
<li><a href="practices.html">Good Practices</a></li>
|
||||
<li><a href="tools.html">Useful Tools</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col(9,9,12)">
|
||||
{DOC}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>
|
||||
<br />© 2014 Leo Horie
|
||||
</div>
|
||||
</footer>
|
||||
<script src="lib/prism/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
196
docs/layout/index.html
Normal file
196
docs/layout/index.html
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Mithril</title>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic" rel="stylesheet" />
|
||||
<link href="lib/prism/prism.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="container">
|
||||
<a href="index.html" class="logo"><span>○</span> Mithril</a>
|
||||
<a href="getting-started.html">Guide</a>
|
||||
<a href="mithril.html">API</a>
|
||||
<a href="mithril.min.zip">Download</a>
|
||||
<a href="http://github.com/lhorie/mithril.js" target="_blank">Github</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="cta">
|
||||
<div class="container">
|
||||
<h1 class="logo"><span>○</span> Mithril</h1>
|
||||
|
||||
<p>A Javascript Framework for Building Brilliant Applications</p>
|
||||
|
||||
<a class="button" href="getting-started.html">Guide</a>
|
||||
<a class="button" href="mithril.min.zip">Download v$version</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features">
|
||||
<div class="container row">
|
||||
<div class="feature col(4,4,12)">
|
||||
<h2>Light-weight</h2>
|
||||
<ul>
|
||||
<li>Only 3kb gzipped, no dependencies</li>
|
||||
<li>Small API, small learning curve</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature col(4,4,12)">
|
||||
<h2>Robust</h2>
|
||||
<ul>
|
||||
<li>Safe-by-default templates</li>
|
||||
<li>Hierarchical MVC via components</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="feature col(4,4,12)">
|
||||
<h2>Fast</h2>
|
||||
<ul>
|
||||
<li>Virtual DOM diffing and compilable templates</li>
|
||||
<li>Intelligent auto-redrawing system</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sample">
|
||||
<div class="container">
|
||||
<div class="col(8,8,12)">
|
||||
<h2>Sample code</h2>
|
||||
|
||||
<pre><code class="language-javascript">//namespace
|
||||
var app = {};
|
||||
|
||||
//model
|
||||
app.PageList = function() {
|
||||
return m.request({method: "GET", url: "pages.json"});
|
||||
};
|
||||
|
||||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
};
|
||||
|
||||
//initialize
|
||||
m.module(document.getElementById("example"), app);</code></pre>
|
||||
|
||||
</div>
|
||||
<div class="col(4,4,12)">
|
||||
<h2>Output</h2>
|
||||
<div id="example" class="example output">
|
||||
<noscript>
|
||||
<a href="getting-started.html">Getting Started</a>
|
||||
<a href="mithril.html">Documentation</a></div>
|
||||
</noscript>
|
||||
<script src="mithril.min.js"></script>
|
||||
<script>
|
||||
//namespace
|
||||
var app = {};
|
||||
|
||||
//model
|
||||
app.PageList = function() {
|
||||
return m.request({method: "GET", url: "pages.json"});
|
||||
};
|
||||
|
||||
//controller
|
||||
app.controller = function() {
|
||||
this.pages = app.PageList();
|
||||
};
|
||||
|
||||
//view
|
||||
app.view = function(ctrl) {
|
||||
return ctrl.pages().map(function(page) {
|
||||
return m("a", {href: page.url}, page.title);
|
||||
});
|
||||
};
|
||||
|
||||
//initialize
|
||||
m.module(document.getElementById("example"), app);
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="performance">
|
||||
<div class="container">
|
||||
<h2>Performance</h2>
|
||||
<p>To run the execution time tests below, click on their respective links, run the profiler from your desired browser's developer tools and measure the running time of a page refresh. (Lower is better)</p>
|
||||
<div class="row">
|
||||
<div class="col(4,4,6)">
|
||||
<h3>Loading</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.parsing.html">Mithril</a></td><td><span class="bar" style="background:#161;width:1%;"></span> 0.28ms</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.parsing.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:35%;"></span> 13.11ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.parsing.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:50%;"></span> 18.54ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.parsing.html">Angular</a></td><td><span class="bar" style="background:#c33;width:20%;"></span> 7.49ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col(8,8,12)">
|
||||
<h3>Rendering</h3>
|
||||
<table>
|
||||
<tr><td><a href="comparisons/mithril.rendering.html">Mithril</a></td><td><span class="bar" style="background:#161;width:4%;"></span> 9.44ms (uncompiled)</td></tr>
|
||||
<tr><td><a href="comparisons/jquery.rendering.html">jQuery</a></td><td><span class="bar" style="background:#66c;width:17%;"></span> 40.27ms</td></tr>
|
||||
<tr><td><a href="comparisons/backbone.rendering.html">Backbone</a></td><td><span class="bar" style="background:#33c;width:10%;"></span> 23.05ms</td></tr>
|
||||
<tr><td><a href="comparisons/angular.rendering.html">Angular</a></td><td><span class="bar" style="background:#c33;width:50%;"></span> 118.63ms</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="security">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col(8,8,12)">
|
||||
<h2>Safety</h2>
|
||||
<p>Mithril templates are safe by default, i.e. you can't unintentionally create security holes.</p>
|
||||
<p>To run the tests for each framework, click on the respective links. If you see an alert box, ensuring security with that framework is more work for you.</p>
|
||||
</div>
|
||||
<div class="col(4,4,12)">
|
||||
<h3>Test Summary</h3>
|
||||
<a href="comparisons/mithril.safety.html">Mithril</a> <em class="success">(pass) ✓</em><br />
|
||||
<a href="comparisons/jquery.safety.html">jQuery</a> <em class="error">(fail) ✗</em><br />
|
||||
<a href="comparisons/backbone.safety.html">Backbone</a> <em class="error">(fail) ✗</em><br />
|
||||
<a href="comparisons/angular.safety.html">Angular</a> <em class="success">(pass) ✓</em><br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="more">
|
||||
<div class="container row">
|
||||
<div class="col(6,6,12)">
|
||||
<h2>Guide</h2>
|
||||
<p>Build a simple app, learn the ropes</p>
|
||||
<p><a href="getting-started.html">Read Guide</a></p>
|
||||
</div>
|
||||
|
||||
<div class="col(6,6,12)">
|
||||
<h2>API</h2>
|
||||
<p>Docs and code samples for your reference</p>
|
||||
<p><a href="mithril.html">Read Docs</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="container">
|
||||
Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a><br />
|
||||
© 2014 Leo Horie
|
||||
</div>
|
||||
</footer>
|
||||
<script src="lib/prism/prism.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
126
docs/layout/lib/prism/prism.css
Normal file
126
docs/layout/lib/prism/prism.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.builtin {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #a67f59;
|
||||
background: hsla(0,0%,100%,.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
9
docs/layout/lib/prism/prism.js
Normal file
9
docs/layout/lib/prism/prism.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* Prism: Lightweight, robust, elegant syntax highlighting
|
||||
* MIT license http://www.opensource.org/licenses/mit-license.php/
|
||||
* @author Lea Verou http://lea.verou.me
|
||||
*/(function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var r={};for(var i in e)e.hasOwnProperty(i)&&(r[i]=t.util.clone(e[i]));return r;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var r=t.util.clone(t.languages[e]);for(var i in n)r[i]=n[i];return r},insertBefore:function(e,n,r,i){i=i||t.languages;var s=i[e],o={};for(var u in s)if(s.hasOwnProperty(u)){if(u==n)for(var a in r)r.hasOwnProperty(a)&&(o[a]=r[a]);o[u]=s[u]}return i[e]=o},DFS:function(e,n){for(var r in e){n.call(e,r,e[r]);t.util.type(e)==="Object"&&t.languages.DFS(e[r],n)}}},highlightAll:function(e,n){var r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');for(var i=0,s;s=r[i++];)t.highlightElement(s,e===!0,n)},highlightElement:function(r,i,s){var o,u,a=r;while(a&&!e.test(a.className))a=a.parentNode;if(a){o=(a.className.match(e)||[,""])[1];u=t.languages[o]}if(!u)return;r.className=r.className.replace(e,"").replace(/\s+/g," ")+" language-"+o;a=r.parentNode;/pre/i.test(a.nodeName)&&(a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+o);var f=r.textContent;if(!f)return;f=f.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ");var l={element:r,language:o,grammar:u,code:f};t.hooks.run("before-highlight",l);if(i&&self.Worker){var c=new Worker(t.filename);c.onmessage=function(e){l.highlightedCode=n.stringify(JSON.parse(e.data),o);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(l.element);t.hooks.run("after-highlight",l)};c.postMessage(JSON.stringify({language:l.language,code:l.code}))}else{l.highlightedCode=t.highlight(l.code,l.grammar,l.language);t.hooks.run("before-insert",l);l.element.innerHTML=l.highlightedCode;s&&s.call(r);t.hooks.run("after-highlight",l)}},highlight:function(e,r,i){return n.stringify(t.tokenize(e,r),i)},tokenize:function(e,n,r){var i=t.Token,s=[e],o=n.rest;if(o){for(var u in o)n[u]=o[u];delete n.rest}e:for(var u in n){if(!n.hasOwnProperty(u)||!n[u])continue;var a=n[u],f=a.inside,l=!!a.lookbehind,c=0;a=a.pattern||a;for(var h=0;h<s.length;h++){var p=s[h];if(s.length>e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+"</"+s.tag+">"};if(!self.document){self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}})();;
|
||||
Prism.languages.markup={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|\w+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});;
|
||||
Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}}, number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|(&){1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};
|
||||
;
|
||||
Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(var|let|if|else|while|do|for|return|in|instanceof|function|get|set|new|with|typeof|try|throw|catch|finally|null|break|continue)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<|<)script[\w\W]*?(>|>)[\w\W]*?(<|<)\/script(>|>)/ig,inside:{tag:{pattern:/(<|<)script[\w\W]*?(>|>)|(<|<)\/script(>|>)/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});;
|
||||
4
docs/layout/pages.json
Normal file
4
docs/layout/pages.json
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
[
|
||||
{"title": "Getting Started", "url": "getting-started.html"},
|
||||
{"title": "Documentation", "url": "mithril.html"}
|
||||
]
|
||||
86
docs/layout/style.css
Normal file
86
docs/layout/style.css
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
.container {margin:auto;max-width:1000px;padding:0 20px;position:relative;}
|
||||
.container:after,.row:after {content:"";display:table;clear:both;}
|
||||
.container,.row,[class*='col('] {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
|
||||
[class*='col('] {float:left;}
|
||||
[class*='(3,'] {width:25%;}
|
||||
[class*='(4,'] {width:33.33333%;}
|
||||
[class*='(6,'] {width:50%;}
|
||||
[class*='(8,'] {width:66.66667%;}
|
||||
[class*='(9,'] {width:75%;}
|
||||
@media (max-width:1000px) {
|
||||
[class*=',3,'] {width:25%;}
|
||||
[class*=',4,'] {width:33.33333%;}
|
||||
[class*=',6,'] {width:50%;}
|
||||
[class*=',8,'] {width:66.66667%;}
|
||||
[class*=',9,'] {width:75%;}
|
||||
}
|
||||
@media (max-width:750px) {
|
||||
[class*=',6)'] {width:50%;}
|
||||
[class*=',12)'] {width:100%;}
|
||||
}
|
||||
|
||||
html {background:#999;color:#222;font:14px Helvetica;}
|
||||
html,body {margin:0;padding:0;}
|
||||
header,footer {background:#999;}
|
||||
nav {text-align:right;}
|
||||
nav a:first-child,nav a:first-child:visited {color:#fff;font-size:27px;float:left;line-height:1.3em;padding:0;text-decoration:none;}
|
||||
nav a {color:#fff;display:inline-block;padding:10px;}
|
||||
nav a:visited {color:#ddd;}
|
||||
footer {text-align:center;padding:10px 0;}
|
||||
footer,footer a,footer a:visited {color:#fff;}
|
||||
h1,h2 {font-family:Palatino;margin:0 0 10px;}
|
||||
h1 {font-size:3em;text-shadow:0.01em 0.01em #777, -0.01em -0.01em #fff;}
|
||||
h1 span {animation:logo 2s;display:inline-block;}
|
||||
h2 {color:#888;font-style:italic;}
|
||||
h3 {margin:10px 0;}
|
||||
p {margin:15px 0;}
|
||||
ul {margin:15px 0;padding:0 0 0 1em;}
|
||||
li {margin:0 0 10px;}
|
||||
a {color:#161;}
|
||||
a:visited {color:#383;}
|
||||
a:hover {text-decoration:none;}
|
||||
pre {background:#ffe;border:1px solid #ddd;overflow:auto;margin:0 0 15px;padding:5px 10px;white-space:pre;-webkit-overflow-scrolling:touch;}
|
||||
pre[class*="language-"],code {background:#ffe;font:12px/15px Lucida Console,Monaco,monospace;}
|
||||
hr {border-top:1px solid #ccc;border-width:1px 0 0;margin:20px 0;}
|
||||
table {margin:0 0 10px;width:100%;}
|
||||
.cta {padding:30px 0 20px;text-align:center;}
|
||||
.cta {
|
||||
background:
|
||||
linear-gradient(27deg, #e5e5e5 5px, rgba(255,255,255,0) 5px) 0 5px,
|
||||
linear-gradient(207deg, #e5e5e5 5px, rgba(255,255,255,0) 5px) 10px 0px,
|
||||
linear-gradient(27deg, #f2f2f2 5px, rgba(255,255,255,0) 5px) 0px 10px,
|
||||
linear-gradient(207deg, #f2f2f2 5px, rgba(255,255,255,0) 5px) 10px 5px,
|
||||
linear-gradient(90deg, #ebebeb 10px, rgba(255,255,255,0) 10px),
|
||||
linear-gradient(#ededed 25%, #eaeaea 25%, #eaeaea 50%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 75%, #f4f4f4 75%, #f4f4f4);
|
||||
background-color: #e3e3e3;
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
.logo {color:#d3d3d3;font-family:Georgia;font-style:italic;}
|
||||
.logo :before {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.10em;}
|
||||
.logo :after {content:"\25CB";position:absolute;margin:-0.17em 0 0 -0.5em;}
|
||||
.button,.button:visited {background:#5a5;border-radius:5px;box-shadow:1px 1px #777, -1px -1px #fff;color:#fff;display:inline-block;font:normal bold 16px Helvetica;margin:0 10px 10px;padding:10px 30px;text-decoration:none;}
|
||||
.features {background:#fff;padding:30px 0 0;}
|
||||
.feature {margin:0 0 30px;padding:0 20px 0 0;}
|
||||
.sample {background:#f5f5f5;padding:30px 0 10px;}
|
||||
.example {background:#ffe;border:1px solid #ddd;display:block;font:Courier New;margin-bottom:20px;padding:5px 10px;}
|
||||
.example span {color:#383;font-weight:bold;}
|
||||
.example small {color:#888;font-size:1em;}
|
||||
.more {background:#ddd;padding:30px 0;}
|
||||
.output a,.more a {display:block;margin:0 0 10px;}
|
||||
.output a:after,.more a:after {content:" \bb";}
|
||||
.performance {background:#fff;padding:30px 0;}
|
||||
.performance td:first-child {text-align:right;width:1%;}
|
||||
.bar {background:red;height:4px;float:left;margin:0.5em 1em 0 0;}
|
||||
.security {background:#f5f5f5;padding:30px 0;}
|
||||
.success {color:#383;}
|
||||
.error {color:#f00;}
|
||||
.content {background:#f5f5f5;padding:30px 0;}
|
||||
|
||||
@media (min-width:750px) {
|
||||
.sample pre {margin-right:20px;}
|
||||
}
|
||||
|
||||
@keyframes logo {
|
||||
from {opacity:0;transform:scale(2) rotate(359deg);}
|
||||
to {opacity:1;transform:scale(1) rotate(0deg);}
|
||||
}
|
||||
64
docs/layout/tools/template-compiler.sjs
Normal file
64
docs/layout/tools/template-compiler.sjs
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
Compiles Mithril templates
|
||||
|
||||
Requires sweet.js (https://github.com/mozilla/sweet.js)
|
||||
Installation: npm install -g sweet.js
|
||||
Usage: sjs --module /mithril.compile.sjs --output <output-filename>.js <input-filename>.js
|
||||
*/
|
||||
|
||||
macro m {
|
||||
case { _ ($selector) } => {
|
||||
return #{m($selector, {}, [])};
|
||||
}
|
||||
case { _ ($selector, $partial) } => {
|
||||
var partialSyntax = #{$partial};
|
||||
var partial = unwrapSyntax(partialSyntax);
|
||||
return partial.value == "{}" ? #{m($selector, $partial, [])} : #{m($selector, {}, partial)};
|
||||
}
|
||||
case { _ ($selector, $dynAttrs, $children) } => {
|
||||
var selectorSyntax = #{$selector};
|
||||
var selector = unwrapSyntax(selectorSyntax);
|
||||
|
||||
var dynAttrsSyntax = #{$dynAttrs};
|
||||
var dynAttrs = unwrapSyntax(dynAttrsSyntax);
|
||||
|
||||
var parser = /(?:(^|#|\.)([^#\.\[\]]+))|(\[.+?\])/g;
|
||||
var attrParser = /\[(.+?)=("|'|)(.+?)\2\]/;
|
||||
var _match = null;
|
||||
var classes = [];
|
||||
var cell = {tag: "div", attrs: {}, children: []};
|
||||
|
||||
while (_match = parser.exec(selector)) {
|
||||
if (_match[1] == "") cell.tag = _match[2];
|
||||
else if (_match[1] == "#") cell.attrs.id = _match[2];
|
||||
else if (_match[1] == ".") classes.push(_match[2]);
|
||||
else if (_match[3][0] == "[") {
|
||||
var pair = attrParser.exec(_match[3]);
|
||||
cell.attrs[pair[1]] = pair[3];
|
||||
}
|
||||
}
|
||||
if (classes.length > 0) cell.attrs["class"] = classes.join(" ");
|
||||
|
||||
var tag = makeValue(cell.tag, #{here});
|
||||
var attrsBody = Object.keys(cell.attrs).reduce(function(memo, attrName) {
|
||||
return memo.concat([
|
||||
makeValue(attrName, #{here}),
|
||||
makePunc(":", #{here}),
|
||||
makeValue(cell.attrs[attrName], #{here}),
|
||||
makePunc(",", #{here})
|
||||
]);
|
||||
}, []).concat(dynAttrs.inner);
|
||||
var attrs = [makeDelim("{}", attrsBody, #{here})];
|
||||
var children = cell.children.map(function(child) {
|
||||
return makeValue(child, #{here});
|
||||
})
|
||||
letstx $tag = [tag], $attrs = attrs;
|
||||
|
||||
return #{ ({tag: $tag, attrs: $attrs , children: $children}) };
|
||||
}
|
||||
case { _ } => {
|
||||
return #{Mithril};
|
||||
}
|
||||
}
|
||||
|
||||
export m;
|
||||
9
docs/layout/tools/template-converter.html
Normal file
9
docs/layout/tools/template-converter.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<p>If you already have your HTML written and want to convert it into a Mithril template, paste the HTML below and press the "Convert" button.</p>
|
||||
|
||||
<div id="converter"></div>
|
||||
|
||||
<script src="../mithril.min.js"></script>
|
||||
<script src="template-converter.js"></script>
|
||||
<script>
|
||||
m.module(document.getElementById("converter"), templateConverter);
|
||||
</script>
|
||||
89
docs/layout/tools/template-converter.js
Normal file
89
docs/layout/tools/template-converter.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
var templateConverter = {};
|
||||
|
||||
templateConverter.DOMFragment = function(markup) {
|
||||
if (markup.indexOf("<!doctype") > -1) return [new DOMParser().parseFromString(markup, "text/html").childNodes[1]]
|
||||
var container = document.createElement("div");
|
||||
container.insertAdjacentHTML("beforeend", markup);
|
||||
return container.childNodes;
|
||||
}
|
||||
templateConverter.VirtualFragment = function recurse(domFragment) {
|
||||
var virtualFragment = [];
|
||||
for (var i = 0, el; el = domFragment[i]; i++) {
|
||||
if (el.nodeType == 3) {
|
||||
virtualFragment.push(el.nodeValue);
|
||||
}
|
||||
else {
|
||||
var attrs = {};
|
||||
for (var j = 0, attr; attr = el.attributes[j]; j++) {
|
||||
attrs[attr.name] = attr.value;
|
||||
}
|
||||
|
||||
virtualFragment.push({tag: el.tagName.toLowerCase(), attrs: attrs, children: recurse(el.childNodes)});
|
||||
}
|
||||
}
|
||||
return virtualFragment;
|
||||
}
|
||||
templateConverter.Template = function recurse() {
|
||||
if (Object.prototype.toString.call(arguments[0]) == "[object String]") {
|
||||
return new recurse(new templateConverter.VirtualFragment(new templateConverter.DOMFragment(arguments[0])));
|
||||
}
|
||||
|
||||
var virtualFragment = arguments[0], level = arguments[1]
|
||||
if (!level) level = 1;
|
||||
|
||||
var tab = "\n" + new Array(level + 1).join("\t");
|
||||
var virtuals = [];
|
||||
for (var i = 0, el; el = virtualFragment[i]; i++) {
|
||||
if (typeof el == "string") {
|
||||
if (el.match(/\t| {2,}/g) && el.trim().length == 0) virtuals.indented = true;
|
||||
else virtuals.push('"' + el.replace(/"/g, '\\"').replace(/\r/g, "\\r").replace(/\n/g, "\\n") + '"');
|
||||
}
|
||||
else {
|
||||
var virtual = "";
|
||||
if (el.tag != "div") virtual += el.tag;
|
||||
if (el.attrs["class"]) {
|
||||
virtual += "." + el.attrs["class"].replace(/\t+/g, " ").split(" ").join(".");
|
||||
delete el.attrs["class"];
|
||||
}
|
||||
var attrNames = Object.keys(el.attrs).sort()
|
||||
for (var j = 0, attrName; attrName = attrNames[j]; j++) {
|
||||
if (attrName != "style") virtual += "[" + attrName + "='" + el.attrs[attrName].replace(/'/g, "\\'") + "']";
|
||||
}
|
||||
virtual = '"' + virtual + '"';
|
||||
|
||||
var style = ""
|
||||
if (el.attrs.style) {
|
||||
virtual += ", {style: " + ("{\"" + el.attrs.style.replace(/:/g, "\": \"").replace(/;/g, "\", \"") + "}").replace(/, "}|"}/, "}") + "}"
|
||||
}
|
||||
|
||||
if (el.children.length > 0) {
|
||||
virtual += ", " + recurse(el.children, level + 1);
|
||||
}
|
||||
virtual = "m(" + virtual + ")";
|
||||
virtuals.push(virtual);
|
||||
}
|
||||
}
|
||||
if (!virtuals.indented) tab = "";
|
||||
|
||||
var isInline = virtuals.length == 1 && virtuals[0].charAt(0) == '"';
|
||||
var template = isInline ? virtuals.join(", ") : "[" + tab + virtuals.join("," + tab) + tab.slice(0, -1) + "]";
|
||||
return new String(template);
|
||||
}
|
||||
|
||||
templateConverter.controller = function() {
|
||||
this.source = m.prop("");
|
||||
this.output = m.prop("");
|
||||
|
||||
this.convert = function() {
|
||||
return this.output(new templateConverter.Template(this.source()));
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
templateConverter.view = function(ctrl) {
|
||||
return [
|
||||
m("textarea", {autofocus: true, style: {width:"100%", height: "40%"}, onchange: m.withAttr("value", ctrl.source)}, ctrl.source()),
|
||||
m("button", {onclick: ctrl.convert.bind(ctrl)}, "Convert"),
|
||||
m("textarea", {style: {width:"100%", height: "40%"}}, ctrl.output())
|
||||
];
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue