320 lines
11 KiB
JavaScript
320 lines
11 KiB
JavaScript
export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
|
|
const element = document.createElement(tagName)
|
|
for (const key in attributes) {
|
|
if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值
|
|
else element.setAttribute(key, attributes[key]) // 否则是属性则使用setAttribute
|
|
}
|
|
if (dataset) Object.assign(element.dataset, dataset)
|
|
if (style) Object.assign(element.style, style)
|
|
if (classList.length) element.classList.add(...classList)
|
|
if (textContent) element.textContent = textContent
|
|
if (innerText) element.innerText = innerText
|
|
if (innerHTML) element.innerHTML = innerHTML
|
|
if (readOnly) element.readOnly = readOnly
|
|
if (children) children.forEach(child => element.appendChild(child))
|
|
return element
|
|
}
|
|
|
|
export function List(options) {
|
|
return createElement(options, 'ul')
|
|
}
|
|
|
|
export function ListItem(options) {
|
|
return createElement(options, 'li')
|
|
}
|
|
|
|
export function Span(options) {
|
|
return createElement(options, 'span')
|
|
}
|
|
|
|
export function Button(options) {
|
|
return createElement(options, 'button')
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
export function UploadMusic(options) {
|
|
let dragStats = null
|
|
const drop = createElement({
|
|
textContent: '点击或拖拽音乐到此处共享您的音乐',
|
|
style: {
|
|
width: '100%',
|
|
color: '#999',
|
|
lineHeight: '5rem',
|
|
textAlign: 'center',
|
|
position: 'absolute',
|
|
top: 0,
|
|
display: 'none'
|
|
}
|
|
})
|
|
return createElement({
|
|
...options,
|
|
style: {
|
|
width: '100%',
|
|
height: '10rem',
|
|
backdropFilter: 'blur(5px)',
|
|
backgroundColor: '#fcfcfc',
|
|
borderRadius: '1em',
|
|
border: '1px solid #f1f1f1',
|
|
position: 'relative',
|
|
userSelect: 'none',
|
|
cursor: 'pointer',
|
|
...options.style
|
|
},
|
|
onclick: event => {
|
|
// 临时创建一个input触发input的点击事件
|
|
const input = Input({
|
|
type: 'file',
|
|
multiple: true,
|
|
accept: 'audio/*',
|
|
style: {
|
|
display: 'none',
|
|
},
|
|
onchange: event => {
|
|
const files = Array.from(event.target.files)
|
|
if (files.length === 0) return
|
|
options.onchange(files)
|
|
}
|
|
})
|
|
input.click()
|
|
},
|
|
onmouseenter: event => {
|
|
drop.style.display = 'block'
|
|
},
|
|
onmouseleave: event => {
|
|
drop.style.display = 'none'
|
|
},
|
|
ondragover: event => {
|
|
console.log('dragover')
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if (dragStats) return
|
|
event.dataTransfer.dropEffect = 'copy'
|
|
drop.style.display = 'block'
|
|
},
|
|
ondragleave: event => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
if (dragStats) return
|
|
clearTimeout(dragStats)
|
|
dragStats = setTimeout(() => {
|
|
drop.style.display = 'none'
|
|
dragStats = null
|
|
}, 1000)
|
|
},
|
|
ondrop: event => {
|
|
console.log('drop')
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
const files = Array.from(event.dataTransfer.files)
|
|
// 检查必须是音乐文件, 移除其它文件
|
|
for (let i = 0; i < files.length; i++) {
|
|
if (!files[i].type.startsWith('audio/')) {
|
|
files.splice(i, 1)
|
|
i--
|
|
}
|
|
}
|
|
if (files.length === 0) return console.log('没有文件')
|
|
console.log('files', files)
|
|
options.onchange(files)
|
|
},
|
|
children: [
|
|
// 绘制一个云朵上传图标(别放弃...还有我呢!)
|
|
createElement({
|
|
style: {
|
|
width: '82px',
|
|
height: '30px',
|
|
background: '#e7f4fd',
|
|
background: '-webkit-linear-gradient(top,#e7f4fd 5%,#ceedfd 100%)',
|
|
borderRadius: '25px',
|
|
position: 'relative',
|
|
margin: '33px auto 5px'
|
|
},
|
|
children: [
|
|
createElement({
|
|
style: {
|
|
width: '45px',
|
|
height: '45px',
|
|
top: '-22px',
|
|
right: '12px',
|
|
borderRadius: '50px',
|
|
borderRadius: '25px',
|
|
background: '#e7f4fd',
|
|
position: 'absolute',
|
|
zIndex: '-1'
|
|
}
|
|
}),
|
|
createElement({
|
|
style: {
|
|
width: '25px',
|
|
height: '25px',
|
|
top: '-12px',
|
|
left: '12px',
|
|
borderRadius: '25px',
|
|
background: '#e7f4fd',
|
|
position: 'absolute',
|
|
zIndex: '-1'
|
|
}
|
|
}),
|
|
Span({
|
|
width: '87px',
|
|
position: 'absolute',
|
|
bottom: '-2px',
|
|
background: '#000',
|
|
zIndex: '-1',
|
|
boxShadow: '0 0 6px 2px rgba(0,0,0,0.1)',
|
|
borderRadius: '50%'
|
|
}),
|
|
createElement({
|
|
textContent: '♫',
|
|
style: {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
fontSize: '3rem',
|
|
fontWeight: 'bold',
|
|
position: 'relative',
|
|
top: '-1.5rem',
|
|
color: '#e7f4fd',
|
|
textShadow: '0 1px 1px #fff'
|
|
//textShadow: '0 0 5px #000, 0 0 10px #000, 0 0 15px #000, 0 0 20px #000, 0 0 25px #000, 0 0 30px #000, 0 0 35px #000, 0 0 40px #000, 0 0 45px #000, 0 0 50px #000, 0 0 55px #000, 0 0 60px #000, 0 0 65px #000, 0 0 70px #000, 0 0 75px #000'
|
|
}
|
|
})
|
|
]
|
|
}),
|
|
drop
|
|
]
|
|
})
|
|
}
|
|
|
|
// 弹出窗口, 高斯模糊背景, 进入离开动画过渡
|
|
export function Dialog(options) {
|
|
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
|
|
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,
|
|
}
|
|
})
|
|
]
|
|
})
|
|
// 显示时自动聚焦
|
|
const observer = new MutationObserver(mutationsList => {
|
|
for (const mutation of mutationsList) {
|
|
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
|
|
element.focus()
|
|
element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
|
|
return observer.disconnect()
|
|
}
|
|
}
|
|
})
|
|
observer.observe(document.body, { childList: true, subtree: true })
|
|
return element
|
|
}
|
|
|
|
// 深度代理, 用于监听数据的变化
|
|
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()
|
|
}
|
|
}
|
|
//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
|
|
}
|