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
|
var WallpaperPicker = UploadView.extend({
el: ".wallpaper",
mediaTag: "wallpaper",
uploadAction: "/api/media/upload",
events: {
"click .swatch": 'pick',
"click .wallpaperRemove": 'remove',
},
initialize: function(){
this.__super__.initialize.call(this)
this.$swatches = this.$(".swatches")
this.$remove = this.$(".wallpaperRemove")
this.$remove.hide()
},
loaded: false,
show: function(){
if (! this.loaded) {
this.load()
}
else {
this.toggle(true)
}
},
hide: function(){
this.__super__.hide.call(this)
},
load: function(){
$.get("/api/media/user", { tag: this.mediaTag }, this.populate.bind(this))
},
populate: function(data){
this.loaded = true
if (data && data.length) {
data.forEach(this.add.bind(this))
}
this.toggle(true)
},
add: function (media) {
if (media.type !== "image") { return }
var swatch = document.createElement("div")
swatch.className = "swatch"
swatch.style.backgroundImage = "url(" + media.url + ")"
this.$swatches.append(swatch)
this.$swatches.show()
},
toggle: function (state) {
if (state && ! this.loaded) {
this.show()
}
else {
this.$el.toggleClass("active", state)
}
// toggle the class that makes the cursor a paintbucket
// $("body").removeClass("pastePaper")
},
hide: function(){
this.toggle(false)
},
beforeUpload: function(){
},
pick: function(e){
var $swatch = $(e.currentTarget)
this.follow( e, $swatch.css('background-image') )
this.$remove.show()
},
remove: function(e){
this.follow( e, "none" )
$(".floatingSwatch").addClass("scissors")
},
follow: function(e, wallpaper, icon){
icon = icon || wallpaper
var $floatingSwatch = $(".floatingSwatch")
$floatingSwatch.css('background-image', wallpaper)
Scenery.nextWallpaper = wallpaper
setTimeout(function(){
function _followCursor(e) {
$floatingSwatch.css({
top: (e.pageY + 10) + 'px',
left: (e.pageX + 10) + 'px',
});
}
function _hideCursor (e) {
$(window).off('mousemove', _followCursor)
$(window).off('click', _hideCursor)
app.off('cancel-wallpaper', _hideCursor)
$floatingSwatch.removeClass("scissors").hide()
}
$(window).on('mousemove', _followCursor)
$(window).one('click', _hideCursor);
app.on('cancel-wallpaper', _hideCursor)
$floatingSwatch.show()
_followCursor(e);
})
},
})
|
