Commit fb21001a authored by Aaron Boushley's avatar Aaron Boushley

Added a check all box. Fixed the tooltip.

parent 402f1d72
......@@ -364,7 +364,6 @@ body {
width: 170px;
left: 50%;
margin-left: -85px;
opacity: 0;
}
/* line 55 */
#todoapp .content ul#todo-list {
......
......@@ -30,6 +30,8 @@
</div>
<div id="todos">
<input class="check mark-all-done" type="checkbox"/>
<label for="check-all">Mark all as complete</label>
<ul id="todo-list"></ul>
</div>
......@@ -52,7 +54,7 @@
<div class="todo <%= done ? 'done' : '' %>">
<div class="display">
<input class="check" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
<div class="todo-content"><%= content %></div>
<label class="todo-content"><%= content %></label>
<span class="todo-destroy"></span>
</div>
<div class="edit">
......
......@@ -160,16 +160,18 @@ $(function(){
events: {
"keypress #new-todo": "createOnEnter",
"keyup #new-todo": "showTooltip",
"click .todo-clear a": "clearCompleted"
"click .todo-clear a": "clearCompleted",
"click .mark-all-done": "toggleAllComplete"
},
// At initialization we bind to the relevant events on the `Todos`
// collection, when items are added or changed. Kick things off by
// loading any preexisting todos that might be saved in *localStorage*.
initialize: function() {
_.bindAll(this, 'addOne', 'addAll', 'render');
_.bindAll(this, 'addOne', 'addAll', 'render', 'toggleAllComplete');
this.input = this.$("#new-todo");
this.input = this.$("#new-todo");
this.allCheckbox = this.$(".mark-all-done")[0];
Todos.bind('add', this.addOne);
Todos.bind('reset', this.addAll);
......@@ -182,11 +184,15 @@ $(function(){
// of the app doesn't change.
render: function() {
var done = Todos.done().length;
var remaining = Todos.remaining().length;
this.$('#todo-stats').html(this.statsTemplate({
total: Todos.length,
done: Todos.done().length,
remaining: Todos.remaining().length
done: done,
remaining: remaining
}));
this.allCheckbox.checked = !remaining;
},
// Add a single todo item to the list by creating a view for it, and
......@@ -234,6 +240,11 @@ $(function(){
if (val == '' || val == this.input.attr('placeholder')) return;
var show = function(){ tooltip.show().fadeIn(); };
this.tooltipTimeout = _.delay(show, 1000);
},
toggleAllComplete: function () {
var done = this.allCheckbox.checked;
Todos.each(function (todo) { todo.save({'done': done}); });
}
});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment