nova/Chatto
1
0
Fork 0
Code Issues 7 Pull Requests Releases Wiki Activity

chat messages are loaded on scroll top

Browse Source
This commit is contained in:
Rohan Sircar 2019-12-13 17:07:13 +05:30 committed by nova
parent 5452a2d418
commit d927f3441a
3 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
chatto/src/main/javascript/ts/src/model/ChatModel.ts
View File

@ -89,7 +89,7 @@ export class ChatModel implements Subject {
// })
const newArr = cVMs.concat(existingMessages)
// log.debug(newArr);
this.storeUserMessages(contactName, newArr);
this.storeUserMessages(contactName, cVMs);
// this.storeUserMessages(contactName, cVMs);
}
else {

22
chatto/src/main/javascript/ts/src/view/ChatView.ts
View File

@ -41,10 +41,12 @@ export class ChatView implements Observer {
update(data: ChatMessageViewModel[]): void {
log.info('ChatView: updating view');
// let html: string = "";
this._messageContainer.innerHTML = "";
// let currentMsg = $('.msg:first');
// this._messageContainer.innerHTML = "";
const rev: ChatMessageViewModel[] = Object.create(data)
rev.reverse();
data.forEach((vm: ChatMessageViewModel) => {
let arr: string[] = [];
rev.forEach((vm: ChatMessageViewModel) => {
const vmTemp: ChatMessageViewModel = { ...vm };
vmTemp.message = this._markdownService.render(vm.message);
/** Very Important!!!
@ -58,11 +60,18 @@ export class ChatView implements Observer {
else {
rendered = DOMPurify.sanitize(this._messageReceiveTemplate(vmTemp));
}
$(this._messageContainer).append(rendered);
$(this._messageContainer).prepend(rendered);
// if (currentMsg.position() != null) {
// $(this._messageContainer).scrollTop(currentMsg.position().top)
// }
// log.debug(vm)
// log.debug(vmTemp)
// html += this._messageSendTemplate(vm);
});
// if (currentMsg.position() != null) {
// $(this._messageContainer).scrollTop(currentMsg.position().top)
// }
// html = DOMPurify.sanitize(md.render(html));
// this._element.innerHTML = html;
@ -149,7 +158,6 @@ export class ChatView implements Observer {
fetch(JsonAPI.MESSAGE_POST, {
method: 'POST',
headers: headers,
body: JSON.stringify(chatMessageDTO)
})
.then(response => {
log.debug(response);
@ -162,6 +170,7 @@ export class ChatView implements Observer {
chatMessagePageLoadAjax() {
this._messageContainer.addEventListener('scroll', (e) => {
if ($(this._messageContainer).scrollTop() == 0) {
let currentMsg = $('.msg:first');
log.debug('Reached top')
// @ts-ignore
let passphrase: string;
@ -179,7 +188,10 @@ export class ChatView implements Observer {
return;
}
if (JsonAPI.contactName != null)
this._chatModel.getMessages(JsonAPI.contactName , passphrase, null);
this._chatModel.getMessages(JsonAPI.contactName, passphrase, null).then(() => {
log.debug(currentMsg.offset()!.top)
$(this._messageContainer).scrollTop(currentMsg.position()!.top - $('.msg').position()!.top)
});
}
})
}

4
chatto/src/main/resources/templates/chat.html
View File

@ -232,7 +232,7 @@
<div class="img_cont_msg">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img_msg">
</div>
<div class="msg_container">
<div class="msg msg_container">
{{{message}}}
<span class="msg_time">{{messageTime}}</span>
</div>
@ -241,7 +241,7 @@
<template id="msg_container_send_template">
<div class="d-flex justify-content-end mb-4">
<div class="msg_container_send">
<div class="msg msg_container_send">
{{{message}}}
<span class="msg_time_send">{{messageTime}}</span>
</div>