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

fix dynamic iframe height

Browse Source
This commit is contained in:
Phillip Lang Martinez 2022-11-11 17:26:25 +02:00
parent 1814940f0e
commit 6dab5d612b
2 changed files with 44 additions and 22 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}, chatMessageSize: { type: Number},
imageFile: {type: Object}, imageFile: {type: Object},
isUploadingImage: {type: Boolean}, isUploadingImage: {type: Boolean},
caption: { type: String } caption: { type: String },
chatEditor: {type: Object}
} }
} }
@ -532,7 +533,7 @@ class ChatPage extends LitElement {
this.messagesRendered = [] this.messagesRendered = []
this.repliedToMessageObj = null this.repliedToMessageObj = null
this.editedMessageObj = null this.editedMessageObj = null
this.iframeHeight = 40 this.iframeHeight = 42
this.chatMessageSize = 0 this.chatMessageSize = 0
this.imageFile = null this.imageFile = null
this.uid = new ShortUniqueId() this.uid = new ShortUniqueId()
@ -628,7 +629,7 @@ class ChatPage extends LitElement {
</mwc-button> </mwc-button>
</mwc-dialog> </mwc-dialog>
</div> </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"> <div class="typing-area">
${this.repliedToMessageObj && html` ${this.repliedToMessageObj && html`
<div class="repliedTo-container"> <div class="repliedTo-container">
@ -683,7 +684,8 @@ class ChatPage extends LitElement {
</div> </div>
</div> </div>
<textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea> <textarea style="color: var(--black);" tabindex='1' ?autofocus=${true} ?disabled=${this.isLoading || this.isLoadingMessages} id="messageBox" rows="1"></textarea>
<iframe id="_chatEditorDOM" 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> </iframe>
<button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}> <button class="emoji-button" ?disabled=${this.isLoading || this.isLoadingMessages}>
${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`} ${html`<img class="emoji" draggable="false" alt="😀" src="/emoji/svg/1f600.svg" />`}
@ -776,6 +778,8 @@ class ChatPage extends LitElement {
} }
async firstUpdated() { async firstUpdated() {
// TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...) // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
@ -907,7 +911,15 @@ class ChatPage extends LitElement {
} }
calculateIFrameHeight(height) { 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) { onCaptionChange(e) {
@ -1942,7 +1954,7 @@ class ChatPage extends LitElement {
const editor = this; const editor = this;
if (editor.content) { if (editor.content) {
return editor.content.body.innerHTML; return editor.contentDiv.innerHTML;
} }
}; };
@ -1950,7 +1962,7 @@ class ChatPage extends LitElement {
const editor = this; const editor = this;
if (value) { if (value) {
editor.content.body.innerHTML = value; editor.contentDiv.innerHTML = value;
editor.updateMirror(); editor.updateMirror();
} }
@ -1959,9 +1971,10 @@ class ChatPage extends LitElement {
ChatEditor.prototype.resetValue = function () { ChatEditor.prototype.resetValue = function () {
const editor = this; const editor = this;
editor.content.body.innerHTML = ''; editor.contentDiv.innerHTML = '';
editor.updateMirror(); editor.updateMirror();
editor.focus(); editor.focus();
editorConfig.calculateIFrameHeight()
}; };
ChatEditor.prototype.styles = function () { ChatEditor.prototype.styles = function () {
@ -1973,7 +1986,7 @@ class ChatPage extends LitElement {
html { html {
cursor: text; cursor: text;
} }
body { div {
font-size: 1rem; font-size: 1rem;
line-height: 1.38rem; line-height: 1.38rem;
font-weight: 400; font-weight: 400;
@ -1983,8 +1996,9 @@ class ChatPage extends LitElement {
white-space: break-spaces; white-space: break-spaces;
word-break: break-word; word-break: break-word;
outline: none; outline: none;
min-height: 20px;
} }
body[contentEditable=true]:empty:before { div[contentEditable=true]:empty:before {
content: attr(data-placeholder); content: attr(data-placeholder);
display: block; display: block;
color: rgb(103, 107, 113); color: rgb(103, 107, 113);
@ -1993,7 +2007,7 @@ class ChatPage extends LitElement {
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
} }
body[contentEditable=false]{ div[contentEditable=false]{
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }
img.emoji { img.emoji {
@ -2009,26 +2023,26 @@ class ChatPage extends LitElement {
ChatEditor.prototype.enable = function () { ChatEditor.prototype.enable = function () {
const editor = this; const editor = this;
editor.content.body.setAttribute('contenteditable', 'true'); editor.contentDiv.setAttribute('contenteditable', 'true');
editor.focus(); editor.focus();
}; };
ChatEditor.prototype.disable = function () { ChatEditor.prototype.disable = function () {
const editor = this; const editor = this;
editor.content.body.setAttribute('contenteditable', 'false'); editor.contentDiv.setAttribute('contenteditable', 'false');
}; };
ChatEditor.prototype.state = function () { ChatEditor.prototype.state = function () {
const editor = this; const editor = this;
return editor.content.body.getAttribute('contenteditable'); return editor.contentDiv.getAttribute('contenteditable');
}; };
ChatEditor.prototype.focus = function () { ChatEditor.prototype.focus = function () {
const editor = this; const editor = this;
editor.content.body.focus(); editor.contentDiv.focus();
}; };
ChatEditor.prototype.clearSelection = function () { ChatEditor.prototype.clearSelection = function () {
@ -2087,6 +2101,7 @@ class ChatPage extends LitElement {
for (let i = 0; i < events.length; i++) { for (let i = 0; i < events.length; i++) {
const event = events[i] const event = events[i]
editor.content.body.addEventListener(event, async function (e) { editor.content.body.addEventListener(event, async function (e) {
console.log({event})
if (e.type === 'click') { if (e.type === 'click') {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -2199,10 +2214,16 @@ class ChatPage extends LitElement {
editor.mirror = editorConfig.mirrorElement; editor.mirror = editorConfig.mirrorElement;
editor.content = (editor.frame.contentDocument || editor.frame.document); 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.styles();
editor.listenChanges(); editor.listenChanges();
}; };

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

@ -274,7 +274,7 @@ class MessageTemplate extends LitElement {
let hideit = hidemsg.includes(this.messageObj.sender); let hideit = hidemsg.includes(this.messageObj.sender);
levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`; levelFounder = html`<level-founder checkleveladdress="${this.messageObj.sender}"></level-founder>`;
console.log({message})
if (this.messageObj.senderName) { if (this.messageObj.senderName) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]; const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node];
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port; const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port;
@ -334,7 +334,8 @@ class MessageTemplate extends LitElement {
console.error(error); 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` return hideit ? html`<li class="clearfix"></li>` : html`
<li class="clearfix message-parent"> <li class="clearfix message-parent">
@ -367,7 +368,7 @@ class MessageTemplate extends LitElement {
</div> </div>
` : html``} ` : html``}
<div id="messageContent" class="message"> <div id="messageContent" class="message">
${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(message)))} ${unsafeHTML(this.emojiPicker.parse(replacedMessage))}
</div> </div>
</div> </div>
<div class="message-reactions"> <div class="message-reactions">