webrtc/public/weigets.js

78 lines
2.2 KiB
JavaScript
Raw Normal View History

2023-10-04 20:05:02 +08:00
export function createElement({ innerText, textContent, onclick, onchange, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
2023-10-02 22:28:55 +08:00
const element = document.createElement(tagName)
2023-10-02 22:24:38 +08:00
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
2023-10-04 20:05:02 +08:00
if (style) Object.assign(element.style, style)
2023-10-04 06:14:38 +08:00
if (classList.length) element.classList.add(...classList)
2023-10-02 22:24:38 +08:00
if (innerText) element.innerText = innerText
if (textContent) element.textContent = textContent
if (onclick) element.onclick = onclick
2023-10-04 20:05:02 +08:00
if (onchange) element.onchange = onchange
2023-10-02 22:24:38 +08:00
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element
2023-09-28 15:20:02 +08:00
}
2023-10-02 22:28:55 +08:00
export function List(options) {
return createElement(options, 'ul')
2023-09-28 15:20:02 +08:00
}
2023-10-02 08:11:28 +08:00
2023-10-02 22:28:55 +08:00
export function ListItem(options) {
return createElement(options, 'li')
2023-10-02 22:24:38 +08:00
}
2023-10-02 22:28:55 +08:00
export function Span(options) {
return createElement(options, 'span')
}
export function Button(options) {
return createElement(options, 'button')
2023-10-02 08:11:28 +08:00
}
2023-10-04 17:34:15 +08:00
export function Input(options) {
return createElement(options, 'input')
}
export function Avatar(options) {
const element = createElement(options, 'img')
element.onerror = () => element.src = '/favicon.ico'
return element
}
2023-10-04 18:01:43 +08:00
// 弹出窗口, 高斯模糊背景, 进入离开动画过渡
export function Dialog(options) {
2023-10-04 18:25:11 +08:00
const element = createElement({}, 'div')
const content = createElement(options)
2023-10-04 18:01:43 +08:00
element.style.cssText = `
position: fixed;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 100%;
backdrop-filter: blur(5px);
duration: 0.5s;
transition: all 0.5s;
`
content.classList.add('dialog')
content.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
background-color: #fff;
border-radius: 0.5em;
box-shadow: 0 0 1em #ccc;
`
element.appendChild(content)
// 点击空白处关闭
element.onclick = event => {
if (event.target === element) {
element.remove()
}
}
return element
}