Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 29, 2015 21:13
Show Gist options
  • Save anonymous/ed9581b4c4ffdcef4c17 to your computer and use it in GitHub Desktop.
Save anonymous/ed9581b4c4ffdcef4c17 to your computer and use it in GitHub Desktop.
Download ZIP
Mithril experiment mithriljs: Mithril template // source http://jsbin.com/radaze
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Mithril experiment</title>
<meta name="description" content="mithriljs: Mithril template">
<meta charset="utf-8">
<script>
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
console.log( Array.prototype.slice.call(arguments) );
}
};
window.dir = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
var args = Array.prototype.slice.call(arguments)
args.map(function(a){
console.dir(a)
})
}
};
window.ref = function(){
if(this.console){
var args = Array.prototype.slice.call(arguments)
args.map(function(a){
for(o in this){
if (this[o] === o && a.toString() === "[object Object]") { log(this[o] + " :: " + JSON.stringify(a)) }
else if(this[o] === a && Array.isArray(a)) {
log(o + " :: [" + a + "]");
}
else {
if(this[o] === a) {
log(o + " :: " + a);
}
}
}
});
}
};
$ = function(sel, ctx){return (ctx || document).querySelector(sel)}
$$ = function(sel, ctx){return (ctx || document).querySelectorAll(sel)}
</script>
<script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script>
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script> -->
<!-- modified Mithril with redraw console.logs (extensive) -->
<!-- <script src="http://output.jsbin.com/gaciwi.js"></script> -->
<!-- modified Mithril with redraw console.logs (redraws only) -->
<script src="http://output.jsbin.com/gaciwi/391.js"></script>
<style id="jsbin-css">
.twirl {animation:logo 2s; display:inline-block; -webkit-animation:logo 2s;}
@keyframes twirl {
from {opacity:0;transform:scale(2) rotate(359deg);}
to {opacity:1;transform:scale(1) rotate(0deg);}
}
@-webkit-keyframes logo {
from {opacity:0;-webkit-transform:scale(2) rotate(359deg);}
to {opacity:1;-webkit-transform:scale(1) rotate(0deg);}
}
</style>
</head>
<body>
<script id="jsbin-javascript">
//from a post by Leo Horie
"use strict";
https: //github.com/lhorie/mithril.js/issues/20#issuecomment-38357465
'use strict';
var App = {};
App.controller = function () {
this["class"] = m.prop("");
this.changeState = (function () {
this["class"]("twirl");
}).bind(this);
};
App.view = function (ctrl) {
return m("div", [m(".twirl", "hello world"), m("div", { "class": ctrl["class"](), onclick: ctrl.changeState }, "click me")]);
};
m.mount(document.body, App);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<title>Mithril experiment</title>
<meta name="description" content="mithriljs: Mithril template">
<meta charset="utf-8">
<script>
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
console.log( Array.prototype.slice.call(arguments) );
}
};
window.dir = function(){
log.history = log.history || []; // store logs to an array for reference
log.history.push(arguments);
if(this.console){
var args = Array.prototype.slice.call(arguments)
args.map(function(a){
console.dir(a)
})
}
};
window.ref = function(){
if(this.console){
var args = Array.prototype.slice.call(arguments)
args.map(function(a){
for(o in this){
if (this[o] === o && a.toString() === "[object Object]") { log(this[o] + " :: " + JSON.stringify(a)) }
else if(this[o] === a && Array.isArray(a)) {
log(o + " :: [" + a + "]");
}
else {
if(this[o] === a) {
log(o + " :: " + a);
}
}
}
});
}
};
$ = function(sel, ctx){return (ctx || document).querySelector(sel)}
$$ = function(sel, ctx){return (ctx || document).querySelectorAll(sel)}
<\/script>
<script src="https://rawgit.com/lodash/lodash/3.0.1/lodash.min.js"><\/script>
<\!-- <script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"><\/script> -->
<\!-- modified Mithril with redraw console.logs (extensive) -->
<\!-- <script src="http://output.jsbin.com/gaciwi.js"><\/script> -->
<\!-- modified Mithril with redraw console.logs (redraws only) -->
<script src="http://output.jsbin.com/gaciwi/391.js"><\/script>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.twirl {animation:logo 2s; display:inline-block; -webkit-animation:logo 2s;}
@keyframes twirl {
from {opacity:0;transform:scale(2) rotate(359deg);}
to {opacity:1;transform:scale(1) rotate(0deg);}
}
@-webkit-keyframes logo {
from {opacity:0;-webkit-transform:scale(2) rotate(359deg);}
to {opacity:1;-webkit-transform:scale(1) rotate(0deg);}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//from a post by Leo Horie
https://github.com/lhorie/mithril.js/issues/20#issuecomment-38357465
'use strict'
let App = {}
App.controller = function() {
this.class = m.prop("");
this.changeState = function() {
this.class("twirl");
}.bind(this)
}
App.view = (ctrl) => {
return m("div", [
m(".twirl", "hello world"),
m("div", {class: ctrl.class(), onclick: ctrl.changeState}, "click me")
])
}
m.mount(document.body, App)</script></body>
</html>
Raw
jsbin.radaze.css
.twirl {animation:logo 2s; display:inline-block; -webkit-animation:logo 2s;}
@keyframes twirl {
from {opacity:0;transform:scale(2) rotate(359deg);}
to {opacity:1;transform:scale(1) rotate(0deg);}
}
@-webkit-keyframes logo {
from {opacity:0;-webkit-transform:scale(2) rotate(359deg);}
to {opacity:1;-webkit-transform:scale(1) rotate(0deg);}
}
Raw
jsbin.radaze.js
//from a post by Leo Horie
"use strict";
https: //github.com/lhorie/mithril.js/issues/20#issuecomment-38357465
'use strict';
var App = {};
App.controller = function () {
this["class"] = m.prop("");
this.changeState = (function () {
this["class"]("twirl");
}).bind(this);
};
App.view = function (ctrl) {
return m("div", [m(".twirl", "hello world"), m("div", { "class": ctrl["class"](), onclick: ctrl.changeState }, "click me")]);
};
m.mount(document.body, App);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment