diff --git a/public/music.js b/public/music.js index 3636c25..6a7644f 100644 --- a/public/music.js +++ b/public/music.js @@ -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) } diff --git a/public/weigets.js b/public/weigets.js index dc5fa5e..b72bcbb 100644 --- a/public/weigets.js +++ b/public/weigets.js @@ -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))