91 lines
2.7 KiB
JavaScript
91 lines
2.7 KiB
JavaScript
import { Span, Button, List, ListItem, Input, createElement } from './weigets.js'
|
|
|
|
// 先不划分频道, 只有一个公共聊天室
|
|
export default class Chat {
|
|
constructor({ EventListeners = {}, onsend, onexit }) {
|
|
this.event = { onsend, onexit }
|
|
this.ul = List({ classList: ['chat-list'] })
|
|
this.EventListeners = EventListeners
|
|
document.body.appendChild(this.ul) // 元素加入页面
|
|
|
|
// 使用一个有序列表来存储消息
|
|
const messageBox = new Map()
|
|
|
|
// 添加输入框
|
|
const input = createElement({
|
|
type: 'text',
|
|
placeholder: '输入聊天内容',
|
|
style: {
|
|
height: '5rem',
|
|
margin: '1rem 2rem',
|
|
padding: '1rem',
|
|
boxSizing: 'border-box',
|
|
boxShadow: '0 0 1rem #eee',
|
|
},
|
|
onkeydown: event => {
|
|
if (event.key === 'Enter') {
|
|
const text = input.value.trim()
|
|
if (text) {
|
|
this.send(text)
|
|
input.value = ''
|
|
}
|
|
}
|
|
}
|
|
}, 'textarea')
|
|
document.body.appendChild(input)
|
|
|
|
// 写入 css 样式到 head
|
|
const style = document.createElement('style')
|
|
style.innerText = `
|
|
ul.chat-list {
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
ul.chat-list > li > span {
|
|
cursor: pointer;
|
|
}
|
|
ul.chat-list > li.play > span {
|
|
color: #02be08;
|
|
}
|
|
ul.chat-list > li.cache::marker {
|
|
color: #02be08;
|
|
font-size: 1em;
|
|
contentx: '⚡';
|
|
}
|
|
ul.chat-list > li.disable {
|
|
color: #888;
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
}
|
|
// 收到应答(对方确认消息已被接收)
|
|
answer(data) {
|
|
const { name, text, time, type } = data
|
|
const item = this.add({ name, text, time, type })
|
|
item.classList.add('disable')
|
|
}
|
|
// 添加一条消息
|
|
add({ name, text, time, type }) {
|
|
const item = ListItem({
|
|
classList: [type],
|
|
children: [
|
|
Span({ innerText: `${name} ${time} ${text}` })
|
|
]
|
|
})
|
|
this.ul.appendChild(item)
|
|
this.ul.scrollTop = this.ul.scrollHeight
|
|
return item
|
|
}
|
|
// 发送消息
|
|
send(text) {
|
|
if (this.event.onsend) {
|
|
this.event.onsend(text)
|
|
}
|
|
}
|
|
// 退出
|
|
exit() {
|
|
if (this.event.onexit) {
|
|
this.event.onexit()
|
|
}
|
|
}
|
|
} |