Skip to content

Commit f528547

Browse files
boundvariableboundvariable
committed
Chapter 5 fixes
1 parent a3581c4 commit f528547

File tree

10 files changed

+177
-94
lines changed

10 files changed

+177
-94
lines changed

‎5/listings/5.10.coffee

Lines changed: 51 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Date::daysFromToday = -> #A
2020
millisecondsInDay = 86400000 #A
2121
today = new Date #A
2222
diff = @ - today #A
23-
Math.floor Diff/millisecondsInDay #A
23+
Math.floor diff/millisecondsInDay #A
2424

2525
class Product
2626
products = []
@@ -34,14 +34,14 @@ class Product
3434
products.push @
3535
@name = name
3636
@info = info
37-
console.log @info
3837
@view = document.createElement 'div'
39-
@view.className = "product"
40-
document.body.appendChild @view
38+
@view.className = "product #{@category}"
39+
document.querySelector('.page').appendChild @view
4140
@view.onclick = =>
4241
@purchase()
4342
@render()
44-
render: -> template()
43+
render: ->
44+
@view.innerHTML = @template()
4545
purchase: ->
4646
if @info.stock > 0
4747
post "/json/purchase/#{@purchaseCategory}/#{@name}", (res) =>
@@ -51,7 +51,7 @@ class Product
5151
template: => #B
5252
"""
5353
<h2>#{@name}</h2>
54-
<dl>
54+
<dl class='info'>
5555
<dt>Stock</dt> <dd>#{@info.stock}</dd>
5656
<dt>New stock arrives in</dt>
5757
<dd>#{new Date(@info.arrives).daysFromToday()} days</dd>
@@ -63,9 +63,50 @@ class Product
6363
unmark: ->
6464
@view.style.border = "none";
6565

66-
class Gallery #C
67-
class Camera extends Product #C
68-
class Skateboard extends Product #C
69-
class Shop #C
66+
67+
class Camera extends Product
68+
category: 'camera'
69+
megapixels: -> @info.megapixels || "Unknown"
70+
71+
class Skateboard extends Product
72+
category: 'skateboard'
73+
length: -> @info.length || "Unknown"
74+
75+
class Shop
76+
constructor: ->
77+
unless Product::specials?
78+
Product::specials = []
79+
@view = document.createElement 'div'
80+
@render()
81+
get '/json/list', (data) ->
82+
for own category of data
83+
for own name, info of data[category]
84+
if info.special?
85+
Product::specials.push info.special
86+
switch category
87+
when 'camera'
88+
new Camera name, info
89+
when 'skateboard'
90+
new Skateboard name, info
91+
92+
render: ->
93+
@view = document.createElement 'div'
94+
document.querySelector('.page').appendChild @view
95+
@view.innerHTML = """
96+
<form class='search'>
97+
Search: <input id='search' type='text' />
98+
<button id='go'>Go</button>
99+
</form>
100+
"""
101+
console.log @view.innerHTML
102+
@search = document.querySelector '#search'
103+
@go = document.querySelector '#go'
104+
@go.onclick = =>
105+
Product.find @search.value
106+
false
107+
@search.onchange = ->
108+
Product.find @value
109+
false
110+
70111

71112
shop = new Shop

‎5/listings/5.5.coffee

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,64 +17,55 @@ post = (src, callback) ->
1717

1818

1919

20-
class Gallery #A
21-
render: -> "a gallery" #A
20+
class Gallery #A
21+
constructor: (@photos) -> #A
22+
render: -> #A
23+
images = for photo in @photos #A
24+
"<li><img src='#{photo}' alt='sample photo' /></li>" #A
25+
"<ul class='gallery'>#{images.join ''}</ul>" #A
2226

23-
class Product
24-
instances = []
25-
@find = (name) ->
26-
(product for product in instances when product.name is name)
2727

28-
constructor: (name, info) -> #B
29-
instances.push @ #B
30-
@name = name #B
31-
@info = info #B
32-
@view = document.createElement 'div' #B
33-
document.body.appendChild @view #B
34-
@render() #B
28+
class Product
29+
constructor: (name, info) -> #B
30+
@name = name #B
31+
@info = info #B
32+
@view = document.createElement 'div' #B
33+
@view.className = 'product' #B
34+
document.querySelector('.page').appendChild @view #B
35+
@render() #B
3536
render: ->
3637
@view.innerHTML = "#{@name}: #{@info.stock}"
3738

39+
3840
class Camera extends Product
39-
constructor: (name, info) -> #C
40-
@gallery = new Gallery #C
41-
super(name, info) #C
41+
constructor: (name, info) -> #C
42+
@gallery = new Gallery info.gallery #C
43+
super name, info #C
44+
@view.className += ' camera' #C
4245
render: ->
4346
@view.innerHTML = """
44-
#{@name}: #{@info.stock}
47+
#{@name} (#{@info.stock})
4548
#{@gallery.render()}
4649
"""
4750

4851

4952
class Shop
5053
constructor: ->
5154
@view = document.createElement 'div'
52-
document.body.appendChild @view
55+
document.querySelector('.page').appendChild @view
56+
document.querySelector('.page').className += ' l55'
5357
@render()
5458
get '/json/list', (data) ->
5559
for own category of data
5660
for own name, info of data[category]
5761
switch category
5862
when 'camera'
5963
new Camera name, info
64+
else
65+
new Product name, info
6066

6167
render: () ->
62-
@search = document.createElement 'input'
63-
@searchResults = document.createElement 'div'
64-
@search.onchange = =>
65-
results = Product.find @value
66-
if results.length > 0
67-
@view.innerHTML = """
68-
Found: #{results.join ','}
69-
"""
70-
else
71-
@view.innerHTML = "Nothing found"
72-
false
73-
7468
@view.innerHTML = ""
75-
document.body.appendChild @search
76-
77-
78-
new Shop
7969

80-
# Product.find 'aclie'
70+
window.onload = ->
71+
shop = new Shop

‎5/listings/5.8.coffee

Lines changed: 35 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,71 @@
1-
# http ommitted from this listing
2-
# get ommitted from this listing
3-
# post ommitted from this listing
41

5-
class Product
6-
products = []
7-
@find = (query) ->
8-
for product in products
9-
product.unmark()
10-
for product in products when product.name is query
11-
product.mark()
12-
product
2+
http = (method, src, callback) ->
3+
handler = ->
4+
if @readyState is 4 and @status is 200
5+
unless @responseText is null
6+
callback JSON.parse @responseText
7+
8+
client = new XMLHttpRequest
9+
client.onreadystatechange = handler
10+
client.open method, src
11+
client.send()
12+
13+
get = (src, callback) ->
14+
http "GET", src, callback
1315

16+
post = (src, callback) ->
17+
http "POST", src, callback
18+
19+
20+
class Product
1421
constructor: (name, info) ->
15-
products.push @
1622
@name = name
1723
@info = info
18-
console.log @info
1924
@view = document.createElement 'div'
20-
@view.className = "product"
21-
document.body.appendChild @view
25+
@view.className = "product #{@category}"
26+
document.querySelector('.page').appendChild @view
2227
@view.onclick = =>
2328
@purchase()
2429
@render()
25-
render: -> template()
30+
render: ->
31+
@view.innerHTML = @template()
2632
purchase: ->
2733
if @info.stock > 0
28-
post "/json/purchase/#{@purchaseCategory}/#{@name}", (res) =>
34+
post "/json/purchase/#{@category}/#{@name}", (res) =>
2935
if res.status is "success"
3036
@info = res.update
3137
@render()
3238
template: =>
3339
"""
3440
<h2>#{@name}</h2>
35-
<dl>
36-
<dt>Stock</dt> <dd>#{@info.stock}</dd>
37-
<dt>New stock arrives in</dt>
41+
<dl class='info'>
42+
<dt>Stock</dt>
43+
<dd>#{@info.stock}</dd>
44+
<dt>Specials?</dt>
45+
<dd>#{@specials.join(',') || 'No'}</dd>
3846
</dl>
3947
"""
4048

41-
mark: ->
42-
@view.style.border = "1px solid black";
43-
unmark: ->
44-
@view.style.border = "none";
45-
46-
class Gallery
47-
render: -> "a gallery"
4849

4950
class Camera extends Product
50-
purchaseCategory: 'camera'
51+
category: 'camera'
5152
megapixels: -> @info.megapixels || "Unknown"
52-
template: ->
53-
"""
54-
#{@name}: #{@info.stock}
55-
{@gallery.render()}
56-
"""
5753

5854
class Skateboard extends Product
59-
purchaseCategory: 'skateboard'
55+
category: 'skateboard'
6056
length: -> @info.length || "Unknown"
6157

6258
class Shop
6359
constructor: ->
64-
unless Product::specials? #A
65-
Product::specials = [] #A
66-
@view = document.createElement 'input'
67-
@view.onchange = ->
68-
Product.find @value
69-
document.body.appendChild @view
60+
unless Product::specials? #A
61+
Product::specials = [] #A
62+
@view = document.createElement 'div'
7063
@render()
7164
get '/json/list', (data) ->
7265
for own category of data
7366
for own name, info of data[category]
74-
if info.special? #B
75-
Product::specials.push product #B
67+
if info.special? #B
68+
Product::specials.push info.special #B
7669
switch category
7770
when 'camera'
7871
new Camera name, info

‎5/listings/5.9.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"Fuji-X100": {
33
"description": "a camera",
4-
"stock":5
4+
"stock": 5
55
},
66
"Perall Powalta": {
77
"description": "a skateboard",

‎5/listings/client.css

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,24 @@ h1 {
6565
line-height:1.4;
6666
}
6767

68+
.l55 .product {
69+
text-align: left;
70+
width: 40em;
71+
height: 11em;
72+
clear: left;
73+
background: url("/images/product.png") bottom left no-repeat;
74+
background-size: 10em auto;
75+
padding: 1em 0 0 0;
76+
}
77+
6878
.product .info {
6979
display: none;
7080
}
7181

82+
.product dl.info dt {
83+
margin-top: 1em;
84+
}
85+
7286
.product:hover {
7387
background: none;
7488
}
@@ -78,9 +92,38 @@ h1 {
7892
font-size: 0.8em;
7993
}
8094

81-
.camera {
95+
.camera, .l55 .camera {
8296
background: url("/images/camera.png") bottom left no-repeat;
83-
background-size: 100% auto;
97+
background-size: 10em auto;
98+
}
99+
100+
.l55 .product:hover {
101+
background: url("/images/product.png") bottom left no-repeat;
102+
background-size: 10em auto;
103+
}
104+
105+
.l55 .camera:hover {
106+
background: url("/images/camera.png") bottom left no-repeat;
107+
background-size: 10em auto;
108+
}
109+
110+
.camera .gallery {
111+
float: left;
112+
display: block;
113+
width: 40em;
114+
margin: 3em 0 0 15em;
115+
}
116+
117+
.camera .gallery li {
118+
float: left;
119+
display: block;
120+
margin: 0 1em 0 0;
121+
}
122+
123+
.camera .gallery img {
124+
height: 6.3em;
125+
float: left;
126+
display: block;
84127
}
85128

86129
.skateboard {

0 commit comments

Comments
 (0)