jschulthess/qortal-ui
1
0
Fork 0
forked from Qortal/qortal-ui
Code Issues Pull Requests Projects Releases Wiki Activity

fix problems

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-16 19:12:22 +02:00
parent 67e3dd71fa
commit 311e902bdc
2 changed files with 134 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,8 @@ class ChatPage extends LitElement {
imageFile: {type: Object}, imageFile: {type: Object},
isUploadingImage: {type: Boolean}, isUploadingImage: {type: Boolean},
caption: { type: String }, 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 */ /* Styling mdc dialog native props */
--mdc-dialog-min-width: 300px; --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-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 { html {
@ -230,6 +232,9 @@ class ChatPage extends LitElement {
height: auto; height: auto;
overflow: hidden; overflow: hidden;
justify-content: center; justify-content: center;
background: white;
padding: 5px;
border-radius: 1px;
} }
.chatbar-caption { .chatbar-caption {
@ -520,13 +525,14 @@ class ChatPage extends LitElement {
` : ` :
this.renderChatScroller(this._initialMessages)} this.renderChatScroller(this._initialMessages)}
<mwc-dialog <mwc-dialog
id="showDialogPublicKey" id="showDialogPublicKey"
?open=${this.imageFile} ?open=${this.imageFile}
@closed=${() => { @closed=${() => {
// this.changeMsgInput('_chatEditorDOM')
this.chatEditor.enable();
this.caption = "";
this.imageFile = null; this.imageFile = null;
this.chatEditor.enable()
}}> }}>
<div class="dialog-header"></div> <div class="dialog-header"></div>
<div class="dialog-container mdc-dialog mdc-dialog__surface"> <div class="dialog-container mdc-dialog mdc-dialog__surface">
@ -535,28 +541,26 @@ class ChatPage extends LitElement {
`} `}
<!-- Replace by reusable chatbar component --> <!-- Replace by reusable chatbar component -->
<div class="caption-container"> <div class="caption-container">
<iframe <chat-text-editor
}}" id="newChat" class="chat-editor" tabindex="-1" height=${this.iframeHeight}> iframeId="newChat"
</iframe> ?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> </div>
${this.chatMessageSize >= 750 ? ${this.chatMessageSize >= 750 ?
html` html`
@ -585,7 +589,6 @@ class ChatPage extends LitElement {
this._sendMessage({ this._sendMessage({
type: 'image', type: 'image',
imageFile: this.imageFile, imageFile: this.imageFile,
caption: this.caption,
}) })
}} }}
> >
@ -631,6 +634,7 @@ class ChatPage extends LitElement {
`} `}
<div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}"> <div class="chatbar" style="${this.chatMessageSize >= 750 && 'padding-bottom: 7px'}">
<chat-text-editor <chat-text-editor
?hasGlobalEvents=${true}
iframeId="_chatEditorDOM" iframeId="_chatEditorDOM"
placeholder=${this.chatEditorPlaceholder} placeholder=${this.chatEditorPlaceholder}
._sendMessage=${this._sendMessage} ._sendMessage=${this._sendMessage}
@ -682,10 +686,15 @@ class ChatPage extends LitElement {
this.chatEditor = editor this.chatEditor = editor
} }
setChatEditorNewChat(editor){
this.chatEditorNewChat = editor
}
insertImage(file){ insertImage(file){
if(file.type.includes('image')){ if(file.type.includes('image')){
this.imageFile = file this.imageFile = file
this.chatEditor.disable()
// this.changeMsgInput('newChat') // this.changeMsgInput('newChat')
// this.initChatEditor(); // this.initChatEditor();
// this.chatEditor.disable(); // this.chatEditor.disable();
@ -707,19 +716,19 @@ class ChatPage extends LitElement {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
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
if (e.code === "Space" || e.keyCode === 32 || e.which === 32) { // if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
this.chatEditor.insertText('&nbsp;'); // this.chatEditor.insertText('&nbsp;');
} else if (inputKeyCodes.includes(e.keyCode)) { // } else if (inputKeyCodes.includes(e.keyCode)) {
this.chatEditor.insertText(e.key); // this.chatEditor.insertText(e.key);
return this.chatEditor.focus(); // return this.chatEditor.focus();
} else { // } else {
return this.chatEditor.focus(); // return this.chatEditor.focus();
} // }
} // }
}); // });
window.addEventListener('storage', () => { window.addEventListener('storage', () => {
const checkLanguage = localStorage.getItem('qortalLanguage') const checkLanguage = localStorage.getItem('qortalLanguage')
@ -793,21 +802,15 @@ class ChatPage extends LitElement {
async updated(changedProperties) { 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')) { if (changedProperties && changedProperties.has('editedMessageObj')) {
this.chatEditor.insertText(this.editedMessageObj.message) this.chatEditor.insertText(this.editedMessageObj.message)
} }
if(changedProperties && changedProperties.has("imageFile")) { // if(changedProperties && changedProperties.has("imageFile")) {
this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption'); // this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption');
this.chatbarCaption.focus(); // this.chatbarCaption.focus();
} // }
} }
onCaptionChange(e) { onCaptionChange(e) {
@ -1280,6 +1283,7 @@ class ChatPage extends LitElement {
} }
async _sendMessage(outSideMsg) { async _sendMessage(outSideMsg) {
// have params to determine if it's a reply or not // have params to determine if it's a reply or not
// have variable to determine if it's a response, holds signature in constructor // have variable to determine if it's a response, holds signature in constructor
// need original message signature // need original message signature
@ -1290,9 +1294,8 @@ class ChatPage extends LitElement {
this.isLoading = true; this.isLoading = true;
this.chatEditor.disable(); this.chatEditor.disable();
const textInput = this.shadowRoot.querySelector('chat-text-editor').shadowRoot.getElementById('messageBox'); this.chatEditorNewChat.disable()
console.log({textInput}) const messageText = this.chatEditor.mirror.value;
const messageText = textInput.value;
// 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();
@ -1378,6 +1381,7 @@ class ChatPage extends LitElement {
console.error(error) console.error(error)
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
return return
} }
typeMessage = 'edit'; typeMessage = 'edit';
@ -1411,18 +1415,20 @@ class ChatPage extends LitElement {
parentEpml.request('showSnackBar', get("chatpage.cchange27")); parentEpml.request('showSnackBar', get("chatpage.cchange27"));
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
return; return;
} }
const image = this.imageFile
const id = this.uid(); const id = this.uid();
const identifier = `qchat_${id}`; const identifier = `qchat_${id}`;
let compressedFile = ''; let compressedFile = '';
await new Promise(resolve => { await new Promise(resolve => {
new Compressor( outSideMsg.imageFile, { new Compressor( image, {
quality: .6, quality: .6,
maxWidth: 500, maxWidth: 500,
success(result){ success(result){
const file = new File([result], "name", { const file = new File([result], "name", {
type: outSideMsg.imageFile.type type: image.type
}); });
compressedFile = file compressedFile = file
resolve() resolve()
@ -1438,6 +1444,7 @@ class ChatPage extends LitElement {
parentEpml.request('showSnackBar', get("chatpage.cchange26")); parentEpml.request('showSnackBar', get("chatpage.cchange26"));
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
return; return;
} }
@ -1459,10 +1466,15 @@ class ChatPage extends LitElement {
console.error(error) console.error(error)
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
return return
} }
const messageTextWithImage = this.chatEditorNewChat.mirror.value;
// Format and Sanitize Message
const sanitizedMessageWithImage = messageTextWithImage.replace(/&nbsp;/gi, ' ').replace(/<br\s*[\/]?>/gi, '\n');
const trimmedMessageWithImage = sanitizedMessageWithImage.trim();
const messageObject = { const messageObject = {
messageText: outSideMsg.caption, messageText: trimmedMessageWithImage,
images: [{ images: [{
service: "IMAGE", service: "IMAGE",
name: userName, name: userName,
@ -1529,9 +1541,11 @@ class ChatPage extends LitElement {
} else if (/^\s*$/.test(trimmedMessage)) { } else if (/^\s*$/.test(trimmedMessage)) {
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
} else if (this.chatMessageSize >= 1000) { } else if (this.chatMessageSize >= 1000) {
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
let err1string = get("chatpage.cchange29"); let err1string = get("chatpage.cchange29");
parentEpml.request('showSnackBar', `${err1string}`); parentEpml.request('showSnackBar', `${err1string}`);
} else if (this.repliedToMessageObj) { } else if (this.repliedToMessageObj) {
@ -1675,6 +1689,7 @@ class ChatPage extends LitElement {
this.isLoading = false; this.isLoading = false;
this.chatEditor.enable(); this.chatEditor.enable();
this.chatEditorNewChat.enable()
this.closeEditMessageContainer() this.closeEditMessageContainer()
this.closeRepliedToContainer() this.closeRepliedToContainer()
}; };

82
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
View File

@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit"
import { render } from "lit/html.js" import { render } from "lit/html.js"
import { escape, unescape } from 'html-escaper'; import { escape, unescape } from 'html-escaper';
import { EmojiPicker } from 'emoji-picker-js'; import { EmojiPicker } from 'emoji-picker-js';
import { inputKeyCodes } from '../../utils/keyCodes.js'
class ChatTextEditor extends LitElement { class ChatTextEditor extends LitElement {
@ -17,7 +18,8 @@ class ChatTextEditor extends LitElement {
editedMessageObj: {type: Object}, editedMessageObj: {type: Object},
chatEditor: {type: Object}, chatEditor: {type: Object},
setChatEditor: {attribute: false}, setChatEditor: {attribute: false},
iframeId: {type: String} iframeId: {type: String},
hasGlobalEvents: {type: Boolean}
} }
} }
@ -126,6 +128,9 @@ class ChatTextEditor extends LitElement {
this.isLoading = false this.isLoading = false
this.getMessageSize = this.getMessageSize.bind(this) this.getMessageSize = this.getMessageSize.bind(this)
this.calculateIFrameHeight = this.calculateIFrameHeight.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 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('&nbsp;');
} 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() { async firstUpdated() {
console.log('this.hasGlobalEvents', this.hasGlobalEvents)
if(this.hasGlobalEvents){
this.addGlobalEventListener()
}
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(this.iframeId); this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId);
document.addEventListener('keydown', (e) => { console.log('test', this.chatMessageInput )
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('&nbsp;');
} else if (inputKeyCodes.includes(e.keyCode)) {
this.chatEditor.insertText(e.key);
return this.chatEditor.focus();
} else {
return this.chatEditor.focus();
}
}
});
this.emojiPicker = new EmojiPicker({ this.emojiPicker = new EmojiPicker({
style: "twemoji", style: "twemoji",
@ -227,10 +249,13 @@ class ChatTextEditor extends LitElement {
showVariants: false, showVariants: false,
showAnimation: false, showAnimation: false,
position: 'top-start', 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 => { this.emojiPicker.on('emoji', selection => {
console.log('hello selection')
const emojiHtmlString = `<img class="emoji" draggable="false" alt="${selection.emoji}" src="${selection.url}">`; const emojiHtmlString = `<img class="emoji" draggable="false" alt="${selection.emoji}" src="${selection.url}">`;
this.chatEditor.insertEmoji(emojiHtmlString); this.chatEditor.insertEmoji(emojiHtmlString);
}); });
@ -330,7 +355,7 @@ class ChatTextEditor extends LitElement {
ChatEditor.prototype.getValue = function () { ChatEditor.prototype.getValue = function () {
const editor = this; const editor = this;
if (editor.content) { if (editor.contentDiv) {
return editor.contentDiv.innerHTML; return editor.contentDiv.innerHTML;
} }
}; };
@ -404,6 +429,10 @@ class ChatTextEditor extends LitElement {
editor.focus(); editor.focus();
}; };
ChatEditor.prototype.getMirrorElement = function (){
return editor.mirror
}
ChatEditor.prototype.disable = function () { ChatEditor.prototype.disable = function () {
const editor = this; const editor = this;
@ -467,10 +496,12 @@ class ChatTextEditor extends LitElement {
const filteredValue = chatInputValue.replace(/<img.*?alt=".*?/g, '').replace(/".?src=.*?>/g, ''); const filteredValue = chatInputValue.replace(/<img.*?alt=".*?/g, '').replace(/".?src=.*?>/g, '');
let unescapedValue = editorConfig.unescape(filteredValue); let unescapedValue = editorConfig.unescape(filteredValue);
console.log({unescapedValue})
editor.mirror.value = unescapedValue; editor.mirror.value = unescapedValue;
}; };
ChatEditor.prototype.listenChanges = function () { ChatEditor.prototype.listenChanges = function () {
const editor = this; const editor = this;
const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste'] const events = ['drop', 'contextmenu', 'mouseup', 'click', 'touchend', 'keydown', 'blur', 'paste']
@ -535,8 +566,17 @@ class ChatTextEditor extends LitElement {
editor.updateMirror(); editor.updateMirror();
if (editor.state() === 'false') return false; if (editor.state() === 'false') return false;
if(editorConfig.iframeId === 'newChat'){
editorConfig.sendFunc(
{
type: 'image',
imageFile: editorConfig.imageFile,
}
);
} else {
editorConfig.sendFunc();
}
editorConfig.sendFunc();
e.preventDefault(); e.preventDefault();
return false; return false;
} }
@ -586,13 +626,13 @@ class ChatTextEditor extends LitElement {
ChatEditor.prototype.remove = function () { ChatEditor.prototype.remove = function () {
const editor = this; const editor = this;
editor.content.body
var old_element = editor.content.body var old_element = editor.content.body
var new_element = old_element.cloneNode(true); var new_element = old_element.cloneNode(true);
editor.content.body.parentNode.replaceChild(new_element, old_element); editor.content.body.parentNode.replaceChild(new_element, old_element);
while (editor.content.body.firstChild) { while (editor.content.body.firstChild) {
editor.content.body.removeChild(editor.content.body.lastChild); editor.content.body.removeChild(editor.content.body.lastChild);
} }
}; };
ChatEditor.prototype.init = function () { ChatEditor.prototype.init = function () {
@ -613,6 +653,7 @@ editor.content.body.appendChild(elemDiv);
editor.contentDiv = editor.frame.contentDocument.body.firstChild editor.contentDiv = editor.frame.contentDocument.body.firstChild
editor.styles(); editor.styles();
editor.listenChanges(); editor.listenChanges();
}; };
@ -635,7 +676,10 @@ editor.content.body.appendChild(elemDiv);
imageFile: this.imageFile, imageFile: this.imageFile,
requestUpdate: this.requestUpdate, requestUpdate: this.requestUpdate,
insertImage: this.insertImage, insertImage: this.insertImage,
chatMessageSize: this.chatMessageSize chatMessageSize: this.chatMessageSize,
addGlobalEventListener: this.addGlobalEventListener,
removeGlobalEventListener: this.removeGlobalEventListener,
iframeId: this.iframeId
}; };
console.log('after') console.log('after')
const newChat = new ChatEditor(editorConfig) const newChat = new ChatEditor(editorConfig)