Skip to content

Commit

Permalink
merging fidel todo app
Browse files Browse the repository at this point in the history
  • Loading branch information
@addyosmani
addyosmani committed Oct 20, 2011
1 parent 7d8888e commit 0b69fdc
Show file tree
Hide file tree
Showing 9 changed files with 1,995 additions and 0 deletions.
132 changes: 132 additions & 0 deletions todo-example/fidel/app.js
View file
@@ -0,0 +1,132 @@
var todoStore = (function() {
return {
get: function() {
var d = localStorage.getItem('fidel.todos');
var todos = {};
if (d) {
d = JSON.parse(d);
for (var key in d) {
todos[key] = new Todo(d[key]);
}
}
return todos;
},
save: function(todos) {
localStorage.setItem('fidel.todos', JSON.stringify(todos));
}
};
})();

var Todo = Fidel.Class.extend({
defaults: {
name: "empty todo...",
done: false,
order: 0
},
init: function() {
},
toggleDone: function() {
this.done = !this.done;
}
});

var TodoView = Fidel.ViewController.extend({
templates: {
item: "#item-template",
stats: '#stats-template'
},
events: {
'keypress input[type="text"]': 'addOnEnter',
'click .check': 'complete'
},
init: function() {
this.todos = todoStore.get();
this.renderAll();
},
addOnEnter: function(e) {
if (e.keyCode == 13)
this.add();
},
add: function() {
var name = this.input.val();
this.input.val('');
var todo = new Todo({ name: name, order: this.taskCount });
this.taskCount++;
this.todos[todo.guid] = todo;
this.save();

var tmp = this.template(this.templates.item, { todo: todo });
this.todosContainer.prepend(tmp);
this.renderStats();
},
save: function() {
todoStore.save(this.todos);
},
sortTasks: function() {
var sorted = [];
for (var key in this.todos) {
sorted.push(this.todos[key]);
}
sorted.sort(function(a, b) {
return (b.order - a.order);
});
return sorted;
},
renderAll: function() {
var html = [];
var todos = this.sortTasks();
this.taskCount = todos.length;
for (var i = 0, c = todos.length; i < c; i++) {
var todo = todos[i];
var tmp = this.template(this.templates.item, { todo: todo });
html.push(tmp);
}
this.todosContainer.html(html.join(''));
this.renderStats();
},
renderStats: function() {
var todos = this.sortTasks();
var data = {
total: todos.length,
remaining: 0,
done: 0
};
for (var i = 0, c = todos.length; i < c; i++) {
var todo = todos[i];
if (todo.done)
data.done++;
else
data.remaining++;
}
this.render('stats', data, this.statsContainer);
},
complete: function(e) {
var complete = (e.target.value == "on");

var el = $(e.target);
el.parents('li').toggleClass('done');
var todoId = el.parents('li').attr('data-todoid');
this.todos[todoId].toggleDone();
this.save();
this.renderStats();
},
clearCompleted: function() {
var completedTodos = this.find('input:checked');
for (var i = 0, c = completedTodos.length; i < c; i++) {
var item = completedTodos[i];
this.destroyTodo($(item));
}
},
destroyTodo: function(el) {
var parent = el.parents('li');
var guid = parent.attr('data-todoid');
delete this.todos[guid];
parent.remove();
this.save();
this.renderStats();
}
});


//app
var todos = new TodoView({ el: $("#todoapp") });
Binary file added todo-example/fidel/images/destroy.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
86 changes: 86 additions & 0 deletions todo-example/fidel/index.html
View file
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html>

<head>
<title>Fidel</title>
<link href="stylesheets/todos.css" media="all" rel="stylesheet" type="text/css"/>
<!--<script src="vendor/live.js"></script>-->
</head>

<body>

<!-- Todo App Interface -->

<div id="todoapp">

<div class="title">
<h1>Todos</h1>
</div>

<div class="content">

<div id="create-todo">
<input data-element="input" placeholder="What needs to be done?" type="text" />
<span class="ui-tooltip-top" style="display:none;">Press Enter to save this task</span>
</div>

<div id="todos">
<ul id="todo-list" data-element="todosContainer"></ul>
</div>

<div id="todo-stats" data-element="statsContainer"></div>

</div>

</div>


<div id="credits">
Created by
<br />
<a href="http://jga.me/">Greg Allen</a> (<a href="http://twitter.com/jgaui">jgaui</a>).
</div>

<!-- Templates -->

<script type="text/template" id="item-template">
<li class="todo {!= todo.done ? 'done' : '' !}" data-todoid="{!= todo.guid !}">
<div class="display">
<input class="check" type="checkbox" {!= todo.done ? 'checked="checked"' : '' !} />
<div class="todo-content">{!= todo.name !}</div>
<span data-action="destroyTodo" class="todo-destroy"></span>
</div>
<div class="edit">
<input class="todo-input" type="text" value="" />
</div>
</li>
</script>

<script type="text/template" id="stats-template">
{! if (total) { !}
<span class="todo-count">
<span class="number">{!= remaining !}</span>
<span class="word">{!= remaining == 1 ? 'item' : 'items' !}</span> left.
</span>
{! } !}
{! if (done) { !}
<span class="todo-clear">
<a data-action="clearCompleted">
Clear <span class="number-done">{!= done !}</span>
completed <span class="word-done">{!= done == 1 ? 'item' : 'items' !}</span>
</a>
</span>
{! } !}
</script>

<script src="vendor/json2.js"></script>
<script src="vendor/jquery-1.6.4.min.js"></script>
<script src="vendor/fidel.js"></script>
<!--<script src="../../lib/core.js"></script>-->
<!--<script src="../../lib/class.js"></script>-->
<!--<script src="../../lib/events.js"></script>-->
<!--<script src="../../lib/controller.js"></script>-->
<script src="app.js"></script>
</body>

</html>

0 comments on commit 0b69fdc

Please sign in to comment.