Skip to content

Instantly share code, notes, and snippets.

View pelonpelon's full-sized avatar

pelonpelon

10 followers · 9 following
View GitHub Profile
@pelonpelon
pelonpelon / index.html
Created October 26, 2015 23:16 — forked from anonymous/index.html
// source http://jsbin.com
<!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
@pelonpelon
pelonpelon / index.html
Last active August 29, 2015 14:24 — forked from anonymous/index.html
<!DOCTYPE html>
<html>
<head>
<title>Mithril experiment</title>
<meta name="description" content="mithriljs: Mithril template from Github">
<meta charset="utf-8">
<script>
window.log = function(){
log.history = log.history || []; // store logs to an array for reference
@pelonpelon
pelonpelon / index.html
Created June 12, 2015 23:17
Mithril experiment mithriljs: Mithril template // source http://jsbin.com/mawuzi
<!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
@pelonpelon
pelonpelon / Javascript_snippets.md
Last active August 29, 2015 14:21
Javascript snippets
@pelonpelon
pelonpelon / multi_tenancy.js
Created May 15, 2015 00:30
Mithril: Multi-tenancy
//helpers
var target
function tenant(id, module) {
return {
controller: module.controller,
view: function(ctrl) {
return target == id ? module.view(ctrl) : {subtree: "retain"}
}
}
}
@pelonpelon
pelonpelon / dropdown_select.js
Created May 15, 2015 00:21
Mithril: Dropdowns (select boxes)
var DropDownExample = {
controller: function () {
var ctrl = this
ctrl.data = m.prop([{ name: 'alice', id: 1}, { name: 'bob', id: 2 }])
ctrl.selectedId = m.prop()
},
view: function (ctrl) {
return m('select', { onchange: m.withAttr('value', ctrl.selectedId) }, [
ctrl.data().map(function(person) {
return m('option', { value: person.id }, person.name)
@pelonpelon
pelonpelon / ajax_loading_indicator.js
Created May 15, 2015 00:17
Mithril: Background AJAX Loading Indicator
var LoadingExample = {
controller: function () {
var ctrl = this
// `background: true` is important here.
// Otherwise Mithril will wait for the AJAX request to complete before rendering the view.
ctrl.users = m.request({ url: 'users', method: 'GET', background: true })
},
view: function (ctrl) {
return m('.users', [
m('h3', "All Users"),
@pelonpelon
pelonpelon / mithril_unicode_and_whitespace.md
Last active May 11, 2017 16:17
Unicode, whitespace and HTML entities in Mithril views

####Unicode needs no extra escaping when in a view template string

m('div', "あなたは友人である場合は、パスワードを話す、とドアが開きます")
m.render(document.body, "hello 世界")

####Whitespace can be achieved a few different ways:

css

m("div[style='white-space:pre']", "LIST:\n\titem 1\n\titem 2")
@pelonpelon
pelonpelon / mithril_component_inheritance.js
Created April 29, 2015 22:16
Mithril component inheritance - credit: Gilbert (https://github.com/mindeavor)
m.initComponent = function (component, options, content) {
var controller = new component.controller(options)
controller.render = function (options2, content2) {
return component.view(controller, options2 || options, content2 || content)
}
return controller
}
@pelonpelon
pelonpelon / finite_state_machine.js
Created April 29, 2015 22:08
Example finite state machine - credit: Nijiko Yonskai (https://github.com/Nijikokun)
function state (namespace) {
if (!namespace) return internalState[internalState.length - 1]
internalState.push([namespace, options])
m.redirect(namespace, options)
}
function goto (namespace, options) {
return function (e) {
e.preventDefault()
e.stopPropagation()