document.addEventListener('DOMContentLoaded', () => { class JoeMtitle extends HTMLElement { constructor() { super(); this.innerHTML = `
${this.getAttribute('title') || '默认标题'}
`; } } window.customElements.define('joe-mtitle', JoeMtitle); class JoeDplayer extends HTMLElement { constructor() { super(); this.options = { src: this.getAttribute('src'), player: this.getAttribute('player') }; this.render(); } render() { if (this.options.src) this.innerHTML = ``; else this.innerHTML = '播放地址未填写!'; } } window.customElements.define('joe-dplayer', JoeDplayer); class JoeBilibili extends HTMLElement { constructor() { super(); this.bvid = this.getAttribute('bvid'); this.render(); } render() { if (this.bvid) this.innerHTML = ``; else this.innerHTML = 'Bvid未填写!'; } } window.customElements.define('joe-bilibili', JoeBilibili); class JoeMusic extends HTMLElement { constructor() { super(); this.options = { id: this.getAttribute('id'), width: this.getAttribute('width') || '100%', autoplay: this.getAttribute('autoplay') ? 1 : 0 }; this.render(); } render() { if (this.options.id) this.innerHTML = ``; else this.innerHTML = '网易云歌曲ID未填写!'; } } window.customElements.define('joe-music', JoeMusic); class JoeMlist extends HTMLElement { constructor() { super(); this.options = { id: this.getAttribute('id'), width: this.getAttribute('width') || '100%', autoplay: this.getAttribute('autoplay') ? 1 : 0 }; this.render(); } get template() { return ``; } render() { if (this.options.id) this.innerHTML = this.template; else this.innerHTML = '网易云歌单ID未填写!'; } } window.customElements.define('joe-mlist', JoeMlist); class JoeAbtn extends HTMLElement { constructor() { super(); this.options = { icon: this.getAttribute('icon') || '', color: this.getAttribute('color') || '#ff6800', href: this.getAttribute('href') || '#', radius: this.getAttribute('radius') || '17.5px', content: this.getAttribute('content') || '多彩按钮' }; this.innerHTML = ` ${this.options.content} `; } } window.customElements.define('joe-abtn', JoeAbtn); class JoeAnote extends HTMLElement { constructor() { super(); this.options = { icon: this.getAttribute('icon') || 'fa-download', href: this.getAttribute('href') || '#', type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary', content: this.getAttribute('content') || '标签按钮' }; this.innerHTML = ` ${this.options.content} `; } } window.customElements.define('joe-anote', JoeAnote); class JoeDotted extends HTMLElement { constructor() { super(); this.startColor = this.getAttribute('startColor') || '#ff6c6c'; this.endColor = this.getAttribute('endColor') || '#1989fa'; this.innerHTML = `
`; } } window.customElements.define('joe-dotted', JoeDotted); /* ------------------------以下未测试------------------------------------------ */ /* 点击复制 */ class JoeCopy extends HTMLElement { constructor() { super(); this.options = { text: this.getAttribute('text') || '默认文本', content: this.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '点击复制' }; this.render(); } get template() { return `${this.options.content}`; } render() { this.innerHTML = this.template; this.event(); } event() { this.$copy = this.querySelector('.joe_detail__article-copy'); new ClipboardJS(this.$copy, { text: () => this.options.text }).on('success', () => Qmsg.success('复制成功!')); } } window.customElements.define('joe-copy', JoeCopy); /* 消息提示 */ class JoeMessage extends HTMLElement { constructor() { super(); this.options = { type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info', content: this.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '提示内容' }; this.render(); } get template() { return `
${this.options.content}
`; } render() { this.innerHTML = this.template; } } window.customElements.define('joe-message', JoeMessage); /* 默认卡片 */ class JoeCard extends HTMLElement { constructor() { super(); this.options = { width: this.getAttribute('width') || '100%', label: this.getAttribute('label') || '默认标题', content: this.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '默认内容' }; this.render(); } get template() { return `
${this.options.label}
${this.options.content}
`; } render() { this.innerHTML = this.template; } } window.customElements.define('joe-card', JoeCard); /* 回复可见 - 显示状态 */ class JoeShow extends HTMLElement { constructor() { super(); this.options = { content: this.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '默认隐藏的内容' }; this.render(); } render() { this.innerHTML = this.options.content; } } window.customElements.define('joe-show', JoeShow); /* 回复可见 - 隐藏状态 */ class JoeHide extends HTMLElement { constructor() { super(); this.render(); } get template() { return `
此处内容作者设置了 回复 可见
`; } render() { this.innerHTML = ''; this._shadowRoot = this.attachShadow({ mode: 'closed' }); this._shadowRoot.innerHTML = this.template; this.event(); } event() { this.$button = this._shadowRoot.querySelector('i'); this.$button.addEventListener('click', () => { const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15; window.scrollTo({ top, behavior: 'smooth' }); }); } } window.customElements.define('joe-hide', JoeHide); });