Skip to content

T
todomvc
Commit 67b2e541 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Update jQuery example to the new template 

Uses the app.css from the template without modifications
parent 2d4ab093
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 67 deletions
todo-example/jquery/css/app.css
View file @ 67b2e541
...@@ -5,31 +5,31 @@ body { ...@@ -5,31 +5,31 @@ body {
} }
body { body {
font-family: "Helvetica Neue", helvetica, arial, sans-serif; font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.4em; line-height: 1.4em;
background: #eeeeee; background: #eeeeee;
color: #333333; color: #333333;
width: 520px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
} }
#todoapp { #todoapp {
width: 480px; background: #fff;
margin: 0 auto 40px auto; padding: 20px;
background: white; margin-bottom: 40px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0; -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; -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; 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; -moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-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; border-radius: 0 0 5px 5px;
} }
#todoapp {
padding: 20px;
}
#todoapp h1 { #todoapp h1 {
font-size: 36px; font-size: 36px;
font-weight: bold; font-weight: bold;
...@@ -46,8 +46,9 @@ body { ...@@ -46,8 +46,9 @@ body {
outline: none; outline: none;
padding: 6px; padding: 6px;
border: 1px solid #999999; 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; -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; -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; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
} }
...@@ -56,67 +57,93 @@ body { ...@@ -56,67 +57,93 @@ body {
font-style: italic; font-style: italic;
} }
#todoapp .items { #main {
display: none;
}
#todo-list {
margin: 10px 0; margin: 10px 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#todoapp .item { #todo-list li {
padding: 15px 20px 15px 0; padding: 18px 20px 18px 0;
position: relative; position: relative;
font-size: 24px; font-size: 24px;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
#todoapp .item.done span { #todo-list li:last-child {
border-bottom: none;
}
#todo-list li.done span {
color: #777777; color: #777777;
text-decoration: line-through; text-decoration: line-through;
} }
#todoapp .item .destroy { #todo-list li .destroy {
display: none;
position: absolute; position: absolute;
right: 10px;
top: 16px; top: 16px;
display: none; right: 10px;
cursor: pointer; cursor: pointer;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center; 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; display: block;
} }
#todoapp .item .edit { #todo-list li.editing {
display: none; border-bottom: none;
margin-top: -1px;
padding: 0;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
} }
#todoapp .item.editing .edit { #todo-list li.editing .edit {
display: block; display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
} }
#todoapp .item.editing .view { #todo-list li.editing .view {
display: none;
}
#todo-list li .view span {
word-break: break-word;
}
#todo-list li .edit {
display: none; display: none;
} }
#todoapp footer { #todoapp footer {
display: none; display: none;
margin: 20px -20px -20px -20px; margin: 0 -20px -20px -20px;
overflow: hidden; overflow: hidden;
color: #555555; color: #555555;
background: #f4fce8; background: #f4fce8;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
padding: 0 20px; padding: 0 20px;
line-height: 36px; line-height: 37px;
-webkit-border-radius: 0 0 5px 5px;
-moz-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; -o-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
} }
#todoapp .clear { #clear-completed {
display: none; display: none;
float: right; float: right;
line-height: 20px; line-height: 20px;
...@@ -127,36 +154,38 @@ body { ...@@ -127,36 +154,38 @@ body {
margin-top: 8px; margin-top: 8px;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0 10px 1px; padding: 0 10px 1px;
-moz-border-radius: 12px; cursor: pointer;
-webkit-border-radius: 12px; -webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px; -o-border-radius: 12px;
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; -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; -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; 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); 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; -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; -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; box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
} }
#todoapp .clear:active { #clear-completed:active {
position: relative; position: relative;
top: 1px; top: 1px;
} }
#todoapp .count span { #todo-count span {
font-weight: bold; font-weight: bold;
} }
#instructions { #instructions {
width: 520px;
margin: 10px auto; margin: 10px auto;
color: #777777; color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
...@@ -168,7 +197,6 @@ body { ...@@ -168,7 +197,6 @@ body {
} }
#credits { #credits {
width: 520px;
margin: 30px auto; margin: 30px auto;
color: #999; color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0; text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
......
todo-example/jquery/index.html
View file @ 67b2e541
...@@ -2,23 +2,23 @@ ...@@ -2,23 +2,23 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>jQuery</title> <title>jQuery - TodoMVC</title>
<link rel="stylesheet" href="css/app.css"> <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> </head>
<body> <body>
<div id="todoapp"> <div id="todoapp">
<h1>Todos</h1> <header>
<form> <h1>Todos</h1>
<input type="text" placeholder="What needs to be done?"> <input id="new-todo" type="text" placeholder="What needs to be done?">
</form> </header>
<ul class="items"></ul> <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> <footer>
<a class="clear">Clear completed</a> <a id="clear-completed">Clear completed</a>
<div class="count"></div> <div id="todo-count"></div>
</footer> </footer>
</div> </div>
<div id="instructions"> <div id="instructions">
...@@ -29,17 +29,19 @@ ...@@ -29,17 +29,19 @@
</div> </div>
<script type="text/x-handlebars-template" id="todo-template"> <script type="text/x-handlebars-template" id="todo-template">
{{#this}} {{#this}}
<li class="item {{#if done}}done{{/if}}" data-id="{{id}}"> <li {{#if done}}class="done"{{/if}} data-id="{{id}}">
<div class="view" title="Double click to edit..."> <div class="view">
<input class="toggle" type="checkbox" {{#if done}}checked="checked"{{/if}}> <input class="toggle" type="checkbox" {{#if done}}checked{{/if}}>
<span>{{title}}</span> <span>{{title}}</span>
<a class="destroy"></a> <a class="destroy"></a>
</div> </div>
<div class="edit"> <input class="edit" type="text" value="{{title}}">
<input type="text" value="{{title}}">
</div>
</li> </li>
{{/this}} {{/this}}
</script> </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> </body>
</html> </html>
\ No newline at end of file
todo-example/jquery/js/app.js
View file @ 67b2e541
...@@ -26,10 +26,11 @@ jQuery(function($) { ...@@ -26,10 +26,11 @@ jQuery(function($) {
cacheElements: function() { cacheElements: function() {
this.template = Handlebars.compile( $('#todo-template').html() ); this.template = Handlebars.compile( $('#todo-template').html() );
this.$todoApp = $('#todoapp'); this.$todoApp = $('#todoapp');
this.$todoList = this.$todoApp.find('.items'); this.$main = $('#main');
this.$footer = this.$todoApp.find('footer'); this.$todoList = $('#todo-list');
this.$count = this.$footer.find('.count'); this.$footer = $('footer');
this.$clearBtn = this.$footer.find('.clear'); this.$count = $('#todo-count');
this.$clearBtn = $('#clear-completed');
}, },
store: function( data ) { store: function( data ) {
if ( arguments.length ) { if ( arguments.length ) {
...@@ -42,16 +43,18 @@ jQuery(function($) { ...@@ -42,16 +43,18 @@ jQuery(function($) {
bindEvents: function() { bindEvents: function() {
var app = this.$todoApp, var app = this.$todoApp,
list = this.$todoList; list = this.$todoList;
app.on( 'click', '.clear', this.destroyDone ); app.on( 'click', '#clear-completed', this.destroyDone );
app.on( 'submit', 'form', this.create ); app.on( 'keyup', '#new-todo', this.create );
app.on( 'change', '#toggle-all', this.toggleAll );
list.on( 'change', '.toggle', this.toggle ); list.on( 'change', '.toggle', this.toggle );
list.on( 'dblclick', '.view', this.edit ); list.on( 'dblclick', '.view', this.edit );
list.on( 'keypress', '.edit input', this.blurOnEnter ); list.on( 'keypress', '.edit', this.blurOnEnter );
list.on( 'blur', '.edit input', this.update ); list.on( 'blur', '.edit', this.update );
list.on( 'click', '.destroy', this.destroy ); list.on( 'click', '.destroy', this.destroy );
}, },
render: function() { render: function() {
this.$todoList.html( this.template( this.todos ) ); this.$todoList.html( this.template( this.todos ) );
this.$main.toggle( !!this.todos.length );
this.renderFooter(); this.renderFooter();
this.store( this.todos ); this.store( this.todos );
}, },
...@@ -68,6 +71,13 @@ jQuery(function($) { ...@@ -68,6 +71,13 @@ jQuery(function($) {
// Toggle clear button and update title // Toggle clear button and update title
this.$clearBtn.text( clearTitle ).toggle( !!completedTodos ); 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() { activeTodoCount: function() {
var count = 0; var count = 0;
$.each( this.todos, function( i, val ) { $.each( this.todos, function( i, val ) {
...@@ -89,7 +99,7 @@ jQuery(function($) { ...@@ -89,7 +99,7 @@ jQuery(function($) {
}, },
// Accepts an element from inside the ".item" div and returns the corresponding todo in the todos array. // Accepts an element from inside the ".item" div and returns the corresponding todo in the todos array.
getTodo: function( elem, callback ) { getTodo: function( elem, callback ) {
var id = $( elem ).closest('.item').data('id'); var id = $( elem ).closest('li').data('id');
$.each( this.todos, function( i, val ) { $.each( this.todos, function( i, val ) {
if ( val.id === id ) { if ( val.id === id ) {
callback.apply( App, arguments ); callback.apply( App, arguments );
...@@ -98,8 +108,10 @@ jQuery(function($) { ...@@ -98,8 +108,10 @@ jQuery(function($) {
}); });
}, },
create: function(e) { create: function(e) {
e.preventDefault(); if ( e.which !== 13 ) {
var $input = $(this).find('input'), return;
}
var $input = $(this),
inputVal = $input.val(); inputVal = $input.val();
if ( !inputVal ) { if ( !inputVal ) {
return; return;
...@@ -119,7 +131,7 @@ jQuery(function($) { ...@@ -119,7 +131,7 @@ jQuery(function($) {
App.render(); App.render();
}, },
edit: function() { edit: function() {
$(this).closest('.item').addClass('editing').find('.edit input').focus(); $(this).closest('li').addClass('editing').find('.edit').focus();
}, },
blurOnEnter: function(e) { blurOnEnter: function(e) {
if ( e.keyCode === 13 ) { if ( e.keyCode === 13 ) {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7