mirror of
https://github.com/moparisthebest/kaiwa
synced 2024-12-23 16:18:48 -05:00
Use animation frames for scroll detection
This commit is contained in:
parent
0f2b4b9ec1
commit
1f910f37d7
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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("");
|
||||
};
|
||||
|
@ -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')
|
||||
|
@ -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"
|
||||
|
Loading…
Reference in New Issue
Block a user