vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make editor and todomvc example more idiomatic

Browse source
This commit is contained in:
Leo Horie 2016-10-28 00:56:59 -04:00
parent a2c46dbf4c
commit 9ea1cf0ae0
3 changed files with 140 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

22
examples/editor/index.html
View file

@ -6,8 +6,8 @@
html,body {height:100%;margin:0;} html,body {height:100%;margin:0;}
h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;} h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
#editor {display:flex;height:100%;} #editor {display:flex;height:100%;}
.editor-input,.editor-preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;} .input,.preview {box-sizing:border-box;height:100%;margin:0;padding:10px;width:50%;}
.editor-input {border:0;border-right:1px solid #ccc;outline:none;resize:none;} .input {border:0;border-right:1px solid #ccc;outline:none;resize:none;}
</style> </style>
</head> </head>
<body> <body>
@ -15,13 +15,23 @@ h1,h2,h3,h4,h5,h6,p {margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="../../mithril.js"></script> <script src="../../mithril.js"></script>
<script> <script>
var data = {text: "# Markdown Editor\n\nType on the left panel and see the result on the right panel"} //model
var state = {
text: "# Markdown Editor\n\nType on the left panel and see the result on the right panel",
update: function(value) {
state.text = value
}
}
//view
var Editor = { var Editor = {
view: function(vnode) { view: function() {
return [ return [
m("textarea.editor-input", {oninput: function(e) {data.text = e.target.value}}, data.text), m("textarea.input", {
m(".editor-preview", m.trust(marked(data.text))), oninput: m.withAttr("value", state.update),
value: state.text
}),
m(".preview", m.trust(marked(state.text))),
] ]
} }
} }

8
examples/todomvc/index.html
View file

@ -12,13 +12,7 @@
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer> </footer>
<script src="../../module/module.js"></script> <script src="../../mithril.js"></script>
<script src="../../render/vnode.js"></script>
<script src="../../render/hyperscript.js"></script>
<script src="../../render/render.js"></script>
<script src="../../querystring/build.js"></script>
<script src="../../querystring/parse.js"></script>
<script src="../../router/router.js"></script>
<script src="todomvc.js"></script> <script src="todomvc.js"></script>
</body> </body>
</html> </html>

258
examples/todomvc/todomvc.js
View file

@ -1,146 +1,134 @@
var m = require("../../render/hyperscript")
var renderer = require("../../render/render")(window)
var router = require("../../router/router")(window)
//model //model
var todos = loadData() var state = {
var editing = null dispatch: function(action, args) {
var showing = "all" state[action].apply(state, args || [])
requestAnimationFrame(function() {
localStorage["todos-mithril"] = JSON.stringify(state.todos)
})
},
function loadData() { todos: JSON.parse(localStorage["todos-mithril"] || "[]"),
return JSON.parse(localStorage["todos-mithril"] || "[]") editing: null,
} filter: "",
function saveData() { remaining: 0,
localStorage["todos-mithril"] = JSON.stringify(todos) todosByStatus: [],
}
function createTodo(title) { createTodo: function(title) {
todos.push({title: title.trim(), completed: false}) state.todos.push({title: title.trim(), completed: false})
} },
function setStatuses(completed) { setStatuses: function(completed) {
for (var i = 0; i < todos.length; i++) todos[i].completed = completed for (var i = 0; i < state.todos.length; i++) state.todos[i].completed = completed
} },
function setStatus(todo, completed) { setStatus: function(todo, completed) {
todo.completed = completed todo.completed = completed
} },
function todosByStatus(todo) { destroy: function(todo) {
switch (showing) { var index = state.todos.indexOf(todo)
case "all": return true if (index > -1) state.todos.splice(index, 1)
case "active": return !todo.completed },
case "completed": return todo.completed clear: function() {
for (var i = 0; i < state.todos.length; i++) {
if (state.todos[i].completed) state.destroy(state.todos[i--])
}
},
edit: function(todo) {
state.editing = todo
},
update: function(title) {
if (state.editing != null) {
state.editing.title = title.trim()
if (state.editing.title === "") destroy(state.editing)
state.editing = null
}
},
reset: function() {
state.editing = null
},
computed: function(vnode) {
state.showing = vnode.attrs.status || ""
state.remaining = state.todos.filter(function(todo) {return !todo.completed}).length
state.todosByStatus = state.todos.filter(function(todo) {
switch (state.showing) {
case "": return true
case "active": return !todo.completed
case "completed": return todo.completed
}
})
} }
} }
function destroy(todo) {
var index = todos.indexOf(todo)
if (index > -1) todos.splice(index, 1)
}
function countRemaining() {
return todos.filter(function(todo) {return !todo.completed}).length
}
function clear() {
for (var i = 0; i < todos.length; i++) {
if (todos[i].completed) destroy(todos[i--])
}
}
function edit(todo) {
editing = todo
}
function update(title) {
editing.title = title.trim()
if (editing.title === "") destroy(editing)
editing = null
}
function reset() {
editing = null
}
function setFilter(filter) {
showing = filter
}
//view //view
function add(e) { var Todos = {
if (e.keyCode === 13) { add: function(e) {
createTodo(this.value) if (e.keyCode === 13) {
this.value = "" state.dispatch("createTodo", [e.target.value])
e.target.value = ""
}
},
toggleAll: function() {
state.dispatch("setStatuses", [document.getElementById("toggle-all").checked])
},
toggle: function(todo) {
state.dispatch("setStatus", [todo, !todo.completed])
},
focus: function(vnode, todo) {
if (todo === state.editing && vnode.dom !== document.activeElement) {
vnode.dom.value = todo.title
vnode.dom.focus()
vnode.dom.selectionStart = vnode.dom.selectionEnd = todo.title.length
}
},
save: function(e) {
if (e.keyCode === 13 || e.type === "blur") state.dispatch("update", [e.target.value])
else if (e.keyCode === 27) state.dispatch("reset")
},
dispatch: function(action, args) {
state.dispatch(action, args)
},
oninit: state.computed,
onbeforeupdate: state.computed,
view: function(vnode) {
var ui = vnode.state
return [
m("header.header", [
m("h1", "todos"),
m("input#new-todo[placeholder='What needs to be done?'][autofocus]", {onkeypress: ui.add}),
]),
m("section#main", {style: {display: state.todos.length > 0 ? "" : "none"}}, [
m("input#toggle-all[type='checkbox']", {checked: state.remaining === 0, onclick: ui.toggleAll}),
m("label[for='toggle-all']", {onclick: ui.toggleAll}, "Mark all as complete"),
m("ul#todo-list", [
state.todos.map(function(todo) {
return m("li", {class: (todo.completed ? "completed" : "") + " " + (todo === state.editing ? "editing" : "")}, [
m(".view", [
m("input.toggle[type='checkbox']", {checked: todo.completed, onclick: function() {ui.toggle(todo)}}),
m("label", {ondblclick: function() {ui.dispatch("edit", [todo])}}, todo.title),
m("button.destroy", {onclick: function() {ui.dispatch("destroy", [todo])}}),
]),
m("input.edit", {onupdate: function(vnode) {ui.focus(vnode, todo)}, onkeypress: ui.save, onblur: ui.save})
])
}),
]),
]),
state.todos.length ? m("footer#footer", [
m("span#todo-count", [
m("strong", state.remaining),
state.remaining === 1 ? " item left" : " items left",
]),
m("ul#filters", [
m("li", m("a[href='/']", {oncreate: m.route.link, class: state.filter === "" ? "selected" : ""}, "All")),
m("li", m("a[href='/active']", {oncreate: m.route.link, class: state.filter === "active" ? "selected" : ""}, "Active")),
m("li", m("a[href='/completed']", {oncreate: m.route.link, class: state.filter === "completed" ? "selected" : ""}, "Completed")),
]),
m("button#clear-completed", {onclick: function() {ui.dispatch("clear")}}, "Clear completed"),
]) : null,
]
} }
} }
function toggleAll() {
setStatuses(document.getElementById("toggle-all").checked)
}
function toggle(todo) {
setStatus(todo, !todo.completed)
}
function focus(vnode, todo) {
if (todo === editing && vnode.dom !== document.activeElement) {
vnode.dom.value = todo.title
vnode.dom.focus()
vnode.dom.selectionStart = vnode.dom.selectionEnd = todo.title.length
}
}
function save(e) {
if (e.keyCode === 13 || e.type === "blur") update(this.value)
else if (e.keyCode === 27) reset()
}
function view() { m.route(document.getElementById("todoapp"), "/", {
var remaining = countRemaining() "/": Todos,
return [ "/:status": Todos,
m("header.header", [
m("h1", "todos"),
m("input#new-todo[placeholder='What needs to be done?'][autofocus]", {onkeypress: add}),
]),
m("section#main", {style: {display: todos.length > 0 ? "" : "none"}}, [
m("input#toggle-all[type='checkbox']", {checked: remaining === 0, onclick: toggleAll}),
m("label[for='toggle-all']", {onclick: toggleAll}, "Mark all as complete"),
m("ul#todo-list", [
todos.filter(todosByStatus).map(function(todo) {
return m("li", {class: (todo.completed ? "completed" : "") + " " + (todo === editing ? "editing" : "")}, [
m(".view", [
m("input.toggle[type='checkbox']", {checked: todo.completed, onclick: function() {toggle(todo)}}),
m("label", {ondblclick: function() {edit(todo)}}, todo.title),
m("button.destroy", {onclick: function() {destroy(todo)}}),
]),
m("input.edit", {onupdate: function(vnode) {focus(vnode, todo)}, onkeypress: save, onblur: save})
])
}),
]),
]),
todos.length ? m("footer#footer", [
m("span#todo-count", [
m("strong", remaining),
remaining === 1 ? " item left" : " items left",
]),
m("ul#filters", [
m("li", m("a[href='#/']", {class: showing === "all" ? "selected" : ""}, "All")),
m("li", m("a[href='#/active']", {class: showing === "active" ? "selected" : ""}, "Active")),
m("li", m("a[href='#/completed']", {class: showing === "completed" ? "selected" : ""}, "Completed")),
]),
m("button#clear-completed", {onclick: clear}, "Clear completed"),
]) : null,
]
}
var root = document.getElementById("todoapp")
var raf
renderer.setEventCallback(run)
function run() {
cancelAnimationFrame(raf)
raf = requestAnimationFrame(function() {
saveData()
renderer.render(root, view())
})
}
router.setPrefix("#")
router.defineRoutes({
"/": "all",
"/active": "active",
"/completed": "completed",
}, function(filter) {
setFilter(filter)
run()
}, function() {
router.setPath("/")
}) })