Merge remote-tracking branch 'justin/feature/implement-UI-edit-reply-messages' into feature/implement-logic-edit-reply-messages

This commit is contained in:
Phillip Lang Martinez 2022-11-07 23:10:48 +02:00
commit 2740900c53

View File

@ -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(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n'); const sanitizedMessage = messageText.replace(/&nbsp;/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);
} }