From 20d8d27f03e87bf06515d0664a00e669b92df49f Mon Sep 17 00:00:00 2001 From: retoor Date: Wed, 29 Jan 2025 18:58:38 +0100 Subject: [PATCH] Update. --- src/snek/static/message-list.js | 105 +++++++++++++++++--------------- 1 file changed, 57 insertions(+), 48 deletions(-) diff --git a/src/snek/static/message-list.js b/src/snek/static/message-list.js index 3038ad3..7211ddb 100644 --- a/src/snek/static/message-list.js +++ b/src/snek/static/message-list.js @@ -1,7 +1,7 @@ class MessageListElement extends HTMLElement { - + static get observedAttributes() { return ["messages"]; } @@ -9,51 +9,60 @@ class MessageListElement extends HTMLElement { room = null url = null container = null - messageEventSchedule = null - observer = null + messageEventSchedule = null + observer = null constructor() { super() this.attachShadow({ mode: 'open' }); this.component = document.createElement('div') - this.shadowRoot.appendChild(this.component ) + this.shadowRoot.appendChild(this.component) } linkifyText(text) { - const urlRegex = /https?:\/\/[^\s]+/g; - - return text.replace(urlRegex, (url) => { - return `${url}`; - }); - + const urlRegex = /https?:\/\/[^\s]+/g; + + return text.replace(urlRegex, (url) => { + return `${url}`; + }); + } timeAgo(date1, date2) { const diffMs = Math.abs(date2 - date1); // Difference in milliseconds - + const days = Math.floor(diffMs / (1000 * 60 * 60 * 24)); const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((diffMs % (1000 * 60)) / 1000); - if(days){ - return `${days} days ago` + if (days) { + if (days > 1) + return `${days} days ago` + else + return `${days} day ago` } - if(hours){ - return `${hours} hours ago` + if (hours) { + if (hours > 1) + return `${hours} hours ago` + else + return `${hours} hour ago` } if (minutes) - return `${minutes} minutes ago` - + if (minutes > 1) + return `${minutes} minutes ago` + else + return `${minutes} minute ago` + return `just now` } - timeDescription(isoDate){ - if(!isoDate.endsWith("Z")) + timeDescription(isoDate) { + if (!isoDate.endsWith("Z")) isoDate += "Z" - const date = new Date(isoDate) + const date = new Date(isoDate) const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); let timeStr = `${hours}:${minutes}` - timeStr += ", " + this.timeAgo(new Date(isoDate), Date.now()) + timeStr += ", " + this.timeAgo(new Date(isoDate), Date.now()) return timeStr } - createElement(message){ + createElement(message) { const element = document.createElement("div") element.dataset.uid = message.uid element.dataset.color = message.color @@ -61,18 +70,18 @@ class MessageListElement extends HTMLElement { element.dataset.user_nick = message.user_nick element.dataset.created_at = message.created_at element.dataset.user_uid = message.user_uid - element.dataset.message = message.message - + element.dataset.message = message.message + element.classList.add("message") - if(!this.messages.length){ + if (!this.messages.length) { element.classList.add("switch-user") - }else if (this.messages[this.messages.length-1].user_uid != message.user_uid){ + } else if (this.messages[this.messages.length - 1].user_uid != message.user_uid) { element.classList.add("switch-user") } const avatar = document.createElement("div") avatar.classList.add("avatar") avatar.style.backgroundColor = message.color - avatar.style.color= "black" + avatar.style.color = "black" avatar.innerText = message.user_nick[0] const messageContent = document.createElement("div") messageContent.classList.add("message-content") @@ -82,7 +91,7 @@ class MessageListElement extends HTMLElement { author.textContent = message.user_nick const text = document.createElement("div") text.classList.add("text") - if(message.html) + if (message.html) text.innerHTML = message.html const time = document.createElement("div") time.classList.add("time") @@ -94,15 +103,15 @@ class MessageListElement extends HTMLElement { element.appendChild(avatar) element.appendChild(messageContent) - - message.element = element - + + message.element = element + return element } - addMessage(message){ - + addMessage(message) { + const obj = new models.Message( message.uid, message.channel_uid, @@ -117,17 +126,17 @@ class MessageListElement extends HTMLElement { const element = this.createElement(obj) this.messages.push(obj) this.container.appendChild(element) - const me = this - + const me = this + this.messageEventSchedule.delay(() => { - me.dispatchEvent(new CustomEvent("message", {detail:obj,bubbles:true})) - + me.dispatchEvent(new CustomEvent("message", { detail: obj, bubbles: true })) + }) - + return obj } - scrollBottom(){ + scrollBottom() { this.container.scrollTop = this.container.scrollHeight; } connectedCallback() { @@ -146,18 +155,18 @@ class MessageListElement extends HTMLElement { app.addEventListener(this.channel_uid, (data) => { me.addMessage(data) }) - this.dispatchEvent(new CustomEvent("rendered", {detail:this,bubbles:true})) - - this.timeUpdateInterval = setInterval(()=>{ - me.messages.forEach((message)=>{ + this.dispatchEvent(new CustomEvent("rendered", { detail: this, bubbles: true })) + + this.timeUpdateInterval = setInterval(() => { + me.messages.forEach((message) => { const newText = me.timeDescription(message.created_at) - - if(newText != message.element.innerText){ - message.element.querySelector(".time").innerText = newText + + if (newText != message.element.innerText) { + message.element.querySelector(".time").innerText = newText } }) - },30000) - + }, 30000) + } }