|
|
@ -49,7 +49,7 @@ class ChatScroller extends LitElement { |
|
|
|
render() { |
|
|
|
render() { |
|
|
|
console.log({messages: this.messages}) |
|
|
|
console.log({messages: this.messages}) |
|
|
|
|
|
|
|
|
|
|
|
let testMessages = this.messages.reduce((messageArray, message)=> { |
|
|
|
let formattedMessages = this.messages.reduce((messageArray, message)=> { |
|
|
|
const lastGroupedMessage = messageArray[messageArray.length - 1] |
|
|
|
const lastGroupedMessage = messageArray[messageArray.length - 1] |
|
|
|
let timestamp |
|
|
|
let timestamp |
|
|
|
let sender |
|
|
|
let sender |
|
|
@ -72,11 +72,55 @@ class ChatScroller extends LitElement { |
|
|
|
return messageArray |
|
|
|
return messageArray |
|
|
|
}, []) |
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
console.log({testMessages}) |
|
|
|
console.log({formattedMessages}) |
|
|
|
return html` |
|
|
|
return html` |
|
|
|
<ul id="viewElement" class="chat-list clearfix"> |
|
|
|
<ul id="viewElement" class="chat-list clearfix"> |
|
|
|
<div id="upObserver"></div> |
|
|
|
<div id="upObserver"></div> |
|
|
|
${repeat( |
|
|
|
${formattedMessages.map((formattedMessage)=> { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return repeat( |
|
|
|
|
|
|
|
formattedMessage.messages, |
|
|
|
|
|
|
|
(message) => message.reference, |
|
|
|
|
|
|
|
(message, indexMessage) => html` |
|
|
|
|
|
|
|
<message-template
|
|
|
|
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
|
|
|
|
.escapeHTML=${this.escapeHTML}
|
|
|
|
|
|
|
|
.messageObj=${message}
|
|
|
|
|
|
|
|
.hideMessages=${this.hideMessages} |
|
|
|
|
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
|
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
|
|
|
?isfirstmessage=${indexMessage === 0} |
|
|
|
|
|
|
|
?isSingleMessageInGroup=${formattedMessage.messages.length > 1} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</message-template>` |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
})} |
|
|
|
|
|
|
|
<!-- ${repeat( |
|
|
|
|
|
|
|
testMessages, |
|
|
|
|
|
|
|
(testMessage)=> testMessage.signature, |
|
|
|
|
|
|
|
(testMessage)=> { |
|
|
|
|
|
|
|
return repeat( |
|
|
|
|
|
|
|
testMessage.messages, |
|
|
|
|
|
|
|
(message) => message.reference, |
|
|
|
|
|
|
|
(message, indexMessage) => html` |
|
|
|
|
|
|
|
<message-template
|
|
|
|
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
|
|
|
|
.escapeHTML=${this.escapeHTML}
|
|
|
|
|
|
|
|
.messageObj=${message}
|
|
|
|
|
|
|
|
.hideMessages=${this.hideMessages} |
|
|
|
|
|
|
|
.setRepliedToMessageObj=${this.setRepliedToMessageObj} |
|
|
|
|
|
|
|
.setEditedMessageObj=${this.setEditedMessageObj} |
|
|
|
|
|
|
|
.focusChatEditor=${this.focusChatEditor} |
|
|
|
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
|
|
|
?isfirstmessage=${indexMessage === 0} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
</message-template>` |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
)} --> |
|
|
|
|
|
|
|
<!-- ${repeat( |
|
|
|
this.messages, |
|
|
|
this.messages, |
|
|
|
(message) => message.reference, |
|
|
|
(message) => message.reference, |
|
|
|
(message) => html` |
|
|
|
(message) => html` |
|
|
@ -91,7 +135,7 @@ class ChatScroller extends LitElement { |
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
> |
|
|
|
> |
|
|
|
</message-template>` |
|
|
|
</message-template>` |
|
|
|
)} |
|
|
|
)} --> |
|
|
|
<div id='downObserver'></div> |
|
|
|
<div id='downObserver'></div> |
|
|
|
<div class='last-message-ref'> |
|
|
|
<div class='last-message-ref'> |
|
|
|
<vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => { |
|
|
|
<vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => { |
|
|
@ -191,7 +235,9 @@ class MessageTemplate extends LitElement { |
|
|
|
focusChatEditor: { type: Function }, |
|
|
|
focusChatEditor: { type: Function }, |
|
|
|
sendMessage: { type: Function }, |
|
|
|
sendMessage: { type: Function }, |
|
|
|
openDialogImage: {type: Function}, |
|
|
|
openDialogImage: {type: Function}, |
|
|
|
isImageLoaded: {type: Boolean} |
|
|
|
isImageLoaded: {type: Boolean}, |
|
|
|
|
|
|
|
isFirstMessage: {type: Boolean}, |
|
|
|
|
|
|
|
isSingleMessageInGroup: {type: Boolean} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -205,6 +251,8 @@ class MessageTemplate extends LitElement { |
|
|
|
this.imageFetches = 0 |
|
|
|
this.imageFetches = 0 |
|
|
|
this.openDialogImage = false |
|
|
|
this.openDialogImage = false |
|
|
|
this.isImageLoaded = false |
|
|
|
this.isImageLoaded = false |
|
|
|
|
|
|
|
this.isFirstMessage = false |
|
|
|
|
|
|
|
this.isSingleMessageInGroup = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
static styles = [chatStyles] |
|
|
|
static styles = [chatStyles] |
|
|
@ -238,7 +286,7 @@ class MessageTemplate extends LitElement { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
|
|
|
|
|
console.log('isFirst', this.isFirstMessage) |
|
|
|
const hidemsg = this.hideMessages |
|
|
|
const hidemsg = this.hideMessages |
|
|
|
let message = "" |
|
|
|
let message = "" |
|
|
|
let reactions = [] |
|
|
|
let reactions = [] |
|
|
@ -339,6 +387,8 @@ class MessageTemplate extends LitElement { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return hideit ? html`<li class="clearfix"></li>` : html` |
|
|
|
return hideit ? html`<li class="clearfix"></li>` : html` |
|
|
|
<li class="clearfix message-parent"> |
|
|
|
<li class="clearfix message-parent"> |
|
|
|
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}"> |
|
|
|
<div class="message-data ${this.messageObj.sender === this.myAddress ? "" : ""}"> |
|
|
|