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
Split 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},
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
<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>
</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('&nbsp;');
} 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('&nbsp;');
// } 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(/&nbsp;/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(/&nbsp;/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()
};

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 { 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('&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() {
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('&nbsp;');
} 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;
editorConfig.sendFunc();
if(editorConfig.iframeId === 'newChat'){
editorConfig.sendFunc(
{
type: 'image',
imageFile: editorConfig.imageFile,
}
);
} else {
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)

Write Preview
Loading…
Cancel
Save