-
-
@@ -1133,12 +1131,6 @@
cardContainer.setAttribute("name", name || 'Unknown')
cardContainer.setAttribute("flo-id", floID)
cardContainer.querySelector('.name').textContent = name || 'Unknown'
- messenger.getChat(floID).then(chat => {
- const lastMessage = Object.values(chat).pop()
- console.log(chat, lastMessage)
- cardContainer.querySelector('.last-message').textContent = lastMessage.message
- cardContainer.querySelector('.time').textContent = getFormatedTime(lastMessage.time, true)
- })
let initial = card.querySelector('.initial')
initial.textContent = name ? name.charAt(0) : 'U'
let color = randomColor()
@@ -1152,19 +1144,20 @@
getRef('mail_contact_list').append(duplicateCard);
}
else{
+
+ messenger.getChat(floID).then(chat => {
+ const lastMessage = Object.values(chat).pop()
+ cardContainer.innerHTML += `
+
${lastMessage.message}
+
${getFormatedTime(lastMessage.time, true)}
`
+ })
cardContainer.classList.add('chat')
getRef('dm_container').append(card);
}
},
messageBubble(floID, message, timestamp, category, unconfirmed = false){
let card = getRef('message_template').content.cloneNode(true),
- cardContainer = card.querySelector('.message'),
- time = new Date(timestamp).toString(),
- minutes = String(new Date(timestamp).getMinutes()),
- hours = new Date(timestamp).getHours(),
- year = new Date(timestamp).getFullYear()
- minutes = minutes.length === 1 ? `0${minutes}` : minutes
- let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
+ cardContainer = card.querySelector('.message')
cardContainer.id = `${floID}_${timestamp}`
if(unconfirmed)
@@ -1179,29 +1172,42 @@
cardContainer.children[0].append(anchorTag)
}
else{
- if(message.length === 2 && isEmoji(message))
+ let [messageBody, isOnlyEmoji] = isEmoji(message)
+ if(isOnlyEmoji)
cardContainer.classList.add('big-emoji')
- cardContainer.children[0].textContent = message
+ cardContainer.children[0].append(messageBody)
}
+
+ let time = new Date(timestamp).toString(),
+ minutes = String(new Date(timestamp).getMinutes()),
+ hours = new Date(timestamp).getHours(),
+ year = new Date(timestamp).getFullYear()
+ minutes = minutes.length === 1 ? `0${minutes}` : minutes
+ let finalHours = hours - 12 > 0 ? `${hours - 12}:${minutes} pm` : `${hours}:${minutes} am`
+
cardContainer.children[1].textContent = finalHours
+
if(currentFloID !== floID){
currentDate = null
currentFloID = floID
+ renderedDates.clear()
}
- if(`${time.slice(4, 10)} ${year}` !== currentDate){
+
+ if(!renderedDates.has(`${time.slice(4, 10)} ${year}`) && `${time.slice(4, 10)} ${year}` !== currentDate){
let dateCard = document.createElement('h5')
dateCard.classList.add('date-card')
dateCard.textContent = new Date().getFullYear() !== year ? `${time.slice(4, 10)} ${year}` : time.slice(4, 10)
currentDate = `${time.slice(4, 10)} ${year}`
let frag = document.createDocumentFragment()
frag.append(dateCard, card)
+ renderedDates.set(currentDate, currentDate)
return frag
}
else
return card;
},
}
- let currentDate, currentFloID
+ let currentDate, currentFloID, renderedDates = new Map()
const isValidUrl = (url) => {
try {
@@ -1213,21 +1219,34 @@
};
const isEmoji = (txt) => {
- if(/(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\u0023-\u0039]\ufe0f?\u20e3|\u3299|\u3297|\u303d|\u3030|\u24c2|\ud83c[\udd70-\udd71]|\ud83c[\udd7e-\udd7f]|\ud83c\udd8e|\ud83c[\udd91-\udd9a]|\ud83c[\udde6-\uddff]|\ud83c[\ude01-\ude02]|\ud83c\ude1a|\ud83c\ude2f|\ud83c[\ude32-\ude3a]|\ud83c[\ude50-\ude51]|\u203c|\u2049|[\u25aa-\u25ab]|\u25b6|\u25c0|[\u25fb-\u25fe]|\u00a9|\u00ae|\u2122|\u2139|\ud83c\udc04|[\u2600-\u26FF]|\u2b05|\u2b06|\u2b07|\u2b1b|\u2b1c|\u2b50|\u2b55|\u231a|\u231b|\u2328|\u23cf|[\u23e9-\u23f3]|[\u23f8-\u23fa]|\ud83c\udccf|\u2934|\u2935|[\u2190-\u21ff])/.test(txt))
- return true
- else
- return false
+ const rx = /([\uD800-\uDBFF][\uDC00-\uDFFF](?:[\u200D\uFE0F][\uD800-\uDBFF][\uDC00-\uDFFF]){2,}|\uD83D\uDC69(?:\u200D(?:(?:\uD83D\uDC69\u200D)?\uD83D\uDC67|(?:\uD83D\uDC69\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|\uD83D\uDC69\u200D(?:\uD83D\uDC69\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C\uDFF3\uFE0F\u200D\uD83C\uDF08|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642]\uFE0F|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC6F\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3C-\uDD3E\uDDD6-\uDDDF])\u200D[\u2640\u2642]\uFE0F|\uD83C\uDDFD\uD83C\uDDF0|\uD83C\uDDF6\uD83C\uDDE6|\uD83C\uDDF4\uD83C\uDDF2|\uD83C\uDDE9(?:\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF])|\uD83C\uDDF7(?:\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC])|\uD83C\uDDE8(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uFE0F\u200D[\u2640\u2642]|(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2640\u2642])\uFE0F|(?:\uD83D\uDC41\uFE0F\u200D\uD83D\uDDE8|\uD83D\uDC69(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\uD83D\uDC69\u200D[\u2695\u2696\u2708]|\uD83D\uDC68(?:(?:\uD83C[\uDFFB-\uDFFF])\u200D[\u2695\u2696\u2708]|\u200D[\u2695\u2696\u2708]))\uFE0F|\uD83C\uDDF2(?:\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF])|\uD83D\uDC69\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D(?:\uD83D[\uDC68\uDC69])|\uD83D[\uDC68\uDC69]))|\uD83C\uDDF1(?:\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE])|\uD83C\uDDEF(?:\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5])|\uD83C\uDDED(?:\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA])|\uD83C\uDDEB(?:\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7])|[#\*0-9]\uFE0F\u20E3|\uD83C\uDDE7(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF])|\uD83C\uDDE6(?:\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF])|\uD83C\uDDFF(?:\uD83C[\uDDE6\uDDF2\uDDFC])|\uD83C\uDDF5(?:\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE])|\uD83C\uDDFB(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA])|\uD83C\uDDF3(?:\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF])|\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62(?:\uDB40\uDC77\uDB40\uDC6C\uDB40\uDC73|\uDB40\uDC73\uDB40\uDC63\uDB40\uDC74|\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67)\uDB40\uDC7F|\uD83D\uDC68(?:\u200D(?:\u2764\uFE0F\u200D(?:\uD83D\uDC8B\u200D)?\uD83D\uDC68|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66\u200D\uD83D\uDC66|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67\u200D(?:\uD83D[\uDC66\uDC67])|\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92])|(?:\uD83C[\uDFFB-\uDFFF])\u200D(?:\uD83C[\uDF3E\uDF73\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]))|\uD83C\uDDF8(?:\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF])|\uD83C\uDDF0(?:\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF])|\uD83C\uDDFE(?:\uD83C[\uDDEA\uDDF9])|\uD83C\uDDEE(?:\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9])|\uD83C\uDDF9(?:\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF])|\uD83C\uDDEC(?:\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE])|\uD83C\uDDFA(?:\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF])|\uD83C\uDDEA(?:\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA])|\uD83C\uDDFC(?:\uD83C[\uDDEB\uDDF8])|(?:\u26F9|\uD83C[\uDFCB\uDFCC]|\uD83D\uDD75)(?:\uD83C[\uDFFB-\uDFFF])|(?:\uD83C[\uDFC3\uDFC4\uDFCA]|\uD83D[\uDC6E\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6]|\uD83E[\uDD26\uDD37-\uDD39\uDD3D\uDD3E\uDDD6-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u270A-\u270D]|\uD83C[\uDF85\uDFC2\uDFC7]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC70\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDCAA\uDD74\uDD7A\uDD90\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD30-\uDD36\uDDD1-\uDDD5])(?:\uD83C[\uDFFB-\uDFFF])|\uD83D\uDC68(?:\u200D(?:(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC67|(?:(?:\uD83D[\uDC68\uDC69])\u200D)?\uD83D\uDC66)|\uD83C[\uDFFB-\uDFFF])|(?:[\u261D\u26F9\u270A-\u270D]|\uD83C[\uDF85\uDFC2-\uDFC4\uDFC7\uDFCA-\uDFCC]|\uD83D[\uDC42\uDC43\uDC46-\uDC50\uDC66-\uDC69\uDC6E\uDC70-\uDC78\uDC7C\uDC81-\uDC83\uDC85-\uDC87\uDCAA\uDD74\uDD75\uDD7A\uDD90\uDD95\uDD96\uDE45-\uDE47\uDE4B-\uDE4F\uDEA3\uDEB4-\uDEB6\uDEC0\uDECC]|\uD83E[\uDD18-\uDD1C\uDD1E\uDD1F\uDD26\uDD30-\uDD39\uDD3D\uDD3E\uDDD1-\uDDDD])(?:\uD83C[\uDFFB-\uDFFF])?|(?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDEEB\uDEEC\uDEF4-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])|(?:[#\*0-9\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u261D\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u2660\u2663\u2665\u2666\u2668\u267B\u267F\u2692-\u2697\u2699\u269B\u269C\u26A0\u26A1\u26AA\u26AB\u26B0\u26B1\u26BD\u26BE\u26C4\u26C5\u26C8\u26CE\u26CF\u26D1\u26D3\u26D4\u26E9\u26EA\u26F0-\u26F5\u26F7-\u26FA\u26FD\u2702\u2705\u2708-\u270D\u270F\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763\u2764\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC04\uDCCF\uDD70\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE02\uDE1A\uDE2F\uDE32-\uDE3A\uDE50\uDE51\uDF00-\uDF21\uDF24-\uDF93\uDF96\uDF97\uDF99-\uDF9B\uDF9E-\uDFF0\uDFF3-\uDFF5\uDFF7-\uDFFF]|\uD83D[\uDC00-\uDCFD\uDCFF-\uDD3D\uDD49-\uDD4E\uDD50-\uDD67\uDD6F\uDD70\uDD73-\uDD7A\uDD87\uDD8A-\uDD8D\uDD90\uDD95\uDD96\uDDA4\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA-\uDE4F\uDE80-\uDEC5\uDECB-\uDED2\uDEE0-\uDEE5\uDEE9\uDEEB\uDEEC\uDEF0\uDEF3-\uDEF8]|\uD83E[\uDD10-\uDD3A\uDD3C-\uDD3E\uDD40-\uDD45\uDD47-\uDD4C\uDD50-\uDD6B\uDD80-\uDD97\uDDC0\uDDD0-\uDDE6])\uFE0F)/;
+ const res = txt.split(rx).filter(Boolean);
+ const messageBody = document.createDocumentFragment()
+ const length = res.length
+ let isOnlyEmoji = false
+ res.forEach(section => {
+ if(section.match(rx)){
+ const span = document.createElement('span')
+ if(length === 1)
+ isOnlyEmoji = true
+ else
+ span.classList.add('text-emoji')
+ span.textContent = section
+ messageBody.append(span)
+ }
+ else
+ messageBody.append(section)
+ })
+ return [messageBody, isOnlyEmoji]
}
function renderDirectUI(data) {
- console.log(data)
renderMessages(data.messages, {updateChatCard: true});
renderMailList(data.mails)
- if(Object.keys(data.messages).length && activePage.button !== getRef('chat_page_button')){
- getRef('chat_page_button').setAttribute('data-notifications', Object.keys(data.messages).length)
- notify(`${Object.keys(data.messages).length} new message(s)`)
- }
+ if(Object.keys(data.messages).length){
+ document.title = `New message(s)`
+ }
if(Object.keys(data.mails).length && activePage.button !== getRef('mail_page_button')){
getRef('mail_page_button').setAttribute('data-notifications', Object.keys(data.mails).length)
notify(`${Object.keys(data.mails).length} new mail(s)`)
@@ -1239,7 +1258,10 @@
}
window.addEventListener('focus', e => {
- console.log('focused')
+ if(activeChat.chatCard && activeChat.chatCard.classList.contains('active'))
+ setTimeout(() => {
+ activeChat.chatCard.classList.remove('unread')
+ }, 2000)
})
window.addEventListener('blur', e => {
console.log('blured')
@@ -1386,7 +1408,8 @@
//Detect emoji clicks
if(e.target.closest('.emoji')){
getRef('type_message').value += e.target.closest('.emoji').textContent
- getRef('type_message').focusIn()
+ if(window.innerWidth > 640)
+ getRef('type_message').focusIn()
}
})
@@ -1404,10 +1427,10 @@
// code for adding group members
}
else{
- if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
- getRef('chat_page_button').setAttribute('data-notifications', '0')
- getRef('chat').classList.remove('hide-completely')
contact.classList.remove('unread')
+ if(activeChat['chatCard'] === contact && window.innerWidth > 640) return
+ document.title = `FLO Messenger`
+ getRef('chat').classList.remove('hide-completely')
viewConversation(contact)
if(activeChat['chatCard'])
activeChat['chatCard'].classList.remove('active')
@@ -1423,18 +1446,67 @@
}
})
- const emojis = ["๐", "๐", "๐", "๐", "๐", "๐
", "๐", "๐คฃ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐ฅฐ", "๐", "๐","๐", "๐", "๐", "๐", "๐", "๐", "๐คช", "๐คจ", "๐ง",
- "๐ค", "๐", "๐คฉ", "๐ฅณ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "โน๏ธ", "๐ฃ", "๐", "๐ซ", "๐ฉ", "๐ฅบ", "๐ข", "๐ญ", "๐ค", "๐ ", "๐ก", "๐คฌ", "๐คฏ", "๐ณ", "๐ฅต", "๐ฅถ",
- "๐ฑ", "๐จ", "๐ฐ", "๐ฅ", "๐", "๐ค", "๐ค", "๐คญ", "๐คซ", "๐คฅ", "๐ถ", "๐", "๐", "๐ฌ", "๐", "๐ฏ", "๐ฆ", "๐ง", "๐ฎ", "๐ฒ", "๐ฅฑ", "๐ด", "๐คค", "๐ช", "๐ต", "๐ค", "๐ฅด",
- "๐คข", "๐คฎ", "๐คง", "๐ท", "๐ค", "๐ค", "๐ค", "๐ค ", "๐", "๐ฟ", "๐น", "๐บ", "๐คก", "๐ฉ", "๐ป", "๐", "โ ๏ธ", "๐ฝ", "๐พ", "๐ค", "๐", "๐บ", "๐ธ", "๐น", "๐ป", "๐ผ", "๐ฝ",
- "๐", "๐ฟ", "๐พ",
- "๐", "๐ค", "๐", "โ", "๐", "๐", "๐ค", "โ๏ธ", "๐ค", "๐ค", "๐ค", "๐ค", "๐", "๐", "๐", "๐", "๐", "โ๏ธ", "๐", "๐", "โ", "๐", "๐ค", "๐ค", "๐", "๐", "๐", "๐คฒ", "๐ค", "๐",
- "โ๏ธ", "๐
", "๐คณ", "๐ช", "๐ฆพ", "๐ฆต", "๐ฆฟ", "๐ฆถ", "๐ฃ", "๐", "๐ฆป", "๐", "๐ง ", "๐ฆท", "๐ฆด", "๐", "๐
", "๐", "๐", "๐ฉธ"
- ];
+ const emojis = [
+ "<", "๐", "๐", "๐", "๐", "๐", "๐
", "๐", "๐คฃ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐ฅฐ", "๐", "๐","๐", "๐", "๐", "๐", "๐", "๐", "๐คช", "๐คจ", "๐ง",
+ "๐ค", "๐", "๐คฉ", "๐ฅณ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "โน๏ธ", "๐ฃ", "๐", "๐ซ", "๐ฉ", "๐ฅบ", "๐ข", "๐ญ", "๐ค", "๐ ", "๐ก", "๐คฌ", "๐คฏ", "๐ณ", "๐ฅต", "๐ฅถ",
+ "๐ฑ", "๐จ", "๐ฐ", "๐ฅ", "๐", "๐ค", "๐ค", "๐คญ", "๐คซ", "๐คฅ", "๐ถ", "๐", "๐", "๐ฌ", "๐", "๐ฏ", "๐ฆ", "๐ง", "๐ฎ", "๐ฒ", "๐ฅฑ", "๐ด", "๐คค", "๐ช", "๐ต", "๐ค", "๐ฅด",
+ "๐คข", "๐คฎ", "๐คง", "๐ท", "๐ค", "๐ค", "๐ค", "๐ค ", "๐", "๐ฟ", "๐น", "๐บ", "๐คก", "๐ฉ", "๐ป", "๐", "โ ๏ธ", "๐ฝ", "๐พ", "๐ค", "๐", "๐บ", "๐ธ", "๐น", "๐ป", "๐ผ", "๐ฝ",
+ "๐", "๐ฟ", "๐พ", ">",
+
+ "<", "๐", "๐ค", "๐", "โ", "๐", "๐", "๐ค", "โ๏ธ", "๐ค", "๐ค", "๐ค", "๐ค", "๐", "๐", "๐", "๐", "๐", "โ๏ธ", "๐", "๐", "โ", "๐", "๐ค", "๐ค", "๐", "๐", "๐", "๐คฒ", "๐ค", "๐",
+ "โ๏ธ", "๐
", "๐คณ", "๐ช", "๐ฆพ", "๐ฆต", "๐ฆฟ", "๐ฆถ", "๐ฃ", "๐", "๐ฆป", "๐", "๐ง ", "๐ฆท", "๐ฆด", "๐", "๐
", "๐", "๐", "๐ฉธ", ">",
+
+ "<",
+ "๐ถ", "๐ง", "๐ง", "๐ฆ", "๐ฉ", "๐ง", "๐จ", "๐ฉโ๐ฆฑ", "๐งโ๐ฆฑ", "๐จโ๐ฆฑ", "๐ฉโ๐ฆฐ", "๐งโ๐ฆฐ", "๐จโ๐ฆฐ", "๐ฑโโ๏ธ", "๐ฑ", "๐ฑโโ๏ธ", "๐ฉโ๐ฆณ", "๐งโ๐ฆณ", "๐จโ๐ฆณ", "๐ฉโ๐ฆฒ", "๐งโ๐ฆฒ", "๐จโ๐ฆฒ", "๐ง", "๐ต", "๐ง", "๐ด", "๐ฒ", "๐ณโโ๏ธ", "๐ณ",
+ "๐ณโโ๏ธ", "๐ง", "๐ฎโโ๏ธ", "๐ฎ", "๐ฎโโ๏ธ", "๐ทโโ๏ธ", "๐ท", "๐ทโโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐ต๏ธโโ๏ธ", "๐ต๏ธ", "๐ต๏ธโโ๏ธ", "๐ฉโโ๏ธ", "๐งโโ๏ธ", "๐จโโ๏ธ", "๐ฉโ๐พ", "๐งโ๐พ", "๐จโ๐พ", "๐ฉโ๐ณ", "๐งโ๐ณ", "๐จโ๐ณ", "๐ฉโ๐", "๐งโ๐", "๐จโ๐", "๐ฉโ๐ค", "๐งโ๐ค", "๐จโ๐ค",
+ "๐ฉโ๐ซ", "๐งโ๐ซ", "๐จโ๐ซ", "๐ฉโ๐ญ", "๐งโ๐ญ", "๐จโ๐ญ", "๐ฉโ๐ป", "๐งโ๐ป", "๐จโ๐ป", "๐ฉโ๐ผ", "๐งโ๐ผ", "๐จโ๐ผ", "๐ฉโ๐ง", "๐งโ๐ง", "๐จโ๐ง", "๐ฉโ๐ฌ", "๐งโ๐ฌ", "๐จโ๐ฌ", "๐ฉโ๐จ", "๐งโ๐จ", "๐จโ๐จ", "๐ฉโ๐", "๐งโ๐", "๐จโ๐", "๐ฉโโ๏ธ", "๐งโโ๏ธ", "๐จโโ๏ธ",
+ "๐ฉโ๐", "๐งโ๐", "๐จโ๐", "๐ฉโโ๏ธ", "๐งโโ๏ธ", "๐จโโ๏ธ", "๐ฐโโ๏ธ", "๐ฐ", "๐ฐโโ๏ธ", "๐คตโโ๏ธ", "๐คต", "๐คตโโ๏ธ", "๐ธ", "๐คด", "๐ฆธโโ๏ธ", "๐ฆธ", "๐ฆธโโ๏ธ", "๐ฆนโโ๏ธ", "๐ฆน", "๐ฆนโโ๏ธ", "๐คถ", "๐งโ๐", "๐
", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐งโโ๏ธ", "๐ง",
+ "๐งโโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐ผ", "๐คฐ", "๐คฑ", "๐ฉโ๐ผ", "๐งโ๐ผ", "๐จโ๐ผ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐
โโ๏ธ", "๐
",
+ "๐
โโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐คฆโโ๏ธ", "๐คฆ", "๐คฆโโ๏ธ", "๐คทโโ๏ธ", "๐คท", "๐คทโโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ",
+ "๐
", "๐คณ", "๐", "๐บ", "๐ฏโโ๏ธ", "๐ฏ", "๐ฏโโ๏ธ", "๐ด", "๐ฉโ๐ฆฝ", "๐งโ๐ฆฝ", "๐จโ๐ฆฝ", "๐ฉโ๐ฆผ", "๐งโ๐ฆผ", "๐จโ๐ฆผ", "๐ถโโ๏ธ", "๐ถ", "๐ถโโ๏ธ", "๐ฉโ๐ฆฏ", "๐งโ๐ฆฏ", "๐จโ๐ฆฏ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐ญ", "๐งโ๐คโ๐ง", "๐ฌ",
+ "๐ซ", "๐ฉโโค๏ธโ๐ฉ", "๐", "๐จโโค๏ธโ๐จ", "๐ฉโโค๏ธโ๐จ", "๐ฉโโค๏ธโ๐โ๐ฉ", "๐", "๐จโโค๏ธโ๐โ๐จ", "๐ฉโโค๏ธโ๐โ๐จ", "๐ช", "๐จโ๐ฉโ๐ฆ", "๐จโ๐ฉโ๐ง", "๐จโ๐ฉโ๐งโ๐ฆ", "๐จโ๐ฉโ๐ฆโ๐ฆ", "๐จโ๐ฉโ๐งโ๐ง", "๐จโ๐จโ๐ฆ", "๐จโ๐จโ๐ง", "๐จโ๐จโ๐งโ๐ฆ", "๐จโ๐จโ๐ฆโ๐ฆ", "๐จโ๐จโ๐งโ๐ง", "๐ฉโ๐ฉโ๐ฆ", "๐ฉโ๐ฉโ๐ง", "๐ฉโ๐ฉโ๐งโ๐ฆ", "๐ฉโ๐ฉโ๐ฆโ๐ฆ", "๐ฉโ๐ฉโ๐งโ๐ง", "๐จโ๐ฆ", "๐จโ๐ฆโ๐ฆ", "๐จโ๐ง", "๐จโ๐งโ๐ฆ",
+ "๐จโ๐งโ๐ง", "๐ฉโ๐ฆ", "๐ฉโ๐ฆโ๐ฆ", "๐ฉโ๐ง", "๐ฉโ๐งโ๐ฆ", "๐ฉโ๐งโ๐ง", "๐ค", "๐ฅ", ">",
+
+ "<",
+ "๐งณ", "๐", "โ๏ธ", "๐งต", "๐งถ", "๐", "๐ฅฝ", "๐ฅผ", "๐ฆบ", "๐", "๐", "๐", "๐งฃ", "๐งค", "๐งฅ", "๐งฆ", "๐", "๐", "๐ฅป", "๐ฉฑ", "๐ฉฒ", "๐ฉณ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐ฅพ", "๐ฅฟ",
+ "๐ ", "๐ก", "๐ฉฐ", "๐ข", "๐", "๐", "๐ฉ", "๐", "๐งข", "๐", "๐", "๐ผ",
+ ">",
+
+ "<", "๐ถ", "๐ฑ", "๐ญ", "๐น", "๐ฐ", "๐ฆ", "๐ป", "๐ผ", "๐จ", "๐ฏ", "๐ฆ", "๐ฎ", "๐ท", "๐ฝ", "๐ธ", "๐ต", "๐", "๐", "๐", "๐", "๐", "๐ง", "๐ฆ", "๐ค", "๐ฃ", "๐ฅ", "๐ฆ", "๐ฆ
", "๐ฆ",
+ "๐ฆ", "๐บ", "๐", "๐ด", "๐ฆ", "๐", "๐", "๐ฆ", "๐", "๐", "๐", "๐ฆ", "๐ฆ", "๐ท", "๐ธ", "๐ฆ", "๐ข", "๐", "๐ฆ", "๐ฆ", "๐ฆ", "๐", "๐ฆ", "๐ฆ", "๐ฆ", "๐ฆ", "๐ก", "๐ ", "๐",
+ "๐ฌ", "๐ณ", "๐", "๐ฆ", "๐", "๐
", "๐", "๐ฆ", "๐ฆ", "๐ฆง", "๐", "๐ฆ", "๐ฆ", "๐ช", "๐ซ", "๐ฆ", "๐ฆ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐ฆ", "๐", "๐ฆ", "๐", "๐ฉ",
+ "๐ฆฎ", "๐โ๐ฆบ", "๐", "๐โ", "๐", "๐ฆ", "๐ฆ", "๐ฆ", "๐ฆข", "๐ฆฉ", "๐", "๐ฆ", "๐ฆจ", "๐ฆก", "๐ฆฆ", "๐ฆฅ", "๐", "๐", "๐ฆ", "๐พ", "๐", "๐ฒ", "๐ต", "๐", "๐ฒ", "๐ณ", "๐ด", "๐ฑ", "๐ฟ",
+ "โ๏ธ", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐พ", "๐", "๐ท", "๐น", "๐ฅ", "๐บ", "๐ธ", "๐ผ", "๐ป", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐",
+ "๐", "๐", "๐", "๐", "๐", "๐", "๐ช", "๐ซ", "โญ๏ธ", "๐", "โจ", "โก๏ธ", "โ๏ธ", "๐ฅ", "๐ฅ", "๐", "โ๏ธ", "โ
๏ธ", "โ๏ธ", "โ๏ธ", "โ๏ธ", "โ๏ธ", "๐จ", "๐ง", "๐ฆ", "โ๏ธ", "โ๏ธ", "๐", ">",
+
+ "<", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐", "๐ฅญ", "๐", "๐ฅฅ", "๐ฅ", "๐
", "๐", "๐ฅ", "๐ฅฆ", "๐ฅฌ", "๐ฅ", "๐ฝ", "๐ฅ", "๐ง", "๐ง
", "๐ฅ", "๐ ", "๐ฅ",
+ "๐ฅฏ", "๐", "๐ฅ", "๐ฅจ", "๐ง", "๐ฅ", "๐ณ", "๐ง", "๐ฅ", "๐ง", "๐ฅ", "๐ฅฉ", "๐", "๐", "๐ฆด", "๐ญ", "๐", "๐", "๐", "๐ฅช", "๐ฅ", "๐ง", "๐ฎ", "๐ฏ", "๐ฅ", "๐ฅ", "๐ฅซ", "๐", "๐",
+ "๐ฒ", "๐", "๐ฃ", "๐ฑ", "๐ฅ", "๐ฆช", "๐ค", "๐", "๐", "๐", "๐ฅ", "๐ฅ ", "๐ฅฎ", "๐ข", "๐ก", "๐ง", "๐จ", "๐ฆ", "๐ฅง", "๐ง", "๐ฐ", "๐", "๐ฎ", "๐ญ", "๐ฌ", "๐ซ", "๐ฟ", "๐ฉ", "๐ช",
+ "๐ฐ", "๐ฅ", "๐ฏ", "๐ฅ", "๐ผ", "โ๏ธ", "๐ต", "๐ง", "๐ฅค", "๐ถ", "๐บ", "๐ป", "๐ฅ", "๐ท", "๐ฅ", "๐ธ", "๐น", "๐ง", "๐พ", "๐ง", "๐ฅ", "๐ด", "๐ฝ", "๐ฅฃ", "๐ฅก", "๐ฅข", "๐ง", ">",
+
+ "<", "โฝ๏ธ", "๐", "๐", "โพ๏ธ", "๐ฅ", "๐พ", "๐", "๐", "๐ฅ", "๐ฑ", "๐ช", "๐", "๐ธ", "๐", "๐", "๐ฅ", "๐", "๐ฅ
", "โณ๏ธ", "๐ช", "๐น", "๐ฃ", "๐คฟ", "๐ฅ", "๐ฅ", "๐ฝ", "๐น", "๐ท", "๐ฅ",
+ "๐ฟ", "๐", "๐ช", "๐๏ธโโ๏ธ", "๐๏ธ", "๐๏ธโโ๏ธ", "๐คผโโ๏ธ", "๐คผ", "๐คผโโ๏ธ", "๐คธโโ๏ธ", "๐คธ", "๐คธโโ๏ธ", "โน๏ธโโ๏ธ", "โน๏ธ", "โน๏ธโโ๏ธ", "๐คบ", "๐คพโโ๏ธ", "๐คพ", "๐คพโโ๏ธ", "๐๏ธโโ๏ธ", "๐๏ธ", "๐๏ธโโ๏ธ", "๐", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐โโ๏ธ", "๐", "๐โโ๏ธ", "๐โโ๏ธ",
+ "๐", "๐โโ๏ธ", "๐คฝโโ๏ธ", "๐คฝ", "๐คฝโโ๏ธ", "๐ฃโโ๏ธ", "๐ฃ", "๐ฃโโ๏ธ", "๐งโโ๏ธ", "๐ง", "๐งโโ๏ธ", "๐ตโโ๏ธ", "๐ต", "๐ตโโ๏ธ", "๐ดโโ๏ธ", "๐ด", "๐ดโโ๏ธ", "๐", "๐ฅ", "๐ฅ", "๐ฅ", "๐
", "๐ซ", "๐ช", "๐คน", "๐คนโโ๏ธ", "๐คนโโ๏ธ", "๐ญ", "๐ฉฐ", "๐จ",
+ "๐ฌ", "๐ค", "๐ง", "๐ผ", "๐น", "๐ฅ", "๐ท", "๐บ", "๐ธ", "๐ช", "๐ป", "๐ฒ", "๐ฏ", "๐ณ", "๐ฎ", "๐ฐ", "๐งฉ", ">"
+ ];
let renderedEmojis = ''
- emojis.forEach(emoji => {
- renderedEmojis += `
${emoji}`
- })
+ let emojiSectionCounter = 0
+ let emojiSections = ['Smileys', 'Gestures and Body Parts', 'People and Fantasy', 'Clothing and Accessories', 'Animals & Nature', 'Food & Drink', 'Activity and Sports']
+ renderedEmojis += `
+
`
+ for(emoji of emojis){
+ if(emoji === '<'){
+ renderedEmojis += `
+ `
+ emojiSectionCounter++
+ }
+ else if(emoji === '>')
+ renderedEmojis += ``
+ else
+ renderedEmojis += `
${emoji}`
+ }
getRef('emoji_picker').innerHTML = renderedEmojis
function toggleEmoji(button){
@@ -1741,10 +1813,30 @@
getRef('chat_container').scrollTo({top: getRef('chat_container').scrollHeight, behaviour: smooth ? 'smooth': ''})
}
+ let startIndex = 0,
+ endIndex = 0
function renderMessages(data, options) {
- let {markUnread = true, updateChatCard = false} = options
- for (let m in data) {
- let {floID, message, time, category} = data[m]
+ let {markUnread = true, updateChatCard = false, reRender = false, lazyLoad = false} = options
+ let messages
+ if(reRender){
+ activeChat['allMessages'] = Object.values(data)
+ startIndex = (activeChat['allMessages'].length - 10) > 0 ? activeChat['allMessages'].length - 10 : 0
+ endIndex = activeChat['allMessages'].length
+ messages = activeChat['allMessages']
+ }
+ else if(lazyLoad){
+ messages = activeChat['allMessages']
+ startIndex = startIndex > 10 ? startIndex -= 10 : 0
+ markUnread = false
+ }
+ else{
+ messages = Object.values(data)
+ startIndex = 0
+ endIndex = messages.length
+ }
+
+ for (i = startIndex; i < endIndex; i++) {
+ let {floID, message, time, category} = messages[i]
//Stops message from rendering in wrong chat window
if(activeChat['receiver'] && activeChat['receiver'] === floID)
frag.append(render.messageBubble(floID, message, time, category))
@@ -1772,9 +1864,42 @@
chatCard.querySelector('.time').textContent = getFormatedTime(time, true)
}
}
- getRef('chat_container').append(frag)
- scrollToBottom()
+ endIndex = startIndex
+ if(!lazyLoad && !reRender){
+ endIndex = messages.length
+ getRef('chat_container').append(frag)
+ }
+ if(reRender || lazyLoad){
+ currentDate = null
+ getRef('chat_container').prepend(frag)
+ prevScroll = getRef('chat_container').scrollTop
+ }
+ if(reRender){
+ scrollToBottom()
+ }
}
+
+ //checks for added elements in chat
+ const chatMutationObserver = new MutationObserver(
+ (mutations, observer) => {
+ for(const mutation of mutations) {
+ if (mutation.type === 'childList' && mutation.addedNodes.length) {
+ chatMessageObserver.observe(getRef('chat_container').firstElementChild)
+ }
+ }
+ }
+ )
+ chatMutationObserver.observe(getRef('chat_container'), { attributes: true, childList: true })
+
+ //Lazy loading for chat messages
+ const chatMessageObserver = new IntersectionObserver(
+ (entries, observer) => {
+ if(entries[0].isIntersecting){
+ renderMessages('', {lazyLoad: true})
+ observer.disconnect()
+ }
+ }
+ )
async function viewConversation(contact) {
getRef('chat_container').innerHTML = ''
@@ -1790,9 +1915,7 @@
getRef("warn_no_encryption").classList.add("hide-completely");
else
getRef("warn_no_encryption").classList.remove("hide-completely");
- renderMessages(await messenger.getChat(floID),{markUnread: false})
- scrollToBottom()
- prevScroll = getRef('chat_container').scrollTop
+ renderMessages(await messenger.getChat(floID),{markUnread: false, reRender: true})
messenger.removeMark(floID, "unread");
}
diff --git a/scripts/components.js b/scripts/components.js
index 9e0dd89..14c5e42 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -662,6 +662,7 @@ customElements.define('sm-textarea',
}
set value(val) {
this.shadowRoot.querySelector('textarea').value = val;
+ this.textareaBox.dataset.value = val
this.checkInput()
this.fireEvent()
}
@@ -2127,18 +2128,18 @@ customElements.define('sm-popup', class extends HTMLElement {
this.popupHeader.addEventListener('touchstart', (e) => {
this.handleTouchStart(e)
- })
+ }, {passive: true})
this.popupHeader.addEventListener('touchmove', (e) => {
this.handleTouchMove(e)
- })
+ }, {passive: true})
this.popupHeader.addEventListener('touchend', (e) => {
this.handleTouchEnd(e)
- })
+ }, {passive: true})
}
disconnectedCallback() {
- this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
- this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
- this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
+ this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
+ this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
+ this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
}
})
@@ -2694,9 +2695,9 @@ customElements.define('sm-notifications', class extends HTMLElement {
} else {
notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
}
- notification.addEventListener('touchstart', this.handleTouchStart)
- notification.addEventListener('touchmove', this.handleTouchMove)
- notification.addEventListener('touchend', this.handleTouchEnd)
+ notification.addEventListener('touchstart', this.handleTouchStart, {passive: true})
+ notification.addEventListener('touchmove', this.handleTouchMove, {passive: true})
+ notification.addEventListener('touchend', this.handleTouchEnd, {passive: true})
}
removeNotification = (notification, toLeft) => {
@@ -2829,6 +2830,7 @@ smMenu.innerHTML = `
.hide{
opacity: 0;
pointer-events: none;
+ user-select: none;
}
.select{
position: relative;
@@ -2941,6 +2943,9 @@ customElements.define('sm-menu', class extends HTMLElement {
this.optionList.classList.add('no-transformations')
this.open = true
this.icon.classList.add('focused')
+ this.availableOptions.forEach(option => {
+ option.setAttribute('tabindex', '0')
+ })
}
}
collapse() {
@@ -2949,6 +2954,9 @@ customElements.define('sm-menu', class extends HTMLElement {
this.icon.classList.remove('focused')
this.optionList.classList.add('hide')
this.optionList.classList.remove('no-transformations')
+ this.availableOptions.forEach(option => {
+ option.removeAttribute('tabindex')
+ })
}
}
connectedCallback() {
@@ -3067,7 +3075,6 @@ customElements.define('sm-menu-option', class extends HTMLElement {
this.click()
}
})
- this.setAttribute('tabindex', '0')
}
})