Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-10-26 16:46:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: #8509, don't scroll chat to bottom if user scrolled up

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2020-07-19 14:34:31 -04:00
parent b5df576646
commit 320008cd49
4 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/language/en-GB/modules.json
View File

@@ -1,6 +1,7 @@
{
"chat.chatting_with": "Chat with",
"chat.placeholder": "Type chat message here, press enter to send",
"chat.scroll-up-alert": "You are looking at older messages, click here to go to most recent message.",
"chat.send": "Send",
"chat.no_active": "You have no active chats.",
"chat.user_typing": "%1 is typing ...",

10
public/src/client/chats.js
View File

@@ -56,6 +56,7 @@ define('forum/chats', [
Chats.addRenameHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="rename"]'));
Chats.addLeaveHandler(ajaxify.data.roomId, components.get('chat/controls').find('[data-action="leave"]'));
Chats.addScrollHandler(ajaxify.data.roomId, ajaxify.data.uid, $('.chat-content'));
Chats.addScrollBottomHandler($('.chat-content'));
Chats.addCharactersLeftHandler($('[component="chat/main-wrapper"]'));
Chats.addIPHandler($('[component="chat/main-wrapper"]'));
Chats.createAutoComplete($('[component="chat/input"]'));
@@ -101,6 +102,7 @@ define('forum/chats', [
Chats.addScrollHandler = function (roomId, uid, el) {
var loading = false;
el.off('scroll').on('scroll', function () {
messages.toggleScrollUpAlert(el);
if (loading) {
return;
}
@@ -144,6 +146,14 @@ define('forum/chats', [
});
};
Chats.addScrollBottomHandler = function (chatContent) {
chatContent.parent()
.find('[component="chat/messages/scroll-up-alert"]')
.off('click').on('click', function () {
messages.scrollToBottom(chatContent);
});
};
Chats.addCharactersLeftHandler = function (parent) {
var element = parent.find('[component="chat/input"]');
element.on('change keyup paste', function () {

26
public/src/client/chats/messages.js
View File

@@ -84,11 +84,13 @@ define('forum/chats/messages', ['components', 'sounds', 'translator', 'benchpres
function onMessagesParsed(chatContentEl, html) {
var newMessage = $(html);
var isAtBottom = messages.isAtBottom(chatContentEl);
newMessage.appendTo(chatContentEl);
newMessage.find('.timeago').timeago();
newMessage.find('img:not(.not-responsive)').addClass('img-responsive');
messages.scrollToBottom(chatContentEl);
if (isAtBottom) {
messages.scrollToBottom(chatContentEl);
}
$(window).trigger('action:chat.received', {
messageEl: newMessage,
@@ -112,13 +114,31 @@ define('forum/chats/messages', ['components', 'sounds', 'translator', 'benchpres
}
};
messages.isAtBottom = function (containerEl, threshold) {
if (containerEl.length) {
var distanceToBottom = containerEl[0].scrollHeight - (
containerEl.outerHeight() + containerEl.scrollTop()
);
return distanceToBottom < (threshold || 100);
}
};
messages.scrollToBottom = function (containerEl) {
if (containerEl.length) {
if (containerEl && containerEl.length) {
containerEl.scrollTop(containerEl[0].scrollHeight - containerEl.height());
containerEl.parent()
.find('[component="chat/messages/scroll-up-alert"]')
.addClass('hidden');
}
};
messages.toggleScrollUpAlert = function (containerEl) {
var isAtBottom = messages.isAtBottom(containerEl, 300);
containerEl.parent()
.find('[component="chat/messages/scroll-up-alert"]')
.toggleClass('hidden', isAtBottom);
};
messages.prepEdit = function (inputEl, messageId, roomId) {
socket.emit('modules.chats.getRaw', { mid: messageId, roomId: roomId }, function (err, raw) {
if (err) {

5
public/src/modules/chat.js
View File

@@ -91,7 +91,9 @@ define('chat', [
if (modal.is(':visible')) {
taskbar.updateActive(modal.attr('data-uuid'));
ChatsMessages.scrollToBottom(modal.find('.chat-content'));
if (ChatsMessages.isAtBottom(modal.find('.chat-content'))) {
ChatsMessages.scrollToBottom(modal.find('.chat-content'));
}
} else if (!ajaxify.data.template.chats) {
module.toggleNew(modal.attr('data-uuid'), true, true);
}
@@ -239,6 +241,7 @@ define('chat', [
Chats.createAutoComplete(chatModal.find('[component="chat/input"]'));
Chats.addScrollHandler(chatModal.attr('data-roomid'), data.uid, chatModal.find('.chat-content'));
Chats.addScrollBottomHandler(chatModal.find('.chat-content'));
Chats.addCharactersLeftHandler(chatModal);
Chats.addIPHandler(chatModal);