Commit 5400ccb9 authored by Ralph Holzmann's avatar Ralph Holzmann

Removing Zepto so we can make the release.

parent 84b4a7b6
html,
body {
margin: 0;
padding: 0;
}
body {
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 {
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;
border-radius: 0 0 5px 5px;
}
#todoapp h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 0 0 10px 0;
}
#todoapp input[type="text"] {
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-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;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#main {
display: none;
}
#todo-list {
margin: 10px 0;
padding: 0;
list-style: none;
}
#todo-list li {
padding: 18px 20px 18px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.done label {
color: #777777;
text-decoration: line-through;
}
#todo-list li .destroy {
display: none;
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
width: 20px;
height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list li.editing {
border-bottom: none;
margin-top: -1px;
padding: 0;
}
#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;
}
#todo-list li .edit {
display: none;
}
#todoapp footer {
display: none;
margin: 0 -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
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;
border-radius: 0 0 5px 5px;
}
#clear-completed {
display: none;
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom: 8px;
padding: 0 10px 1px;
cursor: pointer;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-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;
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
-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;
}
#clear-completed:active {
position: relative;
top: 1px;
}
#todo-count span {
font-weight: bold;
}
#instructions {
margin: 10px auto;
color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
}
#credits {
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Todo - CanJS with Zepto</title>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div id="todoapp">
<header>
<h1>todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?">
</header>
</div>
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
<p>Created by <a href="http://bitovi.com/">Bitovi</a>.</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
</div>
<!--
Zepto 0.8 doesn't support delegate focus/blur.
This is Zepto 0.8 with this patch applied:
https://github.com/madrobby/zepto/commit/ab2a3ef0d18beaf768903f0943efd019a29803f0
-->
<script src="zepto.0.8-focusblur.js"></script>
<script src="http://canjs.us/release/latest/can.zepto.js"></script>
<script src="todo.js"></script>
</body>
</html>
#main.show,
#stats.show,
#stats.show #clear-completed {
display: block;
}
\ No newline at end of file
<section id="main" class="<%= todos.attr("length") > 0 ? "show" : "" %>">
<input id="toggle-all" type="checkbox" <%= todos.allComplete() ? "checked" : "" %>>
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<% list(todos, function( todo ) { %>
<li class="todo
<%= todo.attr("complete") ? "done" : "" %>
<%= todo.attr("editing") ? "editing" : "" %>"
<%= (el)-> can.data(el, 'todo', todo) %>>
<div class="view">
<input class="toggle" type="checkbox" <%= todo.attr("complete") ? "checked" : "" %>>
<label><%= todo.attr("text") %></label>
<a class="destroy"></a>
</div>
<input class="edit" type="text" value="<%= todo.attr("text") %>">
</li>
<% }) %>
</ul>
</section>
<footer id="stats" class="<%= todos.attr("length") > 0 ? "show" : "" %>">
<a id="clear-completed">Clear <%= todos.completed() %>
completed item<%= todos.completed() == 1 ? "" : "s" %></a>
<div id="todo-count"><span><%= todos.remaining() %></span>
item<%= todos.remaining() == 1 ? "" : "s" %> left</div>
</footer>
\ No newline at end of file
(function() {
// Basic Todo entry model
// { text: 'todo', complete: false }
Todo = can.Model({
// Implement local storage handling
localStore: function(cb){
var name = 'todos-canjs-zepto',
data = JSON.parse( window.localStorage[name] || (window.localStorage[name] = '[]') ),
res = cb.call(this, data);
if(res !== false){
can.each(data, function(todo) {
delete todo.editing;
});
window.localStorage[name] = JSON.stringify(data);
}
},
findAll: function(params){
var def = new can.Deferred();
this.localStore(function(todos){
var instances = [],
self = this;
can.each(todos, function(todo) {
instances.push(new self(todo));
});
def.resolve({data: instances});
})
return def;
},
destroy: function(id){
var def = new can.Deferred();
this.localStore(function(todos){
for (var i = 0; i < todos.length; i++) {
if (todos[i].id === id) {
todos.splice(i, 1);
break;
}
}
def.resolve({});
});
return def
},
create: function(attrs){
var def = new can.Deferred();
this.localStore(function(todos){
attrs.id = attrs.id || parseInt(100000 *Math.random());
todos.push(attrs);
});
def.resolve({id : attrs.id});
return def
},
update: function(id, attrs){
var def = new can.Deferred();
this.localStore(function(todos){
for (var i = 0; i < todos.length; i++) {
if (todos[i].id === id) {
var todo = todos[i];
break;
}
}
can.extend(todo, attrs);
});
def.resolve({});
return def
}
},{});
// List for Todos
Todo.List = can.Model.List({
completed: function() {
// Ensure this triggers on length change
this.attr('length');
var completed = 0;
this.each(function(todo) {
completed += todo.attr('complete') ? 1 : 0
});
return completed;
},
remaining: function() {
return this.attr('length') - this.completed();
},
allComplete: function() {
return this.attr('length') === this.completed();
}
});
Todos = can.Control({
// Initialize the Todos list
init : function(){
// Render the Todos
this.element.append(can.view('todo', {
todos: this.options.todos
}));
// Clear the new todo field
$('#new-todo').val('')[0].focus();
},
// Listen for when a new Todo has been entered
'#new-todo keyup' : function(el, ev){
if ( ev.keyCode == 13 ) {
new Todo({
text : el.val(),
complete : false
}).save(function() {
el.val('');
});
}
},
// Handle a newly created Todo
'{Todo} created' : function(list, ev, item){
this.options.todos.push(item);
},
// Listen for editing a Todo
'.todo dblclick' : function(el, ev) {
el.data('todo').attr('editing', true).save(function() {
var child = el.children('.edit')[0];
child.focus();
child.select();
});
},
// Update a todo
updateTodo: function(el) {
el.closest('.todo').data('todo')
.attr({
editing: false,
text: el.val()
}).save();
},
// Listen for an edited Todo
'.todo .edit keyup' : function(el, ev){
if(ev.keyCode == 13){
this.updateTodo(el);
}
},
'.todo .edit blur' : function(el, ev) {
this.updateTodo(el);
},
// Listen for the toggled completion of a Todo
'.todo .toggle change' : function(el, ev) {
el.closest('.todo').data('todo')
.attr('complete', el.is(':checked'))
.save();
},
// Listen for a removed Todo
'.todo .destroy click' : function(el){
el.closest('.todo').data('todo').destroy();
},
// Listen for toggle all completed Todos
'#toggle-all change' : function(el, ev) {
var toggle = el[0].checked;
can.each(this.options.todos, function(todo) {
todo.attr('complete', toggle).save();
});
},
// Listen for removing all completed Todos
'#clear-completed click' : function() {
for (var i = this.options.todos.length - 1, todo; i > -1 && (todo = this.options.todos[i]); i--) {
todo.attr('complete') && todo.destroy();
}
}
})
// Initialize the app
Todo.findAll({}, function(todos) {
new Todos('#todoapp', {
todos: todos
});
});
})();
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