adding patch for keyDown eventsthat werent correctly rendering on cre…

…ation. also patches for using native checkbox rather than the simulated variation
addyosmani · Jun 10, 2011 · bdf404e · bdf404e
1 parent b9357bf
commit bdf404e
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 52 deletions.
diff --git a/app.css b/app.css
@@ -11,8 +11,7 @@ dd { margin: 0 0 5px 15px; padding: 0; font-size: 17px; cursor: pointer; }
 h2 { position: absolute; top: 56px; left: 77px; margin: 0; font-size: 30px; width: 275px; height: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; }
 /*ul { position: absolute; top: 116px; left: 80px; margin: 0; padding: 0; width: 275px; list-style: none; }*/
 li { position: relative; margin: 0 0 0 25px; padding: 0; font-size: 20px; line-height: 27px; }
-li .checkbox { position: absolute; top: 0; left: -25px; display: inline-block; width: 20px; height: 22px; cursor: pointer; background: url(assets/checkbox-unchecked.png) no-repeat; }
+
-li.done .checkbox { background-image: url(assets/checkbox-checked.png); /*text-decoration: line-through;*/ }
 p { position: absolute; top: 116px; left: 80px; margin: 0; padding: 0; width: 275px; font-size: 20px; line-height: 27px; }
 
 

diff --git a/app.js b/app.js
@@ -35,47 +35,29 @@
 
             var title = localStorage.getItem('title') || "Todo";
             $('h1').text(title);
+
+			if(Lists._data.length <=0){
+				var list = Lists.create({ name: 'My new list' });
+				app.trigger('updateLists');
+			}
+
+			$('#new-todo').keydown(function(e) {
+				if (e.keyCode == 13){ 
+					var todoContent = $(this).val();
+					var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) });
+					context.partial('templates/_todo.template', todo, function(html) {
+						//$(html).insertAfter('#todo-list li:last');
+						var q = $(html);
+						console.log(q);
+						$('#todo-list').append(q);
 
-if(Lists._data.length <=0){
+					});
-	var list = Lists.create({ name: 'My new list' });
+					$(this).val('');
-    //Todos.create({ name: 'Something todo', done: false, listId: list.id });
+
-    //context.redirect('#/list/'+list.id);
+				}
-    app.trigger('updateLists');
+			});
-}
-
-$('#new-todo').keydown(function(e) {
-    if (e.keyCode == 13){ 
-		var todoContent = $(this).val();
-        var todo = Todos.create({ name: todoContent, done: false, listId: parseInt($('h2').attr('data-id'), 10) });
-		context.partial('templates/_todo.template', todo, function(html) {
-            $(html).insertAfter('#todo-list li:last');
-        });
-		$(this).val('');
-
-	}
-});
 
-		/*	
+
-            $('.new')
-                .live('click', function() {
-                    var $this = $(this),
-                        type  = $this.attr('data-type');
-                    
-                    switch (type) {
-                        case "list":
-                            var list = Lists.create({ name: 'My new list' });
-                            Todos.create({ name: 'Something todo', done: false, listId: list.id });
-                            context.redirect('#/list/'+list.id);
-                            app.trigger('updateLists');
-                            break;
-                        case "todo":
-                            var todo = Todos.create({ name: 'My new todo', done: false, listId: parseInt($('h2').attr('data-id'), 10) });
-                            context.partial('templates/_todo.template', todo, function(html) {
-                                $(html).insertBefore('#todo-list li:last');
-                            });
-                            break;
-                    }
-                });*/
 
             $('#lists')
                 .delegate('dd[data-id]', 'click', function() {

diff --git a/readme.markdown b/readme.markdown
@@ -1,11 +1,5 @@
 # Sammy's Todos
 
-This is a demo todo list app built on top of Sammy.js. It uses some advanced browser features and therefore requires an advanced browser. Features like CSS3 and HTML5 storage.
+This is a demo todo list app built on top of Sammy.js. 
 
-You can see a live demo of the app at: http://sammystodos.brandonaaron.net/
+Original base code: [Brandon Aaron](http://brandonaaron.net). This version, refactored and rewritten: Addy Osmani
-
-## License
-
-Sammy's Todos is licensed under the MIT License (LICENSE.txt).
-
-Copyright (c) 2010 [Brandon Aaron](http://brandonaaron.net)
diff --git a/templates/_todo.template b/templates/_todo.template
@@ -1 +1,11 @@
-<li data-type="todo" data-id="<%= id %>" class="<%= done ? 'done' : '' %>"><span class="checkbox"></span><span class="trashcan" data-type="todo" data-id="<%= id %>"></span><span contenteditable="true" data-type="todo" data-id="<%= id %>"><%= name %></span></li>
+<li data-type="todo" data-id="<%= id %>" class="<%= done ? 'done' : '' %>">
+<div class="todo">
+	<div class="display">
+<input class="check" type="checkbox" <%= done ? 'checked' : '' %>/>
+<span class="trashcan" data-type="todo" data-id="<%= id %>"></span>
+<span contenteditable="true" data-type="todo" data-id="<%= id %>" class="todo-item"><%= name %></span>
+</div>
+</div>
+</li>
+
+
diff --git a/templates/todolist.template b/templates/todolist.template
@@ -3,8 +3,8 @@
       <li data-type="todo" data-id="<%= todo.id %>" class="<%= todo.done ? 'done' : '' %>">
 <div class="todo">
 	<div class="display">
-<input class="check" type="checkbox"/>
+<input class="check" type="checkbox" <%= todo.done ? 'checked' : '' %>/>
-<span class="checkbox"></span><span class="trashcan" data-type="todo" data-id="<%= todo.id %>"></span><span contenteditable="true" data-type="todo" data-id="<%= todo.id %>" class="todo-item"><%= todo.name %></span>
+<span class="trashcan" data-type="todo" data-id="<%= todo.id %>"></span><span contenteditable="true" data-type="todo" data-id="<%= todo.id %>" class="todo-item"><%= todo.name %></span>
 </div>
 </div>
 </li>