This commit is contained in:
杜恒 2021-04-25 10:29:51 +08:00
parent 05d5a20244
commit 87257a263d
15 changed files with 694 additions and 407 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -6,112 +6,127 @@ function getChildren(el, className) {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
$('.joe_detail__article p:empty').remove(); $('.joe_detail__article p:empty').remove();
class JoeMtitle extends HTMLElement {
constructor() { customElements.define(
super(); 'joe-mtitle',
this.innerHTML = ` class JoeMtitle extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<span class="joe_mtitle"> <span class="joe_mtitle">
<span class="joe_mtitle__text"> <span class="joe_mtitle__text">
${this.getAttribute('title') || '默认标题'} ${this.getAttribute('title') || '默认标题'}
</span> </span>
</span> </span>
`; `;
}
} }
} );
window.customElements.define('joe-mtitle', JoeMtitle);
class JoeMp3 extends HTMLElement { customElements.define(
constructor() { 'joe-mp3',
super(); class JoeMp3 extends HTMLElement {
this.options = { constructor() {
name: this.getAttribute('name'), super();
url: this.getAttribute('url'), this.options = {
theme: this.getAttribute('theme') || '#1989fa', name: this.getAttribute('name'),
cover: this.getAttribute('cover'), url: this.getAttribute('url'),
autoplay: this.getAttribute('autoplay') ? true : false theme: this.getAttribute('theme') || '#1989fa',
}; cover: this.getAttribute('cover'),
this.render(); autoplay: this.getAttribute('autoplay') ? true : false
} };
render() { this.render();
if (!this.options.url) return (this.innerHTML = '音频地址未填写!'); }
this.innerHTML = '<span style="display: block" class="_content"></span>'; render() {
new APlayer({ if (!this.options.url) return (this.innerHTML = '音频地址未填写!');
container: getChildren(this, '_content'), this.innerHTML = '<span style="display: block" class="_content"></span>';
theme: this.options.theme,
autoplay: this.options.autoplay,
audio: [
{
url: this.options.url,
name: this.options.name,
cover: this.options.cover
}
]
});
}
}
window.customElements.define('joe-mp3', JoeMp3);
class JoeMusic extends HTMLElement {
constructor() {
super();
this.options = {
id: this.getAttribute('id'),
color: this.getAttribute('color') || '#1989fa',
autoplay: this.getAttribute('autoplay') ? true : false
};
this.render();
}
render() {
if (!this.options.id) return (this.innerHTML = '网易云歌曲ID未填写');
this.innerHTML = '<span style="display: block" class="_content"></span>';
fetch('https://api.i-meto.com/meting/api?server=netease&type=song&id=' + this.options.id).then(async response => {
const audio = await response.json();
new APlayer({ new APlayer({
container: getChildren(this, '_content'), container: getChildren(this, '_content'),
lrcType: 3, theme: this.options.theme,
theme: this.options.color,
autoplay: this.options.autoplay, autoplay: this.options.autoplay,
audio audio: [
{
url: this.options.url,
name: this.options.name,
cover: this.options.cover
}
]
}); });
}); }
} }
} );
window.customElements.define('joe-music', JoeMusic);
class JoeMlist extends HTMLElement { customElements.define(
constructor() { 'joe-music',
super(); class JoeMusic extends HTMLElement {
this.options = { constructor() {
id: this.getAttribute('id'), super();
color: this.getAttribute('color') || '#1989fa', this.options = {
autoplay: this.getAttribute('autoplay') ? true : false id: this.getAttribute('id'),
}; color: this.getAttribute('color') || '#1989fa',
this.render(); autoplay: this.getAttribute('autoplay') ? true : false
} };
render() { this.render();
if (!this.options.id) return (this.innerHTML = '网易云歌单ID未填写'); }
this.innerHTML = '<span style="display: block" class="_content"></span>'; render() {
fetch('https://api.i-meto.com/meting/api?server=netease&type=playlist&id=' + this.options.id).then(async response => { if (!this.options.id) return (this.innerHTML = '网易云歌曲ID未填写');
const audio = await response.json(); this.innerHTML = '<span style="display: block" class="_content"></span>';
new APlayer({ fetch('https://api.i-meto.com/meting/api?server=netease&type=song&id=' + this.options.id).then(async response => {
container: getChildren(this, '_content'), const audio = await response.json();
lrcType: 3, new APlayer({
theme: this.options.color, container: getChildren(this, '_content'),
autoplay: this.options.autoplay, lrcType: 3,
audio theme: this.options.color,
autoplay: this.options.autoplay,
audio
});
}); });
}); }
} }
} );
window.customElements.define('joe-mlist', JoeMlist);
class JoeAbtn extends HTMLElement { customElements.define(
constructor() { 'joe-mlist',
super(); class JoeMlist extends HTMLElement {
this.options = { constructor() {
icon: this.getAttribute('icon') || '', super();
color: this.getAttribute('color') || '#ff6800', this.options = {
href: this.getAttribute('href') || '#', id: this.getAttribute('id'),
radius: this.getAttribute('radius') || '17.5px', color: this.getAttribute('color') || '#1989fa',
content: this.getAttribute('content') || '多彩按钮' autoplay: this.getAttribute('autoplay') ? true : false
}; };
this.innerHTML = ` this.render();
}
render() {
if (!this.options.id) return (this.innerHTML = '网易云歌单ID未填写');
this.innerHTML = '<span style="display: block" class="_content"></span>';
fetch('https://api.i-meto.com/meting/api?server=netease&type=playlist&id=' + this.options.id).then(async response => {
const audio = await response.json();
new APlayer({
container: getChildren(this, '_content'),
lrcType: 3,
theme: this.options.color,
autoplay: this.options.autoplay,
audio
});
});
}
}
);
customElements.define(
'joe-abtn',
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 = `
<a class="joe_abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow"> <a class="joe_abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
<span class="joe_abtn__icon"> <span class="joe_abtn__icon">
<i class="${this.options.icon} fa"></i> <i class="${this.options.icon} fa"></i>
@ -121,19 +136,22 @@ document.addEventListener('DOMContentLoaded', () => {
</span> </span>
</a> </a>
`; `;
}
} }
} );
window.customElements.define('joe-abtn', JoeAbtn);
class JoeAnote extends HTMLElement { customElements.define(
constructor() { 'joe-anote',
super(); class JoeAnote extends HTMLElement {
this.options = { constructor() {
icon: this.getAttribute('icon') || 'fa-download', super();
href: this.getAttribute('href') || '#', this.options = {
type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary', icon: this.getAttribute('icon') || 'fa-download',
content: this.getAttribute('content') || '标签按钮' href: this.getAttribute('href') || '#',
}; type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary',
this.innerHTML = ` content: this.getAttribute('content') || '标签按钮'
};
this.innerHTML = `
<a class="joe_anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow"> <a class="joe_anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
<span class="joe_anote__icon"> <span class="joe_anote__icon">
<i class="fa ${this.options.icon}"></i> <i class="fa ${this.options.icon}"></i>
@ -143,89 +161,141 @@ document.addEventListener('DOMContentLoaded', () => {
</span> </span>
</a> </a>
`; `;
}
} }
} );
window.customElements.define('joe-anote', JoeAnote);
class JoeDotted extends HTMLElement { customElements.define(
constructor() { 'joe-dotted',
super(); class JoeDotted extends HTMLElement {
this.startColor = this.getAttribute('startColor') || '#ff6c6c'; constructor() {
this.endColor = this.getAttribute('endColor') || '#1989fa'; super();
this.innerHTML = ` this.startColor = this.getAttribute('startColor') || '#ff6c6c';
this.endColor = this.getAttribute('endColor') || '#1989fa';
this.innerHTML = `
<span class="joe_dotted" style="background-image: repeating-linear-gradient(-45deg, ${this.startColor} 0, ${this.startColor} 20%, transparent 0, transparent 25%, ${this.endColor} 0, ${this.endColor} 45%, transparent 0, transparent 50%)"></span> <span class="joe_dotted" style="background-image: repeating-linear-gradient(-45deg, ${this.startColor} 0, ${this.startColor} 20%, transparent 0, transparent 25%, ${this.endColor} 0, ${this.endColor} 45%, transparent 0, transparent 50%)"></span>
`; `;
}
} }
} );
window.customElements.define('joe-dotted', JoeDotted);
class JoeHide extends HTMLElement { customElements.define(
constructor() { 'joe-cloud',
super(); class JoeCloud extends HTMLElement {
this.render(); constructor() {
super();
this.options = {
type: this.getAttribute('type') || 'default',
title: this.getAttribute('title') || '默认标题',
url: this.getAttribute('url'),
password: this.getAttribute('password')
};
const type = {
default: '默认网盘',
360: '360网盘',
bd: '百度网盘',
ty: '天翼网盘',
ct: '城通网盘',
wy: '微云网盘',
github: 'Github仓库',
lz: '蓝奏云网盘'
};
this.innerHTML = `
<span class="joe_cloud">
<div class="joe_cloud__logo _${this.options.type}"></div>
<div class="joe_cloud__describe">
<div class="joe_cloud__describe-title">${this.options.title}</div>
<div class="joe_cloud__describe-type">来源${type[this.options.type] || '默认网盘'}${this.options.password ? ' | 提取码:' + this.options.password : ''}</div>
</div>
<a class="joe_cloud__btn" href="${this.options.url}" target="_blank" rel="noopener noreferrer nofollow">
<i class="fa fa-download"></i>
</a>
</span>
`;
}
} }
render() { );
this.innerHTML = '<span class="joe_hide">此处内容作者设置了 <i class="joe_hide__button">回复</i> 可见</span>';
this.$button = this.querySelector('.joe_hide__button'); customElements.define(
const $comment = document.querySelector('.joe_comment'); 'joe-hide',
const $header = document.querySelector('.joe_header'); class JoeHide extends HTMLElement {
if (!$comment || !$header) return; constructor() {
this.$button.addEventListener('click', () => { super();
const top = $comment.offsetTop - $header.offsetHeight - 15; this.render();
window.scrollTo({ top, behavior: 'smooth' }); }
}); render() {
this.innerHTML = '<span class="joe_hide">此处内容作者设置了 <i class="joe_hide__button">回复</i> 可见</span>';
this.$button = this.querySelector('.joe_hide__button');
const $comment = document.querySelector('.joe_comment');
const $header = document.querySelector('.joe_header');
if (!$comment || !$header) return;
this.$button.addEventListener('click', () => {
const top = $comment.offsetTop - $header.offsetHeight - 15;
window.scrollTo({ top, behavior: 'smooth' });
});
}
} }
} );
window.customElements.define('joe-hide', JoeHide);
class JoeCardDefault extends HTMLElement { customElements.define(
constructor() { 'joe-card-default',
super(); class JoeCardDefault extends HTMLElement {
const _temp = getChildren(this, '_temp'); constructor() {
this.options = { super();
width: this.getAttribute('width') || '100%', const _temp = getChildren(this, '_temp');
label: this.getAttribute('label') || '卡片标题', this.options = {
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容' width: this.getAttribute('width') || '100%',
}; label: this.getAttribute('label') || '卡片标题',
const htmlStr = ` content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
};
const htmlStr = `
<div class="joe_card__default" style="width: ${this.options.width}"> <div class="joe_card__default" style="width: ${this.options.width}">
<div class="joe_card__default-title">${this.options.label}</div> <div class="joe_card__default-title">${this.options.label}</div>
<div class="joe_card__default-content">${this.options.content}</div> <div class="joe_card__default-content">${this.options.content}</div>
</div> </div>
`; `;
if (getChildren(this, '_content')) { if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr; getChildren(this, '_content').innerHTML = htmlStr;
} else { } else {
const span = document.createElement('span'); const span = document.createElement('span');
span.style.display = 'block'; span.style.display = 'block';
span.className = '_content'; span.className = '_content';
span.innerHTML = htmlStr; span.innerHTML = htmlStr;
this.appendChild(span); this.appendChild(span);
}
} }
} }
} );
window.customElements.define('joe-card-default', JoeCardDefault);
class JoeMessage extends HTMLElement { customElements.define(
constructor() { 'joe-message',
super(); class JoeMessage extends HTMLElement {
this.options = { constructor() {
type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info', super();
content: this.getAttribute('content') || '消息内容' this.options = {
}; type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
this.innerHTML = ` content: this.getAttribute('content') || '消息内容'
};
this.innerHTML = `
<span class="joe_message ${this.options.type}"> <span class="joe_message ${this.options.type}">
<span class="joe_message__icon"></span> <span class="joe_message__icon"></span>
<span class="joe_message__content">${this.options.content}</span> <span class="joe_message__content">${this.options.content}</span>
</span> </span>
`; `;
}
} }
} );
window.customElements.define('joe-message', JoeMessage);
class JoeProgress extends HTMLElement { customElements.define(
constructor() { 'joe-progress',
super(); class JoeProgress extends HTMLElement {
this.options = { constructor() {
percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%', super();
color: this.getAttribute('color') || '#ff6c6c' this.options = {
}; percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%',
this.innerHTML = ` color: this.getAttribute('color') || '#ff6c6c'
};
this.innerHTML = `
<span class="joe_progress"> <span class="joe_progress">
<div class="joe_progress__strip"> <div class="joe_progress__strip">
<div class="joe_progress__strip-percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></div> <div class="joe_progress__strip-percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></div>
@ -233,122 +303,137 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="joe_progress__percentage">${this.options.percentage}</div> <div class="joe_progress__percentage">${this.options.percentage}</div>
</span> </span>
`; `;
}
} }
} );
window.customElements.define('joe-progress', JoeProgress);
class JoeCallout extends HTMLElement { customElements.define(
constructor() { 'joe-callout',
super(); class JoeCallout extends HTMLElement {
const _temp = getChildren(this, '_temp'); constructor() {
this.options = { super();
color: this.getAttribute('color') || '#f0ad4e', const _temp = getChildren(this, '_temp');
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容' this.options = {
}; color: this.getAttribute('color') || '#f0ad4e',
const htmlStr = ` content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容'
};
const htmlStr = `
<div class="joe_callout" style="border-left-color: ${this.options.color};"> <div class="joe_callout" style="border-left-color: ${this.options.color};">
${this.options.content} ${this.options.content}
</div> </div>
`; `;
if (getChildren(this, '_content')) { if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr; getChildren(this, '_content').innerHTML = htmlStr;
} else { } else {
const span = document.createElement('span'); const span = document.createElement('span');
span.style.display = 'block'; span.style.display = 'block';
span.className = '_content'; span.className = '_content';
span.innerHTML = htmlStr; span.innerHTML = htmlStr;
this.appendChild(span); this.appendChild(span);
}
} }
} }
} );
window.customElements.define('joe-callout', JoeCallout);
class JoeCardDescribe extends HTMLElement { customElements.define(
constructor() { 'joe-card-describe',
super(); class JoeCardDescribe extends HTMLElement {
const _temp = getChildren(this, '_temp'); constructor() {
this.options = { super();
title: this.getAttribute('title') || '卡片描述', const _temp = getChildren(this, '_temp');
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容' this.options = {
}; title: this.getAttribute('title') || '卡片描述',
const htmlStr = ` content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
};
const htmlStr = `
<div class="joe_card__describe"> <div class="joe_card__describe">
<div class="joe_card__describe-title">${this.options.title}</div> <div class="joe_card__describe-title">${this.options.title}</div>
<div class="joe_card__describe-content">${this.options.content}</div> <div class="joe_card__describe-content">${this.options.content}</div>
</div> </div>
`; `;
if (getChildren(this, '_content')) { if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr; getChildren(this, '_content').innerHTML = htmlStr;
} else { } else {
const span = document.createElement('span'); const span = document.createElement('span');
span.style.display = 'block'; span.style.display = 'block';
span.className = '_content'; span.className = '_content';
span.innerHTML = htmlStr; span.innerHTML = htmlStr;
this.appendChild(span); this.appendChild(span);
}
} }
} }
} );
window.customElements.define('joe-card-describe', JoeCardDescribe);
class JoeCardList extends HTMLElement { customElements.define(
constructor() { 'joe-card-list',
super(); class JoeCardList extends HTMLElement {
const _temp = getChildren(this, '_temp'); constructor() {
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, ''); super();
let content = ''; const _temp = getChildren(this, '_temp');
_innerHTML.replace(/{card-list-item}([\s\S]*?){\/card-list-item}/g, function ($0, $1) { let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
content += `<div class="joe_card__list-item">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`; let content = '';
}); _innerHTML.replace(/{card-list-item}([\s\S]*?){\/card-list-item}/g, function ($0, $1) {
let htmlStr = `<div class="joe_card__list">${content}</div>`; content += `<div class="joe_card__list-item">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
if (getChildren(this, '_content')) { });
getChildren(this, '_content').innerHTML = htmlStr; let htmlStr = `<div class="joe_card__list">${content}</div>`;
} else { if (getChildren(this, '_content')) {
const span = document.createElement('span'); getChildren(this, '_content').innerHTML = htmlStr;
span.className = '_content'; } else {
span.style.display = 'block'; const span = document.createElement('span');
span.innerHTML = htmlStr; span.className = '_content';
this.appendChild(span); span.style.display = 'block';
span.innerHTML = htmlStr;
this.appendChild(span);
}
} }
} }
} );
window.customElements.define('joe-card-list', JoeCardList);
class JoeTimeline extends HTMLElement { customElements.define(
constructor() { 'joe-timeline',
super(); class JoeTimeline extends HTMLElement {
const _temp = getChildren(this, '_temp'); constructor() {
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, ''); super();
let content = ''; const _temp = getChildren(this, '_temp');
_innerHTML.replace(/{timeline-item([^}]*)}([\s\S]*?){\/timeline-item}/g, function ($0, $1, $2) { let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
content += ` let content = '';
_innerHTML.replace(/{timeline-item([^}]*)}([\s\S]*?){\/timeline-item}/g, function ($0, $1, $2) {
content += `
<div class="joe_timeline__item"> <div class="joe_timeline__item">
<div class="joe_timeline__item-tail"></div> <div class="joe_timeline__item-tail"></div>
<div class="joe_timeline__item-circle" ${$1}></div> <div class="joe_timeline__item-circle" ${$1}></div>
<div class="joe_timeline__item-content">${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div> <div class="joe_timeline__item-content">${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>
</div> </div>
`; `;
}); });
let htmlStr = `<div class="joe_timeline">${content}</div>`; let htmlStr = `<div class="joe_timeline">${content}</div>`;
if (getChildren(this, '_content')) { if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr; getChildren(this, '_content').innerHTML = htmlStr;
} else { } else {
const span = document.createElement('span'); const span = document.createElement('span');
span.className = '_content'; span.className = '_content';
span.style.display = 'block'; span.style.display = 'block';
span.innerHTML = htmlStr; span.innerHTML = htmlStr;
this.appendChild(span); this.appendChild(span);
}
this.querySelectorAll('.joe_timeline__item-circle').forEach((item, index) => {
const color = item.getAttribute('color') || '#19be6b';
item.style.borderColor = color;
});
} }
this.querySelectorAll('.joe_timeline__item-circle').forEach((item, index) => {
const color = item.getAttribute('color') || '#19be6b';
item.style.borderColor = color;
});
} }
} );
window.customElements.define('joe-timeline', JoeTimeline);
class JoeCollapse extends HTMLElement { customElements.define(
constructor() { 'joe-collapse',
super(); class JoeCollapse extends HTMLElement {
const _temp = getChildren(this, '_temp'); constructor() {
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, ''); super();
let content = ''; const _temp = getChildren(this, '_temp');
_innerHTML.replace(/{collapse-item([^}]*)}([\s\S]*?){\/collapse-item}/g, function ($0, $1, $2) { let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
content += ` let content = '';
_innerHTML.replace(/{collapse-item([^}]*)}([\s\S]*?){\/collapse-item}/g, function ($0, $1, $2) {
content += `
<div class="joe_collapse__item" ${$1}> <div class="joe_collapse__item" ${$1}>
<div class="joe_collapse__item-head"> <div class="joe_collapse__item-head">
<div class="joe_collapse__item-head--label"></div> <div class="joe_collapse__item-head--label"></div>
@ -359,133 +444,144 @@ document.addEventListener('DOMContentLoaded', () => {
</div> </div>
</div> </div>
`; `;
});
let htmlStr = `<div class="joe_collapse">${content}</div>`;
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.className = '_content';
span.style.display = 'block';
span.innerHTML = htmlStr;
this.appendChild(span);
}
this.querySelectorAll('.joe_collapse__item').forEach(item => {
const label = item.getAttribute('label') || '折叠标题';
const head = getChildren(item, 'joe_collapse__item-head');
const headLabel = getChildren(head, 'joe_collapse__item-head--label');
headLabel.innerHTML = label;
const wrapper = getChildren(item, 'joe_collapse__item-wrapper');
const content = getChildren(wrapper, 'joe_collapse__item-wrapper--content');
const open = item.getAttribute('open');
if (open !== null) {
item.classList.add('active');
wrapper.style.maxHeight = 'none';
}
head.addEventListener('click', () => {
wrapper.style.maxHeight = content.offsetHeight + 'px';
let timer = setTimeout(() => {
if (item.classList.contains('active')) {
item.classList.remove('active');
wrapper.style.maxHeight = 0;
} else {
item.classList.add('active');
wrapper.style.maxHeight = content.offsetHeight + 'px';
}
clearTimeout(timer);
}, 30);
}); });
}); let htmlStr = `<div class="joe_collapse">${content}</div>`;
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.className = '_content';
span.style.display = 'block';
span.innerHTML = htmlStr;
this.appendChild(span);
}
this.querySelectorAll('.joe_collapse__item').forEach(item => {
const label = item.getAttribute('label') || '折叠标题';
const head = getChildren(item, 'joe_collapse__item-head');
const headLabel = getChildren(head, 'joe_collapse__item-head--label');
headLabel.innerHTML = label;
const wrapper = getChildren(item, 'joe_collapse__item-wrapper');
const content = getChildren(wrapper, 'joe_collapse__item-wrapper--content');
const open = item.getAttribute('open');
if (open !== null) {
item.classList.add('active');
wrapper.style.maxHeight = 'none';
}
head.addEventListener('click', () => {
wrapper.style.maxHeight = content.offsetHeight + 'px';
let timer = setTimeout(() => {
if (item.classList.contains('active')) {
item.classList.remove('active');
wrapper.style.maxHeight = 0;
} else {
item.classList.add('active');
wrapper.style.maxHeight = content.offsetHeight + 'px';
}
clearTimeout(timer);
}, 30);
});
});
}
} }
} );
window.customElements.define('joe-collapse', JoeCollapse);
class JoeDplayer extends HTMLElement { customElements.define(
constructor() { 'joe-dplayer',
super(); class JoeDplayer extends HTMLElement {
this.options = { constructor() {
src: this.getAttribute('src'), super();
player: this.getAttribute('player') this.options = {
}; src: this.getAttribute('src'),
this.render(); player: this.getAttribute('player')
};
this.render();
}
render() {
if (this.options.src) this.innerHTML = `<iframe allowfullscreen="true" class="joe_vplayer" src="${this.options.player + this.options.src}"></iframe>`;
else this.innerHTML = '播放地址未填写!';
}
} }
render() { );
if (this.options.src) this.innerHTML = `<iframe allowfullscreen="true" class="joe_vplayer" src="${this.options.player + this.options.src}"></iframe>`;
else this.innerHTML = '播放地址未填写!'; customElements.define(
'joe-bilibili',
class JoeBilibili extends HTMLElement {
constructor() {
super();
this.bvid = this.getAttribute('bvid');
this.render();
}
render() {
if (this.bvid) this.innerHTML = `<iframe allowfullscreen="true" class="joe_vplayer" src="//player.bilibili.com/player.html?bvid=${this.bvid}"></iframe>`;
else this.innerHTML = 'Bvid未填写';
}
} }
} );
window.customElements.define('joe-dplayer', JoeDplayer);
class JoeBilibili extends HTMLElement { customElements.define(
constructor() { 'joe-tabs',
super(); class JoeTabs extends HTMLElement {
this.bvid = this.getAttribute('bvid'); constructor() {
this.render(); super();
} const _temp = getChildren(this, '_temp');
render() { let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
if (this.bvid) this.innerHTML = `<iframe allowfullscreen="true" class="joe_vplayer" src="//player.bilibili.com/player.html?bvid=${this.bvid}"></iframe>`; let navs = '';
else this.innerHTML = 'Bvid未填写'; let contents = '';
} _innerHTML.replace(/{tabs-pane([^}]*)}([\s\S]*?){\/tabs-pane}/g, function ($0, $1, $2) {
} navs += `<div class="joe_tabs__head-item" ${$1}></div>`;
window.customElements.define('joe-bilibili', JoeBilibili); contents += `<div style="display: none" class="joe_tabs__body-item" ${$1}>${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
class JoeTabs extends HTMLElement { });
constructor() { let htmlStr = `
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
let navs = '';
let contents = '';
_innerHTML.replace(/{tabs-pane([^}]*)}([\s\S]*?){\/tabs-pane}/g, function ($0, $1, $2) {
navs += `<div class="joe_tabs__head-item" ${$1}></div>`;
contents += `<div style="display: none" class="joe_tabs__body-item" ${$1}>${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
});
let htmlStr = `
<div class="joe_tabs"> <div class="joe_tabs">
<div class="joe_tabs__head">${navs}</div> <div class="joe_tabs__head">${navs}</div>
<div class="joe_tabs__body">${contents}</div> <div class="joe_tabs__body">${contents}</div>
</div> </div>
`; `;
if (getChildren(this, '_content')) { if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr; getChildren(this, '_content').innerHTML = htmlStr;
} else { } else {
const span = document.createElement('span'); const span = document.createElement('span');
span.className = '_content'; span.className = '_content';
span.style.display = 'block'; span.style.display = 'block';
span.innerHTML = htmlStr; span.innerHTML = htmlStr;
this.appendChild(span); this.appendChild(span);
} }
this.querySelectorAll('.joe_tabs__head-item').forEach((item, index) => { this.querySelectorAll('.joe_tabs__head-item').forEach((item, index) => {
const label = item.getAttribute('label'); const label = item.getAttribute('label');
item.innerHTML = label; item.innerHTML = label;
item.addEventListener('click', () => { item.addEventListener('click', () => {
this.querySelectorAll('.joe_tabs__head-item').forEach(_item => _item.classList.remove('active')); this.querySelectorAll('.joe_tabs__head-item').forEach(_item => _item.classList.remove('active'));
this.querySelectorAll('.joe_tabs__body-item').forEach(_item => (_item.style.display = 'none')); this.querySelectorAll('.joe_tabs__body-item').forEach(_item => (_item.style.display = 'none'));
if (this.querySelector(`.joe_tabs__body-item[label="${label}"]`)) { if (this.querySelector(`.joe_tabs__body-item[label="${label}"]`)) {
this.querySelector(`.joe_tabs__body-item[label="${label}"]`).style.display = 'block'; this.querySelector(`.joe_tabs__body-item[label="${label}"]`).style.display = 'block';
} }
item.classList.add('active'); item.classList.add('active');
});
if (index === 0) item.click();
}); });
if (index === 0) item.click();
});
}
}
window.customElements.define('joe-tabs', JoeTabs);
class JoeCopy extends HTMLElement {
constructor() {
super();
this.options = {
showText: this.getAttribute('showText') || '点击复制',
copyText: this.getAttribute('copyText') || '默认文本'
};
this.innerHTML = `<span class="joe_copy" style="cursor: pointer; user-select: none;">${this.options.showText}</span>`;
const button = getChildren(this, 'joe_copy');
if (typeof ClipboardJS !== 'undefined' && typeof Qmsg !== 'undefined') {
new ClipboardJS(button, { text: () => this.options.copyText }).on('success', () => Qmsg.success('复制成功!'));
} else {
button.addEventListener('click', () => alert('该功能请前往前台查看!'));
} }
} }
} );
window.customElements.define('joe-copy', JoeCopy);
customElements.define(
'joe-copy',
class JoeCopy extends HTMLElement {
constructor() {
super();
this.options = {
showText: this.getAttribute('showText') || '点击复制',
copyText: this.getAttribute('copyText') || '默认文本'
};
this.innerHTML = `<span class="joe_copy" style="cursor: pointer; user-select: none;">${this.options.showText}</span>`;
const button = getChildren(this, 'joe_copy');
if (typeof ClipboardJS !== 'undefined' && typeof Qmsg !== 'undefined') {
new ClipboardJS(button, { text: () => this.options.copyText }).on('success', () => Qmsg.success('复制成功!'));
} else {
button.addEventListener('click', () => alert('该功能请前往前台查看!'));
}
}
}
);
$('.joe_detail__article p:empty').remove(); $('.joe_detail__article p:empty').remove();
}); });

