Skip to content

Commit

Permalink
Merge pull request tastejs#55 from sindresorhus/jquery-example-conver…
Browse files Browse the repository at this point in the history 
…t-new-template

Update jQuery example to the new template
  • Loading branch information
@boushley
boushley committed Jan 15, 2012
2 parents 477a6a6 + 563bd99 commit ad22340
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 70 deletions.
102 changes: 65 additions & 37 deletions todo-example/jquery/css/app.css
View file
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -168,7 +197,6 @@ body {
}

#credits {
width: 520px;
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
Expand Down
40 changes: 21 additions & 19 deletions todo-example/jquery/index.html
View file
Expand Up @@ -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">
Expand All @@ -29,17 +29,19 @@ <h1>Todos</h1>
</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>
42 changes: 28 additions & 14 deletions todo-example/jquery/js/app.js
View file
Expand Up @@ -18,6 +18,7 @@ jQuery(function($) {

var App = {
init: function() {
this.ENTER_KEY = 13;
this.todos = this.store();
this.cacheElements();
this.bindEvents();
Expand All @@ -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 ) {
Expand All @@ -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 );
},
Expand All @@ -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 ) {
Expand All @@ -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 );
Expand All @@ -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;
Expand All @@ -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();
}
},
Expand Down

0 comments on commit ad22340

Please sign in to comment.