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
127
128
129
130
131
132
133
134
135
136
137
138
139
|
var BlueprintUploader = UploadView.extend({
el: ".blueprintUploader",
mediaTag: "blueprint",
createAction: "/api/blueprint/new",
uploadAction: "/api/blueprint/upload",
listAction: "/api/blueprint/user",
destroyAction: "/api/blueprint/destroy",
events: {
"mousedown": 'stopPropagation',
"change .url": "enterUrl",
"keydown .url": "enterSetUrl",
"click .blueprint": "pick",
"click .remove": "destroy",
},
initialize: function(opt){
this.parent = opt.parent
this.__super__.initialize.call(this)
this.$url = this.$(".url")
this.$blueprints = this.$(".blueprints")
},
loaded: false,
nameToShow: null,
load: function(name){
this.nameToShow = name || ""
$.get(this.listAction, { tag: this.mediaTag }, this.populate.bind(this))
},
populate: function(data){
this.loaded = true
if (data && data.length) {
this.$blueprints.show()
data.forEach(this.append.bind(this))
this.hide()
if (this.nameToShow && this.nameToShow !== "new") {
data.some(function(el){
if (el.slug == this.nameToShow) {
this.parent.scaler.pick(el)
return true
}
}.bind(this))
}
else {
this.parent.scaler.pick(data[0])
}
}
else {
this.parent.scaler.hideClose()
this.show()
}
},
pick: function(e){
var $el = $(e.currentTarget)
var media = $el.data("media")
this.hide()
this.parent.scaler.pick(media, true)
},
destroy: function(e){
e.stopPropagation()
var $el = $(e.currentTarget)
var _id = $el.closest(".blueprint").data("id")
$el.remove()
$.ajax({
type: "delete",
url: this.destroyAction,
data: { _id: _id, _csrf: $("[name=_csrf]").val() }
}).complete(function(){
})
},
show: function(){
this.toggle(true)
},
hide: function(){
this.toggle(false)
},
toggle: function (state) {
this.$el.toggleClass("active", state)
},
addUrl: function (url){
Parser.loadImage(url, function(media){
if (! media) return
media._csrf = $("[name=_csrf]").val()
media.tag = this.mediaTag
var request = $.ajax({
type: "post",
url: this.createAction,
data: media,
})
request.done(this.add.bind(this))
}.bind(this))
},
enterUrl: function(){
var url = this.$url.sanitize()
this.addUrl(url)
this.$url.val("")
},
enterSetUrl: function (e) {
e.stopPropagation()
if (e.keyCode == 13) {
setTimeout(this.enterUrl.bind(this), 100)
}
},
add: function(media){
this.$blueprints.show()
this.append(media)
this.hide()
this.parent.scaler.pick(media, true)
},
append: function(media){
var $el = $("<span>")
var img = new Image ()
img.src = media.url
var remove = document.createElement("span")
remove.className = "remove"
remove.innerHTML = "<span>x</span>"
$el.data("id", media._id)
$el.data("media", media)
$el.append(img)
$el.append(remove)
$el.addClass("blueprint")
this.$blueprints.append($el)
},
})
|
