diff --git a/chatto/src/main/javascript/ts/src/model/ChatModel.ts b/chatto/src/main/javascript/ts/src/model/ChatModel.ts index 3c3c3e1..428a791 100644 --- a/chatto/src/main/javascript/ts/src/model/ChatModel.ts +++ b/chatto/src/main/javascript/ts/src/model/ChatModel.ts @@ -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 { diff --git a/chatto/src/main/javascript/ts/src/view/ChatView.ts b/chatto/src/main/javascript/ts/src/view/ChatView.ts index f187e40..7a10b6f 100644 --- a/chatto/src/main/javascript/ts/src/view/ChatView.ts +++ b/chatto/src/main/javascript/ts/src/view/ChatView.ts @@ -41,11 +41,13 @@ 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) => { - const vmTemp: ChatMessageViewModel = {...vm}; + let arr: string[] = []; + rev.forEach((vm: ChatMessageViewModel) => { + const vmTemp: ChatMessageViewModel = { ...vm }; vmTemp.message = this._markdownService.render(vm.message); /** Very Important!!! * Sanitizing HTML before displaying on webpage to prevent XSS attacks!! @@ -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; @@ -178,8 +187,11 @@ export class ChatView implements Observer { log.error('passphrase is empty or null'); return; } - if(JsonAPI.contactName != null) - this._chatModel.getMessages(JsonAPI.contactName , passphrase, null); + if (JsonAPI.contactName != null) + this._chatModel.getMessages(JsonAPI.contactName, passphrase, null).then(() => { + log.debug(currentMsg.offset()!.top) + $(this._messageContainer).scrollTop(currentMsg.position()!.top - $('.msg').position()!.top) + }); } }) } diff --git a/chatto/src/main/resources/templates/chat.html b/chatto/src/main/resources/templates/chat.html index d37250f..74a30ee 100644 --- a/chatto/src/main/resources/templates/chat.html +++ b/chatto/src/main/resources/templates/chat.html @@ -232,7 +232,7 @@
-
+
{{{message}}} {{messageTime}}
@@ -241,7 +241,7 @@