Merge pull request #55 from sindresorhus/jquery-example-convert-new-template

Update jQuery example to the new template

todo-example/jquery/css/app.css

@@ -5,31 +5,31 @@ body {
 }
 
 body {
-	font-family: "Helvetica Neue", helvetica, arial, sans-serif;
-	font-size: 14px;
+	font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
 	line-height: 1.4em;
 	background: #eeeeee;
 	color: #333333;
+	width: 520px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
 }
 
 #todoapp {
-	width: 480px;
-	margin: 0 auto 40px auto;
-	background: white;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	background: #fff;
+	padding: 20px;
+	margin-bottom: 40px;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
 	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
 	box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
+	-webkit-border-radius: 0 0 5px 5px;
 	-moz-border-radius: 0 0 5px 5px;
+	-ms-border-radius: 0 0 5px 5px;
 	-o-border-radius: 0 0 5px 5px;
-	-webkit-border-radius: 0 0 5px 5px;
 	border-radius: 0 0 5px 5px;
 }
 
-#todoapp {
-	padding: 20px;
-}
-
 #todoapp h1 {
 	font-size: 36px;
 	font-weight: bold;
@@ -46,8 +46,9 @@ body {
 	outline: none;
 	padding: 6px;
 	border: 1px solid #999999;
-	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
+	-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
 	-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
 	box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
 }
@@ -56,67 +57,93 @@ body {
 	font-style: italic;
 }
 
-#todoapp .items {
+#main {
+	display: none;
+}
+
+#todo-list {
 	margin: 10px 0;
 	padding: 0;
 	list-style: none;
 }
 
-#todoapp .item {
-	padding: 15px 20px 15px 0;
+#todo-list li {
+	padding: 18px 20px 18px 0;
 	position: relative;
 	font-size: 24px;
 	border-bottom: 1px solid #cccccc;
 }
 
-#todoapp .item.done span {
+#todo-list li:last-child {
+	border-bottom: none;
+}
+
+#todo-list li.done label {
 	color: #777777;
 	text-decoration: line-through;
 }
 
-#todoapp .item .destroy {
+#todo-list li .destroy {
+	display: none;
 	position: absolute;
+	top: 20px;
 	right: 10px;
-	top: 16px;
-	display: none;
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
 	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
 }
 
-#todoapp .item:hover .destroy {
+#todo-list li:hover .destroy {
 	display: block;
 }
 
-#todoapp .item .edit {
-	display: none;
+#todo-list li.editing {
+	border-bottom: none;
+	margin-top: -1px;
+	padding: 0;
 }
 
-#todoapp .item.editing .edit {
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+#todo-list li.editing .edit {
 	display: block;
+	width: 444px;
+	padding: 13px 15px 14px 20px;
+	margin: 0;
+}
+
+#todo-list li.editing .view {
+	display: none;
+}
+
+#todo-list li .view label {
+	word-break: break-word;
 }
 
-#todoapp .item.editing .view {
+#todo-list li .edit {
 	display: none;
 }
 
 #todoapp footer {
 	display: none;
-	margin: 20px -20px -20px -20px;
+	margin: 0 -20px -20px -20px;
 	overflow: hidden;
 	color: #555555;
 	background: #f4fce8;
 	border-top: 1px solid #ededed;
 	padding: 0 20px;
-	line-height: 36px;
+	line-height: 37px;
+	-webkit-border-radius: 0 0 5px 5px;
 	-moz-border-radius: 0 0 5px 5px;
+	-ms-border-radius: 0 0 5px 5px;
 	-o-border-radius: 0 0 5px 5px;
-	-webkit-border-radius: 0 0 5px 5px;
 	border-radius: 0 0 5px 5px;
 }
 
-#todoapp .clear {
+#clear-completed {
 	display: none;
 	float: right;
 	line-height: 20px;
@@ -127,36 +154,38 @@ body {
 	margin-top: 8px;
 	margin-bottom: 8px;
 	padding: 0 10px 1px;
-	-moz-border-radius: 12px;
+	cursor: pointer;
 	-webkit-border-radius: 12px;
+	-moz-border-radius: 12px;
+	-ms-border-radius: 12px;
 	-o-border-radius: 12px;
 	border-radius: 12px;
-	-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;
+	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
+	-ms-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;
-	cursor: pointer;
 }
 
-#todoapp .clear:hover {
+#clear-completed:hover {
 	background: rgba(0, 0, 0, 0.15);
-	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
+	-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 	box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
 }
 
-#todoapp .clear:active {
+#clear-completed:active {
 	position: relative;
 	top: 1px;
 }
 
-#todoapp .count span {
+#todo-count span {
 	font-weight: bold;
 }
 
 #instructions {
-	width: 520px;
 	margin: 10px auto;
 	color: #777777;
 	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
@@ -168,7 +197,6 @@ body {
 }
 
 #credits {
-	width: 520px;
 	margin: 30px auto;
 	color: #999;
 	text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;

todo-example/jquery/index.html

@@ -2,23 +2,23 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>jQuery</title>
+	<title>jQuery - TodoMVC</title>
 	<link rel="stylesheet" href="css/app.css">
-	<script src="js/libs/json2.js"></script>
-	<script src="js/libs/jquery-1.7.1.min.js"></script>
-	<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
-	<script src="js/app.js"></script>
 </head>
 <body>
 	<div id="todoapp">
