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"