forked from Qortal/qortal-ui
fix problems
This commit is contained in:
parent
67e3dd71fa
commit
311e902bdc
@ -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)}
|
||||
<mwc-dialog
|
||||
|
||||
id="showDialogPublicKey"
|
||||
?open=${this.imageFile}
|
||||
|
||||
@closed=${() => {
|
||||
// this.changeMsgInput('_chatEditorDOM')
|
||||
this.chatEditor.enable();
|
||||
this.caption = "";
|
||||
this.imageFile = null;
|
||||
this.chatEditor.enable()
|
||||
|
||||
}}>
|
||||
<div class="dialog-header"></div>
|
||||
<div class="dialog-container mdc-dialog mdc-dialog__surface">
|
||||
@ -535,28 +541,26 @@ class ChatPage extends LitElement {
|
||||
`}
|
||||
<!-- Replace by reusable chatbar component -->
|
||||
<div class="caption-container">
|
||||
<iframe
|
||||
}}" id="newChat" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
|
||||
</iframe>
|
||||
<chat-text-editor
|
||||
iframeId="newChat"
|
||||
?hasGlobalEvents=${false}
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
.setChatEditor=${(editor)=> this.setChatEditorNewChat(editor)}
|
||||
.chatEditor=${this.chatEditorNewChat}
|
||||
.imageFile=${this.imageFile}
|
||||
.insertImage=${this.insertImage}
|
||||
|
||||
.editedMessageObj=${this.editedMessageObj}
|
||||
|
||||
?isLoading=${this.isLoading}
|
||||
?isLoadingMessages=${this.isLoadingMessages}
|
||||
></chat-text-editor>
|
||||
<!-- <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"}">
|
||||
${this.isLoading === false ? html`
|
||||
<img
|
||||
src="/img/qchat-send-message-icon.svg"
|
||||
alt="send-icon"
|
||||
class="send-icon"
|
||||
@click=${()=> {
|
||||
this._sendMessage({
|
||||
type: 'image',
|
||||
imageFile: this.imageFile,
|
||||
caption: this.caption,
|
||||
})
|
||||
}} />
|
||||
` :
|
||||
html`
|
||||
<paper-spinner-lite active></paper-spinner-lite>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
${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 {
|
||||
`}
|
||||
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
|
||||
<chat-text-editor
|
||||
?hasGlobalEvents=${true}
|
||||
iframeId="_chatEditorDOM"
|
||||
placeholder=${this.chatEditorPlaceholder}
|
||||
._sendMessage=${this._sendMessage}
|
||||
@ -682,10 +686,15 @@ class ChatPage extends LitElement {
|
||||
this.chatEditor = editor
|
||||
}
|
||||
|
||||
setChatEditorNewChat(editor){
|
||||
this.chatEditorNewChat = editor
|
||||
}
|
||||
|
||||
insertImage(file){
|
||||
|
||||
if(file.type.includes('image')){
|
||||
this.imageFile = file
|
||||
this.chatEditor.disable()
|
||||
// this.changeMsgInput('newChat')
|
||||
// this.initChatEditor();
|
||||
// this.chatEditor.disable();
|
||||
@ -707,19 +716,19 @@ class ChatPage extends LitElement {
|
||||
|
||||
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
});
|
||||
// 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(/<br\s*[\/]?>/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(/<br\s*[\/]?>/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()
|
||||
};
|
||||
|
||||
@ -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 = `<img class="emoji" draggable="false" alt="${selection.emoji}" src="${selection.url}">`;
|
||||
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(/<img.*?alt=".*?/g, '').replace(/".?src=.*?>/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;
|
||||
if(editorConfig.iframeId === 'newChat'){
|
||||
editorConfig.sendFunc(
|
||||
{
|
||||
type: 'image',
|
||||
imageFile: editorConfig.imageFile,
|
||||
}
|
||||
);
|
||||
} else {
|
||||
editorConfig.sendFunc();
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user