document.addEventListener('DOMContentLoaded', () => { /* * * * * * 开放类组件 * * * * */ /* 便条按钮 */ 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.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '标签按钮' }; this.render(); } get template() { return ` ${this.options.content} `; } render() { this.innerHTML = this.template; } } window.customElements.define('joe-anote', JoeAnote); /* 多彩按钮 */ 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.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '多彩按钮' }; this.render(); } get template() { return ` ${this.options.content} `; } render() { this.innerHTML = this.template; } } window.customElements.define('joe-abtn', JoeAbtn); /* Dplayer */ class JoeDplayer extends HTMLElement { constructor() { super(); this.options = { src: this.getAttribute('src'), player: this.getAttribute('player') }; this.render(); } get template() { return ` `; } render() { if (this.options.src) this.innerHTML = this.template; else this.innerHTML = '播放地址未填写!'; } } window.customElements.define('joe-dplayer', JoeDplayer); /* BiliBili */ class JoeBilibili extends HTMLElement { constructor() { super(); this.options = { bvid: this.getAttribute('bvid') }; this.render(); } get template() { return ` `; } render() { if (this.options.bvid) this.innerHTML = this.template; else this.innerHTML = 'Bvid未填写!'; } } window.customElements.define('joe-bilibili', JoeBilibili); /* 居中标题 */ class JoeMtitle extends HTMLElement { constructor() { super(); this.options = { content: this.innerHTML.trim().replace(/^(
)|(
)$/g, '') || '居中标题' }; this.render(); } get template() { return `
${this.options.content}
`; } render() { this.innerHTML = this.template; } } window.customElements.define('joe-mtitle', JoeMtitle); /* 点击复制 */ 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 JoeTimeline extends HTMLElement { } /* * * * * * 私有化组件 * * * * */ /* 网易云音乐 - 单首 */ class JoeMusic extends HTMLElement { constructor() { super(); this.options = { id: this.getAttribute('id'), width: this.getAttribute('width') || '100%', height: this.getAttribute('height') || '86px', autoplay: this.getAttribute('autoplay') ? 1 : 0 }; this.render(); } get template() { return `
`; } render() { this.innerHTML = ''; this._shadowRoot = this.attachShadow({ mode: 'closed' }); if (this.options.id) this._shadowRoot.innerHTML = this.template; else this._shadowRoot.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%', height: this.getAttribute('height') || '450px', autoplay: this.getAttribute('autoplay') ? 1 : 0 }; this.render(); } get template() { return `
`; } render() { this.innerHTML = ''; this._shadowRoot = this.attachShadow({ mode: 'closed' }); if (this.options.id) this._shadowRoot.innerHTML = this.template; else this._shadowRoot.innerHTML = '网易云歌单ID未填写!'; } } window.customElements.define('joe-mlist', JoeMlist); /* 回复可见 - 隐藏状态 */ 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); });