forked from Qortal/qortal-ui
Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages
This commit is contained in:
commit
2740900c53
@ -168,8 +168,9 @@ class ChatPage extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chat-text-area .typing-area .chatbar {
|
.chat-text-area .typing-area .chatbar {
|
||||||
width: auto;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: auto;
|
height: auto;
|
||||||
@ -177,6 +178,13 @@ class ChatPage extends LitElement {
|
|||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chatbar-container {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.chat-text-area .typing-area .emoji-button {
|
.chat-text-area .typing-area .emoji-button {
|
||||||
width: 45px;
|
width: 45px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@ -189,6 +197,98 @@ class ChatPage extends LitElement {
|
|||||||
color: var(--black);
|
color: var(--black);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message-size-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-size {
|
||||||
|
font-family: Roboto, sans-serif;
|
||||||
|
font-size: 12px;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid {
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div {
|
||||||
|
position: absolute;
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #03a9f4;
|
||||||
|
animation: lds-grid 1.2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(1) {
|
||||||
|
top: 4px;
|
||||||
|
left: 4px;
|
||||||
|
animation-delay: 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(2) {
|
||||||
|
top: 4px;
|
||||||
|
left: 48px;
|
||||||
|
animation-delay: -0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(3) {
|
||||||
|
top: 4px;
|
||||||
|
left: 90px;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(4) {
|
||||||
|
top: 50px;
|
||||||
|
left: 4px;
|
||||||
|
animation-delay: -0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(5) {
|
||||||
|
top: 50px;
|
||||||
|
left: 48px;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(6) {
|
||||||
|
top: 50px;
|
||||||
|
left: 90px;
|
||||||
|
animation-delay: -1.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(7) {
|
||||||
|
top: 95px;
|
||||||
|
left: 4px;
|
||||||
|
animation-delay: -0.8s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(8) {
|
||||||
|
top: 95px;
|
||||||
|
left: 48px;
|
||||||
|
animation-delay: -1.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lds-grid div:nth-child(9) {
|
||||||
|
top: 95px;
|
||||||
|
left: 90px;
|
||||||
|
animation-delay: -1.6s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes lds-grid {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.float-left {
|
.float-left {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
@ -210,16 +310,19 @@ class ChatPage extends LitElement {
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
transition: all 0.1s ease-in-out;
|
transition: all 0.1s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.send-icon:hover {
|
.send-icon:hover {
|
||||||
filter: brightness(1.1);
|
filter: brightness(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-picker-container {
|
.file-picker-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
width: 25px;
|
width: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.file-picker-input-container {
|
.file-picker-input-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
@ -232,14 +335,15 @@ class ChatPage extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input[type=file]::-webkit-file-upload-button {
|
input[type=file]::-webkit-file-upload-button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super()
|
super()
|
||||||
|
this.getMessageConfig = this.getMessageConfig.bind(this)
|
||||||
this.getOldMessage = this.getOldMessage.bind(this)
|
this.getOldMessage = this.getOldMessage.bind(this)
|
||||||
this._sendMessage = this._sendMessage.bind(this)
|
this._sendMessage = this._sendMessage.bind(this)
|
||||||
this.insertImage = this.insertImage.bind(this)
|
this.insertImage = this.insertImage.bind(this)
|
||||||
@ -267,7 +371,7 @@ class ChatPage extends LitElement {
|
|||||||
this.repliedToMessageObj = null
|
this.repliedToMessageObj = null
|
||||||
this.editedMessageObj = null
|
this.editedMessageObj = null
|
||||||
this.iframeHeight = 40
|
this.iframeHeight = 40
|
||||||
this.chatMessageSize = 5
|
this.chatMessageSize = 0
|
||||||
this.imageFile = null
|
this.imageFile = null
|
||||||
this.uid = new ShortUniqueId()
|
this.uid = new ShortUniqueId()
|
||||||
}
|
}
|
||||||
@ -276,44 +380,56 @@ class ChatPage extends LitElement {
|
|||||||
return html`
|
return html`
|
||||||
<div class="chat-container">
|
<div class="chat-container">
|
||||||
<div>
|
<div>
|
||||||
${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
|
${this.isLoadingMessages ?
|
||||||
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile} @closed=${()=> {
|
html`
|
||||||
this.imageFile = null
|
<div class="lds-grid">
|
||||||
}}>
|
<div></div>
|
||||||
<div class="dialog-header">
|
<div></div>
|
||||||
</div>
|
<div></div>
|
||||||
<div class="dialog-container">
|
<div></div>
|
||||||
${this.imageFile && html`
|
<div></div>
|
||||||
<img src=${URL.createObjectURL(this.imageFile)} />
|
<div></div>
|
||||||
`}
|
<div></div>
|
||||||
|
<div></div>
|
||||||
</div>
|
<div></div>
|
||||||
<mwc-button
|
</div>
|
||||||
slot="primaryAction"
|
` :
|
||||||
dialogAction="cancel"
|
this.renderChatScroller(this._initialMessages)}
|
||||||
class="red"
|
<mwc-dialog id="showDialogPublicKey" ?open=${this.imageFile} @closed=${()=> {
|
||||||
@click=${()=> {
|
this.imageFile = null
|
||||||
this._sendMessage({
|
}}>
|
||||||
type: 'image',
|
<div class="dialog-header"></div>
|
||||||
imageFile: this.imageFile,
|
<div class="dialog-container">
|
||||||
caption: 'This is a caption'
|
${this.imageFile && html`
|
||||||
})
|
<img src=${URL.createObjectURL(this.imageFile)} />
|
||||||
}}
|
`}
|
||||||
>
|
</div>
|
||||||
send
|
<mwc-button
|
||||||
</mwc-button>
|
slot="primaryAction"
|
||||||
<mwc-button
|
dialogAction="cancel"
|
||||||
slot="primaryAction"
|
class="red"
|
||||||
dialogAction="cancel"
|
@click=${()=> {
|
||||||
class="red"
|
this._sendMessage({
|
||||||
@click=${()=>{
|
type: 'image',
|
||||||
|
imageFile: this.imageFile,
|
||||||
this.imageFile = null
|
caption: 'This is a caption'
|
||||||
}}
|
})
|
||||||
>
|
}}
|
||||||
${translate("general.close")}
|
>
|
||||||
</mwc-button>
|
send
|
||||||
</mwc-dialog>
|
</mwc-button>
|
||||||
|
<mwc-button
|
||||||
|
slot="primaryAction"
|
||||||
|
dialogAction="cancel"
|
||||||
|
class="red"
|
||||||
|
@click=${()=>{
|
||||||
|
|
||||||
|
this.imageFile = null
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
${translate("general.close")}
|
||||||
|
</mwc-button>
|
||||||
|
</mwc-dialog>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
|
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
|
||||||
<div class="typing-area">
|
<div class="typing-area">
|
||||||
@ -351,58 +467,78 @@ class ChatPage extends LitElement {
|
|||||||
></vaadin-icon>
|
></vaadin-icon>
|
||||||
</div>
|
</div>
|
||||||
`}
|
`}
|
||||||
<div class="chatbar">
|
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
|
||||||
<div class="file-picker-container">
|
<div class="chatbar-container" style="${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'align-items: flex-end' : "align-items: center"}"
|
||||||
<vaadin-icon
|
|
||||||
class="paperclip-icon"
|
|
||||||
icon="vaadin:paperclip"
|
|
||||||
slot="icon"
|
|
||||||
@click=${() => this.closeEditMessageContainer()}
|
|
||||||
>
|
>
|
||||||
</vaadin-icon>
|
<div class="file-picker-container">
|
||||||
<div class="file-picker-input-container">
|
|
||||||
<input
|
|
||||||
.value="${this.imageFile}"
|
|
||||||
@change="${e => this.insertImage(e.target.files[0])}"
|
|
||||||
class="file-picker-input" type="file" name="myImage" accept="image/*" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
|
|
||||||
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
|
|
||||||
</iframe>
|
|
||||||
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
|
||||||
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
|
||||||
</button>
|
|
||||||
${this.editedMessageObj ? (
|
|
||||||
html`
|
|
||||||
<div>
|
|
||||||
${this.isLoading === false ? html`
|
|
||||||
<vaadin-icon
|
<vaadin-icon
|
||||||
class="checkmark-icon"
|
class="paperclip-icon"
|
||||||
icon="vaadin:check"
|
icon="vaadin:paperclip"
|
||||||
slot="icon"
|
slot="icon"
|
||||||
@click=${() => this._sendMessage()}
|
@click=${() => this.closeEditMessageContainer()}
|
||||||
>
|
>
|
||||||
</vaadin-icon>
|
</vaadin-icon>
|
||||||
` :
|
<div class="file-picker-input-container">
|
||||||
html`
|
<input
|
||||||
<paper-spinner-lite active></paper-spinner-lite>
|
.value="${this.imageFile}"
|
||||||
`}
|
@change="${e => this.insertImage(e.target.files[0])}"
|
||||||
</div>
|
class="file-picker-input" type="file" name="myImage" accept="image/*" />
|
||||||
`
|
|
||||||
) :
|
|
||||||
html`
|
|
||||||
<div style="display:flex;">
|
|
||||||
${this.isLoading === false ? html`<img src="/img/qchat-send-message-icon.svg" alt="send-icon" class="send-icon" />` : html`<paper-spinner-lite active></paper-spinner-lite>`}
|
|
||||||
</div>
|
</div>
|
||||||
`
|
</div>
|
||||||
}
|
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
|
||||||
|
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
|
||||||
|
</iframe>
|
||||||
|
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
|
||||||
|
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
|
||||||
|
</button>
|
||||||
|
${this.editedMessageObj ? (
|
||||||
|
html`
|
||||||
|
<div>
|
||||||
|
${this.isLoading === false ? html`
|
||||||
|
<vaadin-icon
|
||||||
|
class="checkmark-icon"
|
||||||
|
icon="vaadin:check"
|
||||||
|
slot="icon"
|
||||||
|
@click=${() => this._sendMessage()}
|
||||||
|
>
|
||||||
|
</vaadin-icon>
|
||||||
|
` :
|
||||||
|
html`
|
||||||
|
<paper-spinner-lite active></paper-spinner-lite>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
) :
|
||||||
|
html`
|
||||||
|
<div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}">
|
||||||
|
${this.isLoading === false ? html`
|
||||||
|
<img
|
||||||
|
src="/img/qchat-send-message-icon.svg"
|
||||||
|
alt="send-icon"
|
||||||
|
class="send-icon"
|
||||||
|
@click=${() => this._sendMessage()} />
|
||||||
|
` :
|
||||||
|
html`
|
||||||
|
<paper-spinner-lite active></paper-spinner-lite>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
${this.chatMessageSize >= 750 ?
|
||||||
|
html`
|
||||||
|
<div class="message-size-container">
|
||||||
|
<div class="message-size" style="${this.chatMessageSize >= 1000 && 'color: #bd1515'}">
|
||||||
|
${`Your message size is of ${this.chatMessageSize} bytes out of a maximum of 1000`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
` :
|
||||||
|
html``}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -429,6 +565,8 @@ class ChatPage extends LitElement {
|
|||||||
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
|
this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
|
||||||
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
|
this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
|
||||||
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
|
this.chatMessageInput = this.shadowRoot.getElementById('_chatEditorDOM');
|
||||||
|
console.log(this.chatMessageInput);
|
||||||
|
console.log(this.mirrorChatInput.clientHeight);
|
||||||
document.addEventListener('keydown', (e) => {
|
document.addEventListener('keydown', (e) => {
|
||||||
if (!this.chatEditor.content.body.matches(':focus')) {
|
if (!this.chatEditor.content.body.matches(':focus')) {
|
||||||
// WARNING: Deprecated methods from KeyBoard Event
|
// WARNING: Deprecated methods from KeyBoard Event
|
||||||
@ -539,15 +677,16 @@ class ChatPage extends LitElement {
|
|||||||
if (chatReference1 && chatReference2) {
|
if (chatReference1 && chatReference2) {
|
||||||
await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
|
await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
if (changedProperties && changedProperties.has('editedMessageObj')) {
|
if (changedProperties && changedProperties.has('editedMessageObj')) {
|
||||||
this.chatEditor.insertText(this.editedMessageObj.message)
|
this.chatEditor.insertText(this.editedMessageObj.message)
|
||||||
}
|
}
|
||||||
|
if (changedProperties && changedProperties.has('chatMessageSize')) {
|
||||||
|
console.log(this.chatMessageSize, "Chat Message Size");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateIFrameHeight(height) {
|
calculateIFrameHeight(height) {
|
||||||
console.log(height, "height here")
|
|
||||||
this.iframeHeight = height;
|
this.iframeHeight = height;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -719,63 +858,54 @@ class ChatPage extends LitElement {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getMessageConfig() {
|
||||||
|
const textAreaElement = this.shadowRoot.getElementById('messageBox');
|
||||||
|
return textAreaElement.value;
|
||||||
|
}
|
||||||
|
|
||||||
getMessageSize(message){
|
getMessageSize(message){
|
||||||
try {
|
try {
|
||||||
|
const messageText = message;
|
||||||
const messageText = message
|
|
||||||
// Format and Sanitize Message
|
// Format and Sanitize Message
|
||||||
const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
|
const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
|
||||||
const trimmedMessage = sanitizedMessage.trim();
|
const trimmedMessage = sanitizedMessage.trim();
|
||||||
let messageObject = {};
|
let messageObject = {};
|
||||||
|
|
||||||
if (this.repliedToMessageObj) {
|
if (this.repliedToMessageObj) {
|
||||||
let chatReference = this.repliedToMessageObj.reference
|
let chatReference = this.repliedToMessageObj.reference;
|
||||||
|
if (this.repliedToMessageObj.chatReference) {
|
||||||
if(this.repliedToMessageObj.chatReference){
|
chatReference = this.repliedToMessageObj.chatReference;
|
||||||
chatReference = this.repliedToMessageObj.chatReference
|
|
||||||
}
|
}
|
||||||
|
|
||||||
messageObject = {
|
messageObject = {
|
||||||
messageText: trimmedMessage,
|
messageText: trimmedMessage,
|
||||||
images: [''],
|
images: [''],
|
||||||
repliedTo: chatReference,
|
repliedTo: chatReference,
|
||||||
version: 1
|
version: 1
|
||||||
}
|
}
|
||||||
|
|
||||||
} else if (this.editedMessageObj) {
|
} else if (this.editedMessageObj) {
|
||||||
|
let message = "";
|
||||||
|
try {
|
||||||
|
const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage);
|
||||||
|
message = parsedMessageObj;
|
||||||
let message = ""
|
} catch (error) {
|
||||||
try {
|
message = this.messageObj.decodedMessage
|
||||||
const parsedMessageObj = JSON.parse(this.editedMessageObj.decodedMessage)
|
}
|
||||||
message = parsedMessageObj
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
message = this.messageObj.decodedMessage
|
|
||||||
}
|
|
||||||
messageObject = {
|
messageObject = {
|
||||||
...message,
|
...message,
|
||||||
messageText: trimmedMessage,
|
messageText: trimmedMessage,
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
messageObject = {
|
messageObject = {
|
||||||
messageText: trimmedMessage,
|
messageText: trimmedMessage,
|
||||||
images: [''],
|
images: [''],
|
||||||
repliedTo: '',
|
repliedTo: '',
|
||||||
version: 1
|
version: 1
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const stringified = JSON.stringify(messageObject)
|
const stringified = JSON.stringify(messageObject);
|
||||||
const size = new Blob([stringified]).size;
|
const size = new Blob([stringified]).size;
|
||||||
this.chatMessageSize = size
|
this.chatMessageSize = size;
|
||||||
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error)
|
console.error(error)
|
||||||
@ -1171,8 +1301,7 @@ class ChatPage extends LitElement {
|
|||||||
const userName = outSideMsg.name
|
const userName = outSideMsg.name
|
||||||
const identifier = outSideMsg.identifier
|
const identifier = outSideMsg.identifier
|
||||||
let compressedFile = ''
|
let compressedFile = ''
|
||||||
var str =
|
var str = "iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg==";
|
||||||
"iVBORw0KGgoAAAANSUhEUgAAAsAAAAGMAQMAAADuk4YmAAAAA1BMVEX///+nxBvIAAAAAXRSTlMAQObYZgAAADlJREFUeF7twDEBAAAAwiD7p7bGDlgYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAGJrAABgPqdWQAAAABJRU5ErkJggg==";
|
|
||||||
|
|
||||||
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
|
const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
|
||||||
const byteCharacters = atob(b64Data);
|
const byteCharacters = atob(b64Data);
|
||||||
@ -1233,42 +1362,38 @@ class ChatPage extends LitElement {
|
|||||||
this.chatEditor.enable();
|
this.chatEditor.enable();
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
typeMessage = 'edit';
|
||||||
|
let chatReference = outSideMsg.editedMessageObj.reference;
|
||||||
|
|
||||||
typeMessage = 'edit'
|
|
||||||
let chatReference = outSideMsg.editedMessageObj.reference
|
|
||||||
|
|
||||||
if(outSideMsg.editedMessageObj.chatReference){
|
if(outSideMsg.editedMessageObj.chatReference){
|
||||||
chatReference = outSideMsg.editedMessageObj.chatReference
|
chatReference = outSideMsg.editedMessageObj.chatReference
|
||||||
}
|
}
|
||||||
|
|
||||||
let message = ""
|
let message = "";
|
||||||
try {
|
try {
|
||||||
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage)
|
const parsedMessageObj = JSON.parse(outSideMsg.editedMessageObj.decodedMessage);
|
||||||
message = parsedMessageObj
|
message = parsedMessageObj;
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
message = outSideMsg.editedMessageObj.decodedMessage
|
message = outSideMsg.editedMessageObj.decodedMessage;
|
||||||
}
|
}
|
||||||
const messageObject = {
|
const messageObject = {
|
||||||
...message,
|
...message,
|
||||||
isImageDeleted: true
|
isImageDeleted: true
|
||||||
}
|
}
|
||||||
const stringifyMessageObject = JSON.stringify(messageObject)
|
const stringifyMessageObject = JSON.stringify(messageObject);
|
||||||
this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
|
this.sendMessage(stringifyMessageObject, typeMessage, chatReference);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
else if(outSideMsg && outSideMsg.type === 'image'){
|
else if (outSideMsg && outSideMsg.type === 'image') {
|
||||||
|
|
||||||
|
const userName = await getName(this.selectedAddress.address);
|
||||||
const userName = await getName(this.selectedAddress.address)
|
if (!userName) {
|
||||||
if(!userName){
|
parentEpml.request('showSnackBar', get("chatpage.cchange27"));
|
||||||
parentEpml.request('showSnackBar', get("chatpage.cchange27"))
|
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
this.chatEditor.enable();
|
this.chatEditor.enable();
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
const id = this.uid();
|
const id = this.uid();
|
||||||
const identifier = `qchat_${id}`
|
const identifier = `qchat_${id}`
|
||||||
@ -1757,8 +1882,7 @@ class ChatPage extends LitElement {
|
|||||||
for (let i = 0; i < events.length; i++) {
|
for (let i = 0; i < events.length; i++) {
|
||||||
const event = events[i]
|
const event = events[i]
|
||||||
editor.content.body.addEventListener(event, async function (e) {
|
editor.content.body.addEventListener(event, async function (e) {
|
||||||
|
console.log("hello world12")
|
||||||
editorConfig.getMessageSize(editorConfig.mirrorElement.value)
|
|
||||||
if (e.type === 'click') {
|
if (e.type === 'click') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -1801,10 +1925,13 @@ class ChatPage extends LitElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (e.type === 'keydown') {
|
if (e.type === 'keydown') {
|
||||||
console.log(editorConfig.mirrorElement.scrollHeight);
|
console.log("key pressed");
|
||||||
|
console.log(editorConfig.getMessageConfig(), "this is the chat input value");
|
||||||
|
console.log(editorConfig.editableElement.contentDocument.body.scrollHeight, "scroll height")
|
||||||
|
console.log(editorConfig.mirrorElement.clientHeight, "client height")
|
||||||
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
|
editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
|
||||||
|
editorConfig.getMessageSize(editorConfig.editableElement.contentDocument.body.innerHTML);
|
||||||
// Handle Enter
|
// Handle Enter
|
||||||
if (e.keyCode === 13 && !e.shiftKey) {
|
if (e.keyCode === 13 && !e.shiftKey) {
|
||||||
|
|
||||||
// Update Mirror
|
// Update Mirror
|
||||||
@ -1883,6 +2010,7 @@ class ChatPage extends LitElement {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const editorConfig = {
|
const editorConfig = {
|
||||||
|
getMessageConfig: this.getMessageConfig,
|
||||||
getMessageSize: this.getMessageSize,
|
getMessageSize: this.getMessageSize,
|
||||||
calculateIFrameHeight: this.calculateIFrameHeight,
|
calculateIFrameHeight: this.calculateIFrameHeight,
|
||||||
mirrorElement: this.mirrorChatInput,
|
mirrorElement: this.mirrorChatInput,
|
||||||
@ -1894,7 +2022,8 @@ class ChatPage extends LitElement {
|
|||||||
placeholder: this.chatEditorPlaceholder,
|
placeholder: this.chatEditorPlaceholder,
|
||||||
imageFile: this.imageFile,
|
imageFile: this.imageFile,
|
||||||
requestUpdate: this.requestUpdate,
|
requestUpdate: this.requestUpdate,
|
||||||
insertImage: this.insertImage
|
insertImage: this.insertImage,
|
||||||
|
chatMessageSize: this.chatMessageSize
|
||||||
};
|
};
|
||||||
this.chatEditor = new ChatEditor(editorConfig);
|
this.chatEditor = new ChatEditor(editorConfig);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user