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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
var ArchiveView = ScrollableView.extend({
el: "#archive",
menu_template: $("#archive .menu .template").html(),
row_template: $("#archive .scroll .template").html(),
events: {
"click .item": "pick",
"mousedown .row": "mousedown",
"touchstart .row": "touchstart",
"mousemove .row": "mousemove",
"touchmove .row": "touchmove",
"mouseup .row": "mouseup",
"touchend .row": "touchend",
},
initialize: function(){
this.$menu_items = this.$(".menu .items")
this.$content = this.$(".content")
this.$loader = this.$(".loader")
this.scroller = new IScroll('#archive .scroll', app.iscroll_options)
},
back: function(){
this.$el.addClass("menu")
app.header.set_back(false)
},
pick: function(e){
this.$el.removeClass("menu")
app.header.set_back(true)
var index = $(e.currentTarget).data("index")
this.populateDecade(index)
},
show: function(){
this.deferScrollToTop()
app.footer.hide()
this.back()
document.body.className = "archive"
},
populate: function(data){
if (this.loaded) { return }
this.loaded = true
this.data = data
this.$loader.hide()
this.$content.empty()
// id title images[ uri label code caption ]
this.data.forEach(function(row, index){
var t = this.menu_template.replace(/{{title}}/, row.title)
var $t = $(t)
$t.data("title", row.title)
$t.data("index", index)
this.$menu_items.append($t)
}.bind(this))
this.back()
this.deferScrollToTop()
this.populateDecade(0, 3)
},
populateDecade: function(index, count){
this.$content.empty()
var loader = new Loader()
var row = this.data[index]
row.images.forEach(function(cell, i){
if (i > count) return
var $t = $("<div>")
$t.addClass("row").addClass("loading")
var t = this.row_template.replace(/{{image}}/, cell.uri)
.replace(/{{label}}/, cell.label)
.replace(/{{code}}/, cell.code)
.replace(/{{caption}}/, cell.caption)
$t.html(t)
this.$content.append($t)
loader.preloadImage(cell.uri, function(){
$t.removeClass('loading')
}.bind(this))
}.bind(this))
},
// ['transformProp'] = "translateZ(0) translateX(-50%) translateY(-50%) ";
// .image, .text
touchstart: function(e){
this.$row = e.currentTarget
this.mousedown(e.touches[0])
},
touchmove: function(e){
this.mousemove(e.touches[0])
},
touchend: function(e){
this.mouseup()
},
mouse: { x: 0, y: 0 },
$row: null,
mousedown: function(e){
this.$row = this.$row || e.currentTarget
this.mouse.x = e.pageX
this.mouse.y = e.pageY
},
mousemove: function(e){
var dx = ( this.mouse.x - e.pageX ) / window.innerWidth
var dy = ( this.mouse.y - e.pageY ) / window.innerWidth
this.$row.style['transformProp'] = [
"translateZ(0)",
"translateX(-50%)",
"translateY(-50%)",
"rotateY(" + dx + "deg)",
].join(" ")
},
mouseup: function(e){
this.mouse.x = this.mouse.y = 0
this.$row = null
},
})
|
