move tumblr load stuff into own modal; example tumblrs

6 files changed, 79 insertions, 24 deletions

diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 277718a..a5ad2dd 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -59,7 +59,6 @@ var EditorToolbar = View.extend({
 		this.resetControls()
 		this.toggleMap(false)
 		this.parent.mediaViewer.show()
-		this.parent.mediaUpload.show()
 	},
 
 	resetMode: function(){
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 4a2f712..50d3650 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -15,6 +15,7 @@ var EditorView = View.extend({
 		this.info = new BuilderInfo ({ parent: this })
 		this.mediaViewer = new MediaViewer ({ parent: this })
 		this.mediaUpload = new MediaUpload ({ parent: this })
+		this.mediaTumblr = new MediaTumblr ({ parent: this })
 		this.mediaEditor = new MediaEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
 		this.colorControl = new ColorControl ({ parent: this })
diff --git a/public/assets/javascripts/ui/editor/MediaTumblr.js b/public/assets/javascripts/ui/editor/MediaTumblr.js
new file mode 100644
index 0000000..47419ae
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/MediaTumblr.js
@@ -0,0 +1,53 @@
+
+var MediaTumblr = ModalView.extend({
+	el: "#tumblrUpload",
+
+	events: {
+    'mousedown': "stopPropagation",
+		"keydown .url": "enterSubmit",
+		"click .exampleTumblr": "loadExample",
+	},
+	
+	initialize: function(opt){
+    this.__super__.initialize.call(this)
+		this.parent = opt.parent
+		this.$url = this.$(".url")
+	},
+
+	show: function(){
+		this.$el.addClass("active")
+		this.$url.val("")
+	},
+	
+	hide: function(){
+		this.$el.removeClass("active")
+	},
+	
+	enterSubmit: function(e){
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			e.preventDefault()
+      var url = this.$tumblrUrl.val()
+			this.loadTumblr(url)
+		}
+	},
+
+	loadTumblr: function(url){
+		Parser.tumblr(url, function(media_list){
+			console.log(media_list)
+			this.parent.mediaViewer.$foundMediaContainer.empty()
+			media_list.reverse().forEach(function(media){
+				this.parent.mediaViewer.add(media, this.parent.mediaViewer.$foundMediaContainer)
+			}.bind(this))
+		}.bind(this))
+	},
+	
+	loadExample: function(e){
+	  e.preventDefault()
+	  var name = $(e.currentTarget).html()
+	  var url = "http://" + name + ".tumblr.com/"
+	  this.$url.val(url)
+	  this.loadTumblr(url)
+	},
+
+})
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 9ae90e3..d09e38c 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -1,6 +1,6 @@
 
 var MediaUpload = UploadView.extend({
-	el: ".fileUpload",
+	el: "#fileUpload",
 
 	createAction: "/api/media/new",
 	uploadAction: "/api/media/upload",
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 94a9d90..2ae5104 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -38,11 +38,11 @@ var MediaViewer = ModalView.extend({
 		this.$deleteMedia = this.$("#deleteMedia")
 		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
-		
-		this.$tumblrUrl = this.$("#tumblr-url")
   },
 
+  mode: "user",
 	wallpaperToggle: function(){
+	  this.mode = "wallpaper"
     this.$wallpaperMedia.addClass("active")
     this.$foundMedia.addClass("inactive")
     this.$myMedia.addClass("inactive").removeClass('active')
@@ -51,19 +51,25 @@ var MediaViewer = ModalView.extend({
 	},
 	
 	foundToggle: function(){
+	  this.mode = "found"
     this.$wallpaperMedia.removeClass("active")
     this.$foundMedia.addClass("active")
     this.$myMedia.addClass("inactive").removeClass('active')
     this.$("a").removeClass("active")
     this.$foundToggle.addClass("active")
+    this.parent.mediaUpload.hide()
+    this.parent.mediaTumblr.show()
 	},
 	
 	userToggle: function(){
+	  this.mode = "user"
     this.$wallpaperMedia.removeClass("active")
     this.$foundMedia.removeClass("active")
     this.$myMedia.removeClass("inactive").addClass('active')
     this.$("a").removeClass("active")
     this.$userToggle.addClass("active")
+    this.parent.mediaUpload.show()
+    this.parent.mediaTumblr.hide()
 	},
 
 	show: function(){
@@ -72,8 +78,7 @@ var MediaViewer = ModalView.extend({
 			// this.loadTrending()
 		}
 		else {
-		  this.parent.cursor.message("media")
-			this.__super__.show.call(this)
+			this.reallyShow()
 		}
 	},
 	
@@ -81,8 +86,20 @@ var MediaViewer = ModalView.extend({
 		this.__super__.hide.call(this)
 		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
+		this.parent.mediaTumblr.hide()
 		this.parent.cursor.message('start')
 	},
+	
+	reallyShow: function(){
+    this.__super__.show.call(this)
+    if (this.mode == "user") {
+      this.userToggle()
+    }
+    else {
+      this.foundToggle()
+    }
+    this.parent.cursor.message("media")
+	},
 
 	load: function(){
 		$.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
@@ -159,8 +176,7 @@ var MediaViewer = ModalView.extend({
 		}
 		else  {
 			this.loaded = true
-      this.parent.cursor.message("media")
-			this.__super__.show.call(this)
+			this.reallyShow()
 		}
 	},
 	
@@ -296,16 +312,4 @@ var MediaViewer = ModalView.extend({
 		_followCursor(e)
 	},
 	
-	enterTumblrUrl: function(e){
-		e.stopPropagation()
-		if (e.keyCode !== 13) { return }
-		var url = this.$tumblrUrl.val()
-		Parser.tumblr(url, function(media_list){
-			console.log(media_list)
-			this.$foundMediaContainer.empty()
-			media_list.reverse().forEach(function(media){
-				this.add(media, this.$foundMediaContainer)
-			}.bind(this))
-		}.bind(this))
-	},
 })
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index f70fbb3..6f1c729 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -14,10 +14,8 @@ var ModalView = View.extend({
   
   show: function(){
     $(".mediaDrawer").removeClass("active")
-    
-    if (! this.usesFileUpload) {
-      $(".fileUpload").removeClass("active")
-    }
+    $(".fileUpload").removeClass("active")
+
     if (this.fixedClose) {
       $("#fixed_close").addClass("active")
       $("#fixed_close").bind("click", this.hide.bind(this))