1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
var StoryView = ScrollableView.extend({
loaded: false,
el: "#story",
template: $("#story .template").html(),
events: {
"click .links li": "pick",
},
initialize: function(){
this.sections = {}
this.$img = this.$("img")
this.$content = this.$(".content")
this.$links = this.$(".links")
this.$loader = this.$(".loader")
this.scroller = new IScroll('#story', app.iscroll_options)
},
show: function(){
this.deferScrollToTop()
app.footer.hide()
document.body.className = "story"
},
populate: function(data){
if (this.loaded) { console.warn("populate called twice"); return }
this.loaded = true
this.data = data
this.$loader.hide()
this.$content.empty()
// id title image[uri caption] body
this.data.forEach(function(row){
var t = this.template.replace(/{{id}}/, row.id)
.replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
var li = document.createElement("li")
li.dataset.id = row.id
li.innerHTML = row.title
this.sections[row.id] = row
this.$links.append(li)
this.$content.append(t)
}.bind(this))
this.set_active( this.data[0].id )
},
pick: function(e){
var id = e.currentTarget.dataset.id
this.set_active(id)
},
set_active: function(id){
this.$links.find(".active").removeClass("active")
this.$links.find("[data-id=" + id + "]").addClass("active")
this.$content.find(".active").removeClass("active")
this.$content.find("[data-id=" + id + "]").addClass("active")
var section = this.sections[id]
this.$img.fadeTo(110,0.65, function() {
this.$img.attr("src", section.image.uri)
}.bind(this)).fadeTo(130,1)
this.deferScrollToTop()
},
})
|
