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
|
var ProjectView = View.extend({
events: {
"click": "next",
"click .page-up": "previous",
"click .page-down": "next",
"click .top": "stopPropagation",
},
initialize: function(opt){
// this.gallery = new GalleryView ()
this.project_id = this.$el.data("id")
this.page_number = opt.page_number
this.slide_count = this.$(".cell").length
this.$iframes = this.$(".cell.iframe")
this.$images = this.$(".cell.image")
this.$videos = this.$(".cell.video")
this.images = this.$images.toArray().map(function(img){ return $(img).data("uri") })
if (is_mobile) {
$iframes.remove()
$videos.remove()
}
if (this.$(".cell").length > 1) {
this.$(".top").flickity(app.flickity_options).on( 'cellSelect', function(e) {
var gallery = $(e.target).data('flickity')
app.header.updateSlideNumber( gallery.selectedIndex )
})
}
var $viewport = this.$(".flickity-viewport")
if (! $viewport.length) {
$viewport = this.$(".cell")
}
if ($viewport.length) {
$("<div>").addClass("page-up").insertAfter( $viewport )
$("<div>").addClass("page-down").insertAfter( $viewport )
}
else if (this.$('.top').length) {
this.$(".top").append( $("<figure>").addClass("page-up") )
this.$(".top").append( $("<figure>").addClass("page-down") )
}
else {
this.$el.append( $("<figure>").addClass("page-up") )
this.$el.append( $("<figure>").addClass("page-down") )
}
this.$el.addClass('hidden')
},
preload: function(){
if (this.images.length) {
app.loader.preloadImage( this.images[0] )
}
},
show: function(){
app.header.updatePageNumber( this.page_number )
app.header.updateSlideNumber( 0 )
app.header.updateSlideCount( this.slide_count )
$('body').removeClass('navopen')
this.$el.removeClass("hidden")
this.$el.addClass("active")
if (this.project_id == "cover") {
app.router.pushState("/")
}
else {
app.router.pushState("/project/" + this.project_id)
}
this.$images.each(function(){
var uri = $(this).data("uri")
$(this).css("background-image", "url(" + uri + ")")
})
if (is_mobile) {
this.$images.each(function(){
var uri = $(this).data("uri")
$(this).css("background-image", "url(" + uri + ")")
})
}
else {
this.$iframes.each(function(){
var uri = $(this).data("uri")
$(this).html("<iframe src='" + uri + "'>")
})
}
app.nav.setActive( this.project_id )
this.showing = true
addClassForPeriod( this.el, "showing", app.navigation_delay, function(){
this.showing = false
}.bind(this) )
},
hide: function(){
addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){
this.$el.addClass("hidden")
this.$el.removeClass("active")
this.$images.each(function(){
$(this).css("background-image", "")
})
this.$iframes.html("")
this.$videos.html("")
}.bind(this) )
},
previous: function(e){
e.stopPropagation()
app.nav.previous()
},
next: function(e){
e.stopPropagation()
app.nav.next()
},
})
|
