Update.

Browse Source
This commit is contained in:
retoor 2025-01-29 18:58:38 +01:00
parent 5b88350ff2
commit 20d8d27f03
1 changed files with 57 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/snek/static/message-list.js
View File

@ -1,7 +1,7 @@
class MessageListElement extends HTMLElement { class MessageListElement extends HTMLElement {
static get observedAttributes() { static get observedAttributes() {
return ["messages"]; return ["messages"];
} }
@ -9,51 +9,60 @@ class MessageListElement extends HTMLElement {
room = null room = null
url = null url = null
container = null container = null
messageEventSchedule = null messageEventSchedule = null
observer = null observer = null
constructor() { constructor() {
super() super()
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.component = document.createElement('div') this.component = document.createElement('div')
this.shadowRoot.appendChild(this.component ) this.shadowRoot.appendChild(this.component)
} }
linkifyText(text) { linkifyText(text) {
const urlRegex = /https?:\/\/[^\s]+/g; const urlRegex = /https?:\/\/[^\s]+/g;
return text.replace(urlRegex, (url) => { return text.replace(urlRegex, (url) => {
return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`; return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
}); });
} }
timeAgo(date1, date2) { timeAgo(date1, date2) {
const diffMs = Math.abs(date2 - date1); // Difference in milliseconds const diffMs = Math.abs(date2 - date1); // Difference in milliseconds
const days = Math.floor(diffMs / (1000 * 60 * 60 * 24)); const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60)); const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diffMs % (1000 * 60)) / 1000); const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
if(days){ if (days) {
return `${days} days ago` if (days > 1)
return `${days} days ago`
else
return `${days} day ago`
} }
if(hours){ if (hours) {
return `${hours} hours ago` if (hours > 1)
return `${hours} hours ago`
else
return `${hours} hour ago`
} }
if (minutes) if (minutes)
return `${minutes} minutes ago` if (minutes > 1)
return `${minutes} minutes ago`
else
return `${minutes} minute ago`
return `just now` return `just now`
} }
timeDescription(isoDate){ timeDescription(isoDate) {
if(!isoDate.endsWith("Z")) if (!isoDate.endsWith("Z"))
isoDate += "Z" isoDate += "Z"
const date = new Date(isoDate) const date = new Date(isoDate)
const hours = String(date.getHours()).padStart(2, "0"); const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0");
let timeStr = `${hours}:${minutes}` let timeStr = `${hours}:${minutes}`
timeStr += ", " + this.timeAgo(new Date(isoDate), Date.now()) timeStr += ", " + this.timeAgo(new Date(isoDate), Date.now())
return timeStr return timeStr
} }
createElement(message){ createElement(message) {
const element = document.createElement("div") const element = document.createElement("div")
element.dataset.uid = message.uid element.dataset.uid = message.uid
element.dataset.color = message.color element.dataset.color = message.color
@ -61,18 +70,18 @@ class MessageListElement extends HTMLElement {
element.dataset.user_nick = message.user_nick element.dataset.user_nick = message.user_nick
element.dataset.created_at = message.created_at element.dataset.created_at = message.created_at
element.dataset.user_uid = message.user_uid element.dataset.user_uid = message.user_uid
element.dataset.message = message.message element.dataset.message = message.message
element.classList.add("message") element.classList.add("message")
if(!this.messages.length){ if (!this.messages.length) {
element.classList.add("switch-user") 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") element.classList.add("switch-user")
} }
const avatar = document.createElement("div") const avatar = document.createElement("div")
avatar.classList.add("avatar") avatar.classList.add("avatar")
avatar.style.backgroundColor = message.color avatar.style.backgroundColor = message.color
avatar.style.color= "black" avatar.style.color = "black"
avatar.innerText = message.user_nick[0] avatar.innerText = message.user_nick[0]
const messageContent = document.createElement("div") const messageContent = document.createElement("div")
messageContent.classList.add("message-content") messageContent.classList.add("message-content")
@ -82,7 +91,7 @@ class MessageListElement extends HTMLElement {
author.textContent = message.user_nick author.textContent = message.user_nick
const text = document.createElement("div") const text = document.createElement("div")
text.classList.add("text") text.classList.add("text")
if(message.html) if (message.html)
text.innerHTML = message.html text.innerHTML = message.html
const time = document.createElement("div") const time = document.createElement("div")
time.classList.add("time") time.classList.add("time")
@ -94,15 +103,15 @@ class MessageListElement extends HTMLElement {
element.appendChild(avatar) element.appendChild(avatar)
element.appendChild(messageContent) element.appendChild(messageContent)
message.element = element
message.element = element
return element return element
} }
addMessage(message){ addMessage(message) {
const obj = new models.Message( const obj = new models.Message(
message.uid, message.uid,
message.channel_uid, message.channel_uid,
@ -117,17 +126,17 @@ class MessageListElement extends HTMLElement {
const element = this.createElement(obj) const element = this.createElement(obj)
this.messages.push(obj) this.messages.push(obj)
this.container.appendChild(element) this.container.appendChild(element)
const me = this const me = this
this.messageEventSchedule.delay(() => { this.messageEventSchedule.delay(() => {
me.dispatchEvent(new CustomEvent("message", {detail:obj,bubbles:true})) me.dispatchEvent(new CustomEvent("message", { detail: obj, bubbles: true }))
}) })
return obj return obj
} }
scrollBottom(){ scrollBottom() {
this.container.scrollTop = this.container.scrollHeight; this.container.scrollTop = this.container.scrollHeight;
} }
connectedCallback() { connectedCallback() {
@ -146,18 +155,18 @@ class MessageListElement extends HTMLElement {
app.addEventListener(this.channel_uid, (data) => { app.addEventListener(this.channel_uid, (data) => {
me.addMessage(data) me.addMessage(data)
}) })
this.dispatchEvent(new CustomEvent("rendered", {detail:this,bubbles:true})) this.dispatchEvent(new CustomEvent("rendered", { detail: this, bubbles: true }))
this.timeUpdateInterval = setInterval(()=>{ this.timeUpdateInterval = setInterval(() => {
me.messages.forEach((message)=>{ me.messages.forEach((message) => {
const newText = me.timeDescription(message.created_at) const newText = me.timeDescription(message.created_at)
if(newText != message.element.innerText){ if (newText != message.element.innerText) {
message.element.querySelector(".time").innerText = newText message.element.querySelector(".time").innerText = newText
} }
}) })
},30000) }, 30000)
} }
} }