File diff suppressed because one or more lines are too long

View File

@ -50,7 +50,7 @@ class Editor
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/themes/prism-tomorrow.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=202104231747') ?>"> <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=20210425') ?>">
<script> <script>
window.JoeConfig = { window.JoeConfig = {
uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>', uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>',
@ -65,9 +65,9 @@ class Editor
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.2.4/plugin/prism/prism.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.2.4/plugin/prism/prism.min.js"></script>
<script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=202104231747') ?>"></script> <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=20210425') ?>"></script>
<script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=202104231747') ?>"></script> <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=20210425') ?>"></script>
<script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=202104231747') ?>"></script> <script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=20210425') ?>"></script>
<?php <?php
} }
} }

View File

@ -2,7 +2,7 @@
/* 获取主题当前版本号 */ /* 获取主题当前版本号 */
function _getVersion() function _getVersion()
{ {
return "6.6.6"; return "6.6.7";
}; };
/* 判断是否是手机 */ /* 判断是否是手机 */

View File

@ -36,6 +36,9 @@ function _parseContent($post, $login)
if (strpos($content, '{abtn') !== false) { if (strpos($content, '{abtn') !== false) {
$content = preg_replace('/{abtn([^}]*)\/}/SU', '<joe-abtn $1></joe-abtn>', $content); $content = preg_replace('/{abtn([^}]*)\/}/SU', '<joe-abtn $1></joe-abtn>', $content);
} }
if (strpos($content, '{cloud') !== false) {
$content = preg_replace('/{cloud([^}]*)\/}/SU', '<joe-cloud $1></joe-cloud>', $content);
}
if (strpos($content, '{anote') !== false) { if (strpos($content, '{anote') !== false) {
$content = preg_replace('/{anote([^}]*)\/}/SU', '<joe-anote $1></joe-anote>', $content); $content = preg_replace('/{anote([^}]*)\/}/SU', '<joe-anote $1></joe-anote>', $content);
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "typecho-joe-next", "name": "typecho-joe-next",
"version": "6.6.6", "version": "6.6.7",
"description": "A Theme Of Typecho", "description": "A Theme Of Typecho",
"main": "index.php", "main": "index.php",
"keywords": [ "keywords": [

View File

@ -18,8 +18,8 @@
<?php endif; ?> <?php endif; ?>
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.mode.min.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.mode.min.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.min.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.normalize.min.css'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.min.css?v=202104231747'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.min.css?v=20210425'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.min.css?v=202104231747'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.min.css?v=20210425'); ?>">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/qmsg/qmsg.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/qmsg/qmsg.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css" />
@ -40,6 +40,6 @@
<?php if ($this->options->JCursorEffects && $this->options->JCursorEffects !== 'off') : ?> <?php if ($this->options->JCursorEffects && $this->options->JCursorEffects !== 'off') : ?>
<script src="<?php $this->options->themeUrl('assets/cursor/' . $this->options->JCursorEffects); ?>" async></script> <script src="<?php $this->options->themeUrl('assets/cursor/' . $this->options->JCursorEffects); ?>" async></script>
<?php endif; ?> <?php endif; ?>
<script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=202104231747'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=20210425'); ?>"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=202104231747'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=20210425'); ?>"></script>
<?php $this->options->JCustomHeadEnd() ?> <?php $this->options->JCustomHeadEnd() ?>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -780,13 +780,38 @@ export default class JoeAction {
<div class="fitem"> <div class="fitem">
<label>网盘类型</label> <label>网盘类型</label>
<select name="type"> <select name="type">
<option value="默认网盘" selected>默认网盘</option> <option value="default" selected>默认网盘</option>
<option value="百度网盘">百度网盘</option> <option value="360">360网盘</option>
<option value="bd">百度网盘</option>
<option value="ty">天翼网盘</option>
<option value="ct">城通网盘</option>
<option value="wy">微云网盘</option>
<option value="github">Github仓库</option>
<option value="lz">蓝奏云网盘</option>
</select> </select>
</div> </div>
<div class="fitem">
<label>显示标题</label>
<input autocomplete="off" name="title" placeholder="请输入显示标题"/>
</div>
<div class="fitem">
<label>下载地址</label>
<input autocomplete="off" name="url" placeholder="请输入网盘地址"/>
</div>
<div class="fitem">
<label>提取密码</label>
<input autocomplete="off" name="password" placeholder="请输入提取码(非必填)"/>
</div>
`, `,
confirm: () => { confirm: () => {
const type = $(".cm-modal select[name='type']").val();
const title = $(".cm-modal input[name='title']").val();
const url = $(".cm-modal input[name='url']").val();
const password = $(".cm-modal input[name='password']").val();
const str = `\n{cloud title="${title}" type="${type}" url="${url}" password="${password}"/}\n\n`;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
else this._replaceSelection(cm, str);
cm.focus()
} }
}); });
} }

