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

标准组件

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

50
public/weigets.js
View File

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