2013-08-11 23:30:53 +08:00
|
|
|
Seed.controller('Todos', function (scope) {
|
|
|
|
|
|
|
|
|
|
// data persistence -------------------------------------------------------
|
|
|
|
|
var STORAGE_KEY = 'todos-seedjs'
|
|
|
|
|
function sync () {
|
|
|
|
|
localStorage.setItem(STORAGE_KEY, scope.$serialize('todos'))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// filters ----------------------------------------------------------------
|
|
|
|
|
var filters = {
|
2013-08-11 13:50:32 +08:00
|
|
|
all: function () { return true },
|
|
|
|
|
active: function (v) { return !v },
|
|
|
|
|
completed: function (v) { return v }
|
|
|
|
|
}
|
2013-08-11 23:30:53 +08:00
|
|
|
updateFilter()
|
|
|
|
|
window.addEventListener('hashchange', updateFilter)
|
|
|
|
|
function updateFilter () {
|
2013-08-12 10:35:06 +08:00
|
|
|
scope.filter = location.hash ? location.hash.slice(2) : 'all'
|
2013-08-11 23:30:53 +08:00
|
|
|
}
|
2013-08-07 14:03:16 +08:00
|
|
|
|
|
|
|
|
// regular properties -----------------------------------------------------
|
2013-08-11 23:30:53 +08:00
|
|
|
scope.todos = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
|
|
|
|
|
scope.remaining = scope.todos.reduce(function (n, todo) {
|
2013-08-10 19:56:59 +08:00
|
|
|
return n + (todo.completed ? 0 : 1)
|
2013-08-07 14:03:16 +08:00
|
|
|
}, 0)
|
|
|
|
|
|
|
|
|
|
// computed properties ----------------------------------------------------
|
2013-08-08 04:11:52 +08:00
|
|
|
scope.total = {get: function () {
|
|
|
|
|
return scope.todos.length
|
|
|
|
|
}}
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-08 04:11:52 +08:00
|
|
|
scope.completed = {get: function () {
|
2013-08-08 06:24:21 +08:00
|
|
|
return scope.total - scope.remaining
|
2013-08-08 04:11:52 +08:00
|
|
|
}}
|
2013-08-07 14:03:16 +08:00
|
|
|
|
2013-08-11 23:30:53 +08:00
|
|
|
// dynamic context computed property using info from target scope
|
2013-08-11 13:50:32 +08:00
|
|
|
scope.filterTodo = {get: function (e) {
|
|
|
|
|
return filters[scope.filter](e.scope.completed)
|
|
|
|
|
}}
|
|
|
|
|
|
2013-08-11 23:30:53 +08:00
|
|
|
// dynamic context computed property using info from target element
|
2013-08-11 13:50:32 +08:00
|
|
|
scope.checkFilter = {get: function (e) {
|
|
|
|
|
return scope.filter === e.el.textContent.toLowerCase()
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
|
|
// two-way computed property with both getter and setter
|
2013-08-10 00:18:34 +08:00
|
|
|
scope.allDone = {
|
|
|
|
|
get: function () {
|
|
|
|
|
return scope.remaining === 0
|
|
|
|
|
},
|
|
|
|
|
set: function (value) {
|
|
|
|
|
scope.todos.forEach(function (todo) {
|
2013-08-10 19:56:59 +08:00
|
|
|
todo.completed = value
|
2013-08-10 00:18:34 +08:00
|
|
|
})
|
|
|
|
|
scope.remaining = value ? 0 : scope.total
|
|
|
|
|
}
|
|
|
|
|
}
|
2013-08-09 04:24:28 +08:00
|
|
|
|
2013-08-07 14:03:16 +08:00
|
|
|
// event handlers ---------------------------------------------------------
|
2013-08-11 13:50:32 +08:00
|
|
|
scope.addTodo = function () {
|
2013-08-12 10:35:06 +08:00
|
|
|
var value = scope.newTodo && scope.newTodo.trim()
|
2013-08-11 23:30:53 +08:00
|
|
|
if (value) {
|
|
|
|
|
scope.todos.unshift({ title: value, completed: false })
|
2013-08-11 13:50:32 +08:00
|
|
|
scope.newTodo = ''
|
2013-08-09 10:36:52 +08:00
|
|
|
scope.remaining++
|
2013-08-11 13:50:32 +08:00
|
|
|
sync()
|
2013-08-07 14:03:16 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scope.removeTodo = function (e) {
|
|
|
|
|
scope.todos.remove(e.scope)
|
2013-08-10 19:56:59 +08:00
|
|
|
scope.remaining -= e.scope.completed ? 0 : 1
|
2013-08-11 13:50:32 +08:00
|
|
|
sync()
|
2013-08-07 14:03:16 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scope.updateCount = function (e) {
|
2013-08-10 19:56:59 +08:00
|
|
|
scope.remaining += e.scope.completed ? -1 : 1
|
2013-08-11 13:50:32 +08:00
|
|
|
sync()
|
2013-08-07 14:03:16 +08:00
|
|
|
}
|
|
|
|
|
|
2013-08-11 13:50:32 +08:00
|
|
|
var beforeEditCache
|
2013-08-07 14:03:16 +08:00
|
|
|
scope.edit = function (e) {
|
2013-08-11 13:50:32 +08:00
|
|
|
beforeEditCache = e.scope.title
|
2013-08-07 14:03:16 +08:00
|
|
|
e.scope.editing = true
|
|
|
|
|
}
|
|
|
|
|
|
2013-08-11 13:50:32 +08:00
|
|
|
scope.doneEdit = function (e) {
|
|
|
|
|
if (!e.scope.editing) return
|
2013-08-07 14:03:16 +08:00
|
|
|
e.scope.editing = false
|
2013-08-11 13:50:32 +08:00
|
|
|
e.scope.title = e.scope.title.trim()
|
|
|
|
|
if (!e.scope.title) scope.removeTodo(e)
|
|
|
|
|
sync()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scope.cancelEdit = function (e) {
|
|
|
|
|
e.scope.editing = false
|
|
|
|
|
setTimeout(function () {
|
|
|
|
|
e.scope.title = beforeEditCache
|
|
|
|
|
}, 0)
|
2013-08-07 14:03:16 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
scope.removeCompleted = function () {
|
|
|
|
|
scope.todos = scope.todos.filter(function (todo) {
|
2013-08-10 19:56:59 +08:00
|
|
|
return !todo.completed
|
2013-08-07 14:03:16 +08:00
|
|
|
})
|
2013-08-11 13:50:32 +08:00
|
|
|
sync()
|
2013-08-07 14:03:16 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
2013-08-11 23:30:53 +08:00
|
|
|
var s = Date.now()
|
|
|
|
|
Seed.bootstrap({ debug: false })
|
|
|
|
|
console.log(Date.now() - s)
|