|
|
|
@ -17,6 +17,7 @@ import { EmojiPicker } from 'emoji-picker-js';
|
|
|
|
|
import { cropAddress } from "../../utils/cropAddress"; |
|
|
|
|
|
|
|
|
|
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) |
|
|
|
|
let toggledMessage = {} |
|
|
|
|
class ChatScroller extends LitElement { |
|
|
|
|
static get properties() { |
|
|
|
|
return { |
|
|
|
@ -30,6 +31,7 @@ class ChatScroller extends LitElement {
|
|
|
|
|
focusChatEditor: {attribute: false}, |
|
|
|
|
sendMessage: {attribute: false}, |
|
|
|
|
showLastMessageRefScroller: { type: Function }, |
|
|
|
|
emojiPicker: { attribute: false } |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -42,15 +44,6 @@ class ChatScroller extends LitElement {
|
|
|
|
|
this._downObserverHandler = this._downObserverHandler.bind(this) |
|
|
|
|
this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address |
|
|
|
|
this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
|
|
|
|
|
this.emojiPicker = new EmojiPicker({ |
|
|
|
|
style: "twemoji", |
|
|
|
|
twemojiBaseUrl: '/emoji/', |
|
|
|
|
showPreview: false, |
|
|
|
|
showVariants: false, |
|
|
|
|
showAnimation: false, |
|
|
|
|
position: 'top-start', |
|
|
|
|
boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px' |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -77,7 +70,6 @@ class ChatScroller extends LitElement {
|
|
|
|
|
} |
|
|
|
|
return messageArray; |
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
return html` |
|
|
|
|
<ul id="viewElement" class="chat-list clearfix"> |
|
|
|
|
<div id="upObserver"></div> |
|
|
|
@ -98,6 +90,7 @@ class ChatScroller extends LitElement {
|
|
|
|
|
?isFirstMessage=${indexMessage === 0} |
|
|
|
|
?isSingleMessageInGroup=${formattedMessage.messages.length > 1} |
|
|
|
|
?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1} |
|
|
|
|
.setToggledMessage=${this.setToggledMessage} |
|
|
|
|
> |
|
|
|
|
</message-template>` |
|
|
|
|
) |
|
|
|
@ -119,7 +112,22 @@ class ChatScroller extends LitElement {
|
|
|
|
|
return true; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
setToggledMessage(message){ |
|
|
|
|
toggledMessage = message |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async firstUpdated() { |
|
|
|
|
this.emojiPicker.on('emoji', selection => { |
|
|
|
|
|
|
|
|
|
this.sendMessage({ |
|
|
|
|
type: 'reaction', |
|
|
|
|
editedMessageObj: toggledMessage, |
|
|
|
|
reaction: selection.emoji, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
this.viewElement = this.shadowRoot.getElementById('viewElement'); |
|
|
|
|
this.upObserverElement = this.shadowRoot.getElementById('upObserver'); |
|
|
|
|
this.downObserverElement = this.shadowRoot.getElementById('downObserver'); |
|
|
|
@ -202,6 +210,7 @@ class MessageTemplate extends LitElement {
|
|
|
|
|
isFirstMessage: { type: Boolean }, |
|
|
|
|
isSingleMessageInGroup: { type: Boolean }, |
|
|
|
|
isLastMessageInGroup: { type: Boolean }, |
|
|
|
|
setToggledMessage: {attribute: false} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -241,7 +250,13 @@ class MessageTemplate extends LitElement {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
showBlockIconFunc(bool) { |
|
|
|
|
this.shadowRoot.querySelector(".chat-hover").focus({ preventScroll: true }) |
|
|
|
|
const chatHover = this.shadowRoot.querySelector(".chat-hover") |
|
|
|
|
|
|
|
|
|
if(chatHover){ |
|
|
|
|
chatHover.querySelector(".chat-hover").focus({ preventScroll: true }) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if(bool) { |
|
|
|
|
this.showBlockAddressIcon = true; |
|
|
|
|
} else { |
|
|
|
@ -458,6 +473,8 @@ class MessageTemplate extends LitElement {
|
|
|
|
|
@blur=${() => this.showBlockIconFunc(false)} |
|
|
|
|
.sendMessage=${this.sendMessage} |
|
|
|
|
version=${version} |
|
|
|
|
.emojiPicker=${this.emojiPicker}
|
|
|
|
|
.setToggledMessage=${this.setToggledMessage} |
|
|
|
|
>
|
|
|
|
|
</chat-menu> |
|
|
|
|
</div> |
|
|
|
@ -533,7 +550,8 @@ class ChatMenu extends LitElement {
|
|
|
|
|
myAddress: { type: Object }, |
|
|
|
|
emojiPicker: { attribute: false }, |
|
|
|
|
sendMessage: {attribute: false}, |
|
|
|
|
version: {type: String} |
|
|
|
|
version: {type: String}, |
|
|
|
|
setToggledMessage: {attribute: false} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -563,30 +581,9 @@ class ChatMenu extends LitElement {
|
|
|
|
|
parentEpml.request('showSnackBar', `${errorMsg}`) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
firstUpdated () { |
|
|
|
|
this.emojiPicker = new EmojiPicker({ |
|
|
|
|
style: "twemoji", |
|
|
|
|
twemojiBaseUrl: '/emoji/', |
|
|
|
|
showPreview: false, |
|
|
|
|
showVariants: false, |
|
|
|
|
showAnimation: false, |
|
|
|
|
position: 'top-start', |
|
|
|
|
boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px' |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.emojiPicker.on('emoji', selection => { |
|
|
|
|
this.sendMessage({ |
|
|
|
|
type: 'reaction', |
|
|
|
|
editedMessageObj: this.originalMessage, |
|
|
|
|
reaction: selection.emoji, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
|
console.log('version', this.version) |
|
|
|
|
return html`
|
|
|
|
|
<div class="container"> |
|
|
|
|
<div
|
|
|
|
@ -597,7 +594,13 @@ editedMessageObj: this.originalMessage,
|
|
|
|
|
this.versionErrorSnack() |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
try { |
|
|
|
|
this.setToggledMessage(this.originalMessage) |
|
|
|
|
this.emojiPicker.togglePicker(e.target) |
|
|
|
|
} catch (error) { |
|
|
|
|
console.log({error}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon> |
|
|
|
|