Permalink
Browse files

adding in support for one-click deletion of items

  • Loading branch information...
1 parent 81c4d24 commit 7aa64adba0c5b14f83ea949786a4a42df2db4809 @addyosmani committed May 30, 2011
Showing with 54 additions and 26 deletions.
  1. +1 −1 README.md
  2. +6 −1 todo/todo/index.html
  3. +1 −1 todo/todo/production.css
  4. +3 −3 todo/todo/production.js
  5. +32 −19 todo/todo/todo.css
  6. +11 −1 todo/todo/todo.js
View
@@ -6,8 +6,8 @@ I began this fork of the useful JMVC Todo application as I felt it was missing a
<ul>
<li>Setup documentation (which I've written up below)</li>
<li>A directory structure that matches what the build files originally defined require</li>
+<li>Minor changes to help it fall in line with the Backbone and Spine todo apps including UI features and stylistic changes.</li>
<li>Pre-built production.js and production.css files so users could test the app right out of the box (as long as steal etc. are available)</li>
-<li>Minor changes to help it fall in line with the Backbone and Spine todo apps stylistically.</li>
</ul>
##Getting Started
@@ -12,13 +12,18 @@
</div>
<ul id='list'></ul>
<div id='todo-stats'>
-
</div>
</div>
<ul id='instructions'>
<li>Double-click to edit a todo.</li>
</ul>
+
+ <div id="credits">
+ Created and updated by
+ <br>
+ <a href="http://javascriptmvc.com/">Justin Meyer</a>, <a href="http://addyosmani.com">Addy Osmani</a>
+ </div>
<script type='text/ejs' id='todosEJS'>
<% for(var i =0; i < this.length ; i++){ %>
Oops, something went wrong.
Oops, something went wrong.
View
@@ -125,26 +125,39 @@ ul {
}
.todo-clear {
- float: right;
+ float: right;
}
.todo-clear a {
- display: block;
- line-height: 20px;
- text-decoration: none;
- -moz-border-radius: 12px;
- -webkit-border-radius: 12px;
- -o-border-radius: 12px;
- -ms-border-radius: 12px;
- -khtml-border-radius: 12px;
- border-radius: 12px;
- background: rgba(0, 0, 0, 0.1);
- color: #555555;
- font-size: 11px;
- margin-top: 8px;
- padding: 0 10px 1px;
- -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
- box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+ display: block;
+ line-height: 20px;
+ text-decoration: none;
+ -moz-border-radius: 12px;
+ -webkit-border-radius: 12px;
+ -o-border-radius: 12px;
+ -ms-border-radius: 12px;
+ -khtml-border-radius: 12px;
+ border-radius: 12px;
+ background: rgba(0, 0, 0, 0.1);
+ color: #555555;
+ font-size: 11px;
+ margin-top: 8px;
+ padding: 0 10px 1px;
+ -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+ -o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+ box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+}
+
+
+#credits {
+ color: #999999;
+ margin: 30px auto;
+ text-align: center;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+ width: 520px;
}
+
+#credits a {
+ color: #888888;
+}
View
@@ -57,7 +57,12 @@ $.Model('Todo',{
* Todo.destroyAll(1, success())
*/
destroy: function(id, success){
- this.destroyAll([id], successs)
+
+ this.destroyAll(id, success);
+ this.localStore(function(todos){
+ delete todos[id]
+ });
+
},
/**
* Creates a todo with the provided attrs. This allows:
@@ -168,14 +173,18 @@ $.Controller('Todos',{
// the clear button is clicked
".todo-clear click" : function(){
// gets completed todos in the list, destroys them
+
this.options.list.completed()
.destroyAll();
},
// When a todo's destroy button is clicked.
".todo .todestroy click" : function(el){
+
el.closest('.todo').model().destroy();
+
+
},
// when an item is removed from the list ...
@@ -194,6 +203,7 @@ $.Controller('Todos',{
// when the checkbox changes, update the model
".todo [name=complete] change" : function(el, ev){
+
var todo = el.closest('.todo').model().update({
complete : el.is(':checked')
});

0 comments on commit 7aa64ad

Please sign in to comment.