Todo with history riot app.

app.tag

<app>
  <h1 if={ opts.title }>{ opts.title }</h1>
  <todo-list dat-is="todo-list"
    list={ tasklist }
    newtask={ add }
    delete={ delete }
    check={ check }
    undo={ undo }
    redo={ redo }
    undovisible={ store.history.length }
    redovisible={ store.future.length }
  />

  var todolist = this.tags['todo-list']

  this.store = {
    tasks: [],
    history: [],
    present: [],
    future: []
  }

  this.tasklist = []

  updateTodoList() {
    var store = this.store
    this.tasklist = store.present.map(function(id) {
      return store.tasks[id]
    })
    todolist.update()
    console.log(this.tasklist)
  }

  add(task) {
    var store = this.store
    var id = store.tasks.length
    store.history.push(store.present.slice())
    store.tasks.push({title: task})
    store.present.push(id)
    this.updateTodoList()
  }

  check(id) {
    var store = this.store
    var realId = store.present[id]
    if (this.tasklist[realId].completed) {
      this.tasklist[realId].completed = false
    } else {
      this.tasklist[realId].completed = true
    }
  }

  delete(id) {
    var store = this.store
    store.history.push(store.present.slice())
    store.present.splice(id, 1)
    this.updateTodoList()
  }

  undo() {
    var store = this.store
    store.future.push(store.present.slice())
    store.present = store.history.pop()
    this.updateTodoList()
  }

  redo() {
    var store = this.store
    store.history.push(store.present.slice())
    store.present = store.future.pop()
    this.updateTodoList()
  }
</app>

todo-item.tag

<todo-item>
  <input type="checkbox" checked={ opts.completed } onchange={ change }/>
  <label><yield/></label>
  <button onclick={ click }>X</button>

  change(e) {
    e.preventUpdate = true
    this.opts.oncheck(this.opts.key)
  }

  click(e) {
    e.preventUpdate = true
    this.opts.delete(this.opts.key)
  }
</todo-item>

todo-list.tag

<todo-list>

  <button if={ opts.undovisible } onclick={ opts.undo }>Undo</button>
  <button if={ opts.redovisible } onclick={ opts.redo }>Redo</button>

  <form onsubmit={ add }>
    <input name="input" type="text" onkeyup={ edit }/>
    <button disabled={ !text }>Add item</button>
  </form>

  <ul>
    <li data-is="todo-item" each={value, id in opts.list} key={ this.id } delete={ this.parent.opts.delete } oncheck={ this.parent.opts.check } completed={ value.completed }>{ value.title }</li>
  </ul>

  <style>
    todo-list input[type=checkbox]:checked + label {
      color: grey;
      text-decoration: line-through;
    }

    todo-list li {
      list-style-type: none;
    }
  </style>

  edit(e) {
    this.text = e.target.value
  }

  add(e) {
    e.preventUpdate = true
    var text = this.text
    this.text = this.input.value = ''
    this.opts.newtask(text)
  }
</todo-list>