66 lines
1.6 KiB
JavaScript
66 lines
1.6 KiB
JavaScript
var Component = require('../../../component')
|
|
var html = require('nanohtml')
|
|
|
|
var Todo = require('./todo')
|
|
|
|
module.exports = class Header extends Component {
|
|
constructor (name, state, emit) {
|
|
super(name)
|
|
this.state = state
|
|
this.emit = emit
|
|
this.local = this.state.components[name] = {}
|
|
this.setState()
|
|
}
|
|
|
|
setState () {
|
|
this.local.rawTodos = this.state.todos.clock
|
|
this.local.rawHref = this.state.href
|
|
|
|
this.local.allDone = this.state.todos.done.length === this.state.todos.all.length
|
|
this.local.filter = this.state.href.replace(/^\//, '') || ''
|
|
this.local.todos = this.local.filter === 'completed'
|
|
? this.state.todos.done
|
|
: this.local.filter === 'active'
|
|
? this.state.todos.active
|
|
: this.state.todos.all
|
|
}
|
|
|
|
update () {
|
|
if (this.local.rawTodos !== this.state.todos.clock ||
|
|
this.local.rawHref !== this.state.href) {
|
|
this.setState()
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
|
|
createElement () {
|
|
return html`<section class="main">
|
|
<input
|
|
class="toggle-all"
|
|
type="checkbox"
|
|
checked=${this.local.allDone}
|
|
onchange=${() => this.toggleAll()}/>
|
|
<label for="toggle-all" style="display: none;">
|
|
Mark all as done
|
|
</label>
|
|
<ul class="todo-list">
|
|
${this.local.todos.map(todo => Todo(todo, this.emit))}
|
|
</ul>
|
|
</section>`
|
|
}
|
|
|
|
createTodo (e) {
|
|
var value = e.target.value
|
|
if (e.keyCode === 13) {
|
|
e.target.value = ''
|
|
this.emit('todos:create', value)
|
|
}
|
|
}
|
|
|
|
toggleAll () {
|
|
this.emit('todos:toggleAll')
|
|
}
|
|
}
|