Merge branch 'master' of github.com:okfocus/vvalls

5 files changed, 119 insertions, 205 deletions

diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 4b30228..76218fe 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -19,6 +19,7 @@ var EditorToolbar = View.extend({
 
 	toggleMap: function(){
 		map.toggle()
+		// $("#minimap").toggleClass("hide");
 	},
 	
 	toggleSettings: function(){
@@ -49,3 +50,5 @@ var EditorToolbar = View.extend({
 	},
 
 })
+
+// $(".icon-close").removeClass("icon-close")
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index a66f2e8..30287a5 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -67,23 +67,47 @@ var MediaUpload = View.extend({
 			if ( ! f.type.match('image.*')) {
 				continue;
 			}
+			
+			this.getImageDimensions(f)
+		}
+	},
+	
+	getImageDimensions: function(f){
+		var base = this
+		
+		this.$upload.addClass('uploading')
 
-			this.$upload.addClass('uploading')
-
-			var fd = new FormData();
-			fd.append( 'image', f )
-			fd.append( '_csrf', this.$csrf.val() )
+		var reader = new FileReader();
 
-			var request = $.ajax({
-				url: this.uploadAction,
-				type: "post",
-				data: fd,
-				dataType: "json",
-				processData: false,
-				contentType: false,
-			})
-			request.done($.proxy(this.add, this))
+		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($.proxy(this.add, this))
 	},
 	
 	add: function(media){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index a75f8dc..a1198f3 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -7,21 +7,21 @@ var MediaViewer = ModalView.extend({
 		'click .foundToggle': "foundToggle",
 		'click .yourMedia': "userToggle",
 		'click #deleteMedia': "deleteArmed",
-		'mousedown .mediaContainer': "pick",
+		'click .mediaContainer': "pick",
 	},
-
+	
 	foundToggle: function(){
-    $(".foundMedia").addClass("active");
-    $(".myMedia").addClass("inactive");
-    $('a').removeClass("active");
-    $('.foundToggle').addClass("active");
+    this.$(".foundMedia").addClass("active");
+    this.$(".myMedia").addClass("inactive");
+    this.$("a").removeClass("active");
+    this.$(".foundToggle").addClass("active");
 	},
 	
 	userToggle: function(){
     this.$(".foundMedia").removeClass("active");
     this.$(".myMedia").removeClass("inactive");
-    this.$('a').removeClass("active");
-    this.$('.yourMedia').addClass("active");
+    this.$("a").removeClass("active");
+    this.$(".yourMedia").addClass("active");
 	},
 
 	show: function(){
@@ -35,6 +35,7 @@ var MediaViewer = ModalView.extend({
 	
 	hide: function(){
 		this.__super__.hide.call(this)
+		this.deleteArmed(null, false)
 		this.parent.mediaUpload.hide()
 	},
 
@@ -77,56 +78,55 @@ var MediaViewer = ModalView.extend({
 		this.deleteIsArmed = state
 		$("body").toggleClass("deleteArmed", state)
 	},
+
+	destroy: function(_id, cb){
+		$.ajax({
+			type: "delete",
+			url: this.destroyAction,
+			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
+		}).complete(cb || function(){})
+	},
 	
-	pick: function(e){
+	pick: function(e) {
+		e.stopPropagation()
+
 		var target = e.currentTarget
 		var $target = $(target)
 		var media = $target.data('media')
+		var image = $target.find('img')
 
 		if (this.deleteIsArmed) {
 			this.destroy(media._id)
 			$target.remove()
+			return
 		}
-		else {
-			// pick this image ...
-		}
-	},
 
-	destroy: function(_id, cb){
-		$.ajax({
-			type: "delete",
-			url: this.destroyAction,
-			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
-		}).complete(cb || function(){})
+		this.hide()
+		
+		var $ants = $('.ants');
+		var $floatingImg = $('.floatingImg');
+		
+		Scenery.nextMedia = media
+		$floatingImg.attr('src', image.attr('src'));
+
+		var height = $floatingImg.height()
+		var width = $floatingImg.width()
+
+		function _followCursor(e) {
+			$floatingImg.parent().css({
+				top: (e.pageY - (height / 2)) + 'px',
+				left: (e.pageX - (width / 2)) + 'px'
+			});
+		}
+		$(window).on('mousemove', _followCursor);
+		$(window).one('click', function () {
+			var $floatingImg = $('.floatingImg')
+			$floatingImg.attr('src', '');
+			$(window).off('mousemove', _followCursor);
+			$floatingImg.parent().removeClass('edit');
+		});
+		$ants.addClass('edit');
+		_followCursor(e);
 	},
 
 })
-
-//   function placeMedia(evt, img) {
-//   	// JULES DO YO THANG
-//   	alert('Place media at (' + evt.pageX + ', ' + evt.pageY + ')');
-//   }
-// 
-// 	$('.mediaContainer img').mousedown(function(e){
-// 		e.preventDefault()
-// 		e.stopPropagation()
-// 	})
-//   $('.mediaContainer img').click(function (e) {
-// 		e.stopPropagation()
-//   	$(".mediaDrawer, .fileUpload, .addMedia").removeClass("active icon-close");
-//   	$floatingImg.attr('src', $(this).attr('src'));
-//   	function _followCursor(e) {
-//   		$floatingImg.parent().css({
-//   			top: (e.pageY - ($floatingImg.height() / 2)) + 'px',
-//   			left: (e.pageX - ($floatingImg.width() / 2)) + 'px'
-//   		});
-//   	}
-//   	$(window).on('mousemove', _followCursor);
-//   	$(window, this).one('click', function () {
-//   		$floatingImg.attr('src', '');
-//   		$(window).off('mousemove', _followCursor);
-//   		$floatingImg.parent().removeClass('edit');
-//   	});
-//   	$floatingImg.parent().addClass('edit');
-//   	_followCursor(e);
-//   });
diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 46fe09c..705ff04 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -4,7 +4,15 @@ var Parser = {
 		regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i,
 		async: false,
 		fetch: function(url, done) {
-			done("", "")
+			var img = new Image ()
+			img.onload = function(){
+				done("", "", img.naturalWidth, img.naturalHeight, "")
+				img = null
+			}
+			img.src = url
+			if (img.complete) {
+				img.onload()
+			}
 		},
 		tag: function (media) {
 			return '<img src="' + media.url + '" onerror="imgError(this);">';
@@ -16,7 +24,20 @@ var Parser = {
 		fetch: function(url, done) {
 			var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
 			var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
-			done(id, thumb);
+			$.ajax({
+				type: 'GET',
+				url: 'https://www.googleapis.com/youtube/v3/videos',
+				dataType: "jsonp",
+				data: {
+					id: id,
+					key: "AIzaSyDYPKGD0-_VRBWpUYRmX8Qg6BtWmcPU_cM",
+					part: "id,contentDetails,snippet,status",
+				},
+				success: function(result){
+					var res = res.items[0]
+					done(id, thumb, 640, 360, res.snippet.title);
+				}
+			})
 		},
 		tag: function (media) {
 			return '<img class="video" type="youtube" vid="'+media.token+'" src="'+media.thumbnail+'"><span class="playvid">&#9654;</span>';
@@ -31,8 +52,9 @@ var Parser = {
 				type: 'GET',
 				url: 'http://vimeo.com/api/v2/video/' + id + '.json',
 				success: function(result){
-					if (result.length == 0) { return done(id, "") }
-					done(id, result[0].thumbnail_large)
+					if (result.length == 0) { return done(id, "", 640, 360) }
+					var res = result[0]
+					done(id, res.thumbnail_large, res.width, res.height, res.title)
 				}
 			})
 		},
@@ -79,11 +101,14 @@ var Parser = {
 	parse: function (url, cb) {
 		var matched = Parser.integrations.some(function(integration){
 			if (integration.regex.test(url)) {
-				integration.fetch(url, function(token, thumbnail){
+				integration.fetch(url, function(token, thumbnail, width, height, title){
 					cb({
 						token: token,
 						thumbnail: thumbnail,
 						type: integration.type,
+						title: title,
+						width: width,
+						height: height,
 						url: url,
 					})
 				})
diff --git a/public/assets/javascripts/ui/z_misc.js b/public/assets/javascripts/ui/z_misc.js
deleted file mode 100644
index 7f58f32..0000000
--- a/public/assets/javascripts/ui/z_misc.js
+++ /dev/null
@@ -1,138 +0,0 @@
-
-function bind () {
-
-	$.fn.clickToToggle = function(fn){
-		$(this).click(function(e){
-			e.stopPropagation()
-			var isActive = ! $(this).hasClass("icon-close")
-			disable_mode()
-			fn(isActive)
-			$(this).toggleClass("icon-close", isActive);
-		})
-	}
-
-
-  $(".room1 .editBtn").click(function () {
-  	var room = $(this).parent();
-  	room.addClass('editing');
-  	$(this).siblings('.formHolder').find('[type="submit"]').one('click', function (evt) {
-  		evt.preventDefault();
-  		evt.stopPropagation();
-  		room.removeClass('editing');
-  	});
-  });
-
-  // Place media logic
-  var $floatingImg = $('.floatingImg');
-
-  $(".icon-map").click(function(){
-    $("#minimap").toggleClass("hide");
-    $(this).toggleClass('hidden');
-  });
-
-
-  $("#startpoint").click(function(){
-    $(this).toggleClass("active");
-    $("#startText").toggleClass("hide");
-    $("#moveText").toggleClass("show");
-  });
-
-
-  $(document).on("click", ".icon-close", disable_mode)
-
-  function disable_mode(){
-  	$(".icon-close").removeClass("icon-close")
-    $('.mediaDrawer,.fileUpload,.image,.lightcontrol,.settings,.wallpaper').removeClass("active");
-    $(".image").removeClass("editText")
-    $("body").removeClass("deleteArmed")
-  }
-	
-	//
-	// EDIT IMAGE HOVER MENU
-	
-	var hideEditImageMenuTimeout
-	environment.image.el.addEventListener('mouseover', function(e){
-		environment.image.el.classList.add('hover')
-		var offset = $(".image").offset()
-		offset.left = max(0, offset.left + 30)
-		offset.top = max(0, offset.top + 50)
-		$(".edit-image.menu").show().offset( offset )
-		clearTimeout(hideEditImageMenuTimeout)
-	})
-	environment.image.el.addEventListener('mouseout', function(e){
-		environment.image.el.classList.remove('hover')
-		hideEditImageMenuTimeout = setTimeout(function(){
-			$(".edit-image.menu").hide()
-		}, 50)
-	})
-	$(".edit-image.menu").on({
-		mouseover: function(){
-			clearTimeout(hideEditImageMenuTimeout)
-		},
-		mouseout: function(){
-			hideEditImageMenuTimeout = setTimeout(function(){
-				$(".edit-image.menu").hide()
-			}, 50)
-		},
-		mousedown: function(e){
-			e.stopPropagation()
-		},
-		mouseup: function(e){
-			e.stopPropagation()
-		}
-	})
-
-
-	//
-	// EDIT VIDEO HOVER MENU
-	
-	var hideEditVideoMenuTimeout
-	environment.video.el.addEventListener('mouseover', function(e){
-		environment.video.el.classList.add('hover')
-		var offset = $(".video").offset()
-		offset.left = max(0, offset.left + 30)
-		offset.top = max(0, offset.top + 50)
-		$(".edit-video.menu").show().offset( offset )
-		clearTimeout(hideEditImageMenuTimeout)
-	})
-	environment.video.el.addEventListener('mouseout', function(e){
-		environment.video.el.classList.remove('hover')
-		hideEditVideoMenuTimeout = setTimeout(function(){
-			$(".edit-video.menu").hide()
-		}, 50)
-	})
-	$(".edit-video.menu").on({
-		mouseover: function(){
-			clearTimeout(hideEditVideoMenuTimeout)
-		},
-		mouseout: function(){
-			hideEditVideoMenuTimeout = setTimeout(function(){
-				$(".edit-video.menu").hide()
-			}, 50)
-		},
-		mousedown: function(e){
-			e.stopPropagation()
-		},
-		mouseup: function(e){
-			e.stopPropagation()
-		}
-	})
-	$(".icon-ios7-reload,.ios7-arrow-forward").click(function(){
-		$(this).toggleClass('toggled')
-	})
-	
-	//
-	// ALL DONE
-
-	$('body').removeClass('loading');
-}
-
-
-$(function(){
-  
-  function randomizeList(listObj) {
-      $(listObj).each(function() {
-          $(this).addClass(classes[Math.Random()*classes.size]);
-      });
-  }
-})