fixed-position close box

fixed-position close box &c

6 files changed, 38 insertions, 7 deletions

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 268a1c7..5ba5d69 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -127,9 +127,12 @@ MX.Movements = function (cam) {
 						Scenery.nextWallpaper = null
 						app.tube('cancel-wallpaper')
 					}
-					else if (app.controller && app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
+					else if (app.controller.mediaViewer && app.controller.mediaViewer.$el.hasClass("active")) {
 						app.controller.mediaViewer.hide()
 					}
+					else if (app.controller.lightControl.$el.hasClass('active')) {
+						app.controller.lightControl.hide()
+					}
 					else {
 						app.controller.toolbar.toggleMap()
 					}
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 2e76bec..10819af 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -6,6 +6,7 @@ var MediaViewer = ModalView.extend({
 	loaded: false,
 	perPage: 12,
 	offset: 0,
+	fixedClose: true,
 
 	events: {
 	  'mousedown': "stopPropagation",
@@ -106,6 +107,7 @@ var MediaViewer = ModalView.extend({
   },
 
 	populate: function(data){
+		var scrollTop = this.loaded ? $('.myMedia .container').height() : 0
 		if (data && data.length) {
 			if (data.length < this.perPage) {
 				this.$viewMore.hide()
@@ -122,8 +124,13 @@ var MediaViewer = ModalView.extend({
 		  this.$noMedia.show()
 		  this.$deleteMedia.hide()
 		}
-		this.loaded = true
-		this.__super__.show.call(this)
+		if (this.loaded) {
+			this.$el.delay(300).animate({ scrollTop: scrollTop }, 200)
+		}
+		else  {
+			this.loaded = true
+			this.__super__.show.call(this)
+		}
 	},
 	
 	addUploadedMedia: function(media){
diff --git a/public/assets/javascripts/ui/lib/ModalView.js b/public/assets/javascripts/ui/lib/ModalView.js
index d9b518a..1c41861 100644
--- a/public/assets/javascripts/ui/lib/ModalView.js
+++ b/public/assets/javascripts/ui/lib/ModalView.js
@@ -18,6 +18,10 @@ var ModalView = View.extend({
 		if (! this.usesFileUpload) {
 		  $(".fileUpload").removeClass("active")
 		}
+		if (this.fixedClose) {
+			$("#fixed_close").addClass("active")
+			$("#fixed_close").bind("click", this.hide.bind(this))
+		}
 		
 		this.$el.addClass("active")
     $("body").addClass("noOverflow")
@@ -25,6 +29,10 @@ var ModalView = View.extend({
 
 	hide: function(){
     // $(".mediaDrawer, .room1").removeClass("active editing");
+		if (this.fixedClose) {
+			$("#fixed_close").removeClass("active")
+			$("#fixed_close").unbind("click", this.hide.bind(this))
+		}
 		this.$el.removeClass("active");
     $("body").removeClass("noOverflow");
 	},
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index eec671a..038b0c4 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -2169,7 +2169,21 @@ form li textarea {
 	border: 1px solid black;
 	box-shadow: -3px 4px black;
 	line-height: 75px;
-
+	text-align: center;
+}
+#fixed_close {
+	display: none;
+	transform: translateY(-200px) translateZ(0);
+}
+#fixed_close.active {
+	animation: visibility 0.2s;
+	animation-fill-mode: forwards;
+	display: block;
+}
+@keyframes visibility {
+	100% {
+		transform: translateY(0px) translateZ(0);
+	}
 }
 
 
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 643ba92..4e2fad5 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -16,7 +16,6 @@ var media = {
 	  if (req.query.tag) {
 	    query.tag = req.query.tag
 	  }
-	  console.log(offset, limit)
 		Media.find(query)
 			.sort({'created_at': -1})
 			.skip(offset)
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index 5cc659e..7996f84 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -3,9 +3,9 @@
 	<img class="floatingImg">
 </div>
 
-<div class="mediaDrawer fixed animate mediaViewer">
-	<span class="close">X</span>
+<span class="close" id="fixed_close">X</span>
 
+<div class="mediaDrawer fixed animate mediaViewer">
 	<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>