upload wallpaper, reuses media api with a tag

3 files changed, 48 insertions, 9 deletions

diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 6df9961..92cf2bd 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -56,6 +56,10 @@ var MediaUpload = UploadView.extend({
 	add: function(media){
 		console.log(media)
 		this.parent.mediaViewer.add(media)
+	},
+	
+	beforeUpload: function(){
+		this.parent.mediaViewer.deleteArmed(false)
 	}
 
 })
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index e652f83..61ecb78 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -2,41 +2,69 @@
 var WallpaperPicker = UploadView.extend({
 	el: ".wallpaper",
 	
-	uploadAction: "/api/wallpaper/upload",
+	mediaTag: "wallpaper",
+	uploadAction: "/api/media/upload",
 
 	events: {
 		"click .swatch": 'pick',
   },
 	
 	initialize: function(){
+	  this.__super__.initialize.call(this)
 	  this.$swatches = this.$(".swatches")
 	},
 	
   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){
+	  console.log(data)
+		this.loaded = true
+		data && data.forEach(this.add.bind(this))
+    this.toggle(true)
 	},
 	
-	add: function (url) {
+	add: function (media) {
+	  if (media.type !== "image") { return }
 	  var swatch = document.createElement("div")
 	  swatch.className = "swatch"
-	  swatch.style.backgroundImage = "url(" + url + ")"
+	  swatch.style.backgroundImage = "url(" + media.url + ")"
 	  this.$swatches.append(swatch)
 	},
 
 	toggle: function (state) {
-    this.$el.toggleClass("active", 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")
 	},
 	
-	show: function(){
-		this.toggle(true)
-	},
-	
 	hide: function(){
 		this.toggle(false)
 	},
 	
+	beforeUpload: function(){
+	},
+	
 	pick: function(e){
     var $swatch = $(e.currentTarget)
 		var $floatingSwatch = $(".floatingSwatch")
diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js
index c237e36..efaa8c9 100644
--- a/public/assets/javascripts/ui/lib/UploadView.js
+++ b/public/assets/javascripts/ui/lib/UploadView.js
@@ -12,12 +12,15 @@ var UploadView = View.extend({
 		this.$file = this.$(".file")
 		this.$upload = this.$(".upload-icon")
   },
+  
+  beforeUpload: function(){
+  },
 	
   handleFileSelect: function(e) {
 		e.stopPropagation();
 		e.preventDefault();
 		
-		this.parent.mediaViewer.deleteArmed(false)
+		this.beforeUpload()
 
 		var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
 
@@ -56,6 +59,10 @@ var UploadView = View.extend({
 		fd.append('width', width)
 		fd.append('height', height)
 		fd.append('_csrf', $("[name=_csrf]").val())
+		
+		if (this.mediaTag) {
+		  fd.append('tag', this.mediaTag)
+		}
 
 		var request = $.ajax({
 			url: this.uploadAction,