Commit 93a7b965 authored by Sindre Sorhus's avatar Sindre Sorhus

o_O app: Cleanup

parent 5763d113
...@@ -9,38 +9,36 @@ ...@@ -9,38 +9,36 @@
<section id="todoapp"> <section id="todoapp">
<header id="header"> <header id="header">
<h1>Todos</h1> <h1>Todos</h1>
<input id="new-todo" data-bind="value: current; enterKey: add" placeholder="What needs to be done?"> <input id="new-todo" data-bind="value: current; enterKey: add" placeholder="What needs to be done?">
</header> </header>
<section id="main" data-bind="visible: todos.count"> <section id="main" data-bind="visible: todos.count">
<div> <div>
<input id="toggle-all" type="checkbox" data-bind="value: allCompleted;"> <input id="toggle-all" type="checkbox" data-bind="value: allCompleted;">
<label for="toggle-all">Mark all as complete</label> <label for="toggle-all">Mark all as complete</label>
</div> </div>
<ul id="todo-list" data-bind="foreach: todos"> <ul id="todo-list" data-bind="foreach: todos">
<li data-bind="class: klass; visible; dblclick: startEditing"> <li data-bind="class: klass; visible; dblclick: startEditing">
<div class="view"> <div class="view">
<input class="toggle" type="checkbox" data-bind="value: completed"> <input class="toggle" type="checkbox" data-bind="value: completed">
<label data-bind="text: title"></label> <label data-bind="text: title"></label>
<button class="destroy" data-bind="click: remove"></button> <button class="destroy" data-bind="click: remove"></button>
</div> </div>
<input class="edit" data-bind="value: title; enterKey: stopEditing; blur: stopEditing" /> <input class="edit" data-bind="value: title; enterKey: stopEditing; blur: stopEditing" />
</li> </li>
</ul> </ul>
</section> </section>
<footer id="footer" data-bind="visible: todos.count"> <footer id="footer" data-bind="visible: todos.count">
<span id="todo-count"> <span id="todo-count">
<strong data-bind="text: remainingCount"></strong> <strong data-bind="text: remainingCount"></strong>
<span class="word" data-bind="text: pluralize('item', remainingCount())"></span> left <span class="word" data-bind="text: pluralize('item', remainingCount())"></span> left
</span> </span>
<ul id="filters" > <ul id="filters" >
<li><a href="#/">All</a></li> <li><a href="#/">All</a></li>
<li><a href="#/active">Active</a></li> <li><a href="#/active">Active</a></li>
<li><a href="#/completed">Completed</a></li> <li><a href="#/completed">Completed</a></li>
</ul> </ul>
<button id="clear-completed" data-bind="click: removeCompleted; visible: completedCount"> <button id="clear-completed" data-bind="click: removeCompleted; visible: completedCount">
Clear completed Clear completed (<span data-bind='text: completedCount'></span>)
(<span data-bind='text: completedCount'></span>)
</button> </button>
</footer> </footer>
</section> </section>
...@@ -48,9 +46,9 @@ ...@@ -48,9 +46,9 @@
<p>Double-click to edit a todo</p> <p>Double-click to edit a todo</p>
<p>Created by <a href="http://weepy.github.com">weepy (Jonah Fox)</a></p> <p>Created by <a href="http://weepy.github.com">weepy (Jonah Fox)</a></p>
</footer> </footer>
<script src="../../../assets/jquery.min.js"></script> <script src="../../../assets/jquery.min.js"></script>
<script src="js/lib/o_O.js" type="text/javascript"></script> <script src="js/lib/o_O.js" ></script>
<script src="js/lib/o_O.router.js" type="text/javascript"></script> <script src="js/lib/o_O.router.js"></script>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
//a custom binding to handle the enter key //a custom binding to handle the enter key
o_O.bindings.enterKey = function( func, $el ) { o_O.bindings.enterKey = function( func, $el ) {
var ENTER_KEY = 13; var ENTER_KEY = 13;
var context = this var context = this;
$el.keyup(function(e) { $el.keyup(function(e) {
if( e.keyCode === ENTER_KEY ) if( e.keyCode === ENTER_KEY )
func.call(context); func.call(context);
...@@ -20,7 +20,7 @@ var Todo = o_O.model.extend({ ...@@ -20,7 +20,7 @@ var Todo = o_O.model.extend({
this.editing = o_O(false) this.editing = o_O(false)
}, },
startEditing: function() { startEditing: function() {
this.editing( true ) this.editing( true )
var self = this var self = this
setTimeout(function() { setTimeout(function() {
...@@ -32,7 +32,7 @@ var Todo = o_O.model.extend({ ...@@ -32,7 +32,7 @@ var Todo = o_O.model.extend({
var text = $.trim( this.title() ) var text = $.trim( this.title() )
text text
? this.title( text ) ? this.title( text )
: this.remove() : this.remove()
this.editing( false ) this.editing( false )
...@@ -51,7 +51,7 @@ var Todo = o_O.model.extend({ ...@@ -51,7 +51,7 @@ var Todo = o_O.model.extend({
klass: function() { klass: function() {
if(this.editing()) if(this.editing())
return 'editing' return 'editing'
if(this.completed()) if(this.completed())
return 'completed' return 'completed'
else else
return '' return ''
...@@ -61,7 +61,7 @@ var Todo = o_O.model.extend({ ...@@ -61,7 +61,7 @@ var Todo = o_O.model.extend({
// main application // main application
var TodoApp = o_O.model.extend({ var TodoApp = o_O.model.extend({
current: "", current: '',
completedCount: 0, completedCount: 0,
filter: '' filter: ''
}, { }, {
...@@ -76,15 +76,15 @@ var TodoApp = o_O.model.extend({ ...@@ -76,15 +76,15 @@ var TodoApp = o_O.model.extend({
self.completedCount( completed.length ) self.completedCount( completed.length )
self.persist() self.persist()
}) })
this.remainingCount = o_O(function() { this.remainingCount = o_O(function() {
return self.todos.count() - self.completedCount() return self.todos.count() - self.completedCount()
}) })
// writeable computed observable // writeable computed observable
// handles marking all complete/incomplete // handles marking all complete/incomplete
// or retrieving if this is true // or retrieving if this is true
this.allCompleted = o_O(function(v) { this.allCompleted = o_O(function(v) {
if(arguments.length == 0) { if(arguments.length == 0) {
return self.remainingCount() == 0 return self.remainingCount() == 0
} }
...@@ -102,7 +102,7 @@ var TodoApp = o_O.model.extend({ ...@@ -102,7 +102,7 @@ var TodoApp = o_O.model.extend({
var text = $.trim( this.current() ); var text = $.trim( this.current() );
if( text ) { if( text ) {
this.todos.unshift( Todo({title: text}) ); this.todos.unshift( Todo({title: text}) );
this.current( "" ) this.current( "" )
} }
}, },
...@@ -129,11 +129,11 @@ function main() { ...@@ -129,11 +129,11 @@ function main() {
var todos = [] var todos = []
try { try {
todos = JSON.parse( localStorage['todos-o_O'] ); todos = JSON.parse( localStorage['todos-o_O'] );
} }
catch(e) { } catch(e) { }
// create models // create models
for( var i=0; i < todos.length; i++ ) for( var i=0; i < todos.length; i++ )
todos[ i ] = Todo.create( todos[i] ) todos[ i ] = Todo.create( todos[i] )
// create app // create app
...@@ -147,14 +147,14 @@ function main() { ...@@ -147,14 +147,14 @@ function main() {
o_O.router() o_O.router()
.add('*filter', function(filt) { .add('*filter', function(filt) {
todoapp.filter(filt) todoapp.filter(filt)
$( '#filters a' ) $( '#filters a' )
.removeClass( 'selected' ) .removeClass( 'selected' )
.filter( "[href='#/" + filt + "']" ) .filter( "[href='#/" + filt + "']" )
.addClass( 'selected' ) .addClass( 'selected' )
}) })
.start() .start()
} }
// kick it off // kick it off
main(); main();
\ No newline at end of file
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