RanchiMall/messenger
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simplifying date card rendering

Browse Source
This commit is contained in:
sairaj mote 2022-06-21 00:27:04 +05:30
parent 5e2d31bd3f
commit 459edc47a0
1 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
index.html
View File

@ -1526,7 +1526,6 @@
} }
this.lastScrollHeight = this.lazyContainer.scrollHeight this.lastScrollHeight = this.lazyContainer.scrollHeight
this.lastScrollTop = this.lazyContainer.scrollTop this.lastScrollTop = this.lazyContainer.scrollTop
console.log(this.updateStartIndex, this.updateEndIndex)
this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach((element) => { this.arrayOfElements.slice(this.updateStartIndex, this.updateEndIndex).forEach((element) => {
frag.append(this.renderFn(element)) frag.append(this.renderFn(element))
}) })
@ -1848,14 +1847,21 @@
messageContent.append(isEmoji(message)) messageContent.append(isEmoji(message))
} }
const messageDate = getFormattedTime(timestamp, 'date-only') const messageDate = getFormattedTime(timestamp, 'date-only')
if (!renderedDates.hasOwnProperty(messageDate) || renderedDates[messageDate].timestamp > timestamp) { // rendering Date card when date changes after a message
renderedDates[messageDate] = { let dateCard
timestamp, if (!renderedDates.hasOwnProperty(messageDate) || renderedDates[messageDate] > timestamp) {
isRendered: false renderedDates[messageDate] = timestamp
const previousDateCard = getRef('messages_container').querySelector(`.date-card[data-date="${messageDate}"]`)
if (previousDateCard) {
dateCard = previousDateCard.cloneNode(true)
previousDateCard.remove()
} else {
dateCard = html.node`<time class="date-card" data-date="${messageDate}">${messageDate}</time>`
} }
} }
const className = `message ${category} ${unconfirmed ? 'unconfirmed' : ''} ${senderName ? 'distinct-sender' : ''}` const className = `message ${category} ${unconfirmed ? 'unconfirmed' : ''} ${senderName ? 'distinct-sender' : ''}`
return html.node` return html.node`
${dateCard}
<div class="${className}" id="${`${floID}_${timestamp}`}" data-date="${messageDate}"> <div class="${className}" id="${`${floID}_${timestamp}`}" data-date="${messageDate}">
${senderName} ${senderName}
<p class="message-body">${messageContent}</p> <p class="message-body">${messageContent}</p>
@ -2650,21 +2656,7 @@
chatLazyLoader.update(messages) chatLazyLoader.update(messages)
} else { } else {
chatLazyLoader = new LazyLoader('#messages_container', messages, render.messageBubble, { chatLazyLoader = new LazyLoader('#messages_container', messages, render.messageBubble, {
bottomFirst: true, domUpdated: () => { bottomFirst: true
for (const date in renderedDates) {
if (renderedDates[date].isRendered) continue
let dateCard
const previousDateCard = getRef('messages_container').querySelector(`.date-card[data-date="${date}"]`)
if (previousDateCard) {
dateCard = previousDateCard.cloneNode(true)
previousDateCard.remove()
} else {
dateCard = html.node`<time class="date-card" data-date="${date}">${date}</time>`
}
getRef('messages_container').querySelector(`.message[data-date="${date}"]`).before(dateCard)
renderedDates[date].isRendered = true
}
}
}); });
} }
chatLazyLoader.init() chatLazyLoader.init()