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
|
var MediaPlayer = FormView.extend({
el: "#mediaPlayer",
events: {
"click [data-role=play-media]": "togglePaused",
"click [data-role=mute-media]": "toggleMuted",
"mousedown": "stopPropagation",
},
initialize: function(opt){
this.parent = opt.parent
this.__super__.initialize.call(this)
this.$name = this.$(".name")
this.$description = this.$(".description")
// image fields
this.$dimensions = this.$(".dimensions")
// video fields
this.$playButton = this.$("[data-role=play-media]")
this.$muteButton = this.$("[data-role=mute-media]")
},
toggle: function(state) {
this.$el.toggleClass("active", state);
},
togglePaused: function(state){
var state = this.scenery.toggle(state)
this.$playButton.toggleClass("paused", ! state)
},
toggleMuted: function(state){
var state = this.scenery.toggleMuted(state)
this.$muteButton.toggleClass("muted", state)
},
pick: function(scenery) {
var media = scenery.media
if (this.scenery) {
this.unbind()
}
if (media.type == "image") {
if ( ! media.description && (! media.title || media.title == filenameFromUrl(media.url)) ) {
this.hide()
return false
}
}
this.bind(scenery)
this.$el.addClass("active")
this.$name.html( sanitize(media.title) )
this.$description.html( marked(media.description) )
switch (media.type) {
case "image":
this.$(".image").show()
this.$(".video").hide()
// this.$widthDimension.html( Number(media.widthDimension) || "" )
// this.$heightDimension.html( Number(media.heightDimension) || "" )
// this.$units.html( media.units || "cm" )
break
case "youtube":
case "vimeo":
case "video":
this.$(".video").show()
this.$(".image").hide()
this.$playButton.toggleClass("paused", ! this.scenery.paused())
this.$muteButton.toggleClass("muted", this.scenery.muted())
break
}
return true
},
hide: function(scenery){
if (this.scenery) {
this.unbind()
}
this.toggle(false)
},
bind: function(scenery){
this.scenery = scenery
this.scenery.mx.bound = true
},
unbind: function(){
this.scenery.mx.bound = false
this.scenery = null
},
})
|
