Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-02-25 16:11:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

wait for images to load before scrolling to bottom

Browse Source
This commit is contained in:
Barış Soner Uşaklı
2023-08-15 15:06:28 -04:00
parent 4a97ee0f8e
commit 980e0a3a71
4 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
install/package.json
View File

@@ -72,6 +72,7 @@
"graceful-fs": "4.2.11",
"helmet": "7.0.0",
"html-to-text": "9.0.5",
"imagesloaded": "5.0.0",
"ipaddr.js": "2.1.0",
"jquery": "3.7.0",
"jquery-deserialize": "2.0.0",

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

@@ -62,8 +62,9 @@ define('forum/chats', [
}
Chats.initialised = true;
messages.scrollToBottom($('[component="chat/message/content"]'));
messages.wrapImagesInLinks($('[component="chat/message/content"]'));
const changeContentEl = $('[component="chat/message/content"]');
messages.wrapImagesInLinks(changeContentEl);
messages.scrollToBottomAfterImageLoad(changeContentEl);
create.init();
hooks.fire('action:chat.loaded', $('.chats-full'));
@@ -283,11 +284,12 @@ define('forum/chats', [
// https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
const textarea = parent.find('[component="chat/input"]');
textarea.on('input', function () {
const isAtBottom = messages.isAtBottom(parent.find('[component="chat/message/content"]'));
const chatContentEl = parent.find('[component="chat/message/content"]');
const isAtBottom = messages.isAtBottom(chatContentEl);
textarea.css({ height: 0 });
textarea.css({ height: messages.calcAutoTextAreaHeight(textarea) + 'px' });
if (isAtBottom) {
messages.scrollToBottom(parent.find('[component="chat/message/content"]'));
messages.scrollToBottom(chatContentEl);
}
});
};
@@ -526,7 +528,7 @@ define('forum/chats', [
Chats.setActive(roomId);
Chats.addEventListeners();
hooks.fire('action:chat.loaded', $('.chats-full'));
messages.scrollToBottom(mainWrapper.find('[component="chat/message/content"]'));
messages.scrollToBottomAfterImageLoad(mainWrapper.find('[component="chat/message/content"]'));
if (history.pushState) {
history.pushState({
url: url,

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

@@ -3,9 +3,9 @@
define('forum/chats/messages', [
'components', 'hooks', 'bootbox', 'alerts',
'messages', 'api', 'forum/topic/images',
'messages', 'api', 'forum/topic/images', 'imagesloaded',
], function (
components, hooks, bootbox, alerts, messagesModule, api, images
components, hooks, bootbox, alerts, messagesModule, api, images, imagesLoaded
) {
const messages = {};
@@ -95,7 +95,7 @@ define('forum/chats/messages', [
newMessage.appendTo(chatContentEl);
messages.onMessagesAddedToDom(newMessage);
if (isAtBottom || msgData.self) {
messages.scrollToBottom(chatContentEl);
messages.scrollToBottomAfterImageLoad(chatContentEl);
// remove some message elements if there are too many
const chatMsgEls = chatContentEl.find('[data-mid]');
if (chatMsgEls.length > 150) {
@@ -137,6 +137,14 @@ define('forum/chats/messages', [
return distanceToBottom < (threshold || 100);
}
};
messages.scrollToBottomAfterImageLoad = function (containerEl) {
if (containerEl && containerEl.length) {
const msgBodyEls = containerEl[0].querySelectorAll('[component="chat/message/body"]');
imagesLoaded(msgBodyEls, () => {
messages.scrollToBottom(containerEl);
});
}
};
messages.scrollToBottom = function (containerEl) {
if (containerEl && containerEl.length) {

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

@@ -209,7 +209,7 @@ define('chat', [
if (modal.is(':visible')) {
taskbar.updateActive(modal.attr('data-uuid'));
if (ChatsMessages.isAtBottom(modal.find('[component="chat/message/content"]'))) {
ChatsMessages.scrollToBottom(modal.find('[component="chat/message/content"]'));
ChatsMessages.scrollToBottomAfterImageLoad(modal.find('[component="chat/message/content"]'));
}
} else if (!ajaxify.data.template.chats) {
module.toggleNew(modal.attr('data-uuid'), true, true);
@@ -453,7 +453,7 @@ define('chat', [
const chatModal = $('.chat-modal[data-uuid="' + uuid + '"]');
chatModal.removeClass('hide');
taskbar.updateActive(uuid);
ChatsMessages.scrollToBottom(chatModal.find('.chat-content'));
ChatsMessages.scrollToBottomAfterImageLoad(chatModal.find('.chat-content'));
module.focusInput(chatModal);
const roomId = chatModal.attr('data-roomid');
api.del(`/chats/${roomId}/state`, {});