working

lorensr · Apr 22, 2012 · e06a322 · e06a322
commit e06a322
Show file tree

Hide file tree

Showing 10 changed files with 13,095 additions and 0 deletions.
diff --git a/destroy.png b/destroy.png
diff --git a/todo.html b/todo.html
@@ -0,0 +1,213 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="todos.css"/>
+
+    <script src="vendor/json2.js"></script>
+    <script src="vendor/jquery-1.7.2.js"></script>
+    <script src="vendor/underscore.js"></script>
+    <script src="vendor/backbone.js"></script>
+    <script src="vendor/backbone.localStorage.js"></script>
+    <script src="vendor/coffee-script.js"></script>
+
+  <script type="text/template" id="item-template">
+    <div class="view">
+      <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> />
+      <label><%= title %></label>
+      <a class="destroy"></a>
+    </div>
+    <input class="edit" type="text" value="<%= title %>" />
+  </script>
+
+  <script type="text/template" id="stats-template">
+    <% if (done) { %>
+      <a id="clear-completed">Clear <%= done %> completed <%= done == 1 ? 'item' : 'items' %></a>
+    <% } %>
+    <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div>
+  </script>    
+
+    <script type="text/coffeescript">
+
+$ ->
+  ENTER = 13
+
+  class Todo extends Backbone.Model
+
+    defaults: ->
+      title: 'empty'
+      order: Todos.nextOrder()
+      done: false
+
+    initialize: ->
+      unless @get 'title'
+        @set title: @defaults().title
+
+    toggle: ->
+      @save done: !@get 'done'
+
+    clear: ->
+      @destroy()
+
+  class TodoList extends Backbone.Collection
+
+    model: Todo
+
+    localStorage: new Store 'todos-backbone'
+
+    done: ->
+      @filter (todo) ->
+        todo.get 'done'
+
+    remaining: ->
+      @without.apply @, @done()
+
+    nextOrder: ->
+      if @length
+        @last().get 'order' + 1
+      else
+        1
+
+    comparator: (todo) ->
+      todo.get 'order'
+
+  Todos = new TodoList
+
+  class TodoView extends Backbone.View
+
+    tagName: 'li'
+
+    template: _.template $('#item-template').html()
+
+    events:
+      'click .toggle'   : 'toggleDone'
+      'dblclick .view'  : 'edit'
+      'click a.destroy' : 'clear'
+      'keypress .edit'  : 'updateOnEnter'
+      'blur .edit'      : 'close'
+
+    initialize: ->
+      @model.bind 'change', @render
+      @model.bind 'destroy', @remove, @
+
+    render: =>
+      $(@el).html @template @model.toJSON()
+      $(@el).toggleClass 'done', @model.get 'done'
+      @input = @.$('.edit');
+      @
+
+    toggleDone: ->
+      @model.toggle()
+
+    edit: ->
+      $(@el).addClass 'editing';
+      @input.focus();
+
+    close: ->
+      value = @input.val()
+      unless value
+        @clear()
+      @model.save title: value
+      $(@el).removeClass 'editing'
+
+    updateOnEnter: (e) ->
+      if e.keyCode is ENTER
+        @close()
+
+    clear: ->
+      @model.clear()
+
+  class AppView extends Backbone.View
+
+    el: $("#todoapp")
+
+    statsTemplate: _.template $('#stats-template').html()
+
+    events:
+      'keypress #new-todo':  'createOnEnter'
+      'click #clear-completed': 'clearCompleted'
+      'click #toggle-all': 'toggleAllComplete'
+
+    initialize: ->
+      @input = $ '#new-todo'
+      @allCheckbox = $('#toggle-all')[0]
+
+      Todos.bind 'add', @addOne
+      Todos.bind 'reset', @addAll
+      Todos.bind 'all', @render
+
+      @footer = $ 'footer'
+      @main = $ '#main'
+
+      Todos.fetch()
+
+    render: =>
+      done = Todos.done().length
+      remaining = Todos.remaining().length
+
+      if Todos.length
+        @main.show()
+        @footer.show()
+        @footer.html @statsTemplate {done, remaining}
+      else
+        @main.hide()
+        @footer.hide()
+
+      @allCheckbox.checked = !remaining
+
+    addOne: (todo) =>
+      view = new TodoView model: todo
+      $('#todo-list').append view.render().el
+
+    addAll: =>
+      Todos.each @addOne
+
+    createOnEnter: (e) ->
+      if e.keyCode isnt ENTER or !@input.val()
+        return
+
+      Todos.create title: @input.val()
+      @input.val ''
+
+    clearCompleted: ->
+      _.each(Todos.done(), (todo) ->
+        todo.clear()
+      )
+      false
+
+    toggleAllComplete: ->
+      done = @allCheckbox.checked
+      Todos.each (todo) ->
+        todo.save {done}
+
+  App = new AppView
+
+
+    </script>
+  </head>
+  <body>
+ <div id="todoapp">
+
+    <header>
+      <h1>Todos</h1>
+      <input id="new-todo" type="text" placeholder="What needs to be done?">
+    </header>
+
+    <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>
+      <a id="clear-completed">Clear completed</a>
+      <div id="todo-count"></div>
+    </footer>
+
+  </div>
+
+  <div id="instructions">
+    Double-click to edit a todo.
+  </div>
+
+  </body>
+</html>
+
diff --git a/todos.coffee b/todos.coffee
@@ -0,0 +1,154 @@
+$ ->
+  ENTER = 13
+
+  class Todo extends Backbone.Model
+
+    defaults: ->
+      title: 'empty'
+      order: Todos.nextOrder()
+      done: false
+
+    initialize: ->
+      unless @get 'title'
+        @set title: @defaults().title
+
+    toggle: ->
+      @save done: !@get 'done'
+
+    clear: ->
+      @destroy()
+
+  class TodoList extends Backbone.Collection
+
+    model: Todo
+
+    localStorage: new Store 'todos-backbone'
+
+    done: ->
+      @filter (todo) ->
+        todo.get 'done'
+
+    remaining: ->
+      @without.apply @, @done()
+
+    nextOrder: ->
+      if @length
+        @last().get 'order' + 1
+      else
+        1
+
+    comparator: (todo) ->
+      todo.get 'order'
+
+  Todos = new TodoList
+
+  class TodoView extends Backbone.View
+
+    tagName: 'li'
+
+    template: _.template $('#item-template').html()
+
+    events:
+      'click .toggle'   : 'toggleDone'
+      'dblclick .view'  : 'edit'
+      'click a.destroy' : 'clear'
+      'keypress .edit'  : 'updateOnEnter'
+      'blur .edit'      : 'close'
+
+    initialize: ->
+      @model.bind 'change', @render
+      @model.bind 'destroy', @remove, @
+
+    render: =>
+      $(@el).html @template @model.toJSON()
+      $(@el).toggleClass 'done', @model.get 'done'
+      @input = @.$('.edit');
+      @
+
+    toggleDone: ->
+      @model.toggle()
+
+    edit: ->
+      $(@el).addClass 'editing';
+      @input.focus();
+
+    close: ->
+      value = @input.val()
+      unless value
+        @clear()
+      @model.save title: value
+      $(@el).removeClass 'editing'
+
+    updateOnEnter: (e) ->
+      if e.keyCode is ENTER
+        @close()
+
+    clear: ->
+      @model.clear()
+
+  class AppView extends Backbone.View
+
+    el: $("#todoapp")
+
+    statsTemplate: _.template $('#stats-template').html()
+
+    events:
+      'keypress #new-todo':  'createOnEnter'
+      'click #clear-completed': 'clearCompleted'
+      'click #toggle-all': 'toggleAllComplete'
+
+    initialize: ->
+      @input = $ '#new-todo'
+      @allCheckbox = $('#toggle-all')[0]
+
+      Todos.bind 'add', @addOne
+      Todos.bind 'reset', @addAll
+      Todos.bind 'all', @render
+
+      @footer = $ 'footer'
+      @main = $ '#main'
+
+      Todos.fetch()
+
+    render: =>
+      done = Todos.done().length
+      remaining = Todos.remaining().length
+
+      if Todos.length
+        @main.show()
+        @footer.show()
+        @footer.html @statsTemplate {done, remaining}
+      else
+        @main.hide()
+        @footer.hide()
+
+      @allCheckbox.checked = !remaining
+
+    addOne: (todo) =>
+      view = new TodoView model: todo
+      $('#todo-list').append view.render().el
+
+    addAll: =>
+      Todos.each @addOne
+
+    createOnEnter: (e) ->
+      if e.keyCode isnt ENTER or !@input.val()
+        return
+
+      Todos.create title: @input.val()
+      @input.val ''
+
+    clearCompleted: ->
+      _.each(Todos.done(), (todo) ->
+        todo.clear()
+      )
+      false
+
+    toggleAllComplete: ->
+      done = @allCheckbox.checked
+      Todos.each (todo) ->
+        todo.save {done}
+
+  App = new AppView
+
+