Merge pull request #2 from notepad104/limit_messages

Limiting Messages and Automatically scroll to bottom on load
notepad104 · May 4, 2015 · 2c14941 · 2c14941
2 parents ed2abd7 + 5b0776d
commit 2c14941
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 4 deletions.
diff --git a/client/templates/chat.js b/client/templates/chat.js
@@ -1,3 +1,6 @@
+Template.chat.created = function(){
+    Session.set('showModal', false);
+};
 Template.registerHelper('formatDate', function (date) {
     return moment(date).from(new Date());
 });

diff --git a/client/templates/userMessageBox.html b/client/templates/userMessageBox.html
@@ -8,6 +8,9 @@
                 </div>
                 <div class="panel-body">
                     <div class="list-group msgListGroup" id = "messages">
+                        <div class="list-group-item" style="padding-bottom: 0.5cm;">
+                        <button class="btn btn-sm btn-primary" id = "incr">Load Previous Messages</button>
+                        </div>
                         {{#each messages}}
                             {{> chatMessage}}
                         {{/each}}

diff --git a/client/templates/userMessageBox.js b/client/templates/userMessageBox.js
@@ -1,8 +1,28 @@
+incrementLimit = function() {
+  newLimit = Session.get('limit') + 10;
+  Session.set('limit', newLimit);
+}
+Template.userMessageBox.created = function(){
+    Session.setDefault('limit', 10);
+}
 Template.userMessageBox.helpers({
     messages: function () {
     	send = Meteor.user().profile.name;
     	receive = Session.get('curuser');
-        return Chat.find({$or : [{$and : [{user: send},{sentTo: receive}]}, {$and : [{user: receive},{sentTo: send}]}]}, {sort: {sentOn: 1}});
+        chats =  Chat.find({
+                            $or : [
+                                    {$and : [{user: send},{sentTo: receive}]}, 
+                                    {$and : [{user: receive},{sentTo: send}]}
+                                ]
+                        }, 
+                        {
+                            sort: {
+                                sentOn: -1
+                            },
+                            limit: Session.get('limit')
+                        }).fetch();
+        chats.sort(function(a,b) { return a.sentOn - b.sentOn } );
+        return chats;
     },
     curuser: function(){
     	return Session.get('curuser');
@@ -11,11 +31,18 @@ Template.userMessageBox.helpers({
 Template.userMessageBox.events({
     'submit #chatMsgForm': function (event, template) {
         event.preventDefault();
+        Session.set('limit', Session.get('limit') + 1);
         var message = template.$('[id=textMessage]').val();
         Meteor.call("newChatMessage", message, Session.get('curuser'));
         template.$('[id=textMessage]').val("");
         var elem = template.$('[id=messages]');
-        console.log(elem[0]);
-        elem.animate({ scrollTop: elem[0].scrollHeight}, 2000);
+        elem.animate({ scrollTop: elem[0].scrollHeight}, 200);
+    },
+    'click #incr': function(e) {
+        incrementLimit();
     }
-});
+});
+Template.userMessageBox.rendered = function(){
+    var elem = $(this.find('[id=messages]'))
+    elem.animate({ scrollTop: elem[0].scrollHeight}, 200);
+}
diff --git a/client/templates/userRenderer.js b/client/templates/userRenderer.js
@@ -26,5 +26,13 @@ Template.userRenderer.events({
     'click #showModalButton': function(){
         Session.set('curuser',this.profile.name);
         Session.set('showModal', true);
+        Session.set('limit', 10);
+        setTimeout(function(){
+            var div  = $('[id=messages]');
+            var elem = document.getElementById("messages");
+            console.log(elem.scrollHeight);
+            div.animate({ scrollTop: elem.scrollHeight}, 300);
+        },200);
+
     },
 });