LaniakeaSupercluster
/
webrtc
2
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

标准组件

This commit is contained in:
觉 2023-10-02 22:24:38 +08:00
parent 717f0d3e94
commit 9b23a7d18b
2 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/music.js
View File

@ -1,4 +1,4 @@
import { Text, Button, List, ListItem } from './weigets.js'
import { Span, Button, List, ListItem } from './weigets.js'
export default class MusicList {
constructor({ list = [], EventListeners = {}, onplay, onstop, onadd, onremove, onlike, onunlike, onban, onload }) {
@ -88,8 +88,8 @@ export default class MusicList {
id: item.id,
classList: item.arrayBuffer ? ['cache'] : [],
children: [
Text({
innerText: `${item.name} - ${bytesToSize(item.size)}`,
Span({
textContent: `${item.name} - ${bytesToSize(item.size)}`,
onclick: event => {
event.stopPropagation()
if (!this.audio.paused) {
@ -103,14 +103,14 @@ export default class MusicList {
}
}),
Button({
innerText: item.arrayBuffer ? '移除' : '缓存',
textContent: item.arrayBuffer ? '移除' : '缓存',
onclick: event => {
event.stopPropagation()
if (item.arrayBuffer) {
event.target.innerText = '缓存'
event.target.textContent = '缓存'
this.unlike(item)
} else {
event.target.innerText = '移除'
event.target.textContent = '移除'
this.ul.querySelector(`#${item.id}`).classList.add('cache')
this.like(item)
}

50
public/weigets.js
View File

@ -1,33 +1,53 @@
export function Button({ innerText, onclick }) {
const button = document.createElement('button')
button.innerText = innerText
button.onclick = onclick
return button
export function List({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
const element = document.createElement('ul')
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
element.classList.add(...classList)
if (innerText) element.innerText = innerText
if (textContent) element.textContent = textContent
if (onclick) element.onclick = onclick
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element
}
export function List({ children = [] }) {
const ul = document.createElement('ul')
children.forEach(child => ul.appendChild(child))
return ul
}
export function ListItem({ innerText, onclick, children = [], dataset, classList = [], ...attributes }) {
export function ListItem({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
const element = document.createElement('li')
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
classList.forEach(item => element.classList.add(item))
element.classList.add(...classList)
if (innerText) element.innerText = innerText
if (textContent) element.textContent = textContent
if (onclick) element.onclick = onclick
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element
}
export function Text({ innerText, onclick, children, dataset, classList, ...attributes }) {
export function Span({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
const element = document.createElement('span')
if (classList) classList.forEach(item => element.classList.add(item))
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
element.classList.add(...classList)
if (innerText) element.innerText = innerText
if (textContent) element.textContent = textContent
if (onclick) element.onclick = onclick
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))
return element
}
export function Button({ innerText, textContent, onclick, children = [], dataset, classList = [], ...attributes }) {
const element = document.createElement('button')
for (const key in attributes) {
element.setAttribute(key, attributes[key])
}
element.classList.add(...classList)
if (innerText) element.innerText = innerText
if (textContent) element.textContent = textContent
if (onclick) element.onclick = onclick
if (dataset) Object.keys(dataset).forEach(key => element.dataset[key] = dataset[key])
if (children) children.forEach(child => element.appendChild(child))