var html = require('bel') // cannot require choo/html because it's a nested repo
module.exports = mainView
function mainView (state, emit) {
emit('log:debug', 'Rendering main view')
return html`
${Header(state, emit)}
${TodoList(state, emit)}
${Footer(state, emit)}
`
}
function Header (state, emit) {
return html`
`
function createTodo (e) {
var value = e.target.value
if (!value) return
if (e.keyCode === 13) {
emit('todos:input', '')
emit('todos:create', value)
} else {
emit('todos:input', value)
}
}
}
function Footer (state, emit) {
var filter = state.href.replace(/^\//, '') || ''
var activeCount = state.todos.active.length
var hasDone = state.todos.done.length
return html`
`
function filterButton (name, filter, currentFilter, emit) {
var filterClass = filter === currentFilter
? 'selected'
: ''
var uri = '#' + name.toLowerCase()
if (uri === '#all') uri = '/'
return html`
${name}
`
}
function deleteCompleted (emit) {
return html`
`
function deleteAllCompleted () {
emit('todos:deleteCompleted')
}
}
}
function TodoItem (todo, emit) {
var clx = classList({ completed: todo.done, editing: todo.editing })
return html`
`
function toggle (e) {
emit('todos:toggle', todo.id)
}
function edit (e) {
emit('todos:edit', todo.id)
}
function destroy (e) {
emit('todos:delete', todo.id)
}
function update (e) {
emit('todos:update', {
id: todo.id,
editing: false,
name: e.target.value
})
}
function handleEditKeydown (e) {
if (e.keyCode === 13) update(e) // Enter
else if (e.code === 27) emit('todos:unedit') // Escape
}
function classList (classes) {
var str = ''
var keys = Object.keys(classes)
for (var i = 0, len = keys.length; i < len; i++) {
var key = keys[i]
var val = classes[key]
if (val) str += (key + ' ')
}
return str
}
}
function TodoList (state, emit) {
var filter = state.href.replace(/^\//, '') || ''
var items = filter === 'completed'
? state.todos.done
: filter === 'active'
? state.todos.active
: state.todos.all
var allDone = state.todos.done.length === state.todos.all.length
var nodes = items.map(function (todo) {
return TodoItem(todo, emit)
})
return html`
`
function toggleAll () {
emit('todos:toggleAll')
}
}