Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-04-23 11:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

change input within component

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-12 13:19:31 +02:00
parent 6dab5d612b
commit dd6cd52cd8
1 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
qortal-ui-plugins/plugins/core/components/ChatPage.js
View File

@ -507,6 +507,7 @@ class ChatPage extends LitElement {
constructor() { constructor() {
super() super()
this.changeMsgInput = this.changeMsgInput.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)
@ -541,6 +542,7 @@ class ChatPage extends LitElement {
} }
render() { render() {
console.log(this.chatMessageInput, 'chatmsginput')
return html` return html`
<div class="chat-container"> <div class="chat-container">
<div> <div>
@ -563,6 +565,7 @@ class ChatPage extends LitElement {
id="showDialogPublicKey" id="showDialogPublicKey"
?open=${this.imageFile} ?open=${this.imageFile}
@closed=${() => { @closed=${() => {
this.changeMsgInput('_chatEditorDOM')
this.chatEditor.enable(); this.chatEditor.enable();
this.caption = ""; this.caption = "";
this.imageFile = null; this.imageFile = null;
@ -574,7 +577,10 @@ class ChatPage extends LitElement {
`} `}
<!-- Replace by reusable chatbar component --> <!-- Replace by reusable chatbar component -->
<div class="caption-container"> <div class="caption-container">
<textarea @change=${(e) => this.onCaptionChange(e.target.value)} .value=${this.caption} placeholder="Caption" class="chatbar-caption" tabindex='1' rows="1"></textarea> <iframe
}}" id="newChat" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe>
<div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}"> <div style="display:flex; ${this.chatMessageInput && this.chatMessageInput.contentDocument.body.scrollHeight > 60 ? 'margin-bottom: 5px' : "margin-bottom: 0"}">
${this.isLoading === false ? html` ${this.isLoading === false ? html`
<img <img
@ -770,7 +776,9 @@ class ChatPage extends LitElement {
if(file.type.includes('image')){ if(file.type.includes('image')){
this.imageFile = file this.imageFile = file
this.chatEditor.disable(); this.changeMsgInput('newChat')
// this.initChatEditor();
// this.chatEditor.disable();
return return
} }
@ -778,7 +786,12 @@ class ChatPage extends LitElement {
} }
changeMsgInput(id){
console.log({id})
this.chatEditor.remove()
this.chatMessageInput = this.shadowRoot.getElementById(id);
this.initChatEditor();
}
async firstUpdated() { async firstUpdated() {
@ -2207,6 +2220,17 @@ class ChatPage 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 () { ChatEditor.prototype.init = function () {
const editor = this; const editor = this;