summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/ui/editor/WallpaperPicker.js
blob: e652f83385516e2b00fede13829b244cab8cd360 (plain)
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
var WallpaperPicker = UploadView.extend({
	el: ".wallpaper",
	
	uploadAction: "/api/wallpaper/upload",

	events: {
		"click .swatch": 'pick',
  },
	
	initialize: function(){
	  this.$swatches = this.$(".swatches")
	},
	
  loaded: false,
	load: function(){
	},
	
	add: function (url) {
	  var swatch = document.createElement("div")
	  swatch.className = "swatch"
	  swatch.style.backgroundImage = "url(" + url + ")"
	  this.$swatches.append(swatch)
	},

	toggle: function (state) {
    this.$el.toggleClass("active", state)
    // toggle the class that makes the cursor a paintbucket
    // $("body").removeClass("pastePaper")
	},
	
	show: function(){
		this.toggle(true)
	},
	
	hide: function(){
		this.toggle(false)
	},
	
	pick: function(e){
    var $swatch = $(e.currentTarget)
		var $floatingSwatch = $(".floatingSwatch")

    $floatingSwatch.css('background-image', $swatch.css('background-image'))

		Scenery.nextWallpaper = $swatch.css('background-image')

		setTimeout(function(){
			function _followCursor(e) {
				$floatingSwatch.css({
					top: (e.pageY + 10) + 'px',
					left: (e.pageX + 10) + 'px'
				});
			}
			$(window).on('mousemove', _followCursor);
			$(window).one('click', function () {
				$(window).off('mousemove', _followCursor);
				$floatingSwatch.hide();
			});
			$floatingSwatch.show()
			_followCursor(e);
		})
	},

})