delete wallpaper with scissors

2 files changed, 56 insertions, 5 deletions

diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index e2aaeb7..3640d6d 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -5,6 +5,7 @@ var WallpaperPicker = UploadView.extend({
 	mediaTag: "wallpaper",
 	createAction: "/api/media/new",
 	uploadAction: "/api/media/upload",
+	destroyAction: "/api/media/destroy",
 
 	events: {
 	  "contextmenu": 'contextmenu',
@@ -51,8 +52,6 @@ var WallpaperPicker = UploadView.extend({
         this.load()
       }
 	  }
-    // toggle the class that makes the cursor a paintbucket
-    // $("body").removeClass("pastePaper")
 	},
 	
 	load: function(){
@@ -78,6 +77,7 @@ var WallpaperPicker = UploadView.extend({
 	  var swatch = document.createElement("div")
 	  swatch.className = "swatch"
 	  swatch.style.backgroundImage = "url(" + media.url + ")"
+	  swatch.setAttribute("data-id", media._id)
 	  this.$swatches.append(swatch)
     this.$swatches.show()
     this.$(".txt").hide()
@@ -104,23 +104,41 @@ var WallpaperPicker = UploadView.extend({
 	},
 	
 	pick: function(e){
-	  app.tube('cancel-wallpaper')
     var $swatch = $(e.currentTarget)
-    this.follow( e, $swatch.css('background-image') )
-    this.parent.presets.modified = true
+	  if (Scenery.nextWallpaper == "none") {
+      var _id = $swatch[0].getAttribute("data-id")
+      $swatch.remove()
+      this.destroy(_id, function(){})
+	  }
+	  else {
+      app.tube('cancel-wallpaper')
+      this.follow( e, $swatch.css('background-image') )
+      this.parent.presets.modified = true
+    }
   },
   
 	remove: function(e){
 	  if (Scenery.nextWallpaper) {
+	    // remove red class to the wallpaper
       Scenery.nextWallpaper = null
       app.tube('cancel-wallpaper')
 	  }
 	  else {
+	    // add red class to the wallpaper
       this.follow( e, "none" )
       $(".floatingSwatch").addClass("scissors")
+      this.$el.addClass("deleteArmed")
 	  }
 	},
 	
+	destroy: function(_id, cb){
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
+		}).complete(cb || function(){})
+	},
+  
 	contextmenu: function(e){
     if (Scenery.nextWallpaper) {
       e.preventDefault()
@@ -159,6 +177,7 @@ var WallpaperPicker = UploadView.extend({
 				app.off('cancel-wallpaper', _hideCursor)
 				$floatingSwatch.removeClass("scissors").hide()
 				$(".floodMessage").hide()
+        base.$el.removeClass("deleteArmed")
 			}
 			function _floodRoom (e) {
 			  if (e.keyCode == 13) {
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 3c380ef..a488ad9 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1690,6 +1690,38 @@ border-left: 1px solid black;
 	padding-bottom: 6px;
 }
 
+.wallpaper.deleteArmed.active .swatches .swatch {
+  border: 1px solid #FF3B30;
+}
+.desktop .wallpaper.deleteArmed .swatch:hover {
+  background-color: #FF3B30;
+}
+
+.wallpaper.deleteArmed .swatch:before {
+	content: "\f1eb";
+	font-family: 'ionicons';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	-webkit-font-smoothing: antialiased;
+	font-size: 16px;
+	position: absolute;
+	background: #FF3B30;
+	border-radius: 50%;
+	margin-top: -8px;
+	margin-left: -8px;
+	color: white;
+	width: 20px;
+	height: 20px;
+	line-height: 16px;
+	text-align: center;
+  padding-top: 2px;
+}
+
+
+
 .vvbox .colors {
   max-width: 155px;
 	margin-bottom: 5px;