Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Preparing the view exercises. Simplified the without call in

Todolist.coffee.  Removed the tooltip from TodoApp as it was adding
confusion.
  • Loading branch information...
commit 2d5b93aa88b987ad0a12bc4ac0132e95d9349391 1 parent ce173f4
Ryan Gerry authored
4 src/models/Todo.coffee
@@ -6,7 +6,7 @@ define [], ()->
6 6 sanitize = (str) ->
7 7 str.replace(NAUGHTY_WORDS, 'double rainbows')
8 8
9   - Todo = Backbone.Model.extend
  9 + Backbone.Model.extend
10 10 defaults: ->
11 11 text: '', # exercise{{{
12 12 done: false,
@@ -22,5 +22,3 @@ define [], ()->
22 22
23 23 toggle: ->
24 24 this.save({done: !this.get("done")})
25   -
26   - return Todo
5 src/models/TodoList.coffee
@@ -15,8 +15,11 @@ define [
15 15 @filter (todo) ->
16 16 todo.get('done')
17 17
  18 + # exercise {{{
18 19 remaining: ->
19   - @without.apply(@, @done())
  20 + # use "..." operator to expand the done array as an argument list
  21 + @without @done()...
  22 + # }}}exercise
20 23
21 24 nextOrder: ->
22 25 if (!@length)
21 src/views/TodoApp.coffee
@@ -8,7 +8,6 @@ define [
8 8
9 9 on: # similar to the events method in Backbone.View
10 10 "keypress #new-todo": (event...) -> @createOnEnter(event...)
11   - "keyup #new-todo": (event...) -> @showTooltip(event...)
12 11 "click .todo-clear a": (event...) -> @clearCompleted(event...)
13 12
14 13 init: ->
@@ -21,7 +20,9 @@ define [
21 20
22 21 afterRender: ->
23 22 @input = @$("#new-todo")
  23 + # exercise{{{ # do something which adds all of the @todos to the DOM
24 24 @addAll()
  25 + # }}}exercise
25 26
26 27 # for debugging TodoView: set the todo input and trigger pressing the enter key
27 28 #console.log("forcing 'foo' as the first todo")
@@ -36,7 +37,6 @@ define [
36 37 _ 'input#new-todo',
37 38 placeholder: "What needs to be done?",
38 39 type: "text",
39   - _ 'span.ui-tooltip-top', { style: "display:none;" }, 'Press Enter to save this task'
40 40
41 41 _ '#todos',
42 42 _ 'ul#todo-list'
@@ -44,28 +44,15 @@ define [
44 44 _ Stats, model: @todos
45 45 ]
46 46
47   - showTooltip: (e)->
48   - tooltip = @$(".ui-tooltip-top")
49   - val = @input.val()
50   -
51   - tooltip.fadeOut()
52   -
53   - if (@tooltipTimeout)
54   - clearTimeout(@tooltipTimeout)
55   - if (val == '' || val == @input.attr('placeholder'))
56   - return
57   -
58   - show = -> tooltip.show().fadeIn()
59   -
60   - @tooltipTimeout = _.delay(show, 1000)
61   -
62 47 addOne: (todo)->
63 48 @$("#todo-list").append(@_(TodoView, model: todo))
64 49
  50 + # exercise{{{
65 51 addAll: ->
66 52 # Note: we pass this in as the second parameter to each so that addOne is
67 53 # run in the context of this object and not the global object (window).
68 54 @todos.each(@addOne, this)
  55 + # }}}exercise
69 56
70 57 createOnEnter: (e)->
71 58 text = @input.val()
102 src/views/TodoApp.styl
@@ -49,105 +49,3 @@
49 49 > #todos
50 50 > #todo-list
51 51 margin-top 10px
52   -
53   -
54   -// Tooltip boilerplate
55   -//
56   -// François 'cahnory' Germain
57   -//
58   -.ui-tooltip, .ui-tooltip-top, .ui-tooltip-right, .ui-tooltip-bottom, .ui-tooltip-left {
59   - color:#ffffff;
60   - cursor:normal;
61   - display:-moz-inline-stack;
62   - display:inline-block;
63   - font-size:12px;
64   - font-family:arial;
65   - padding:.5em 1em;
66   - position:relative;
67   - text-align:center;
68   - text-shadow:0 -1px 1px #111111;
69   - -webkit-border-top-left-radius:4px ;
70   - -webkit-border-top-right-radius:4px ;
71   - -webkit-border-bottom-right-radius:4px ;
72   - -webkit-border-bottom-left-radius:4px ;
73   - -khtml-border-top-left-radius:4px ;
74   - -khtml-border-top-right-radius:4px ;
75   - -khtml-border-bottom-right-radius:4px ;
76   - -khtml-border-bottom-left-radius:4px ;
77   - -moz-border-radius-topleft:4px ;
78   - -moz-border-radius-topright:4px ;
79   - -moz-border-radius-bottomright:4px ;
80   - -moz-border-radius-bottomleft:4px ;
81   - border-top-left-radius:4px ;
82   - border-top-right-radius:4px ;
83   - border-bottom-right-radius:4px ;
84   - border-bottom-left-radius:4px ;
85   - -o-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
86   - -moz-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
87   - -khtml-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
88   - -webkit-box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
89   - box-shadow:0 1px 2px #000000, inset 0 0 0 1px #222222, inset 0 2px #666666, inset 0 -2px 2px #444444;
90   - background-color:#3b3b3b;
91   - background-image:-moz-linear-gradient(top,#555555,#222222);
92   - background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#555555),color-stop(1,#222222));
93   -/* TODO(rgerry) figure out why these lines break stylus
94   - filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
95   - -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#555555,EndColorStr=#222222);
96   -*/
97   -}
98   -
99   -.ui-tooltip:after, .ui-tooltip-top:after, .ui-tooltip-right:after, .ui-tooltip-bottom:after, .ui-tooltip-left:after {
100   - content:"\25B8";
101   - display:block;
102   - font-size:2em;
103   - height:0;
104   - line-height:0;
105   - position:absolute;
106   -}
107   -.ui-tooltip:after, .ui-tooltip-bottom:after {
108   - color:#2a2a2a;
109   - bottom:0;
110   - left:1px;
111   - text-align:center;
112   - text-shadow:1px 0 2px #000000;
113   - -o-transform:rotate(90deg);
114   - -moz-transform:rotate(90deg);
115   - -khtml-transform:rotate(90deg);
116   - -webkit-transform:rotate(90deg);
117   - width:100%;
118   -}
119   -.ui-tooltip-top:after {
120   - bottom:auto;
121   - color:#4f4f4f;
122   - left:-2px;
123   - top:0;
124   - text-align:center;
125   - text-shadow:none;
126   - -o-transform:rotate(-90deg);
127   - -moz-transform:rotate(-90deg);
128   - -khtml-transform:rotate(-90deg);
129   - -webkit-transform:rotate(-90deg);
130   - width:100%;
131   -}
132   -.ui-tooltip-right:after {
133   - color:#222222;
134   - right:-0.375em;
135   - top:50%;
136   - margin-top:-.05em;
137   - text-shadow:0 1px 2px #000000;
138   - -o-transform:rotate(0);
139   - -moz-transform:rotate(0);
140   - -khtml-transform:rotate(0);
141   - -webkit-transform:rotate(0);
142   -}
143   -.ui-tooltip-left:after {
144   - color:#222222;
145   - left:-0.375em;
146   - top:50%;
147   - margin-top:.1em;
148   - text-shadow:0 -1px 2px #000000;
149   - -o-transform:rotate(180deg);
150   - -moz-transform:rotate(180deg);
151   - -khtml-transform:rotate(180deg);
152   - -webkit-transform:rotate(180deg);
153   -}
6 src/views/TodoView.coffee
@@ -6,7 +6,9 @@ define [], ()->
6 6 on:
7 7 "click .check": (e...)-> @toggleDone(e...)
8 8 "dblclick div.todo-text": (e...)-> @edit(e...)
  9 + # exercise{{{ # add an event handler which deletes a TODO
9 10 "click span.todo-destroy": (e...)-> @clear(e...)
  11 + # }}}exercise
10 12 "keypress .todo-input": (e...)-> @updateOnEnter(e...)
11 13 "blur .todo-input": (e...)-> @close(e...)
12 14
@@ -24,10 +26,12 @@ define [], ()->
24 26
25 27 [
26 28 _ 'div', { class: 'todo' + (if @model.get('done') then ' done' else '') },
  29 + # exercise{{{
27 30 _ '.display',
28 31 _ 'input.check', checkbox_attrs
29 32 _ '.todo-text', text
30 33 _ 'span.todo-destroy'
  34 + # }}}exercise
31 35 _ '.edit',
32 36 @input = $(_ 'input.todo-input', type: "text", value: text)
33 37 ]
@@ -51,5 +55,7 @@ define [], ()->
51 55 remove: ->
52 56 @$el.remove()
53 57
  58 + # exercise{{{
54 59 clear: ->
55 60 @model.destroy()
  61 + # }}}exercise

0 comments on commit 2d5b93a

Please sign in to comment.
Something went wrong with that request. Please try again.