View File

@ -31,6 +31,7 @@ export default function createPreviewHtml(str) {
str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>'); str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
str = str.replace(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>'); str = str.replace(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>');
str = str.replace(/{progress([^}]*)\/}/g, '<joe-progress $1></joe-progress>'); str = str.replace(/{progress([^}]*)\/}/g, '<joe-progress $1></joe-progress>');
str = str.replace(/{cloud([^}]*)\/}/g, '<joe-cloud $1></joe-cloud>');
str = str.replace(/{hide[^}]*}([\s\S]*?){\/hide}/g, '<joe-hide></joe-hide>'); str = str.replace(/{hide[^}]*}([\s\S]*?){\/hide}/g, '<joe-hide></joe-hide>');
str = str.replace(/{card-default([^}]*)}([\s\S]*?){\/card-default}/g, '<section style="margin-bottom: 15px"><joe-card-default $1><span class="_temp" style="display: none">$2</span></joe-card-default></section>'); str = str.replace(/{card-default([^}]*)}([\s\S]*?){\/card-default}/g, '<section style="margin-bottom: 15px"><joe-card-default $1><span class="_temp" style="display: none">$2</span></joe-card-default></section>');
str = str.replace(/{callout([^}]*)}([\s\S]*?){\/callout}/g, '<section style="margin-bottom: 15px"><joe-callout $1><span class="_temp" style="display: none">$2</span></joe-callout></section>'); str = str.replace(/{callout([^}]*)}([\s\S]*?){\/callout}/g, '<section style="margin-bottom: 15px"><joe-callout $1><span class="_temp" style="display: none">$2</span></joe-callout></section>');

