From 311e902bdcfa43d4600d5c202567216758ec18a8 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Wed, 16 Nov 2022 19:12:22 +0200 Subject: [PATCH] fix problems --- .../plugins/core/components/ChatPage.js | 125 ++++++++++-------- .../plugins/core/components/ChatTextEditor.js | 84 +++++++++--- 2 files changed, 134 insertions(+), 75 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 4dd5cf95..1aa761af 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -62,7 +62,8 @@ class ChatPage extends LitElement { imageFile: {type: Object}, isUploadingImage: {type: Boolean}, caption: { type: String }, - chatEditor: {type: Object} + chatEditor: {type: Object}, + chatEditorNewChat: {type: Object} } } @@ -72,6 +73,7 @@ class ChatPage extends LitElement { /* Styling mdc dialog native props */ --mdc-dialog-min-width: 300px; --mdc-dialog-box-shadow:rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; + --mdc-dialog-z-index: 5 } html { @@ -230,6 +232,9 @@ class ChatPage extends LitElement { height: auto; overflow: hidden; justify-content: center; + background: white; + padding: 5px; + border-radius: 1px; } .chatbar-caption { @@ -520,13 +525,14 @@ class ChatPage extends LitElement { ` : this.renderChatScroller(this._initialMessages)} { - // this.changeMsgInput('_chatEditorDOM') - this.chatEditor.enable(); - this.caption = ""; this.imageFile = null; + this.chatEditor.enable() + }}>
@@ -535,28 +541,26 @@ class ChatPage extends LitElement { `}
- + --> -
- ${this.isLoading === false ? html` - send-icon { - this._sendMessage({ - type: 'image', - imageFile: this.imageFile, - caption: this.caption, - }) - }} /> - ` : - html` - - `} -
+
${this.chatMessageSize >= 750 ? html` @@ -585,7 +589,6 @@ class ChatPage extends LitElement { this._sendMessage({ type: 'image', imageFile: this.imageFile, - caption: this.caption, }) }} > @@ -631,6 +634,7 @@ class ChatPage extends LitElement { `}
{ - if (!this.chatEditor.content.body.matches(':focus')) { - // WARNING: Deprecated methods from KeyBoard Event - if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { - this.chatEditor.insertText(' '); - } else if (inputKeyCodes.includes(e.keyCode)) { - this.chatEditor.insertText(e.key); - return this.chatEditor.focus(); - } else { - return this.chatEditor.focus(); - } - } - }); + // document.addEventListener('keydown', (e) => { + // if (!this.chatEditor.content.body.matches(':focus')) { + // // WARNING: Deprecated methods from KeyBoard Event + // if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { + // this.chatEditor.insertText(' '); + // } else if (inputKeyCodes.includes(e.keyCode)) { + // this.chatEditor.insertText(e.key); + // return this.chatEditor.focus(); + // } else { + // return this.chatEditor.focus(); + // } + // } + // }); window.addEventListener('storage', () => { const checkLanguage = localStorage.getItem('qortalLanguage') @@ -793,21 +802,15 @@ class ChatPage extends LitElement { async updated(changedProperties) { - if (changedProperties.has('messagesRendered')) { - const chatReference1 = this.isReceipient ? 'direct' : 'group'; - const chatReference2 = this._chatId - if (chatReference1 && chatReference2) { - await messagesCache.setItem(`${chatReference1}-${chatReference2}`, this.messagesRendered); - } - } + if (changedProperties && changedProperties.has('editedMessageObj')) { this.chatEditor.insertText(this.editedMessageObj.message) } - if(changedProperties && changedProperties.has("imageFile")) { - this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); - this.chatbarCaption.focus(); - } + // if(changedProperties && changedProperties.has("imageFile")) { + // this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); + // this.chatbarCaption.focus(); + // } } onCaptionChange(e) { @@ -1280,6 +1283,7 @@ class ChatPage extends LitElement { } async _sendMessage(outSideMsg) { + // have params to determine if it's a reply or not // have variable to determine if it's a response, holds signature in constructor // need original message signature @@ -1290,9 +1294,8 @@ class ChatPage extends LitElement { this.isLoading = true; this.chatEditor.disable(); - const textInput = this.shadowRoot.querySelector('chat-text-editor').shadowRoot.getElementById('messageBox'); - console.log({textInput}) - const messageText = textInput.value; + this.chatEditorNewChat.disable() + const messageText = this.chatEditor.mirror.value; // Format and Sanitize Message const sanitizedMessage = messageText.replace(/ /gi, ' ').replace(//gi, '\n'); const trimmedMessage = sanitizedMessage.trim(); @@ -1378,6 +1381,7 @@ class ChatPage extends LitElement { console.error(error) this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return } typeMessage = 'edit'; @@ -1411,18 +1415,20 @@ class ChatPage extends LitElement { parentEpml.request('showSnackBar', get("chatpage.cchange27")); this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return; } + const image = this.imageFile const id = this.uid(); const identifier = `qchat_${id}`; let compressedFile = ''; await new Promise(resolve => { - new Compressor( outSideMsg.imageFile, { + new Compressor( image, { quality: .6, maxWidth: 500, success(result){ const file = new File([result], "name", { - type: outSideMsg.imageFile.type + type: image.type }); compressedFile = file resolve() @@ -1438,6 +1444,7 @@ class ChatPage extends LitElement { parentEpml.request('showSnackBar', get("chatpage.cchange26")); this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return; } @@ -1459,10 +1466,15 @@ class ChatPage extends LitElement { console.error(error) this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() return } + const messageTextWithImage = this.chatEditorNewChat.mirror.value; + // Format and Sanitize Message + const sanitizedMessageWithImage = messageTextWithImage.replace(/ /gi, ' ').replace(//gi, '\n'); + const trimmedMessageWithImage = sanitizedMessageWithImage.trim(); const messageObject = { - messageText: outSideMsg.caption, + messageText: trimmedMessageWithImage, images: [{ service: "IMAGE", name: userName, @@ -1529,9 +1541,11 @@ class ChatPage extends LitElement { } else if (/^\s*$/.test(trimmedMessage)) { this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() } else if (this.chatMessageSize >= 1000) { this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() let err1string = get("chatpage.cchange29"); parentEpml.request('showSnackBar', `${err1string}`); } else if (this.repliedToMessageObj) { @@ -1675,6 +1689,7 @@ class ChatPage extends LitElement { this.isLoading = false; this.chatEditor.enable(); + this.chatEditorNewChat.enable() this.closeEditMessageContainer() this.closeRepliedToContainer() }; diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 09a482f7..3641ed6d 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit" import { render } from "lit/html.js" import { escape, unescape } from 'html-escaper'; import { EmojiPicker } from 'emoji-picker-js'; +import { inputKeyCodes } from '../../utils/keyCodes.js' class ChatTextEditor extends LitElement { @@ -17,7 +18,8 @@ class ChatTextEditor extends LitElement { editedMessageObj: {type: Object}, chatEditor: {type: Object}, setChatEditor: {attribute: false}, - iframeId: {type: String} + iframeId: {type: String}, + hasGlobalEvents: {type: Boolean} } } @@ -126,6 +128,9 @@ class ChatTextEditor extends LitElement { this.isLoading = false this.getMessageSize = this.getMessageSize.bind(this) this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this) + this.addGlobalEventListener = this.addGlobalEventListener.bind(this) + this.removeGlobalEventListener = this.removeGlobalEventListener.bind(this) + this.initialChat = this.initialChat.bind(this) this.iframeHeight = 42 } @@ -202,23 +207,40 @@ class ChatTextEditor extends LitElement { ` } + initialChat(e) { + console.log('hello initial', this.chatEditor) + if (!this.chatEditor?.contentDiv.matches(':focus')) { + // WARNING: Deprecated methods from KeyBoard Event + if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { + this.chatEditor.insertText(' '); + } else if (inputKeyCodes.includes(e.keyCode)) { + this.chatEditor.insertText(e.key); + return this.chatEditor.focus(); + } else { + return this.chatEditor.focus(); + } + } + } + + addGlobalEventListener(){ + document.addEventListener('keydown', this.initialChat); + } + + removeGlobalEventListener(){ + document.removeEventListener('keydown', this.initialChat); + } + async firstUpdated() { + console.log('this.hasGlobalEvents', this.hasGlobalEvents) + if(this.hasGlobalEvents){ + this.addGlobalEventListener() + } + this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId); - document.addEventListener('keydown', (e) => { - if (!this.chatEditor.content.body.matches(':focus')) { - // WARNING: Deprecated methods from KeyBoard Event - if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { - this.chatEditor.insertText(' '); - } else if (inputKeyCodes.includes(e.keyCode)) { - this.chatEditor.insertText(e.key); - return this.chatEditor.focus(); - } else { - return this.chatEditor.focus(); - } - } - }); + console.log('test', this.chatMessageInput ) + this.emojiPicker = new EmojiPicker({ style: "twemoji", @@ -227,10 +249,13 @@ class ChatTextEditor extends LitElement { 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' + boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px', + zIndex: 100 + }); this.emojiPicker.on('emoji', selection => { + console.log('hello selection') const emojiHtmlString = `${selection.emoji}`; this.chatEditor.insertEmoji(emojiHtmlString); }); @@ -330,7 +355,7 @@ class ChatTextEditor extends LitElement { ChatEditor.prototype.getValue = function () { const editor = this; - if (editor.content) { + if (editor.contentDiv) { return editor.contentDiv.innerHTML; } }; @@ -404,6 +429,10 @@ class ChatTextEditor extends LitElement { editor.focus(); }; + ChatEditor.prototype.getMirrorElement = function (){ + return editor.mirror + } + ChatEditor.prototype.disable = function () { const editor = this; @@ -467,10 +496,12 @@ class ChatTextEditor extends LitElement { const filteredValue = chatInputValue.replace(//g, ''); let unescapedValue = editorConfig.unescape(filteredValue); + console.log({unescapedValue}) editor.mirror.value = unescapedValue; }; ChatEditor.prototype.listenChanges = function () { + const editor = this; const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] @@ -535,8 +566,17 @@ class ChatTextEditor extends LitElement { editor.updateMirror(); if (editor.state() === 'false') return false; - - editorConfig.sendFunc(); + if(editorConfig.iframeId === 'newChat'){ + editorConfig.sendFunc( + { + type: 'image', + imageFile: editorConfig.imageFile, + } + ); + } else { + editorConfig.sendFunc(); + } + e.preventDefault(); return false; } @@ -586,13 +626,13 @@ class ChatTextEditor extends LitElement { ChatEditor.prototype.remove = function () { const editor = this; - editor.content.body var old_element = editor.content.body var new_element = old_element.cloneNode(true); editor.content.body.parentNode.replaceChild(new_element, old_element); while (editor.content.body.firstChild) { editor.content.body.removeChild(editor.content.body.lastChild); } + }; ChatEditor.prototype.init = function () { @@ -613,6 +653,7 @@ editor.content.body.appendChild(elemDiv); editor.contentDiv = editor.frame.contentDocument.body.firstChild editor.styles(); editor.listenChanges(); + }; @@ -635,7 +676,10 @@ editor.content.body.appendChild(elemDiv); imageFile: this.imageFile, requestUpdate: this.requestUpdate, insertImage: this.insertImage, - chatMessageSize: this.chatMessageSize + chatMessageSize: this.chatMessageSize, + addGlobalEventListener: this.addGlobalEventListener, + removeGlobalEventListener: this.removeGlobalEventListener, + iframeId: this.iframeId }; console.log('after') const newChat = new ChatEditor(editorConfig)