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
|
var HubView = ScrollableView.extend({
el: "#hub",
template: $("#hub .template").html(),
events: {
"click .share": "content-share",
"click .store": "store_link",
"click .gallery-left": "gallery_left",
"click .gallery-right": "gallery_right",
"click .play": "play_video",
},
initialize: function(){
this.$content = this.$(".content")
this.$loader = this.$(".loader")
this.scroller = new IScroll('#hub', app.iscroll_options)
},
show: function(){
this.deferScrollToTop()
app.footer.hide()
document.body.className = "hub"
},
galleries: {},
populate: function(data){
this.data = data
this.$loader.hide()
this.$content.empty()
this.galleries = {}
// id date subtitle body link store image[uri caption]
this.data.forEach(function(row){
// console.log(row)
var t = this.template.replace(/{{id}}/g, row.id)
.replace(/{{date}}/, moment(row.date).format("MM.DD.YYYY"))
.replace(/{{title}}/, row.title)
.replace(/{{subtitle}}/, row.subtitle)
.replace(/{{link}}/, row.link)
.replace(/{{body}}/, row.body.replace(/\n/g, "<br>"))
var $t = $(t)
if (row.store != "true") {
$t.find(".store").remove()
}
this.$content.append($t)
if (row.image.length > 1) {
// image gallery
var $gallery = $(".gallery-" + row.id)
row.image.forEach(function(img){
var el = document.createElement("div")
el.style.backgroundImage = "url(" + img.uri + ")"
el.className = "item"
$gallery.append(el)
})
this.galleries[row.id] = new Flickity( ".gallery-" + row.id, {
selector: '.item',
cellAlign: 'center',
autoPlay: false,
freeScroll: false,
wrapAround: true,
imagesLoaded: true,
prevNextButtons: false,
pageDots: false,
contain: true,
draggable: true,
})
}
else {
// single image
var el = document.createElement("div")
el.style.backgroundImage = "url(" + row.image[0].uri + ")"
el.className = "item"
$(".gallery-" + row.id).append(el)
$(".gallery-" + row.id).data("row", row)
// video, append play button
if (row.link.match(/youtube|youtu.be|vimeo/)) {
var play = document.createElement("div")
play.className = "play"
$(".gallery-" + row.id).append(play)
}
$t.find(".gallery-left").remove()
$t.find(".gallery-right").remove()
}
}.bind(this))
this.deferScrollToTop()
},
store_link: function(){
app.router.go("store")
},
play_video: function(e){
var row = $(e.currentTarget).closest('.gallery-video-post').data("row")
window.open(row.link, '_system')
},
gallery_left: function(e){
var id = $(e.currentTarget).closest(".hub_item").data('id')
this.galleries[id].previous()
},
gallery_right: function(e){
var id = $(e.currentTarget).closest(".hub_item").data('id')
this.galleries[id].next()
},
share: function(){
window.plugins.socialsharing.share( this.item['ModelNames'], null, null, "http://stoneisland.com/")
},
})
|
