diff --git a/clientapp/helpers/chatHelpers.js b/clientapp/helpers/chatHelpers.js
index 807fd91..6329956 100644
--- a/clientapp/helpers/chatHelpers.js
+++ b/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;
diff --git a/clientapp/pages/chat.js b/clientapp/pages/chat.js
index df7ace2..c9265bb 100644
--- a/clientapp/pages/chat.js
+++ b/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) {
diff --git a/clientapp/templates.js b/clientapp/templates.js
index 3289ea0..242b220 100644
--- a/clientapp/templates.js
+++ b/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('');
+ buf.push('');
}
return buf.join("");
};
diff --git a/clientapp/templates/pages/chat.jade b/clientapp/templates/pages/chat.jade
index 2d827fd..4d45522 100644
--- a/clientapp/templates/pages/chat.jade
+++ b/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')
diff --git a/package.json b/package.json
index 79808a2..9c1fd45 100644
--- a/package.json
+++ b/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"