load more on media drawer and some other stuff

6 files changed, 32 insertions, 14 deletions

diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 196eca6..67834e7 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -34,7 +34,7 @@ var BuilderInfo = View.extend({
 	},
 	
 	load: function(data){
-		this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight )
+		this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
 		this.$units.val( "ft" )
 		this.$unitName.html( "ft" )
 	},
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 89040e1..e2cb53c 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -148,6 +148,7 @@ var EditorSettings = FormView.extend({
 		fd.append( "name", this.$name.val() )
 		fd.append( "description", this.$description.val() )
 		fd.append( "privacy", this.$privacy.filter(":checked").val() == "private" )
+		fd.append( "viewHeight", window.viewHeight )
 		fd.append( "rooms", JSON.stringify( Rooms.serialize() ) )
  		fd.append( "walls", JSON.stringify( Walls.serialize() ) )
  		fd.append( "colors", JSON.stringify( Walls.colors ) )
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 6aff601..ccd6c63 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -41,6 +41,7 @@ var EditorView = View.extend({
 		$("#map").hide()
 
 		this.settings.load(data)
+		this.info.load(data)
 	},
 	
 	readyLayout: function(data){
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index fddfefc..9799f99 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -55,9 +55,7 @@ var MediaUpload = UploadView.extend({
 	
 	add: function(media){
 		console.log(media)
-		this.parent.mediaViewer.add(media, this.parent.mediaViewer.$myMedia)
-    this.parent.mediaViewer.$deleteMedia.show()
-    this.parent.mediaViewer.$noMedia.hide()
+		this.parent.mediaViewer.addUploadedMedia(media)
 	},
 	
 	beforeUpload: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index c18fb49..2e76bec 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,23 +4,29 @@ var MediaViewer = ModalView.extend({
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
 	loaded: false,
-	
+	perPage: 12,
+	offset: 0,
+
 	events: {
 	  'mousedown': "stopPropagation",
 		'click .foundToggle': "foundToggle",
 		'click .userToggle': "userToggle",
 		'click #deleteMedia': "deleteArmed",
 		'click .mediaContainer': "pick",
+		'click .viewMore': "load",
 	},
 	
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
 		this.$myMedia = this.$(".myMedia")
+		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
 		this.$foundMedia = this.$(".foundMedia")
+		this.$foundMediaContainer = this.$(".foundMedia > .container")
 		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
@@ -55,7 +61,7 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", this.populate.bind(this))
+		$.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
 	},
 	
 	loadTrending: function(){
@@ -85,7 +91,7 @@ var MediaViewer = ModalView.extend({
           width: img.naturalWidth,
           height: img.naturalHeight,
         }
-        this.add(media, this.$foundMedia)
+        this.add(media, this.$foundMediaContainer)
 		  }.bind(this)
 		  img.src = url
 		  if (img.complete && ! loaded) { img.onload() }
@@ -100,22 +106,34 @@ var MediaViewer = ModalView.extend({
   },
 
 	populate: function(data){
-		this.loaded = true
 		if (data && data.length) {
+			if (data.length < this.perPage) {
+				this.$viewMore.hide()
+			}
 		  data.forEach(function(media){
-		    this.add(media, this.$myMedia)
+		    this.add(media, this.$myMediaContainer)
+		    this.offset += 1
 		  }.bind(this))
 		  this.$noMedia.hide()
       this.$deleteMedia.show()
 		}
 		else {
+			this.$viewMore.hide()
 		  this.$noMedia.show()
 		  this.$deleteMedia.hide()
 		}
+		this.loaded = true
 		this.__super__.show.call(this)
 	},
 	
-	add: function(media, $container){
+	addUploadedMedia: function(media){
+    this.parent.mediaViewer.$deleteMedia.show()
+    this.parent.mediaViewer.$noMedia.hide()
+    this.add(media, this.$myMedia, true) // prepend
+		this.offset += 1
+	},
+	
+	add: function(media, $container, prepend){
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -142,7 +160,8 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		$container.prepend($span)
+		if (prepend) $container.prepend($span)
+		else $container.append($span)
 	},
 
 	deleteIsArmed: false,
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index c8879b3..b559ba5 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -28,16 +28,15 @@ var TextEditor = FormView.extend({
 	},
 
   toggle: function(state){
-    $("#keyhint").fadeOut(200)
-    
     this.$el.toggleClass("active", state)
     if (state) {
+			$("#keyhint").fadeOut(200)
       Scenery.nextMedia = {
         type: 'text',
         width: 600,
         height: 450,
         scale: 0.5,
-        font: { family: 'Lato', size: 12, align: 'left' },
+        font: { family: 'Lato', size: 24, align: 'left', color: "#000" },
       }
       this.createMode(true)
     }