split out uploadview

6 files changed, 164 insertions, 207 deletions

diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 86bf767..6df9961 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -1,5 +1,5 @@
 
-var MediaUpload = View.extend({
+var MediaUpload = UploadView.extend({
 	el: ".fileUpload",
 
 	createAction: "/api/media/new",
@@ -7,16 +7,12 @@ var MediaUpload = View.extend({
 	
 	events: {
 		"keydown .url": "enterSubmit",
-		"change .file": "handleFileSelect",
-		"submit form": "preventDefault",
 	},
 	
 	initialize: function(opt){
+    this.__super__.initialize.call(this)
 		this.parent = opt.parent
-		this.$csrf = this.$("[name=_csrf]")
 		this.$url = this.$(".url")
-		this.$file = this.$(".file")
-		this.$upload = this.$(".upload-icon")
 	},
 
 	show: function(){
@@ -45,7 +41,7 @@ var MediaUpload = View.extend({
 				return
 			}
 			
-			media._csrf = this.$csrf.val()
+			media._csrf = $("[name=_csrf]").val()
 			console.log(media)
 			
 			var request = $.ajax({
@@ -57,67 +53,8 @@ var MediaUpload = View.extend({
 		}.bind(this))
 	},
 	
-	handleFileSelect: function(e) {
-		e.stopPropagation();
-		e.preventDefault();
-		
-		this.parent.mediaViewer.deleteArmed(false)
-
-		var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
-
-		for (var i = 0, f; f = files[i]; i++) {
-			if ( ! f.type.match('image.*')) {
-				continue;
-			}
-			
-			this.getImageDimensions(f)
-		}
-	},
-	
-	getImageDimensions: function(f){
-		var base = this
-		
-		this.$upload.addClass('uploading')
-
-		var reader = new FileReader();
-
-		reader.onload = function(e) {
-			var image = new Image()
-			image.onload = function(){
-				var width = image.naturalWidth,
-					height = image.naturalHeight
-				base.upload(f, width, height)
-			}
-			image.src = e.target.result
-		}
-		
-		reader.readAsDataURL(f);
-	},
-	
-	upload: function(f, width, height){
-		var fd = new FormData()
-		fd.append('image', f)
-		fd.append('width', width)
-		fd.append('height', height)
-		fd.append('_csrf', this.$csrf.val())
-
-		var request = $.ajax({
-			url: this.uploadAction,
-			type: "post",
-			data: fd,
-			dataType: "json",
-			processData: false,
-			contentType: false,
-		})
-		request.done(this.add.bind(this))
-	},
-	
 	add: function(media){
 		console.log(media)
-		if (media.error) {
-			return
-		}
-		this.$upload.removeClass('uploading')
 		this.parent.mediaViewer.add(media)
 	}
 
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 40bfe80..7cfa863 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -2,6 +2,7 @@
 var MediaViewer = ModalView.extend({
 	el: ".mediaDrawer.mediaViewer",
 	destroyAction: "/api/media/destroy",
+	usesFileUpload: true,
 	
 	events: {
 		'click .foundToggle': "foundToggle",
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 2309e22..e652f83 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -1,40 +1,38 @@
 
-var WallpaperPicker = View.extend({
+var WallpaperPicker = UploadView.extend({
 	el: ".wallpaper",
 	
+	uploadAction: "/api/wallpaper/upload",
+
 	events: {
 		"click .swatch": 'pick',
-	},
+  },
 	
 	initialize: function(){
-	  this.el.innerHTML = "wallpaper coming soon"
-	  this.el.style.padding = "10px"
-	  this.el.style.fontWeight = "300"
-	  return
-		var wm = new WallpaperManager()
-		app.on('wallpaper-ready', function(){
-			var black = [0,0,0,1.0]
-			var white = [255,255,255,1.0]
-			var swatches = wm.buildSwatches(black, white, 2)
-			swatches.forEach(function(swatch){
-				var dataUrl = swatch.toDataURL()
-				var span = document.createElement('span')
-				span.style.backgroundImage = "url(" + dataUrl + ")"
-				span.className = "swatch"
-				this.$el.append(span)
-			}.bind(this))
-		}.bind(this))
-		wm.init()
+	  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: function (state) {
+    this.$el.toggleClass("active", state)
     // toggle the class that makes the cursor a paintbucket
-    // $("body").removeClass("pastePaper");
+    // $("body").removeClass("pastePaper")
 	},
+	
 	show: function(){
 		this.toggle(true)
 	},
+	
 	hide: function(){
 		this.toggle(false)
 	},
@@ -62,94 +60,6 @@ var WallpaperPicker = View.extend({
 			$floatingSwatch.show()
 			_followCursor(e);
 		})
-	}
+	},
 
 })
-
-// pattern
-// scale
-// foreground
-// background
-
-var WallpaperManager = function () {
-
-	var image = new Image ()
-	var imageData
-	var w, h
-	
-	this.masks = []
-	
-	this.init = function(){
-		this.load()
-	}
-	
-	this.load = function(){
-		image.onload = function(){
-			this.loadImageData()
-			this.buildMasks()
-			app.tube('wallpaper-ready')
-		}.bind(this)
-		
-		image.src = "/assets/img/palette.gif"
-	}
-	
-	this.loadImageData = function(){
-		var canvas = document.createElement('canvas')
-		var ctx = canvas.getContext('2d')
-		w = canvas.width = image.naturalWidth
-		h = canvas.height = image.naturalHeight
-		ctx.drawImage(image, 0,0)
-		imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data
-	}
-	
-	this.buildMasks = function(){
-		var mask
-		for (var y = 0; y < 6; y++) {
-			for (var x = 0; x < 16; x++) {
-				mask = this.buildMask(x,y)
-				this.masks.push(mask)
-			}
-		}
-	}
-	
-	this.buildMask = function(x,y){
-		// add the offset of the top-left swatch
-		x = (x * 18) + 15
-		y = (y * 16) + 5
-
-		var mask = new Array(64)
-		var t = 0
-		for (var i = 0; i < 8; i++) {
-			for (var j = 0; j < 8; j++) {
-				t = ( w*(y+j) + x+i ) * 4
-				mask[j*8+i] = imageData[t] === 0
-			}
-		}
-		return mask
-	}
-	
-	this.buildSwatches = function(black, white, scale) {
-		var swatches = this.masks.map(function(mask){
-			return this.buildSwatch(mask,black,white,scale)
-		}.bind(this))
-		
-		return swatches
-	}
-	
-	this.buildSwatch = function(mask,black,white,scale){
-		black = 'rgba(' + black.join(',') + ')'
-		white = 'rgba(' + white.join(',') + ')'
-		var canvas = document.createElement("canvas")
-		canvas.width = 8*scale
-		canvas.height = 8*scale
-		var ctx = canvas.getContext('2d')
-		for (var i = 0; i < 8; i++) {
-			for (var j = 0; j < 8; j++) {
-				ctx.fillStyle = mask[j*8+i] ? black : white
-				ctx.fillRect(i*scale, j*scale, scale, scale)
-			}
-		}
-		return canvas
-	}
-	
-}
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index 937c1e9..d9b518a 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -10,9 +10,15 @@ var ModalView = View.extend({
 		}
 	},
 	
+	usesFileUpload: false,
+	
 	show: function(){
 		$(".mediaDrawer").removeClass("active")
-		$(".fileUpload").removeClass("active")
+		
+		if (! this.usesFileUpload) {
+		  $(".fileUpload").removeClass("active")
+		}
+		
 		this.$el.addClass("active")
     $("body").addClass("noOverflow")
 	},
@@ -32,4 +38,5 @@ var ModalView = View.extend({
 			this.hide()
 		}
 	}
+
 })
diff --git a/public/assets/javascripts/ui/lib/UploadView.js b/public/assets/javascripts/ui/lib/UploadView.js
new file mode 100644
index 0000000..c237e36
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/UploadView.js
@@ -0,0 +1,83 @@
+
+var UploadView = View.extend({
+
+  // define uploadAction
+
+	events: {
+		"change .file": "handleFileSelect",
+		"submit form": "preventDefault",
+	},
+	
+	initialize: function(){
+		this.$file = this.$(".file")
+		this.$upload = this.$(".upload-icon")
+  },
+	
+  handleFileSelect: function(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		
+		this.parent.mediaViewer.deleteArmed(false)
+
+		var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
+
+		for (var i = 0, f; f = files[i]; i++) {
+			if ( ! f.type.match('image.*')) {
+				continue;
+			}
+			
+			this.getImageDimensions(f)
+		}
+	},
+	
+	getImageDimensions: function(f){
+		var base = this
+		
+		this.$upload.addClass('uploading')
+
+		var reader = new FileReader();
+
+		reader.onload = function(e) {
+			var image = new Image()
+			image.onload = function(){
+				var width = image.naturalWidth,
+					height = image.naturalHeight
+				base.upload(f, width, height)
+			}
+			image.src = e.target.result
+		}
+		
+		reader.readAsDataURL(f);
+	},
+	
+	upload: function(f, width, height){
+		var fd = new FormData()
+		fd.append('image', f)
+		fd.append('width', width)
+		fd.append('height', height)
+		fd.append('_csrf', $("[name=_csrf]").val())
+
+		var request = $.ajax({
+			url: this.uploadAction,
+			type: "post",
+			data: fd,
+			dataType: "json",
+			processData: false,
+			contentType: false,
+		})
+		request.done(this.success.bind(this))
+	},
+	
+	success: function(media){
+		if (media.error) {
+			return
+		}
+		this.$upload.removeClass('uploading')
+		this.add(media)
+	},
+	
+	add: function(media){
+	  console.log(media)
+	},
+
+})
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 6f6a192..b6e1f17 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1099,14 +1099,14 @@ iframe.embed {
 
 /* WALLPAPER PICKER */
 
-.wallpaper{
+.wallpaper {
   right: 80px;
   margin-top: 77px;
   width: 162px;
   z-index: 1;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
-  transition: -webkit-transform 0.1s ease-in-out;
+  transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
 }
 .wallpaper.active {
@@ -1114,46 +1114,65 @@ iframe.embed {
   -webkit-transform: translateX(0px);
   transform: translateX(0px);
 }
-.wallpaper.active span {
+.wallpaper.active .swatches span {
   width: 40px;
   height: 35px;
   display: inline-block;
-  float: left;
   border:1px solid;
-  background: url(../img/MacPaint.gif);
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-user-drag: element;
 }
-
-.wallpaper.active span:nth-child(1){
-  background-position:103px 70px;
+.wallpaper.active .swatches span:hover {
+  cursor: pointer;
+  -webkit-transform: translateX(3px) translateY(-3px);
+  transform: translateX(3px) translateY(-3px);
 }
-.wallpaper.active span:nth-child(2){
-  background-position:200px -98px;
+.wallpaper .swatches {
+  width: 100%;
+  border-bottom: 1px solid black;
+  min-height: 30px;
 }
-.wallpaper.active span:nth-child(3){
-  background-position:200px -260px;
+.wallpaperUpload {
+  font-size: 14px;
+  font-weight: 300;
 }
-.wallpaper.active span:nth-child(4){
-  background-position:200px -350px;
+.wallpaperUpload label {
+  position: relative;
+  top: -6px;
+  float: none;
 }
-.wallpaper.active span:nth-child(5){
-  background-position:200px -484px;
+.wallpaperUpload .icon-ios7-upload-outline {
+  font-size: 26px;
 }
-.wallpaper.active span:nth-child(6){
-  background-position:200px -581px;
+.wallpaperUpload .upload-icon.uploading {
 }
-.wallpaper.active span:nth-child(7){
-  background-position:200px -645px;
+.wallpaperUpload .upload-icon.uploading:before {
+	content: ' ' !important;
+	background-image: url("/assets/img/loader.gif");
+	background-repeat: no-repeat;
+	width: 40px;
+	height: 40px;
 }
-.wallpaper.active span:nth-child(8){
-  background-position:200px -772px;
+.wallpaperUpload input[type="text"]{
+  border: 1px solid #ccc;
+  font-size: 15px;
+  padding: 5px;
+  width: 100px;
+  text-align: center;
+  border-radius: 20px;
 }
-
-.wallpaper.active span:hover {
-  cursor: pointer;
-  -webkit-transform: translateX(3px) translateY(-3px);
-  transform: translateX(3px) translateY(-3px);
+.wallpaperUpload input[type="text"]:focus{
+  border: 1px solid #000;
+}
+.wallpaperUpload input[type="file"]{
+  position: absolute;
+  margin-left: -134px;
+  background: blue;
+  height: 28px;
+  width: 100%;
+  margin-top: 0px;
+  opacity: 0;
+  cursor:pointer;
 }
 
 
@@ -1216,7 +1235,7 @@ input[type="range"]::-webkit-slider-thumb {
   top: -6px;
   padding-left: 5px;
   display: inline-block;
-  width: 60px;
+  min-width: 35px;
   cursor: pointer;
 }
 .color-swatches label.selected {