Qortal
/
qortal-ui
mirror of https://github.com/qortal/qortal-ui
4
1
Fork 4
Code Issues Projects Releases Wiki Activity
Browse Source

fix problems

pull/127/head
Phillip Lang Martinez 2 years ago
parent
67e3dd71fa
commit
311e902bdc
2 changed files with 134 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 125
      qortal-ui-plugins/plugins/core/components/ChatPage.js
  2. 84
      qortal-ui-plugins/plugins/core/components/ChatTextEditor.js

125
qortal-ui-plugins/plugins/core/components/ChatPage.js
Unescape 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
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}> }}" id="newChat" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe> </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()
}; };

84
qortal-ui-plugins/plugins/core/components/ChatTextEditor.js
Unescape 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(); editorConfig.sendFunc(
{
type: 'image',
imageFile: editorConfig.imageFile,
}
);
} else {
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)

Write Preview
Loading…
Cancel
Save