From b2e4d1fdf77e02290ed6c3e42c12cac250492fe0 Mon Sep 17 00:00:00 2001 From: Phillip Lang Martinez Date: Thu, 17 Nov 2022 18:18:00 +0200 Subject: [PATCH] fix initial scroll and double text when edit --- .../plugins/core/components/ChatPage.js | 15 +-------------- .../plugins/core/components/ChatScroller-css.js | 5 +++++ .../plugins/core/components/ChatScroller.js | 11 +++++++++-- .../plugins/core/components/ChatTextEditor.js | 9 --------- 4 files changed, 15 insertions(+), 25 deletions(-) diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js index 0a6b6cac..5f2a0837 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatPage.js +++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js @@ -655,7 +655,6 @@ class ChatPage extends LitElement { } setChatEditor(editor){ - console.log({editor}) this.chatEditor = editor } @@ -774,17 +773,7 @@ class ChatPage extends LitElement { } - async updated(changedProperties) { - - 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(); - // } - } + onCaptionChange(e) { this.caption = e; @@ -1321,11 +1310,9 @@ class ChatPage extends LitElement { quality: 0.6, maxWidth: 500, success(result) { - console.log({result}); const file = new File([result], "name", { type: 'image/png' }); - console.log({file}); compressedFile = file; resolve(); }, diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js index e3b84996..0ef263ef 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller-css.js @@ -400,6 +400,11 @@ export const chatStyles = css` .image-container { display: flex; } + .message-data-level { + height: 21px; + width: 21px; + overflow: hidden; + } .defaultSize { width:45vh; height:40vh diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js index 173b76b6..2945e0a9 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js +++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js @@ -120,6 +120,13 @@ class ChatScroller extends LitElement { return changedProperties.has('messages'); } + async getUpdateComplete() { + await super.getUpdateComplete(); + const marginElements = Array.from(this.shadowRoot.querySelectorAll('message-template')); + await Promise.all(marginElements.map(el => el.updateComplete)); + return true; + } + async firstUpdated() { this.viewElement = this.shadowRoot.getElementById('viewElement'); this.upObserverElement = this.shadowRoot.getElementById('upObserver'); @@ -127,7 +134,8 @@ class ChatScroller extends LitElement { // Intialize Observers this.upElementObserver() this.downElementObserver() - await this.updateComplete + await this.getUpdateComplete() + this.viewElement.scrollTop = this.viewElement.scrollHeight + 50 @@ -253,7 +261,6 @@ class MessageTemplate extends LitElement { } render() { - console.log(this.messageObj); const hidemsg = this.hideMessages; let message = ""; let reactions = []; diff --git a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js index 3641ed6d..a46088fd 100644 --- a/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js +++ b/qortal-ui-plugins/plugins/core/components/ChatTextEditor.js @@ -208,7 +208,6 @@ 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) { @@ -231,7 +230,6 @@ class ChatTextEditor extends LitElement { } async firstUpdated() { - console.log('this.hasGlobalEvents', this.hasGlobalEvents) if(this.hasGlobalEvents){ this.addGlobalEventListener() } @@ -239,7 +237,6 @@ class ChatTextEditor extends LitElement { this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button'); this.mirrorChatInput = this.shadowRoot.getElementById('messageBox'); this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId); - console.log('test', this.chatMessageInput ) this.emojiPicker = new EmojiPicker({ @@ -255,7 +252,6 @@ class ChatTextEditor extends LitElement { }); this.emojiPicker.on('emoji', selection => { - console.log('hello selection') const emojiHtmlString = `${selection.emoji}`; this.chatEditor.insertEmoji(emojiHtmlString); }); @@ -268,7 +264,6 @@ class ChatTextEditor extends LitElement { } async updated(changedProperties) { - console.log({changedProperties}) if (changedProperties && changedProperties.has('editedMessageObj')) { this.chatEditor.insertText(this.editedMessageObj.message) } @@ -344,7 +339,6 @@ class ChatTextEditor extends LitElement { } initChatEditor() { - console.log('hello editor') const ChatEditor = function (editorConfig) { const ChatEditor = function () { @@ -496,7 +490,6 @@ class ChatTextEditor extends LitElement { const filteredValue = chatInputValue.replace(//g, ''); let unescapedValue = editorConfig.unescape(filteredValue); - console.log({unescapedValue}) editor.mirror.value = unescapedValue; }; @@ -681,9 +674,7 @@ editor.content.body.appendChild(elemDiv); removeGlobalEventListener: this.removeGlobalEventListener, iframeId: this.iframeId }; - console.log('after') const newChat = new ChatEditor(editorConfig) - console.log({newChat}) this.setChatEditor(newChat) } }