Permalink
Browse files

Preparing the view exercises. Simplified the without call in

Todolist.coffee.  Removed the tooltip from TodoApp as it was adding
confusion.
  • Loading branch information...
1 parent ce173f4 commit 2d5b93aa88b987ad0a12bc4ac0132e95d9349391 @gerryster committed Apr 26, 2012
Showing with 15 additions and 123 deletions.
  1. +1 −3 src/models/Todo.coffee
  2. +4 −1 src/models/TodoList.coffee
  3. +4 −17 src/views/TodoApp.coffee
  4. +0 −102 src/views/TodoApp.styl
  5. +6 −0 src/views/TodoView.coffee
View
4 src/models/Todo.coffee
@@ -6,7 +6,7 @@ define [], ()->
sanitize = (str) ->
str.replace(NAUGHTY_WORDS, 'double rainbows')
- Todo = Backbone.Model.extend
+ Backbone.Model.extend
defaults: ->
text: '', # exercise{{{
done: false,
@@ -22,5 +22,3 @@ define [], ()->
toggle: ->
this.save({done: !this.get("done")})
-
- return Todo
View
5 src/models/TodoList.coffee
@@ -15,8 +15,11 @@ define [
@filter (todo) ->
todo.get('done')
+ # exercise {{{
remaining: ->
- @without.apply(@, @done())
+ # use "..." operator to expand the done array as an argument list
+ @without @done()...
+ # }}}exercise
nextOrder: ->
if (!@length)
View
21 src/views/TodoApp.coffee
@@ -8,7 +8,6 @@ define [
on: # similar to the events method in Backbone.View
"keypress #new-todo": (event...) -> @createOnEnter(event...)
- "keyup #new-todo": (event...) -> @showTooltip(event...)
"click .todo-clear a": (event...) -> @clearCompleted(event...)
init: ->
@@ -21,7 +20,9 @@ define [
afterRender: ->
@input = @$("#new-todo")
+ # exercise{{{ # do something which adds all of the @todos to the DOM
@addAll()
+ # }}}exercise
# for debugging TodoView: set the todo input and trigger pressing the enter key
#console.log("forcing 'foo' as the first todo")
@@ -36,36 +37,22 @@ define [
_ 'input#new-todo',
placeholder: "What needs to be done?",
type: "text",
- _ 'span.ui-tooltip-top', { style: "display:none;" }, 'Press Enter to save this task'
_ '#todos',
_ 'ul#todo-list'
_ Stats, model: @todos
]
- showTooltip: (e)->
- tooltip = @$(".ui-tooltip-top")
- val = @input.val()
-
- tooltip.fadeOut()
-
- if (@tooltipTimeout)
- clearTimeout(@tooltipTimeout)
- if (val == '' || val == @input.attr('placeholder'))
- return
-
- show = -> tooltip.show().fadeIn()
-
- @tooltipTimeout = _.delay(show, 1000)
-
addOne: (todo)->
@$("#todo-list").append(@_(TodoView, model: todo))
+ # exercise{{{
addAll: ->
# Note: we pass this in as the second parameter to each so that addOne is
# run in the context of this object and not the global object (window).
@todos.each(@addOne, this)
+ # }}}exercise
createOnEnter: (e)->
text = @input.val()
View
102 src/views/TodoApp.styl
@@ -49,105 +49,3 @@
> #todos
> #todo-list
margin-top 10px
-
-
-// Tooltip boilerplate
-//
-// François 'cahnory' Germain
-//
-.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
- color:#ffffff;
- cursor:normal;
- display:-moz-inline-stack;
- display:inline-block;
- font-size:12px;
- font-family:arial;
- padding:.5em 1em;
- position:relative;
- text-align:center;
- text-shadow:0 -1px 1px #111111;
- -webkit-border-top-left-radius:4px ;
- -webkit-border-top-right-radius:4px ;
- -webkit-border-bottom-right-radius:4px ;
- -webkit-border-bottom-left-radius:4px ;
- -khtml-border-top-left-radius:4px ;
- -khtml-border-top-right-radius:4px ;
- -khtml-border-bottom-right-radius:4px ;
- -khtml-border-bottom-left-radius:4px ;
- -moz-border-radius-topleft:4px ;
- -moz-border-radius-topright:4px ;
- -moz-border-radius-bottomright:4px ;
- -moz-border-radius-bottomleft:4px ;
- border-top-left-radius:4px ;
- border-top-right-radius:4px ;
- border-bottom-right-radius:4px ;
- border-bottom-left-radius:4px ;
- -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
- background-color:#3b3b3b;
- background-image:-moz-linear-gradient(top,#555555,#222222);
- background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
-/* TODO(rgerry) figure out why these lines break stylus
- filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
- -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
-*/
-}
-
-.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
- content:"\25B8";
- display:block;
- font-size:2em;
- height:0;
- line-height:0;
- position:absolute;
-}
-.ui-tooltip:after, .ui-tooltip-bottom:after {
- color:#2a2a2a;
- bottom:0;
- left:1px;
- text-align:center;
- text-shadow:1px 0 2px #000000;
- -o-transform:rotate(90deg);
- -moz-transform:rotate(90deg);
- -khtml-transform:rotate(90deg);
- -webkit-transform:rotate(90deg);
- width:100%;
-}
-.ui-tooltip-top:after {
- bottom:auto;
- color:#4f4f4f;
- left:-2px;
- top:0;
- text-align:center;
- text-shadow:none;
- -o-transform:rotate(-90deg);
- -moz-transform:rotate(-90deg);
- -khtml-transform:rotate(-90deg);
- -webkit-transform:rotate(-90deg);
- width:100%;
-}
-.ui-tooltip-right:after {
- color:#222222;
- right:-0.375em;
- top:50%;
- margin-top:-.05em;
- text-shadow:0 1px 2px #000000;
- -o-transform:rotate(0);
- -moz-transform:rotate(0);
- -khtml-transform:rotate(0);
- -webkit-transform:rotate(0);
-}
-.ui-tooltip-left:after {
- color:#222222;
- left:-0.375em;
- top:50%;
- margin-top:.1em;
- text-shadow:0 -1px 2px #000000;
- -o-transform:rotate(180deg);
- -moz-transform:rotate(180deg);
- -khtml-transform:rotate(180deg);
- -webkit-transform:rotate(180deg);
-}
View
6 src/views/TodoView.coffee
@@ -6,7 +6,9 @@ define [], ()->
on:
"click .check": (e...)-> @toggleDone(e...)
"dblclick div.todo-text": (e...)-> @edit(e...)
+ # exercise{{{ # add an event handler which deletes a TODO
"click span.todo-destroy": (e...)-> @clear(e...)
+ # }}}exercise
"keypress .todo-input": (e...)-> @updateOnEnter(e...)
"blur .todo-input": (e...)-> @close(e...)
@@ -24,10 +26,12 @@ define [], ()->
[
_ 'div', { class: 'todo' + (if @model.get('done') then ' done' else '') },
+ # exercise{{{
_ '.display',
_ 'input.check', checkbox_attrs
_ '.todo-text', text
_ 'span.todo-destroy'
+ # }}}exercise
_ '.edit',
@input = $(_ 'input.todo-input', type: "text", value: text)
]
@@ -51,5 +55,7 @@ define [], ()->
remove: ->
@$el.remove()
+ # exercise{{{
clear: ->
@model.destroy()
+ # }}}exercise

0 comments on commit 2d5b93a

Please sign in to comment.