Use animation frames for scroll detection

clientapp/helpers/chatHelpers.js

@@ -2,11 +2,20 @@
 "use strict";
 
 var _ = require('underscore');
+var raf = require('raf-component');
 
 
 module.exports = {
     initializeScroll: function () {
-        $(this.$scrollContainer).scroll(_.bind(_.throttle(this.handleScroll, 300), this));
+        var check = _.bind(this.handleScroll, this);
+        var self = this;
+
+        function animate() {
+            self.rafID = raf(animate);
+            check();
+        }
+        animate();
+
         this.pinnedToBottom = true;
         this.lastScrollTop = 0;
     },
@@ -20,6 +29,7 @@ module.exports = {
     scrollPageUnload: function () {
         this.savePosition();
         this.trimOldChats();
+        raf.cancel(this.rafID);
     },
     savePosition: function () {
         this.lastScrollPosition = this.pinnedToBottom ? '' : this.$scrollContainer.scrollTop();
@@ -29,7 +39,7 @@ module.exports = {
         var removedIds;
         if (this.pinnedToBottom) {
             _.delay(function () {
-                removedIds = self.collection.trimOlderChats();
+                removedIds = [];//self.collection.trimOlderChats();
                 removedIds.forEach(function (id) {
                     self.$('#chat' + id).remove();
                 });
@@ -38,7 +48,7 @@ module.exports = {
     },
     handleScroll: function (e) {
         var scrollTop = this.$scrollContainer[0].scrollTop;
-        var direction = scrollTop > this.lastScrollTop ? 'down' : 'up';
+        var direction = scrollTop >= this.lastScrollTop ? 'down' : 'up';
         if (direction === 'up' && !this.isBottom()) {
             this.pinnedToBottom = false;
         } else if (this.isBottom()) {
@@ -52,6 +62,7 @@ module.exports = {
     handleAtBottom: function () {
         if (this.isVisible()) {
             this.pinnedToBottom = true;
+            this.scrollToBottom();
         }
     },
     isBottom: function () {
@@ -59,7 +70,7 @@ module.exports = {
         var scrollHeight = this.$scrollContainer[0].scrollHeight;
         var height = this.$scrollContainer.height();
         var fromBottom = scrollHeight - (scrollTop + height);
-        return fromBottom < 40 || $('body').is(':animated');
+        return fromBottom < 80;
     },
     resizeInput: function () {
         var height;

clientapp/pages/chat.js

@@ -89,7 +89,7 @@ module.exports = BasePage.extend(chatHelpers).extend({
     },
     handleWindowResize: function () {
         this.scrollIfPinned();
-        this.$chatInput.trigger('keyup');
+        this.resizeInput();
     },
     handleKeyDown: function (e) {
         clearTimeout(this.typingTimer);
@@ -142,6 +142,8 @@ module.exports = BasePage.extend(chatHelpers).extend({
         var message;
         var val = this.$chatInput.val();
 
+        this.scrollToBottom(true);
+
         if (val) {
             message = {
                 to: this.model.lockedResource || this.model.jid,
@@ -175,8 +177,6 @@ module.exports = BasePage.extend(chatHelpers).extend({
     },
     refreshModel: function (model) {
         var existing = this.$('#chat' + model.cid);
-        console.log(model);
-        console.log(model.classList);
         existing.replaceWith(model.partialTemplateHtml);
     },
     appendModel: function (model, preload) {

clientapp/templates.js

@@ -160,7 +160,7 @@ exports.misc.growlMessage = function anonymous(locals) {
 exports.pages.chat = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
+        buf.push('<section class="page chat"><section class="conversation"><header><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
     }
     return buf.join("");
 };

clientapp/templates/pages/chat.jade

@@ -4,7 +4,7 @@ section.page.chat
       img.avatar
       h1.name
       .tzo
-    ul.messages
+    ul.messages.scroll-container
     .chatBox
       form
         textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')

package.json

@@ -21,7 +21,8 @@
         "human-model": "1.1.3",
         "human-view": "1.1.2",
         "templatizer": "0.1.2",
-        "underscore": "1.5.1"
+        "underscore": "1.5.1",
+        "raf-component": "1.1.1"
     },
     "devDependencies": {
         "precommit-hook": "0.3.6"