Secondary menu on model viewer completed

inderpreetsingh · Aug 15, 2014 · 419431d · 419431d
1 parent b2f2498
commit 419431d
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 23 deletions.
diff --git a/OGV/client/styles/styles.css b/OGV/client/styles/styles.css
@@ -89,11 +89,20 @@ h2 {
 	text-align: center;
 }
 
+.sm-item:hover {
+	cursor: pointer;
+}
+
 .sm-menu-text{
 	color:#e3e3e3;
 	margin-top:10px;
 	font-size:14px;
 }
+
+.sm-item:hover > .sm-menu-text{
+	color:#e74c3c;
+}
+
 .ogv-status{
 	max-width: 400px;
 	margin:auto;
@@ -105,6 +114,14 @@ h2 {
 	line-height:30px;
 }
 
+.notifications {
+	max-width:700px;
+	position:relative;
+	margin:auto;
+	margin-top:60px;
+	z-index:1100;
+	word-wrap:break-word;	
+}
 .primary-container {
 	max-width:280px;
 	margin:auto;
@@ -466,6 +483,38 @@ input:focus {
 	margin-left: 5px;
 	line-height: 1.5;
 }*/
+#overlay-comments {
+	position:fixed;
+	background:rgba(255,255,255,0.5);
+	bottom:-10000px;
+	right:0px;
+	max-height:600px;
+	border-radius:5px;
+	min-width: 300px;
+	max-width: 600px;
+	z-index: 950;
+	padding: 20px 20px;
+	padding-top:50px;
+	overflow-y:auto;
+	max-height:90%;
+}
+
+#comments-close-button {
+	margin-right:-10px;
+	cursor:pointer;
+	color:#fff;
+	text-align:center;
+	line-height:25px;
+	background:#e74c3c;
+	width:25px;
+	height:25px;
+	float:right;
+	border-radius:50%;
+}
+
+#overlay-comments .comments {
+ 	display:block;
+}
 .comments-wrapper {
 	margin-top:10px;
 }    

diff --git a/OGV/client/templates/comment.html b/OGV/client/templates/comment.html
@@ -1,12 +1,9 @@
-<template name ="comments"> 
-	<div class="comments-icon"> 
-	     <img src="/icons/Chat.png"/> 
-	</div>
+<template name ="comments">
+	{{> commentsHeader }}
+	{{> commentBody }} 
+</template>
 
-	<div class ="comments-header">
-		<span class="comments-header-text"> Show comments</span>
-	</div>
-
+<template name="commentBody">
 	<div class="comments">
 	    {{#each comments}}
 		{{> comment}}
@@ -20,6 +17,16 @@
 	</div>
 </template>
 
+<template name ="commentsHeader">
+	<div class="comments-icon"> 
+	     <img src="/icons/Chat.png"/> 
+	</div>
+
+	<div class ="comments-header">
+		<span class="comments-header-text"> Show comments</span>
+	</div>
+</template>
+
 <template name = "comment">
     <div class ="comment-item">
         <div class="post-meta comment-meta">

diff --git a/OGV/client/templates/model_viewer.html b/OGV/client/templates/model_viewer.html
@@ -1,24 +1,38 @@
 <template name = "modelViewer">
+	<div id="overlay-comments">
+	<div id ="comments-close-button"> X </div>
+	<div class="comments">
+	    {{#each comments}}
+		{{> comment}}
+	    {{/each}}
+
+	    {{#if currentUser}}
+		{{> commentSubmit}}
+	    {{else}}
+	        <p> Please log in to leave a comment.</p>
+	    {{/if}}
+	</div>
+	</div>
 	<div id="model-container">
 	<div class="secondary-menu">
-		<div class="sm-item">
-			<img src="/icons/Download.png" width="35px" height="35px">
-			<p class="sm-menu-text">Download</p>
+		<div class="sm-item" id="sm-item-download">
+		<a href = "/cfs/files/modelFiles/{{_id}}/{{name}}">	<img src="/icons/Download.png" width="35px" height="35px">
+			<p class="sm-menu-text">Download</p></a>
 		</div>
 
-		<div class="sm-item">
+		<div class="sm-item" id="sm-item-love">
 			<img src="/icons/Shape-Heart.png" width="35px" height="35px">
-			<p class="sm-menu-text">Love</p>
+			<p class="sm-menu-text">Love ({{ lovers }})</p>
 		</div>
 
-		<div class="sm-item">
+		<div class="sm-item" id="sm-item-comment">
 			<img src="/icons/Message.png" width="35px" height="35px">
 			<p class="sm-menu-text">Comment</p>
 		</div>
 
-		<div class="sm-item">
+		<div class="sm-item" id="sm-item-embed">
 			<img src="/icons/Link.png" width="35px" height="35px">
-			<p class="sm-menu-text">Link</p>
+			<p class="sm-menu-text">Embed</p>
 		</div>
 	</div>
 	</div>

diff --git a/OGV/client/templates/notifications.html b/OGV/client/templates/notifications.html
@@ -1,5 +1,5 @@
 <template name ="notifications">
-	<div class="errors row-fluid">
+	<div class="notifications row-fluid">
 		{{#each notifications}}
 			{{> notification}}
 		{{/each}}

diff --git a/OGV/client/views/model_viewer.js b/OGV/client/views/model_viewer.js
@@ -24,17 +24,57 @@
  * Loads the model after the template has been rendered
  */
 
+Template.modelViewer.events({
+    'click #sm-item-love':function(){
+        var love = {
+            postId: this._id
+        };
+ 	Meteor.call('love', love, function(error, loveId) {
+	    if (error){
+		throwError(error.reason);
+	    }
+	});
+    },
+    'click #sm-item-embed':function(){
+	generateEmbedCode();
+    },
+    'click #sm-item-comment':function() {
+	console.log('clocked');
+	$('#overlay-comments').css({'bottom':'0px'});
+    },
+    'click #comments-close-button':function() {
+	$('#overlay-comments').css({'bottom':'-10000px'});
+    }
+});
+
+Template.modelViewer.helpers({
+    lovers: function(){
+        loversObj = Lovers.findOne({postId: this._id});
+        if(loversObj){
+        loversArray = loversObj.lovers;
+        return loversArray.length;
+        } else{
+            return 0;
+        }
+    },
+    comments: function() {
+	return Comments.find({postId: this._id});
+    },
+    model: function() {
+	console.log("url check");
+	console.log(this.url());
+	return this.data;
+    }
+});
+
 Template.modelViewer.rendered = function() 
 {
     console.log("rendered");
     model = this.data;
-    console.log(model);
     objList = getObjFiles(model);	
-
     console.log(objList);
 
     init();
-    generateEmbedCode();
     animate();
 }
 
@@ -187,6 +227,6 @@ function generateEmbedCode()
 {
     var thisURL = Meteor.absoluteUrl() + "/models/" + model._id;
     embedCode = "<iframe width=\"500\" height=\"250\" src=\"" + thisURL + "\" frameborder=\"0\"></iframe>";
-    console.log(embedCode);
+    throwNotification(embedCode);
     return embedCode;
 }
diff --git a/OGV/client/views/social.js b/OGV/client/views/social.js
@@ -25,10 +25,12 @@ Template.commentSubmit.events({
 });
 
 
-Template.comments.helpers({
+Template.commentBody.helpers({
     comments: function() 
     {
-	return Comments.find({postId:this._id});
+	var commentList = Comments.find({postId:this._id});
+	if (!commentList) commentList = Comments.find({postId:this.data._id});
+	return commentList
     }
 });