View File

@ -220,11 +220,11 @@ export default [
title: '折叠面板', title: '折叠面板',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M944 128H80c-8.8 0-16 7.2-16 16v736c0 8.8 7.2 16 16 16h864c8.8 0 16-7.2 16-16V144c0-8.8-7.2-16-16-16zm-48 64v216H128V192h768zM128 832V472h768v360H128z"/><path d="M706 340.8c6.4 7.6 18 7.6 24.4 0l58.8-69.2c8.8-10.4 1.6-26.4-12-26.4H659.6c-13.6 0-21.2 16-12 26.4l58.4 69.2z"/></svg>' innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M944 128H80c-8.8 0-16 7.2-16 16v736c0 8.8 7.2 16 16 16h864c8.8 0 16-7.2 16-16V144c0-8.8-7.2-16-16-16zm-48 64v216H128V192h768zM128 832V472h768v360H128z"/><path d="M706 340.8c6.4 7.6 18 7.6 24.4 0l58.8-69.2c8.8-10.4 1.6-26.4-12-26.4H659.6c-13.6 0-21.2 16-12 26.4l58.4 69.2z"/></svg>'
}, },
// { {
// type: 'cloud', type: 'cloud',
// title: '云盘下载', title: '云盘下载',
// innerHTML: '<svg viewBox="0 0 1462 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M1435.063 668.453a348.891 348.891 0 0 1-102.766 248.246 348.891 348.891 0 0 1-247.003 102.84H377.71a348.891 348.891 0 0 1-247.004-102.84A348.891 348.891 0 0 1 27.941 668.526c0-93.843 36.498-181.98 102.765-248.32a348.672 348.672 0 0 1 210.36-100.937c17.553-69.486 53.54-133.12 105.544-185.125a399.067 399.067 0 0 1 284.16-117.76c130.853 0 253.806 63.927 329.143 171.154a50.25 50.25 0 0 1-82.286 57.71 302.007 302.007 0 0 0-246.71-128.293 302.08 302.08 0 0 0-286.062 206.483c-5.12 15.36-8.997 40.52-11.63 61.805a37.376 37.376 0 0 1-39.058 32.915 257.902 257.902 0 0 0-65.024 4.535 251.1 251.1 0 0 0-200.631 249.782c2.194 135.607 117.467 246.492 253.074 246.492h699.831c136.631 0 249.93-108.252 252.928-244.736a250.88 250.88 0 0 0-250.514-256.512 250.807 250.807 0 0 0-250.514 249.929 51.931 51.931 0 0 1-45.861 50.688 50.322 50.322 0 0 1-54.71-50.03c0-93.842 36.497-182.052 102.765-248.32a348.891 348.891 0 0 1 248.32-102.839c93.842 0 181.98 36.572 248.32 102.84a349.623 349.623 0 0 1 102.912 248.539z"/></svg>' innerHTML: '<svg viewBox="0 0 1462 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M1435.063 668.453a348.891 348.891 0 0 1-102.766 248.246 348.891 348.891 0 0 1-247.003 102.84H377.71a348.891 348.891 0 0 1-247.004-102.84A348.891 348.891 0 0 1 27.941 668.526c0-93.843 36.498-181.98 102.765-248.32a348.672 348.672 0 0 1 210.36-100.937c17.553-69.486 53.54-133.12 105.544-185.125a399.067 399.067 0 0 1 284.16-117.76c130.853 0 253.806 63.927 329.143 171.154a50.25 50.25 0 0 1-82.286 57.71 302.007 302.007 0 0 0-246.71-128.293 302.08 302.08 0 0 0-286.062 206.483c-5.12 15.36-8.997 40.52-11.63 61.805a37.376 37.376 0 0 1-39.058 32.915 257.902 257.902 0 0 0-65.024 4.535 251.1 251.1 0 0 0-200.631 249.782c2.194 135.607 117.467 246.492 253.074 246.492h699.831c136.631 0 249.93-108.252 252.928-244.736a250.88 250.88 0 0 0-250.514-256.512 250.807 250.807 0 0 0-250.514 249.929 51.931 51.931 0 0 1-45.861 50.688 50.322 50.322 0 0 1-54.71-50.03c0-93.842 36.497-182.052 102.765-248.32a348.891 348.891 0 0 1 248.32-102.839c93.842 0 181.98 36.572 248.32 102.84a349.623 349.623 0 0 1 102.912 248.539z"/></svg>'
// }, },
/* --------------------------- 短代码结束 --------------------------- */ /* --------------------------- 短代码结束 --------------------------- */
{ {
type: 'clean', type: 'clean',

File diff suppressed because one or more lines are too long