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', () => {
$('.joe_detail__article p:empty').remove();
class JoeMtitle extends HTMLElement {
constructor() {
super();
this.innerHTML = `
customElements.define(
'joe-mtitle',
class JoeMtitle extends HTMLElement {
constructor() {
super();
this.innerHTML = `
<span class="joe_mtitle">
<span class="joe_mtitle__text">
${this.getAttribute('title') || '默认标题'}
</span>
</span>
`;
}
}
}
window.customElements.define('joe-mtitle', JoeMtitle);
class JoeMp3 extends HTMLElement {
constructor() {
super();
this.options = {
name: this.getAttribute('name'),
url: this.getAttribute('url'),
theme: this.getAttribute('theme') || '#1989fa',
cover: this.getAttribute('cover'),
autoplay: this.getAttribute('autoplay') ? true : false
};
this.render();
}
render() {
if (!this.options.url) return (this.innerHTML = '音频地址未填写!');
this.innerHTML = '<span style="display: block" class="_content"></span>';
new APlayer({
container: getChildren(this, '_content'),
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();
);
customElements.define(
'joe-mp3',
class JoeMp3 extends HTMLElement {
constructor() {
super();
this.options = {
name: this.getAttribute('name'),
url: this.getAttribute('url'),
theme: this.getAttribute('theme') || '#1989fa',
cover: this.getAttribute('cover'),
autoplay: this.getAttribute('autoplay') ? true : false
};
this.render();
}
render() {
if (!this.options.url) return (this.innerHTML = '音频地址未填写!');
this.innerHTML = '<span style="display: block" class="_content"></span>';
new APlayer({
container: getChildren(this, '_content'),
lrcType: 3,
theme: this.options.color,
theme: this.options.theme,
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 {
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=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-music',
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({
container: getChildren(this, '_content'),
lrcType: 3,
theme: this.options.color,
autoplay: this.options.autoplay,
audio
});
});
});
}
}
}
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 = `
);
customElements.define(
'joe-mlist',
class JoeMlist 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=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">
<span class="joe_abtn__icon">
<i class="${this.options.icon} fa"></i>
@ -121,19 +136,22 @@ document.addEventListener('DOMContentLoaded', () => {
</span>
</a>
`;
}
}
}
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 = `
);
customElements.define(
'joe-anote',
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 = `
<a class="joe_anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
<span class="joe_anote__icon">
<i class="fa ${this.options.icon}"></i>
@ -143,89 +161,141 @@ document.addEventListener('DOMContentLoaded', () => {
</span>
</a>
`;
}
}
}
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 = `
);
customElements.define(
'joe-dotted',
class JoeDotted extends HTMLElement {
constructor() {
super();
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>
`;
}
}
}
window.customElements.define('joe-dotted', JoeDotted);
class JoeHide extends HTMLElement {
constructor() {
super();
this.render();
);
customElements.define(
'joe-cloud',
class JoeCloud extends HTMLElement {
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');
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' });
});
);
customElements.define(
'joe-hide',
class JoeHide extends HTMLElement {
constructor() {
super();
this.render();
}
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 {
constructor() {
super();
const _temp = getChildren(this, '_temp');
this.options = {
width: this.getAttribute('width') || '100%',
label: this.getAttribute('label') || '卡片标题',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
};
const htmlStr = `
);
customElements.define(
'joe-card-default',
class JoeCardDefault extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
this.options = {
width: this.getAttribute('width') || '100%',
label: this.getAttribute('label') || '卡片标题',
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-title">${this.options.label}</div>
<div class="joe_card__default-content">${this.options.content}</div>
</div>
`;
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.style.display = 'block';
span.className = '_content';
span.innerHTML = htmlStr;
this.appendChild(span);
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.style.display = 'block';
span.className = '_content';
span.innerHTML = htmlStr;
this.appendChild(span);
}
}
}
}
window.customElements.define('joe-card-default', JoeCardDefault);
class JoeMessage extends HTMLElement {
constructor() {
super();
this.options = {
type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
content: this.getAttribute('content') || '消息内容'
};
this.innerHTML = `
);
customElements.define(
'joe-message',
class JoeMessage extends HTMLElement {
constructor() {
super();
this.options = {
type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
content: this.getAttribute('content') || '消息内容'
};
this.innerHTML = `
<span class="joe_message ${this.options.type}">
<span class="joe_message__icon"></span>
<span class="joe_message__content">${this.options.content}</span>
</span>
`;
}
}
}
window.customElements.define('joe-message', JoeMessage);
class JoeProgress extends HTMLElement {
constructor() {
super();
this.options = {
percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%',
color: this.getAttribute('color') || '#ff6c6c'
};
this.innerHTML = `
);
customElements.define(
'joe-progress',
class JoeProgress extends HTMLElement {
constructor() {
super();
this.options = {
percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%',
color: this.getAttribute('color') || '#ff6c6c'
};
this.innerHTML = `
<span class="joe_progress">
<div class="joe_progress__strip">
<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>
</span>
`;
}
}
}
window.customElements.define('joe-progress', JoeProgress);
class JoeCallout extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
this.options = {
color: this.getAttribute('color') || '#f0ad4e',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容'
};
const htmlStr = `
);
customElements.define(
'joe-callout',
class JoeCallout extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
this.options = {
color: this.getAttribute('color') || '#f0ad4e',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容'
};
const htmlStr = `
<div class="joe_callout" style="border-left-color: ${this.options.color};">
${this.options.content}
</div>
`;
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.style.display = 'block';
span.className = '_content';
span.innerHTML = htmlStr;
this.appendChild(span);
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.style.display = 'block';
span.className = '_content';
span.innerHTML = htmlStr;
this.appendChild(span);
}
}
}
}
window.customElements.define('joe-callout', JoeCallout);
class JoeCardDescribe extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
this.options = {
title: this.getAttribute('title') || '卡片描述',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
};
const htmlStr = `
);
customElements.define(
'joe-card-describe',
class JoeCardDescribe extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
this.options = {
title: this.getAttribute('title') || '卡片描述',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
};
const htmlStr = `
<div class="joe_card__describe">
<div class="joe_card__describe-title">${this.options.title}</div>
<div class="joe_card__describe-content">${this.options.content}</div>
</div>
`;
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.style.display = 'block';
span.className = '_content';
span.innerHTML = htmlStr;
this.appendChild(span);
if (getChildren(this, '_content')) {
getChildren(this, '_content').innerHTML = htmlStr;
} else {
const span = document.createElement('span');
span.style.display = 'block';
span.className = '_content';
span.innerHTML = htmlStr;
this.appendChild(span);
}
}
}
}
window.customElements.define('joe-card-describe', JoeCardDescribe);
class JoeCardList extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
let content = '';
_innerHTML.replace(/{card-list-item}([\s\S]*?){\/card-list-item}/g, function ($0, $1) {
content += `<div class="joe_card__list-item">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
});
let htmlStr = `<div class="joe_card__list">${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);
);
customElements.define(
'joe-card-list',
class JoeCardList extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
let content = '';
_innerHTML.replace(/{card-list-item}([\s\S]*?){\/card-list-item}/g, function ($0, $1) {
content += `<div class="joe_card__list-item">${$1.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>`;
});
let htmlStr = `<div class="joe_card__list">${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);
}
}
}
}
window.customElements.define('joe-card-list', JoeCardList);
class JoeTimeline extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
let content = '';
_innerHTML.replace(/{timeline-item([^}]*)}([\s\S]*?){\/timeline-item}/g, function ($0, $1, $2) {
content += `
);
customElements.define(
'joe-timeline',
class JoeTimeline extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
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-tail"></div>
<div class="joe_timeline__item-circle" ${$1}></div>
<div class="joe_timeline__item-content">${$2.trim().replace(/^(<br>)|(<br>)$/g, '')}</div>
</div>
`;
});
let htmlStr = `<div class="joe_timeline">${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);
});
let htmlStr = `<div class="joe_timeline">${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_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 {
constructor() {
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
let content = '';
_innerHTML.replace(/{collapse-item([^}]*)}([\s\S]*?){\/collapse-item}/g, function ($0, $1, $2) {
content += `
);
customElements.define(
'joe-collapse',
class JoeCollapse extends HTMLElement {
constructor() {
super();
const _temp = getChildren(this, '_temp');
let _innerHTML = _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '');
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-head">
<div class="joe_collapse__item-head--label"></div>
@ -359,133 +444,144 @@ document.addEventListener('DOMContentLoaded', () => {
</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 {
constructor() {
super();
this.options = {
src: this.getAttribute('src'),
player: this.getAttribute('player')
};
this.render();
customElements.define(
'joe-dplayer',
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 = `<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 {
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-bilibili', JoeBilibili);
class JoeTabs extends HTMLElement {
constructor() {
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 = `
);
customElements.define(
'joe-tabs',
class JoeTabs extends HTMLElement {
constructor() {
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__head">${navs}</div>
<div class="joe_tabs__body">${contents}</div>
</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_tabs__head-item').forEach((item, index) => {
const label = item.getAttribute('label');
item.innerHTML = label;
item.addEventListener('click', () => {
this.querySelectorAll('.joe_tabs__head-item').forEach(_item => _item.classList.remove('active'));
this.querySelectorAll('.joe_tabs__body-item').forEach(_item => (_item.style.display = 'none'));
if (this.querySelector(`.joe_tabs__body-item[label="${label}"]`)) {
this.querySelector(`.joe_tabs__body-item[label="${label}"]`).style.display = 'block';
}
item.classList.add('active');
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_tabs__head-item').forEach((item, index) => {
const label = item.getAttribute('label');
item.innerHTML = label;
item.addEventListener('click', () => {
this.querySelectorAll('.joe_tabs__head-item').forEach(_item => _item.classList.remove('active'));
this.querySelectorAll('.joe_tabs__body-item').forEach(_item => (_item.style.display = 'none'));
if (this.querySelector(`.joe_tabs__body-item[label="${label}"]`)) {
this.querySelector(`.joe_tabs__body-item[label="${label}"]`).style.display = 'block';
}
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();
});

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/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="<?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>
window.JoeConfig = {
uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>',
@ -65,9 +65,9 @@ class Editor
</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="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=202104231747') ?>"></script>
<script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=202104231747') ?>"></script>
<script src="<?php Helper::options()->themeUrl('assets/js/joe.short.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=20210425') ?>"></script>
<script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=20210425') ?>"></script>
<?php
}
}

View File

@ -2,7 +2,7 @@
/* 获取主题当前版本号 */
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) {
$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) {
$content = preg_replace('/{anote([^}]*)\/}/SU', '<joe-anote $1></joe-anote>', $content);
}

View File

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

View File

@ -18,8 +18,8 @@
<?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.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.responsive.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=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/@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" />
@ -40,6 +40,6 @@
<?php if ($this->options->JCursorEffects && $this->options->JCursorEffects !== 'off') : ?>
<script src="<?php $this->options->themeUrl('assets/cursor/' . $this->options->JCursorEffects); ?>" async></script>
<?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.short.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=20210425'); ?>"></script>
<?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">
<label>网盘类型</label>
<select name="type">
<option value="默认网盘" selected>默认网盘</option>
<option value="百度网盘">百度网盘</option>
<option value="default" selected>默认网盘</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>
</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: () => {
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(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>');
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(/{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>');

View File

@ -220,11 +220,11 @@ export default [
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>'
},
// {
// type: 'cloud',
// 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>'
// },
{
type: 'cloud',
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>'
},
/* --------------------------- 短代码结束 --------------------------- */
{
type: 'clean',

File diff suppressed because one or more lines are too long