forked from tastejs/todomvc
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7d8888e
commit 0b69fdc
Showing
9 changed files
with
1,995 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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") }); |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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="https://jga.me/">Greg Allen</a> (<a href="https://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> |
Oops, something went wrong.