-		<h1>Todos</h1>
-		<form>
-			<input type="text" placeholder="What needs to be done?">
-		</form>
-		<ul class="items"></ul>
+		<header>
+			<h1>Todos</h1>
+			<input id="new-todo" type="text" placeholder="What needs to be done?">
+		</header>
+		<section id="main">
+			<input id="toggle-all" type="checkbox">
+			<label for="toggle-all">Mark all as complete</label>
+			<ul id="todo-list"></ul>
+		</section>
 		<footer>
-			<a class="clear">Clear completed</a>
-			<div class="count"></div>
+			<a id="clear-completed">Clear completed</a>
+			<div id="todo-count"></div>
 		</footer>
 	</div>
 	<div id="instructions">
@@ -29,17 +29,19 @@
 	</div>
 	<script type="text/x-handlebars-template" id="todo-template">
 	{{#this}}
-	<li class="item {{#if done}}done{{/if}}" data-id="{{id}}">
-		<div class="view" title="Double click to edit...">
-			<input class="toggle" type="checkbox" {{#if done}}checked="checked"{{/if}}>
-			<span>{{title}}</span>
+	<li {{#if done}}class="done"{{/if}} data-id="{{id}}">
+		<div class="view">
+			<input class="toggle" type="checkbox" {{#if done}}checked{{/if}}>
+			<label>{{title}}</label>
 			<a class="destroy"></a>
 		</div>
-		<div class="edit">
-			<input type="text" value="{{title}}">
-		</div>
+		<input class="edit" type="text" value="{{title}}">
 	</li>
 	{{/this}}
 	</script>
+	<script src="js/libs/json2.js"></script>
+	<script src="js/libs/jquery-1.7.1.min.js"></script>
+	<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
+	<script src="js/app.js"></script>
 </body>
 </html>
\ No newline at end of file

todo-example/jquery/js/app.js

@@ -18,6 +18,7 @@ jQuery(function($) {
 
 	var App = {
 		init: function() {
+			this.ENTER_KEY = 13;
 			this.todos = this.store();
 			this.cacheElements();
 			this.bindEvents();
@@ -26,10 +27,13 @@ jQuery(function($) {
 		cacheElements: function() {
 			this.template = Handlebars.compile( $('#todo-template').html() );
 			this.$todoApp = $('#todoapp');
-			this.$todoList = this.$todoApp.find('.items');
+			this.$newTodo = $('#new-todo');
+			this.$toggleAll = $('#toggle-all');
+			this.$main = $('#main');
+			this.$todoList = $('#todo-list');
 			this.$footer = this.$todoApp.find('footer');
-			this.$count = this.$footer.find('.count');
-			this.$clearBtn = this.$footer.find('.clear');
+			this.$count = $('#todo-count');
+			this.$clearBtn = $('#clear-completed');
 		},
 		store: function( data ) {
 			if ( arguments.length ) {
@@ -40,18 +44,19 @@ jQuery(function($) {
 			}
 		},
 		bindEvents: function() {
-			var app = this.$todoApp,
-				list = this.$todoList;
-			app.on( 'click', '.clear', this.destroyDone );
-			app.on( 'submit', 'form', this.create );
+			var list = this.$todoList;
+			this.$newTodo.on( 'keyup', this.create );
+			this.$toggleAll.on( 'change', this.toggleAll );
+			this.$clearBtn.on( 'click', this.destroyDone );
 			list.on( 'change', '.toggle', this.toggle );
 			list.on( 'dblclick', '.view', this.edit );
-			list.on( 'keypress', '.edit input', this.blurOnEnter );
-			list.on( 'blur', '.edit input', this.update );
+			list.on( 'keypress', '.edit', this.blurOnEnter );
+			list.on( 'blur', '.edit', this.update );
 			list.on( 'click', '.destroy', this.destroy );
 		},
 		render: function() {
 			this.$todoList.html( this.template( this.todos ) );
+			this.$main.toggle( !!this.todos.length );
 			this.renderFooter();
 			this.store( this.todos );
 		},
@@ -68,6 +73,13 @@ jQuery(function($) {
 			// Toggle clear button and update title
 			this.$clearBtn.text( clearTitle ).toggle( !!completedTodos );
 		},
+		toggleAll: function() {
+			var isChecked = !!$(this).attr('checked');
+			$.each( App.todos, function( i, val ) {
+				val.done = isChecked;
+			});
+			App.render();
+		},
 		activeTodoCount: function() {
 			var count = 0;
 			$.each( this.todos, function( i, val ) {
@@ -89,7 +101,7 @@ jQuery(function($) {
 		},
 		// Accepts an element from inside the ".item" div and returns the corresponding todo in the todos array.
 		getTodo: function( elem, callback ) {
-			var id = $( elem ).closest('.item').data('id');
+			var id = $( elem ).closest('li').data('id');
 			$.each( this.todos, function( i, val ) {
 				if ( val.id === id ) {
 					callback.apply( App, arguments );
@@ -98,8 +110,10 @@ jQuery(function($) {
 			});
 		},
 		create: function(e) {
-			e.preventDefault();
-			var $input = $(this).find('input'),
+			if ( e.which !== App.ENTER_KEY ) {
+				return;
+			}
+			var $input = $(this),
 				inputVal = $input.val();
 			if ( !inputVal ) {
 				return;
@@ -119,10 +133,10 @@ jQuery(function($) {
 			App.render();
 		},
 		edit: function() {
-			$(this).closest('.item').addClass('editing').find('.edit input').focus();
+			$(this).closest('li').addClass('editing').find('.edit').focus();
 		},
 		blurOnEnter: function(e) {
-			if ( e.keyCode === 13 ) {
+			if ( e.keyCode === App.ENTER_KEY ) {
 				e.target.blur();
 			}
 		},