|
|
|
|
|
class MessageListElement extends HTMLElement {
|
|
|
|
static get observedAttributes() {
|
|
return ["messages"];
|
|
}
|
|
messages = []
|
|
room = null
|
|
url = null
|
|
container = null
|
|
messageEventSchedule = null
|
|
observer = null
|
|
constructor() {
|
|
super()
|
|
this.attachShadow({ mode: 'open' });
|
|
this.component = document.createElement('div')
|
|
this.shadowRoot.appendChild(this.component )
|
|
}
|
|
linkifyText(text) {
|
|
const urlRegex = /https?:\/\/[^\s]+/g;
|
|
|
|
return text.replace(urlRegex, (url) => {
|
|
return `<a href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`;
|
|
});
|
|
|
|
}
|
|
createElement(message){
|
|
const element = document.createElement("div")
|
|
element.dataset.uid = message.uid
|
|
element.dataset.color = message.color
|
|
element.dataset.channel_uid = message.channel_uid
|
|
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.classList.add("message")
|
|
if(!this.messages.length){
|
|
element.classList.add("switch-user")
|
|
}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.innerText = message.user_nick[0]
|
|
const messageContent = document.createElement("div")
|
|
messageContent.classList.add("message-content")
|
|
const author = document.createElement("div")
|
|
author.classList.add("author")
|
|
author.style.color = message.color
|
|
author.textContent = message.user_nick
|
|
const text = document.createElement("div")
|
|
text.classList.add("text")
|
|
if(message.html)
|
|
text.innerHTML = this.linkifyText(message.html)
|
|
const time = document.createElement("div")
|
|
time.classList.add("time")
|
|
time.textContent = message.created_at
|
|
messageContent.appendChild(author)
|
|
messageContent.appendChild(text)
|
|
messageContent.appendChild(time)
|
|
element.appendChild(avatar)
|
|
element.appendChild(messageContent)
|
|
|
|
|
|
|
|
|
|
message.element = element
|
|
|
|
return element
|
|
}
|
|
addMessage(message){
|
|
|
|
const obj = new models.Message(
|
|
message.uid,
|
|
message.channel_uid,
|
|
message.user_uid,
|
|
message.user_nick,
|
|
message.color,
|
|
message.message,
|
|
message.html,
|
|
message.created_at,
|
|
message.updated_at
|
|
)
|
|
const element = this.createElement(obj)
|
|
this.messages.push(obj)
|
|
this.container.appendChild(element)
|
|
const me = this
|
|
|
|
this.messageEventSchedule.delay(() => {
|
|
me.dispatchEvent(new CustomEvent("message", {detail:obj,bubbles:true}))
|
|
|
|
})
|
|
|
|
|
|
return obj
|
|
}
|
|
scrollBottom(){
|
|
this.container.scrollTop = this.container.scrollHeight;
|
|
}
|
|
connectedCallback() {
|
|
const link = document.createElement('link')
|
|
link.rel = 'stylesheet'
|
|
link.href = '/base.css'
|
|
this.component.appendChild(link)
|
|
this.component.classList.add("chat-messages")
|
|
this.container = document.createElement('div')
|
|
//this.container.classList.add("chat-messages")
|
|
this.component.appendChild(this.container)
|
|
this.messageEventSchedule = new Schedule(500)
|
|
this.messages = []
|
|
this.channel_uid = this.getAttribute("channel")
|
|
const me = this
|
|
app.addEventListener(this.channel_uid, (data) => {
|
|
me.addMessage(data)
|
|
})
|
|
this.dispatchEvent(new CustomEvent("rendered", {detail:this,bubbles:true}))
|
|
|
|
|
|
}
|
|
}
|
|
|
|
customElements.define('message-list', MessageListElement); |