qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'feature/implement-logic-edit-reply-messages' of https://github.com/PhillipLangMartinez/qortal-ui into feature/implement-UI-edit-reply-messages

Browse Source
This commit is contained in:
Justin Ferrari 2022-11-11 15:07:05 -05:00
commit 5e4c5cf862
2 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,7 +61,8 @@ class ChatPage extends LitElement {
chatMessageSize: { type: Number},
imageFile: {type: Object},
isUploadingImage: {type: Boolean},
caption: { type: String }
caption: { type: String },
chatEditor: {type: Object}
}
}
@ -533,7 +534,7 @@ class ChatPage extends LitElement {
this.messagesRendered = []
this.repliedToMessageObj = null
this.editedMessageObj = null
this.iframeHeight = 40
this.iframeHeight = 42
this.chatMessageSize = 0
this.imageFile = null
this.uid = new ShortUniqueId()
@ -629,7 +630,7 @@ class ChatPage extends LitElement {
</mwc-button>
</mwc-dialog>
</div>
<div class="chat-text-area" style="${`height: ${this.iframeHeight}px; ${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
<div class="chat-text-area" style="${`${(this.repliedToMessageObj || this.editedMessageObj) && "min-height: 120px"}`}">
<div class="typing-area">
${this.repliedToMessageObj && html`
<div class="repliedTo-container">
@ -688,7 +689,8 @@ class ChatPage extends LitElement {
`
)}
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe style="${`height: ${this.iframeHeight}px`}" class="chat-editor" id="_chatEditorDOM" tabindex="-1" height=${this.iframeHeight}>
<iframe
id="_chatEditorDOM" class="chat-editor" tabindex="-1" height=${this.iframeHeight}>
</iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@ -781,6 +783,8 @@ class ChatPage extends LitElement {
}
async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -913,7 +917,15 @@ class ChatPage extends LitElement {
}
calculateIFrameHeight(height) {
this.iframeHeight = height;
setTimeout(()=> {
const editorTest = this.shadowRoot.getElementById('_chatEditorDOM').contentWindow.document.getElementById('testingId').scrollHeight
console.log('editor', editorTest)
this.iframeHeight = editorTest + 20
}, 50)
}
onCaptionChange(e) {
@ -1944,7 +1956,7 @@ class ChatPage extends LitElement {
const editor = this;
if (editor.content) {
return editor.content.body.innerHTML;
return editor.contentDiv.innerHTML;
}
};
@ -1952,7 +1964,7 @@ class ChatPage extends LitElement {
const editor = this;
if (value) {
editor.content.body.innerHTML = value;
editor.contentDiv.innerHTML = value;
editor.updateMirror();
}
@ -1961,9 +1973,10 @@ class ChatPage extends LitElement {
ChatEditor.prototype.resetValue = function () {
const editor = this;
editor.content.body.innerHTML = '';
editor.contentDiv.innerHTML = '';
editor.updateMirror();
editor.focus();
editorConfig.calculateIFrameHeight()
};
ChatEditor.prototype.styles = function () {
@ -1975,7 +1988,7 @@ class ChatPage extends LitElement {
html {
cursor: text;
}
body {
div {
font-size: 1rem;
line-height: 1.38rem;
font-weight: 400;
@ -1985,8 +1998,9 @@ class ChatPage extends LitElement {
white-space: break-spaces;
word-break: break-word;
outline: none;
min-height: 20px;
}
body[contentEditable=true]:empty:before {
div[contentEditable=true]:empty:before {
content: attr(data-placeholder);
display: block;
color: rgb(103, 107, 113);
@ -1995,7 +2009,7 @@ class ChatPage extends LitElement {
user-select: none;
white-space: nowrap;
}
body[contentEditable=false]{
div[contentEditable=false]{
background: rgba(0,0,0,0.1);
}
img.emoji {
@ -2011,26 +2025,26 @@ class ChatPage extends LitElement {
ChatEditor.prototype.enable = function () {
const editor = this;
editor.content.body.setAttribute('contenteditable', 'true');
editor.contentDiv.setAttribute('contenteditable', 'true');
editor.focus();
};
ChatEditor.prototype.disable = function () {
const editor = this;
editor.content.body.setAttribute('contenteditable', 'false');
editor.contentDiv.setAttribute('contenteditable', 'false');
};
ChatEditor.prototype.state = function () {
const editor = this;
return editor.content.body.getAttribute('contenteditable');
return editor.contentDiv.getAttribute('contenteditable');
};
ChatEditor.prototype.focus = function () {
const editor = this;
editor.content.body.focus();
editor.contentDiv.focus();
};
ChatEditor.prototype.clearSelection = function () {
@ -2089,6 +2103,7 @@ class ChatPage extends LitElement {
for (let i = 0; i < events.length; i++) {
const event = events[i]
editor.content.body.addEventListener(event, async function (e) {
console.log({event})
if (e.type === 'click') {
e.preventDefault();
e.stopPropagation();
@ -2201,10 +2216,16 @@ class ChatPage extends LitElement {
editor.mirror = editorConfig.mirrorElement;
editor.content = (editor.frame.contentDocument || editor.frame.document);
editor.content.body.setAttribute('contenteditable', 'true');
editor.content.body.setAttribute('data-placeholder', editorConfig.placeholder);
editor.content.body.setAttribute('spellcheck', 'false');
let elemDiv = document.createElement('div');
elemDiv.setAttribute('contenteditable', 'true');
elemDiv.setAttribute('spellcheck', 'false');
elemDiv.setAttribute('data-placeholder', editorConfig.placeholder);
elemDiv.style.cssText = 'width:100%';
elemDiv.id = 'testingId'
editor.content.body.appendChild(elemDiv);
console.log('body', editor.frame.contentDocument.body, 'div', editor.frame.contentDocument.body.firstChild)
editor.contentDiv = editor.frame.contentDocument.body.firstChild
editor.styles();
editor.listenChanges();
};

12
qortal-ui-plugins/plugins/core/components/ChatScroller.js
View File

@ -72,7 +72,6 @@ class ChatScroller extends LitElement {
return messageArray
}, [])
console.log({formattedMessages})
return html`
<ul id="viewElement" class="chat-list clearfix">
<div id="upObserver"></div>
@ -248,8 +247,6 @@ class MessageTemplate extends LitElement {
}
render() {
console.log('isFirst', this.isFirstMessage);
console.log("is single message in group", this.isSingleMessageInGroup);
const hidemsg = this.hideMessages;
let message = "";
let reactions = [];
@ -277,7 +274,7 @@ class MessageTemplate extends LitElement {
let hideit = hidemsg.includes(this.messageObj.sender);
levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`;
console.log({message})
if (this.messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@ -298,7 +295,6 @@ class MessageTemplate extends LitElement {
this.isImageLoaded = true;
}
imageHTMLRes.onerror = () => {
console.log('inputRef', this.imageFetches);
if (this.imageFetches < 4) {
setTimeout(() => {
this.imageFetches = this.imageFetches + 1;
@ -338,7 +334,8 @@ class MessageTemplate extends LitElement {
console.error(error);
}
}
const escapedMessage = this.escapeHTML(message)
const replacedMessage = escapedMessage.replace(new RegExp('\r?\n','g'), '<br />');
return hideit ? html`<li class="clearfix"></li>` : html`
<li
@ -408,7 +405,7 @@ class MessageTemplate extends LitElement {
</div>
` : html``}
<div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))}
${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
</div>
</div>
<chat-menu
@ -445,7 +442,6 @@ class MessageTemplate extends LitElement {
</span>`
})}
</div>
</div>
</div>
</div>