webrtc/public/weigets.js

165 lines
5.4 KiB
JavaScript
Raw Normal View History

export function createElement({ innerText, textContent, onclick, onchange, onkeydown, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
2023-10-02 22:28:55 +08:00
const element = document.createElement(tagName)
2023-10-07 00:49:02 +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 (textContent) element.textContent = textContent
2023-10-07 00:49:02 +08:00
if (innerText) element.innerText = innerText
if (readOnly) element.readOnly = readOnly
2023-10-07 01:53:06 +08:00
if (onkeydown) element.onkeydown = onkeydown
2023-10-04 20:05:02 +08:00
if (onchange) element.onchange = onchange
2023-10-07 00:49:02 +08:00
if (onclick) element.onclick = onclick
if (dataset) Object.assign(element.dataset, dataset)
2023-10-02 22:24:38 +08:00
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-07 01:53:06 +08:00
const element = createElement({
tabIndex: 0,
style: {
position: 'fixed',
top: 0,
left: 0,
zIndex: 1000,
width: '100%',
height: '100%',
backdropFilter: 'blur(5px)',
duration: '0.5s',
transition: 'all 0.5s'
},
onclick: async event => {
// 判断必须是点击自身, 而不是子元素
if (event.target !== event.currentTarget) return
2023-10-07 01:53:06 +08:00
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
await event.target.remove()
},
onkeydown: async event => {
if (event.key !== 'Escape') return
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
await event.target.remove()
},
children: [
createElement({
...options,
style: {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: '#fff',
borderRadius: '150px',
boxShadow: '0 0 1em #ccc',
overflow: 'hidden',
display: 'flex',
justifyContent: 'center',
...options.style,
}
})
]
})
2023-10-05 14:03:51 +08:00
// 显示时自动聚焦
2023-10-07 01:53:06 +08:00
const observer = new MutationObserver(mutationsList => {
2023-10-05 14:03:51 +08:00
for (const mutation of mutationsList) {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
element.focus()
2023-10-05 14:08:29 +08:00
element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
2023-10-07 01:53:06 +08:00
return observer.disconnect()
2023-10-05 14:03:51 +08:00
}
}
})
observer.observe(document.body, { childList: true, subtree: true })
2023-10-04 18:01:43 +08:00
return element
}
2023-10-07 00:38:09 +08:00
// 深度代理, 用于监听数据的变化
2023-10-07 22:29:23 +08:00
export function useProxy(data, callback, path = []) {
if (Array.isArray(data)) {
const array = class extends Array {
constructor(args) {
super(args)
}
push(args) {
super.push(args)
console.log('push', args)
this.__notify()
}
pop(...args) {
const result = super.pop(...args)
console.log('pop')
this.__notify()
return result
}
shift(...args) {
const result = super.shift(...args)
this.__notify()
return result
}
unshift(...args) {
super.unshift(...args)
this.__notify()
}
splice(...args) {
super.splice(...args)
this.__notify()
}
deleteProperty(...args) {
console.log('deleteProperty', ...args)
super.deleteProperty(...args)
this.__notify()
}
__notify() {
if (callback) callback()
2023-10-07 00:38:09 +08:00
}
}
2023-10-07 22:29:23 +08:00
//console.log('为数组每项递归创建代理')
data.forEach((item, index) => {
data[index] = useProxy(item, callback, [...path, index])
})
return new array(...data)
}
if (typeof data === 'object' && data !== null) {
//console.log('为对象属性递归创建代理')
Object.keys(data).forEach(key => {
if (typeof data[key] === 'object' && data[key] !== null) {
data[key] = useProxy(data[key], callback, [...path, key])
}
})
return new Proxy(data, {
deleteProperty(target, key) {
console.log('deleteProperty', key)
return delete target[key]
}
})
}
console.log('为其它类型直接返回')
return data
2023-10-07 00:38:09 +08:00
}