loading found media

3 files changed, 46 insertions, 42 deletions

diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index 92cf2bd..971fb15 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -56,6 +56,7 @@ var MediaUpload = UploadView.extend({
 	add: function(media){
 		console.log(media)
 		this.parent.mediaViewer.add(media)
+    this.parent.mediaViewer.$deleteMedia.show()
 	},
 	
 	beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 0ac6755..e2ed341 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -14,10 +14,10 @@ var MediaViewer = ModalView.extend({
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
-		this.$foundMedia = this.$(".foundMedia")
 		this.$myMedia = this.$(".myMedia")
-		this.$foundToggle = this.$(".foundToggle")
 		this.$userToggle = this.$(".userToggle")
+		this.$foundMedia = this.$(".foundMedia")
+		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
 	},
 
@@ -38,6 +38,7 @@ var MediaViewer = ModalView.extend({
 	show: function(){
 		if (! this.loaded) {
 			this.load()
+			this.loadTrending()
 		}
 		else {
 			this.__super__.show.call(this)
@@ -51,13 +52,50 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", this.populate.bind(this))
+		$.get("/api/media/user", function(data){
+		  this.populate()
+		}.bind(this))
+	},
+	
+	loadTrending: function(){
+    var trending_imagery = [
+      'https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg',
+      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg',
+      'http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg',
+      'http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg',
+      'http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg',
+      'http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg',
+      'http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg',
+      'http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg',
+      'http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg',
+    ]
+		trending_imagery.forEach(function(url){
+		  var loaded = false
+		  var img = new Image ()
+		  img.onload = function(){
+		    if (loaded) return
+		    loaded = true
+        var media = {
+          type: 'image',
+          url: url,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+        }
+        this.add(media, this.$foundMedia)
+		  }.bind(this)
+		  img.src = url
+		  if (img.complete && ! loaded) { img.onload() }
+		}.bind(this))
 	},
 
 	populate: function(data){
 		this.loaded = true
 		if (data && data.length) {
 		  data.forEach(this.add.bind(this))
+      this.$deleteMedia.show()
 		}
 		else {
 		  this.$deleteMedia.hide()
@@ -65,7 +103,8 @@ var MediaViewer = ModalView.extend({
 		this.__super__.show.call(this)
 	},
 	
-	add: function(media){
+	add: function(media, $container){
+	  $container = $container || this.$myMedia
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -92,8 +131,7 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		this.$(".myMedia").prepend($span)		
-    this.$deleteMedia.show()
+		$container.prepend($span)		
 	},
 
 	deleteIsArmed: false,
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index dbab237..3d95fb9 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -18,45 +18,10 @@
 	<span class="close">X</span>
 	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
 	<h3 class="editBtn warn" id="deleteMedia"></h3>
+
 	<div class="myMedia">
 	</div>
 	
 	<div class="foundMedia">
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg">
-		</span>
-		<span class="mediaContainer">
-			<img src="http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg">
-		</span>
 	</div>
 </div>
\ No newline at end of file