This commit is contained in:
haoouba 2021-04-21 22:48:18 +08:00
parent ba0938b5d3
commit 6af7d8f87c
17 changed files with 944 additions and 816 deletions

View File

@ -1,192 +1,239 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
class JoeMtitle extends HTMLElement { class JoeMtitle extends HTMLElement {
constructor() { constructor() {
super(); super();
this.innerHTML = ` this.innerHTML = `
<span class="joe_detail__article-mtitle"> <span class="joe_detail__article-mtitle">
<span class="text"> <span class="text">
${this.getAttribute('title') || '默认标题'} ${this.getAttribute('title') || '默认标题'}
</span> </span>
</span>`; </span>`;
} }
} }
window.customElements.define('joe-mtitle', JoeMtitle); window.customElements.define('joe-mtitle', JoeMtitle);
class JoeDplayer extends HTMLElement { class JoeDplayer extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
src: this.getAttribute('src'), src: this.getAttribute('src'),
player: this.getAttribute('player') player: this.getAttribute('player')
}; };
this.render(); this.render();
} }
render() { render() {
if (this.options.src) this.innerHTML = `<iframe allowfullscreen="true" class="joe_detail__article-player" src="${this.options.player + this.options.src}"></iframe>`; if (this.options.src) this.innerHTML = `<iframe allowfullscreen="true" class="joe_detail__article-player" src="${this.options.player + this.options.src}"></iframe>`;
else this.innerHTML = '播放地址未填写!'; else this.innerHTML = '播放地址未填写!';
} }
} }
window.customElements.define('joe-dplayer', JoeDplayer); window.customElements.define('joe-dplayer', JoeDplayer);
class JoeBilibili extends HTMLElement { class JoeBilibili extends HTMLElement {
constructor() { constructor() {
super(); super();
this.bvid = this.getAttribute('bvid'); this.bvid = this.getAttribute('bvid');
this.render(); this.render();
} }
render() { render() {
if (this.bvid) this.innerHTML = `<iframe allowfullscreen="true" class="joe_detail__article-player" src="//player.bilibili.com/player.html?bvid=${this.bvid}"></iframe>`; if (this.bvid) this.innerHTML = `<iframe allowfullscreen="true" class="joe_detail__article-player" src="//player.bilibili.com/player.html?bvid=${this.bvid}"></iframe>`;
else this.innerHTML = 'Bvid未填写'; else this.innerHTML = 'Bvid未填写';
} }
} }
window.customElements.define('joe-bilibili', JoeBilibili); window.customElements.define('joe-bilibili', JoeBilibili);
class JoeMusic extends HTMLElement { class JoeMp3 extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
id: this.getAttribute('id'), name: this.getAttribute('name'),
width: this.getAttribute('width') || '100%', url: this.getAttribute('url'),
autoplay: this.getAttribute('autoplay') ? 1 : 0 theme: this.getAttribute('theme') || '#1989fa',
}; cover: this.getAttribute('cover'),
this.render(); autoplay: this.getAttribute('autoplay') ? true : false
} };
render() { this.render();
if (this.options.id) this.innerHTML = `<iframe style="display: block; margin: 0 auto; border: 0;" width="${this.options.width}" height="86px" src="//music.163.com/outchain/player?type=2&id=${this.options.id}&auto=${this.options.autoplay}&height=66"></iframe>`; }
else this.innerHTML = '网易云歌曲ID未填写'; render() {
} if (!this.options.url) return (this.innerHTML = '音频地址未填写!');
} this.innerHTML = '<div></div>';
window.customElements.define('joe-music', JoeMusic); new APlayer({
class JoeMlist extends HTMLElement { container: this.querySelector('div'),
constructor() { theme: this.options.theme,
super(); autoplay: this.options.autoplay,
this.options = { audio: [
id: this.getAttribute('id'), {
width: this.getAttribute('width') || '100%', url: this.options.url,
autoplay: this.getAttribute('autoplay') ? 1 : 0 name: this.options.name,
}; cover: this.options.cover
this.render(); }
} ]
get template() { });
return `<iframe style="display: block; margin: 0 auto; border: 0;" width="${this.options.width}" height="450px" src="//music.163.com/outchain/player?type=0&id=${this.options.id}&auto=${this.options.autoplay}&height=430"></iframe>`; }
} }
render() { window.customElements.define('joe-mp3', JoeMp3);
if (this.options.id) this.innerHTML = this.template; class JoeMusic extends HTMLElement {
else this.innerHTML = '网易云歌单ID未填写'; constructor() {
} super();
} this.options = {
window.customElements.define('joe-mlist', JoeMlist); id: this.getAttribute('id'),
class JoeAbtn extends HTMLElement { color: this.getAttribute('color') || '#1989fa',
constructor() { autoplay: this.getAttribute('autoplay') ? true : false
super(); };
this.options = { this.render();
icon: this.getAttribute('icon') || '', }
color: this.getAttribute('color') || '#ff6800', render() {
href: this.getAttribute('href') || '#', if (!this.options.id) return (this.innerHTML = '网易云歌曲ID未填写');
radius: this.getAttribute('radius') || '17.5px', this.innerHTML = '<div></div>';
content: this.getAttribute('content') || '多彩按钮' fetch('https://api.i-meto.com/meting/api?server=netease&type=song&id=' + this.options.id).then(async response => {
}; const audio = await response.json();
this.innerHTML = ` new APlayer({
container: this.querySelector('div'),
lrcType: 3,
theme: this.options.color,
autoplay: this.options.autoplay,
audio
});
});
}
}
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 = '<div></div>';
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: this.querySelector('div'),
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 = `
<a class="joe_detail__article-abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow"> <a class="joe_detail__article-abtn" style="background: ${this.options.color}; border-radius: ${this.options.radius}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
<span class="icon"><i class="${this.options.icon} fa"></i></span><span class="content">${this.options.content}</span> <span class="icon"><i class="${this.options.icon} fa"></i></span><span class="content">${this.options.content}</span>
</a> </a>
`; `;
} }
} }
window.customElements.define('joe-abtn', JoeAbtn); window.customElements.define('joe-abtn', JoeAbtn);
class JoeAnote extends HTMLElement { class JoeAnote extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
icon: this.getAttribute('icon') || 'fa-download', icon: this.getAttribute('icon') || 'fa-download',
href: this.getAttribute('href') || '#', href: this.getAttribute('href') || '#',
type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary', type: /^secondary$|^success$|^warning$|^error$|^info$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'secondary',
content: this.getAttribute('content') || '标签按钮' content: this.getAttribute('content') || '标签按钮'
}; };
this.innerHTML = ` this.innerHTML = `
<a class="joe_detail__article-anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow"> <a class="joe_detail__article-anote ${this.options.type}" href="${this.options.href}" target="_blank" rel="noopener noreferrer nofollow">
<span class="icon"><i class="fa ${this.options.icon}"></i></span><span class="content">${this.options.content}</span> <span class="icon"><i class="fa ${this.options.icon}"></i></span><span class="content">${this.options.content}</span>
</a> </a>
`; `;
} }
} }
window.customElements.define('joe-anote', JoeAnote); window.customElements.define('joe-anote', JoeAnote);
class JoeDotted extends HTMLElement { class JoeDotted extends HTMLElement {
constructor() { constructor() {
super(); super();
this.startColor = this.getAttribute('startColor') || '#ff6c6c'; this.startColor = this.getAttribute('startColor') || '#ff6c6c';
this.endColor = this.getAttribute('endColor') || '#1989fa'; this.endColor = this.getAttribute('endColor') || '#1989fa';
this.innerHTML = ` this.innerHTML = `
<span class="joe_detail__article-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_detail__article-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); window.customElements.define('joe-dotted', JoeDotted);
class JoeHide extends HTMLElement { class JoeHide extends HTMLElement {
constructor() { constructor() {
super(); super();
this.render(); this.render();
} }
render() { render() {
this.innerHTML = '<span class="joe_detail__article-hide">此处内容作者设置了 <i>回复</i> 可见</span>'; this.innerHTML = '<span class="joe_detail__article-hide">此处内容作者设置了 <i>回复</i> 可见</span>';
this.$button = this.querySelector('i'); this.$button = this.querySelector('i');
const $comment = document.querySelector('.joe_comment'); const $comment = document.querySelector('.joe_comment');
const $header = document.querySelector('.joe_header'); const $header = document.querySelector('.joe_header');
if (!$comment || !$header) return; if (!$comment || !$header) return;
this.$button.addEventListener('click', () => { this.$button.addEventListener('click', () => {
const top = $comment.offsetTop - $header.offsetHeight - 15; const top = $comment.offsetTop - $header.offsetHeight - 15;
window.scrollTo({ top, behavior: 'smooth' }); window.scrollTo({ top, behavior: 'smooth' });
}); });
} }
} }
window.customElements.define('joe-hide', JoeHide); window.customElements.define('joe-hide', JoeHide);
class JoeCardDefault extends HTMLElement { class JoeCardDefault extends HTMLElement {
constructor() { constructor() {
super(); super();
const _temp = this.querySelector('._temp'); const _temp = this.querySelector('._temp');
this.options = { this.options = {
width: this.getAttribute('width') || '100%', width: this.getAttribute('width') || '100%',
label: this.getAttribute('label') || '卡片标题', label: this.getAttribute('label') || '卡片标题',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容' content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '卡片内容'
}; };
const htmlStr = ` const htmlStr = `
<span class="joe_detail__article-card_default" style="width: ${this.options.width}"> <span class="joe_detail__article-card_default" style="width: ${this.options.width}">
<span class="title">${this.options.label}</span> <span class="title">${this.options.label}</span>
<span class="content">${this.options.content}</span> <span class="content">${this.options.content}</span>
</span> </span>
`; `;
if (this.querySelector('._content')) { if (this.querySelector('._content')) {
this.querySelector('._content').innerHTML = htmlStr; this.querySelector('._content').innerHTML = htmlStr;
} else { } else {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = '_content'; div.className = '_content';
div.innerHTML = htmlStr; div.innerHTML = htmlStr;
this.appendChild(div); this.appendChild(div);
} }
} }
} }
window.customElements.define('joe-card-default', JoeCardDefault); window.customElements.define('joe-card-default', JoeCardDefault);
class JoeMessage extends HTMLElement { class JoeMessage extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info', type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
content: this.getAttribute('content') || '消息内容' content: this.getAttribute('content') || '消息内容'
}; };
this.innerHTML = ` this.innerHTML = `
<span class="joe_detail__article-message ${this.options.type}"> <span class="joe_detail__article-message ${this.options.type}">
<span class="icon"></span> <span class="icon"></span>
<span class="content">${this.options.content}</span> <span class="content">${this.options.content}</span>
</span> </span>
`; `;
} }
} }
window.customElements.define('joe-message', JoeMessage); window.customElements.define('joe-message', JoeMessage);
class JoeProgress extends HTMLElement { class JoeProgress extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%', percentage: /^\d{1,3}%$/.test(this.getAttribute('percentage')) ? this.getAttribute('percentage') : '50%',
color: this.getAttribute('color') || '#ff6c6c' color: this.getAttribute('color') || '#ff6c6c'
}; };
this.innerHTML = ` this.innerHTML = `
<span class="joe_detail__article-progress"> <span class="joe_detail__article-progress">
<span class="strip"> <span class="strip">
<span class="percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></span> <span class="percent" style="width: ${this.options.percentage}; background: ${this.options.color};"></span>
@ -194,61 +241,60 @@ document.addEventListener('DOMContentLoaded', () => {
<span class="percentage">${this.options.percentage}</span> <span class="percentage">${this.options.percentage}</span>
</span> </span>
`; `;
} }
} }
window.customElements.define('joe-progress', JoeProgress); window.customElements.define('joe-progress', JoeProgress);
class JoeCallout extends HTMLElement { class JoeCallout extends HTMLElement {
constructor() { constructor() {
super(); super();
const _temp = this.querySelector('._temp'); const _temp = this.querySelector('._temp');
this.options = { this.options = {
color: this.getAttribute('color') || '#f0ad4e', color: this.getAttribute('color') || '#f0ad4e',
content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容' content: _temp.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '标注内容'
}; };
const htmlStr = ` const htmlStr = `
<span class="joe_detail__article-callout" style="border-left-color: ${this.options.color};"> <span class="joe_detail__article-callout" style="border-left-color: ${this.options.color};">
${this.options.content} ${this.options.content}
</span> </span>
`; `;
if (this.querySelector('._content')) { if (this.querySelector('._content')) {
this.querySelector('._content').innerHTML = htmlStr; this.querySelector('._content').innerHTML = htmlStr;
} else { } else {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = '_content'; div.className = '_content';
div.innerHTML = htmlStr; div.innerHTML = htmlStr;
this.appendChild(div); this.appendChild(div);
} }
} }
} }
window.customElements.define('joe-callout', JoeCallout); window.customElements.define('joe-callout', JoeCallout);
const article = document.querySelector('.joe_detail__article'); $('.joe_detail__article p:empty').remove();
if (article) article.innerHTML = article.innerHTML.replace(/<p><\/p>/g, '');
/* /*
------------------------以下未测试------------------------------------------ ------------------------以下未测试------------------------------------------
*/ */
/* 点击复制 */ /* 点击复制 */
class JoeCopy extends HTMLElement { class JoeCopy extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
text: this.getAttribute('text') || '默认文本', text: this.getAttribute('text') || '默认文本',
content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '点击复制' content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '点击复制'
}; };
this.render(); this.render();
} }
get template() { get template() {
return `<span class="joe_detail__article-copy">${this.options.content}</span>`; return `<span class="joe_detail__article-copy">${this.options.content}</span>`;
} }
render() { render() {
this.innerHTML = this.template; this.innerHTML = this.template;
this.event(); this.event();
} }
event() { event() {
this.$copy = this.querySelector('.joe_detail__article-copy'); this.$copy = this.querySelector('.joe_detail__article-copy');
new ClipboardJS(this.$copy, { text: () => this.options.text }).on('success', () => Qmsg.success('复制成功!')); new ClipboardJS(this.$copy, { text: () => this.options.text }).on('success', () => Qmsg.success('复制成功!'));
} }
} }
window.customElements.define('joe-copy', JoeCopy); window.customElements.define('joe-copy', JoeCopy);
}); });

File diff suppressed because one or more lines are too long

View File

@ -47,9 +47,10 @@ class Editor
public static function Edit() public static function Edit()
{ {
?> ?>
<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=2021042116') ?>"> <link rel="stylesheet" href="<?php Helper::options()->themeUrl('typecho/write/css/joe.write.min.css?v=2021042122') ?>">
<script> <script>
window.JoeConfig = { window.JoeConfig = {
uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>', uploadAPI: '<?php Helper::security()->index('/action/upload'); ?>',
@ -61,10 +62,11 @@ class Editor
themeURL: '<?php Helper::options()->themeUrl(); ?>' themeURL: '<?php Helper::options()->themeUrl(); ?>'
} }
</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/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=2021042116') ?>"></script> <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=2021042122') ?>"></script>
<script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=2021042116') ?>"></script> <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=2021042122') ?>"></script>
<script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=2021042116') ?>"></script> <script src="<?php Helper::options()->themeUrl('assets/js/joe.short.min.js?v=2021042122') ?>"></script>
<?php <?php
} }
} }

View File

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

View File

@ -15,6 +15,9 @@ function _parseContent($post, $login)
$content = preg_replace('/{music-list([^}]*)\/}/SU', '<joe-mlist $1></joe-mlist>', $content); $content = preg_replace('/{music-list([^}]*)\/}/SU', '<joe-mlist $1></joe-mlist>', $content);
$content = preg_replace('/{music([^}]*)\/}/SU', '<joe-music $1></joe-music>', $content); $content = preg_replace('/{music([^}]*)\/}/SU', '<joe-music $1></joe-music>', $content);
} }
if (strpos($content, '{mp3') !== false) {
$content = preg_replace('/{mp3([^}]*)\/}/SU', '<joe-mp3 $1></joe-mp3>', $content);
}
if (strpos($content, '{bilibili') !== false) { if (strpos($content, '{bilibili') !== false) {
$content = preg_replace('/{bilibili([^}]*)\/}/SU', '<joe-bilibili $1></joe-bilibili>', $content); $content = preg_replace('/{bilibili([^}]*)\/}/SU', '<joe-bilibili $1></joe-bilibili>', $content);
} }

View File

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

View File

@ -31,8 +31,6 @@
</div> </div>
</div> </div>
<div class="joe_aplayer"></div>
<script> <script>
console.log("%c页面加载耗时<?php _endCountTime(); ?> | Theme By Joe", "color:#fff; background: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3); padding: 8px 15px; border-radius: 0 15px 0 15px"); console.log("%c页面加载耗时<?php _endCountTime(); ?> | Theme By Joe", "color:#fff; background: linear-gradient(270deg, #986fee, #8695e6, #68b7dd, #18d7d3); padding: 8px 15px; border-radius: 0 15px 0 15px");
<?php $this->options->JCustomScript() ?> <?php $this->options->JCustomScript() ?>

View File

@ -18,15 +18,17 @@
<?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=2021042116'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.min.css?v=2021042122'); ?>">
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.min.css'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.responsive.min.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/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" />
<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="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/scroll/joe.scroll.js"></script> <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/scroll/joe.scroll.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.0/lazysizes.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.3.0/lazysizes.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.0.0/plugin/sketchpad/joe.sketchpad.js"></script> <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/sketchpad/joe.sketchpad.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/js/joe.extend.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/js/joe.extend.min.js"></script>
@ -38,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=2021042116'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=2021042122'); ?>"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=2021042116'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=2021042122'); ?>"></script>
<?php $this->options->JCustomHeadEnd() ?> <?php $this->options->JCustomHeadEnd() ?>

File diff suppressed because one or more lines are too long

View File

@ -206,214 +206,6 @@ body.fullscreen {
border-radius: 3px; border-radius: 3px;
background: #c0c4cc; background: #c0c4cc;
} }
.cm-preview-content {
padding: 20px;
font-size: 14px;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
white-space: normal;
overflow-wrap: break-word;
color: #606266;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #303133;
font-size: 18px;
line-height: 24px;
margin: 0;
margin-bottom: 15px;
position: relative;
}
h1 {
padding: 0 15px;
&::before {
content: '';
position: absolute;
top: 8.5px;
left: 0;
height: 7px;
width: 7px;
border-radius: 50%;
background: #409eff;
}
}
h2 {
padding: 0 15px;
&::before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
width: 4px;
border-radius: 2px;
background: #409eff;
}
}
h3 {
padding: 0 15px 0 20px;
&::before {
content: '#';
color: #409eff;
font-weight: 700;
position: absolute;
top: 0;
left: 0;
line-height: 24px;
}
}
h4 {
&::before {
content: '';
color: #409eff;
font-weight: 600;
margin-right: 5px;
}
&::after {
content: '';
color: #409eff;
font-weight: 600;
margin-left: 5px;
}
}
h5 {
padding: 0 15px 0 28px;
&::before {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
background-size: 100% 100%;
}
}
h6 {
padding: 0 15px 0 28px;
&::before {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
background-size: 100% 100%;
}
}
hr {
margin: 0;
border: none;
height: 1px;
background-color: #e4e7ed;
margin-bottom: 15px;
}
p {
line-height: 26px;
margin: 0;
margin-bottom: 15px;
}
blockquote {
margin: 0;
line-height: 26px;
margin-bottom: 15px;
background: #ecf8ff;
border-left: 5px solid #50bfff;
color: #50bfff;
padding: 8px 15px;
border-radius: 0 4px 4px 0;
p {
margin: 0;
}
}
pre {
margin: 0;
margin-bottom: 15px;
&::-webkit-scrollbar-track {
background: #fff;
}
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #c0c4cc;
}
}
p code {
display: inline-block;
min-height: 26px;
line-height: 26px;
border-radius: 4px;
font-size: 12px;
background: #fdf6ec;
padding: 0 8px;
color: #e6a23c;
vertical-align: top;
}
ol,
ul {
margin: 0;
margin-bottom: 15px;
padding-left: 36px;
li {
line-height: 26px;
}
}
ol li {
list-style: decimal;
}
ul li {
list-style: disc;
}
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
color: #909399;
margin-bottom: 15px;
font-size: 13px;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-collapse: collapse;
td,
th {
padding: 8px;
border-bottom: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
}
thead {
th {
font-weight: 500;
background: #ebeef5;
}
}
}
img:not(.owo) {
display: block;
max-width: 100%;
border-radius: 4px;
transition: transform 0.35s, box-shadow 0.35s;
margin: 0 auto;
}
.owo {
max-height: 26px;
vertical-align: top;
}
a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
display: inline-block;
line-height: 26px;
color: #409eff;
position: relative;
text-decoration: none;
}
}
} }
.cm-autosave { .cm-autosave {
position: absolute; position: absolute;
@ -468,6 +260,215 @@ body.fullscreen {
} }
} }
.cm-preview-content {
padding: 20px;
font-size: 14px;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
white-space: normal;
overflow-wrap: break-word;
color: #606266;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #303133;
font-size: 18px;
line-height: 24px;
margin: 0;
margin-bottom: 15px;
position: relative;
}
h1 {
padding: 0 15px;
&::before {
content: '';
position: absolute;
top: 8.5px;
left: 0;
height: 7px;
width: 7px;
border-radius: 50%;
background: #409eff;
}
}
h2 {
padding: 0 15px;
&::before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
left: 0;
width: 4px;
border-radius: 2px;
background: #409eff;
}
}
h3 {
padding: 0 15px 0 20px;
&::before {
content: '#';
color: #409eff;
font-weight: 700;
position: absolute;
top: 0;
left: 0;
line-height: 24px;
}
}
h4 {
&::before {
content: '';
color: #409eff;
font-weight: 600;
margin-right: 5px;
}
&::after {
content: '';
color: #409eff;
font-weight: 600;
margin-left: 5px;
}
}
h5 {
padding: 0 15px 0 28px;
&::before {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAC8klEQVRYR+3WP2gTURwH8O/vKnVRRHKXP52cBO3g4p/BqYNIhy4muajUQRBFKjQV1En6ZxJBcmlRCoJDRe3FDiJVwamLS3FwqbgIgss1l2ZQF5XeT3I1Z3NJ7u5dLlAwN9699/t97vfe7/EIO/yhHe5DD9jpCv3fFVTu856+Xzi62Y/35hj9CFPNrlUwWeRJAJfBGADwBcBNI0/PRZFdAdo4xlQLjCqKjBzogat7hZCRAgPghJGBgbFnxglAOvS7b/fLb+q+qnv5BHBCyEBAWTdnANy2IxOtWSC1qsY+1jOFwAVG+gIVvXyHQbcaKuZCxmf5iMQogXFQtEsBeO5JT6BcMu+Bcb1lUhcyqfExACUAB6JEtgUqi+U5JrrmmcyFHCjwSYtQO+tSUSFbAmXdnAdwJVASdyWLPAS2kbFA8xsHNS13EzCmlx8R6KJQcBcypfFpho3cKxRna3ADsgEo6+ZjAKMhgjZ1d2KWR2gTSyD0h4jnIB2gXDIXwciFCPZvSnMl0wwshYrJGDImaMUGKovlLBPVOrDjh8APzFx8zDkjNa7FzYoGZsKT9XEarQOHmei1aJA246cqOWW6/i2l8VMGzoWIPW/k6eq2Ja6UwCz8pw2JGZ8sS8pUz8fWau/jGp+SgLchcGBgZD1Py41NUuoI+ZloV8ZU93+ogZKzfBiWfXAPCgMJU8Y42avQdMzI4ZBfmSizocqrUeJaAmsvBZGGBCtTziXeRY1rCxRAViEhXckqK93AeQJ9kYTvlmVlqmcTdhNEtefc+9X3utVmuX+CkK6oyqtu4nwrWP8bF5IZdGYjJ79wDuMCz4D+XmhFWnZbt7ab5ltBB6mbkyAaBPFCJassuwMmNb4L4EZgXwBc4AoGTZrUeA6A9x1yK6tzzvnFDlxBv0D176kCP2TCpbbjBXCRV9DZk0VeAONCE1IQ1zWg3dlF1sFQHWQIXFeBNrLAw5BwHBZWjQl6E3SbbB8X+R4Mg/Ca0wN2WtFeBTut4B84mFI4VpekyAAAAABJRU5ErkJggg==');
background-size: 100% 100%;
}
}
h6 {
padding: 0 15px 0 28px;
&::before {
content: '';
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAEI0lEQVRYR+3Xb2wTZRwH8G/vL22RPy5GW8fK6rJpGeFFY9RO3TRRE1HfmEAammEyjZmOSEg1RrPZaTD6xjhU/Ndlf0CZgwmD+qcgZBRIETeqY0Vcnc7pGonhRY2l3m2t5upqjq693l2vcy+8N81zz/NcPvf75fd7rjos8ku3yH34HyjK0PqlDLPzD56vMNL0VHxmpgXAoUIZXKgI3sMSpK+cNTAbylaj/9IkprnLM3+mkg8XQi4EsJ4lSL+ZNbAfVd+JG/XLcSERg3M8IAtZauBtDEkeNdN6fX9NfRqXueQiSwm00wQRMDMGw94snBJkqYBrSYIIXs/ojftqGq6IXHZRFIpkKYC2JSw9SJE663W0nthlqcMawwrJYpVCag1M48pNy1YNvLWRffGNIYSCv6Cnog7rjCtVIbUEXoG7qeqaNMj51F58dWoKPZY62JeWyUJG+ctcIplcIizWCpgTl9EIyODJn9BtceDWq/6B57tO/H4R688fFaZ7AWzWAiiJEyMDx39Ed6UDdyy7Ni/w1ekxbP95VJi/F8CRYoGycGLksaEJdFU6cPdy0zxkR/RbtE6FhPvHATQUm2JFODHSfyyCLmsd7lth/hf53q/jcE8OC+NTAG7PTKiNoCqcGPnpF+PotDrwwNXl+OC3H9A8cVqYPgPgFnFo1QCLwomRg4cvoPMGBzZHTgq3zwKwZ+ddKVATXAZhf+gdnPvuojAUqmJdrspRAtQU93pXEM+8clgwhQHU5itruUBNcTt6TsP9sl8weQC0S/VFOUBNcW/2folt2z+XhZPTZh6kSKJ79aqVRuFszRxfUm8sNbdz9xlsfekz2bhCQBvDMMM8z+ubN92Mjrb71brS+97dM4wtnk8U4SSBBEGErVarzeVywePxoHVLA1pb6lUh3+8bwZMv+BTjpIAVACa9Xq+uqakJ7e3tqpGd/WfR3Jr+81awIJS0mY0A+sLhMGw2W3qfGmTXvhAef/6gapxUBDuqqqoejUQiBvFbKUH2DHyNx54bLAqXF0jT9HBjY6Pd6/XOi7oc5K7936Dp2QNF4/IBrTqdLuLxeIi2tracRSGF/PDgKB55er8muHzATQB2m81m+P1+1NbmPoVyIfsOnUOj+2PNcPmAO1iWbeE4TmexWODz+WQhayrL4No2oCkuJ5Bl2VGO49ZmcisXObdeVSuRaq7ZZ3G10KBTqRQl3pQPGY1GEQgE4HQ6heVDAO5S1cklNmUDXQRB9KZSqXkfESaTCW63G7FYDKFQKDEyMoJoNKqfe/bbAJ7QGpcrxa8xDLOV5/k0kGXZv2ZnZ5FMJtNjmqYvURR1IpFInAcwAeD7ud/pUuDmAY1G41g8Hl9DkmScoqggx3FHAIyJMMlSQfI9V5zKagDC93dsoRFKimQx2dIWOV/U/yn6bx0WyDj8vgLOAAAAAElFTkSuQmCC');
background-size: 100% 100%;
}
}
hr {
margin: 0;
border: none;
height: 1px;
background-color: #e4e7ed;
margin-bottom: 15px;
}
p {
line-height: 26px;
margin: 0;
margin-bottom: 15px;
}
blockquote {
margin: 0;
line-height: 26px;
margin-bottom: 15px;
background: #ecf8ff;
border-left: 5px solid #50bfff;
color: #50bfff;
padding: 8px 15px;
border-radius: 0 4px 4px 0;
p {
margin: 0;
}
}
pre {
margin: 0;
margin-bottom: 15px;
&::-webkit-scrollbar-track {
background: #fff;
}
&::-webkit-scrollbar {
width: 6px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 3px;
background: #c0c4cc;
}
}
p code {
display: inline-block;
min-height: 26px;
line-height: 26px;
border-radius: 4px;
font-size: 12px;
background: #fdf6ec;
padding: 0 8px;
color: #e6a23c;
vertical-align: top;
}
ol,
ul {
margin: 0;
margin-bottom: 15px;
padding-left: 36px;
li {
line-height: 26px;
}
}
ol li {
list-style: decimal;
}
ul li {
list-style: disc;
}
table {
width: 100%;
max-width: 100%;
table-layout: fixed;
color: #909399;
margin-bottom: 15px;
font-size: 13px;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-collapse: collapse;
td,
th {
padding: 8px;
border-bottom: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
}
thead {
th {
font-weight: 500;
background: #ebeef5;
}
}
}
img:not(.owo) {
display: block;
max-width: 100%;
border-radius: 4px;
transition: transform 0.35s, box-shadow 0.35s;
margin: 0 auto;
}
.owo {
max-height: 26px;
vertical-align: top;
}
a:not(.joe_detail__article-anote):not(.joe_detail__article-abtn) {
display: inline-block;
line-height: 26px;
color: #409eff;
position: relative;
text-decoration: none;
}
}
.cm-modal { .cm-modal {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -350,15 +350,15 @@ export default class JoeAction {
} }
handleNetease(cm, type) { handleNetease(cm, type) {
this._openModal({ this._openModal({
title: type ? '网易云歌单' : '网云单首', title: type ? '网易云歌单' : '网云单首',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>歌${type ? '单' : '曲'} ID</label> <label>歌${type ? '单' : '曲'} ID</label>
<input autocomplete="off" name="id" placeholder="请输入歌${type ? '单' : '曲'}ID"/> <input autocomplete="off" name="id" placeholder="请输入歌${type ? '单' : '曲'}ID"/>
</div> </div>
<div class="fitem"> <div class="fitem">
<label>显示宽度</label> <label>主题色彩</label>
<input autocomplete="off" value="100%" name="width" placeholder="请输入宽度(百分比/像素)"/> <input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#1989fa" name="color" type="color"/>
</div> </div>
<div class="fitem"> <div class="fitem">
<label>自动播放</label> <label>自动播放</label>
@ -370,9 +370,9 @@ export default class JoeAction {
`, `,
confirm: () => { confirm: () => {
const id = $(".cm-modal input[name='id']").val(); const id = $(".cm-modal input[name='id']").val();
const width = $(".cm-modal input[name='width']").val() || '100%'; const color = $(".cm-modal input[name='color']").val();
const autoplay = $(".cm-modal select[name='autoplay']").val(); const autoplay = $(".cm-modal select[name='autoplay']").val();
const str = `\n{${type ? 'music-list' : 'music'} id="${id}" width="${width}" ${autoplay === '1' ? 'autoplay="autoplay"' : ''}/}\n\n`; const str = `\n{${type ? 'music-list' : 'music'} id="${id}" color="${color}" ${autoplay === '1' ? 'autoplay="autoplay"' : ''}/}\n\n`;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str); if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
else this._replaceSelection(cm, str); else this._replaceSelection(cm, str);
cm.focus(); cm.focus();
@ -679,4 +679,45 @@ export default class JoeAction {
} }
}); });
} }
handleMp3(cm) {
this._openModal({
title: '插入音乐',
innerHtml: `
<div class="fitem">
<label>音频名称</label>
<input autocomplete="off" name="name" placeholder="请输入音频名称"/>
</div>
<div class="fitem">
<label>音频地址</label>
<input autocomplete="off" name="url" placeholder="请输入音频地址"/>
</div>
<div class="fitem">
<label>音频封面</label>
<input autocomplete="off" name="cover" placeholder="请输入图片地址"/>
</div>
<div class="fitem">
<label>主题色彩</label>
<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#f0ad4e" name="theme" type="color"/>
</div>
<div class="fitem">
<label>自动播放</label>
<select name="autoplay">
<option value="1" selected></option>
<option value="0"></option>
</select>
</div>
`,
confirm: () => {
const name = $(".cm-modal input[name='name']").val();
const url = $(".cm-modal input[name='url']").val();
const cover = $(".cm-modal input[name='cover']").val();
const theme = $(".cm-modal input[name='theme']").val();
const autoplay = $(".cm-modal select[name='autoplay']").val();
const str = `\n{mp3 name="${name}" url="${url}" cover="${cover}" theme="${theme}" ${autoplay === '1' ? 'autoplay="autoplay"' : ''}/}\n\n`;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
else this._replaceSelection(cm, str);
cm.focus();
}
});
}
} }

View File

@ -1,39 +1,38 @@
const parser = new HyperDown(); const parser = new HyperDown();
const player = window.JoeConfig.playerAPI; const player = window.JoeConfig.playerAPI;
const div = document.createElement('div');
export default function createPreviewHtml(str) { export default function createPreviewHtml(str) {
str = str.replace(/ /g, '&emsp;'); str = str.replace(/ /g, '&emsp;');
/* 生成HTML元素 */ str = parser.makeHtml(str);
str = parser.makeHtml(str);
str = str.replace(/{x}/g, '<input type="checkbox" class="joe_detail__article-checkbox" checked disabled></input>'); str = str.replace(/{x}/g, '<input type="checkbox" class="joe_detail__article-checkbox" checked disabled></input>');
str = str.replace(/{ }/g, '<input type="checkbox" class="joe_detail__article-checkbox" disabled></input>'); str = str.replace(/{ }/g, '<input type="checkbox" class="joe_detail__article-checkbox" disabled></input>');
str = str.replace(/\:\:\(\s*(呵呵|哈哈|吐舌|太开心|笑眼|花心|小乖|乖|捂嘴笑|滑稽|你懂的|不高兴|怒|汗|黑线|泪|真棒|喷|惊哭|阴险|鄙视|酷|啊|狂汗|what|疑问|酸爽|呀咩爹|委屈|惊讶|睡觉|笑尿|挖鼻|吐|犀利|小红脸|懒得理|勉强|爱心|心碎|玫瑰|礼物|彩虹|太阳|星星月亮|钱币|茶杯|蛋糕|大拇指|胜利|haha|OK|沙发|手纸|香蕉|便便|药丸|红领巾|蜡烛|音乐|灯泡|开心|钱|咦|呼|冷|生气|弱|吐血|狗头)\s*\)/g, function ($0, $1) { str = str.replace(/\:\:\(\s*(呵呵|哈哈|吐舌|太开心|笑眼|花心|小乖|乖|捂嘴笑|滑稽|你懂的|不高兴|怒|汗|黑线|泪|真棒|喷|惊哭|阴险|鄙视|酷|啊|狂汗|what|疑问|酸爽|呀咩爹|委屈|惊讶|睡觉|笑尿|挖鼻|吐|犀利|小红脸|懒得理|勉强|爱心|心碎|玫瑰|礼物|彩虹|太阳|星星月亮|钱币|茶杯|蛋糕|大拇指|胜利|haha|OK|沙发|手纸|香蕉|便便|药丸|红领巾|蜡烛|音乐|灯泡|开心|钱|咦|呼|冷|生气|弱|吐血|狗头)\s*\)/g, function ($0, $1) {
$1 = encodeURI($1).replace(/%/g, ''); $1 = encodeURI($1).replace(/%/g, '');
return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/paopao/${$1}_2x.png" />`; return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/paopao/${$1}_2x.png" />`;
}); });
str = str.replace(/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/g, function ($0, $1) { str = str.replace(/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/g, function ($0, $1) {
$1 = encodeURI($1).replace(/%/g, ''); $1 = encodeURI($1).replace(/%/g, '');
return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/aru/${$1}_2x.png" />`; return `<img class="owo" src="${window.JoeConfig.themeURL}assets/owo/aru/${$1}_2x.png" />`;
}); });
str = str.replace(/{mtitle([^}]*)\/}/g, '<joe-mtitle $1></joe-mtitle>'); str = str.replace(/{mtitle([^}]*)\/}/g, '<joe-mtitle $1></joe-mtitle>');
str = str.replace(/{dplayer([^}]*)\/}/g, '<joe-dplayer player="' + player + '" $1></joe-dplayer>'); str = str.replace(/{dplayer([^}]*)\/}/g, '<joe-dplayer player="' + player + '" $1></joe-dplayer>');
str = str.replace(/{bilibili([^}]*)\/}/g, '<joe-bilibili $1></joe-bilibili>'); str = str.replace(/{bilibili([^}]*)\/}/g, '<joe-bilibili $1></joe-bilibili>');
str = str.replace(/{music-list([^}]*)\/}/g, '<joe-mlist $1></joe-mlist>'); str = str.replace(/{music-list([^}]*)\/}/g, '<joe-mlist $1></joe-mlist>');
str = str.replace(/{music([^}]*)\/}/g, '<joe-music $1></joe-music>'); str = str.replace(/{music([^}]*)\/}/g, '<joe-music $1></joe-music>');
str = str.replace(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>'); str = str.replace(/{mp3([^}]*)\/}/g, '<joe-mp3 $1></joe-mp3>');
str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>'); str = str.replace(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>');
str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>'); str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>');
str = str.replace(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>'); str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
str = str.replace(/{progress([^}]*)\/}/g, '<joe-progress $1></joe-progress>'); str = str.replace(/{message([^}]*)\/}/g, '<joe-message $1></joe-message>');
str = str.replace(/{hide[^}]*}([\s\S]*?){\/hide}/g, '<joe-hide></joe-hide>'); str = str.replace(/{progress([^}]*)\/}/g, '<joe-progress $1></joe-progress>');
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(/{hide[^}]*}([\s\S]*?){\/hide}/g, '<joe-hide></joe-hide>');
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(/{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>');
const div = document.createElement('div'); $('.cm-preview-content').html(str);
div.innerHTML = str; $('.cm-preview-content p:empty').remove();
div.innerHTML = div.innerHTML.replace(/<p><\/p>/g, ''); $('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));
const _ = div.innerHTML;
$('.cm-preview-content').html(_);
$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));
} }

View File

@ -180,6 +180,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="M842.13 910h-72.36c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.36c19.88 0 36 16.12 36 36s-16.11 36-36 36zm-177.69 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.57 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.11 36-36 36zm-177.56 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zM150 878.02c-19.88 0-36-16.1-36-35.98V769.8c0-19.88 16.12-36 36-36s36 16.12 36 36V842c0 19.88-16.12 36.02-36 36.02zm724-55.2c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zM150 700.47c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zm724-55.22c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.89-16.12 36-36 36zM150 522.91c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zm724-55.22c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zM150 345.34c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.89-16.12 36-36 36zm724-55.21c-19.88 0-36-16.12-36-36V182c0-19.88 16.12-36.05 36-36.05s36 16.07 36 35.95v72.23c0 19.88-16.12 36-36 36zM786.85 186h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.56 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.56 0H359.5c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.57 0H182c-19.88 0-36.03-16.12-36.03-36s16.08-36 35.97-36h72.23c19.88 0 36 16.12 36 36s-16.13 36-36.01 36z"/><path d="M213 120v784c0 4.42-3.58 8-8 8h-84c-4.42 0-8-3.58-8-8V120c0-4.42 3.58-8 8-8h84c4.42 0 8 3.58 8 8z"/></svg>' innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M842.13 910h-72.36c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.36c19.88 0 36 16.12 36 36s-16.11 36-36 36zm-177.69 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.57 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.11 36-36 36zm-177.56 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zM150 878.02c-19.88 0-36-16.1-36-35.98V769.8c0-19.88 16.12-36 36-36s36 16.12 36 36V842c0 19.88-16.12 36.02-36 36.02zm724-55.2c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zM150 700.47c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zm724-55.22c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.89-16.12 36-36 36zM150 522.91c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zm724-55.22c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.88-16.12 36-36 36zM150 345.34c-19.88 0-36-16.12-36-36v-72.23c0-19.88 16.12-36 36-36s36 16.12 36 36v72.23c0 19.89-16.12 36-36 36zm724-55.21c-19.88 0-36-16.12-36-36V182c0-19.88 16.12-36.05 36-36.05s36 16.07 36 35.95v72.23c0 19.88-16.12 36-36 36zM786.85 186h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.56 0h-72.23c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.56 0H359.5c-19.88 0-36-16.12-36-36s16.12-36 36-36h72.23c19.88 0 36 16.12 36 36s-16.12 36-36 36zm-177.57 0H182c-19.88 0-36.03-16.12-36.03-36s16.08-36 35.97-36h72.23c19.88 0 36 16.12 36 36s-16.13 36-36.01 36z"/><path d="M213 120v784c0 4.42-3.58 8-8 8h-84c-4.42 0-8-3.58-8-8V120c0-4.42 3.58-8 8-8h84c4.42 0 8 3.58 8 8z"/></svg>'
}, },
{
type: 'mp3',
title: '外部音乐',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M736 249.6c-12.8-6.4-32-6.4-44.8 6.4-12.8 12.8-6.4 32 6.4 44.8C761.6 352 800 428.8 800 512c0 76.8-32 153.6-89.6 204.8-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0C825.6 697.6 864 608 864 512c-6.4-102.4-51.2-198.4-128-262.4z"/><path d="M640 345.6c-12.8-6.4-32-6.4-44.8 6.4-12.8 12.8-6.4 32 6.4 44.8 38.4 25.6 57.6 70.4 57.6 115.2s-19.2 83.2-44.8 108.8c-12.8 12.8-12.8 32 0 44.8 12.8 12.8 32 12.8 44.8 0 44.8-38.4 64-96 64-153.6-6.4-64-38.4-128-83.2-166.4zM499.2 211.2L288 345.6H185.6c-12.8 0-19.2 6.4-19.2 19.2v313.6c0 12.8 12.8 25.6 19.2 25.6H288l211.2 115.2H512c12.8 0 19.2-6.4 19.2-19.2V230.4c0-6.4 0-6.4-6.4-12.8 0-6.4-19.2-12.8-25.6-6.4z"/></svg>'
},
/* --------------------------- 短代码结束 --------------------------- */ /* --------------------------- 短代码结束 --------------------------- */
{ {
type: 'clean', type: 'clean',

File diff suppressed because one or more lines are too long

View File

@ -10,27 +10,27 @@ import JoeAction from './_actions';
import createPreviewHtml from './_create'; import createPreviewHtml from './_create';
class Joe extends JoeAction { class Joe extends JoeAction {
constructor() { constructor() {
super(); super();
this.plugins = [history(), classHighlightStyle, bracketMatching(), closeBrackets()]; this.plugins = [history(), classHighlightStyle, bracketMatching(), closeBrackets()];
this._isPasting = false; this._isPasting = false;
this.init_ViewPort(); this.init_ViewPort();
this.init_Editor(); this.init_Editor();
this.init_Preview(); this.init_Preview();
this.init_Tools(); this.init_Tools();
this.init_Insert(); this.init_Insert();
this.init_AutoSave(); this.init_AutoSave();
} }
/* 已测 √ */ /* 已测 √ */
init_ViewPort() { init_ViewPort() {
if ($('meta[name="viewport"]').length > 0) $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover'); if ($('meta[name="viewport"]').length > 0) $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover');
else $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">'); else $('head').append('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover">');
} }
/* 已测 √ */ /* 已测 √ */
init_Editor() { init_Editor() {
$('#text').before(` $('#text').before(`
<div class="cm-container"> <div class="cm-container">
<div class="cm-tools"></div> <div class="cm-tools"></div>
<div class="cm-mainer"> <div class="cm-mainer">
@ -42,315 +42,322 @@ class Joe extends JoeAction {
<div class="cm-progress-right"></div> <div class="cm-progress-right"></div>
</div> </div>
`); `);
createPreviewHtml($('#text').val()); createPreviewHtml($('#text').val());
const cm = new EditorView({ let _temp = null;
state: EditorState.create({ const cm = new EditorView({
doc: $('#text').val(), state: EditorState.create({
extensions: [ doc: $('#text').val(),
...this.plugins, extensions: [
keymap.of([defaultTabBinding, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]), ...this.plugins,
EditorView.updateListener.of(update => { keymap.of([defaultTabBinding, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
if (!update.docChanged) return; EditorView.updateListener.of(update => {
if (window.requestAnimationFrame) window.requestAnimationFrame(() => createPreviewHtml(update.state.doc.toString())); if (!update.docChanged) return;
else createPreviewHtml(update.state.doc.toString()); if (_temp !== update.state.doc.toString()) {
}), _temp = update.state.doc.toString();
EditorView.domEventHandlers({ if (window.requestAnimationFrame) window.requestAnimationFrame(() => createPreviewHtml(update.state.doc.toString()));
paste: e => { else createPreviewHtml(update.state.doc.toString());
const clipboardData = e.clipboardData; }
if (!clipboardData || !clipboardData.items) return; }),
const items = clipboardData.items; EditorView.domEventHandlers({
if (!items.length) return; paste: e => {
let blob = null; const clipboardData = e.clipboardData;
for (let i = 0; i < items.length; i++) { if (!clipboardData || !clipboardData.items) return;
if (items[i].type.indexOf('image') !== -1) { const items = clipboardData.items;
e.preventDefault(); if (!items.length) return;
blob = items[i].getAsFile(); let blob = null;
break; for (let i = 0; i < items.length; i++) {
} if (items[i].type.indexOf('image') !== -1) {
} e.preventDefault();
if (!blob) return; blob = items[i].getAsFile();
let api = window.JoeConfig.uploadAPI; break;
if (!api) return; }
const cid = $('input[name="cid"]').val(); }
cid && (api = api + '&cid=' + cid); if (!blob) return;
if (this._isPasting) return; let api = window.JoeConfig.uploadAPI;
this._isPasting = true; if (!api) return;
const fileName = Date.now().toString(36) + '.png'; const cid = $('input[name="cid"]').val();
let formData = new FormData(); cid && (api = api + '&cid=' + cid);
formData.append('name', fileName); if (this._isPasting) return;
formData.append('file', blob, fileName); this._isPasting = true;
$.ajax({ const fileName = Date.now().toString(36) + '.png';
url: api, let formData = new FormData();
method: 'post', formData.append('name', fileName);
data: formData, formData.append('file', blob, fileName);
contentType: false, $.ajax({
processData: false, url: api,
dataType: 'json', method: 'post',
xhr: () => { data: formData,
const xhr = $.ajaxSettings.xhr(); contentType: false,
if (!xhr.upload) return; processData: false,
xhr.upload.addEventListener( dataType: 'json',
'progress', xhr: () => {
e => { const xhr = $.ajaxSettings.xhr();
let percent = (e.loaded / e.total) * 100; if (!xhr.upload) return;
$('.cm-progress-left').width(percent / 2 + '%'); xhr.upload.addEventListener(
$('.cm-progress-right').width(percent / 2 + '%'); 'progress',
}, e => {
false let percent = (e.loaded / e.total) * 100;
); $('.cm-progress-left').width(percent / 2 + '%');
return xhr; $('.cm-progress-right').width(percent / 2 + '%');
}, },
success: res => { false
$('.cm-progress-left').width(0); );
$('.cm-progress-right').width(0); return xhr;
this._isPasting = false; },
const str = `${super._getLineCh(cm) ? '\n' : ''}![${res[1].title}](${res[0]})\n`; success: res => {
super._replaceSelection(cm, str); $('.cm-progress-left').width(0);
cm.focus(); $('.cm-progress-right').width(0);
}, this._isPasting = false;
error: () => { const str = `${super._getLineCh(cm) ? '\n' : ''}![${res[1].title}](${res[0]})\n`;
$('.cm-progress-left').width(0); super._replaceSelection(cm, str);
$('.cm-progress-right').width(0); cm.focus();
this._isPasting = false; },
} error: () => {
}); $('.cm-progress-left').width(0);
} $('.cm-progress-right').width(0);
}) this._isPasting = false;
], }
tabSize: 4 });
}) }
}); })
$('.cm-mainer').prepend(cm.dom); ],
$('#text')[0].form && $('#text')[0].form.addEventListener('submit', () => $('#text').val(cm.state.doc.toString())); tabSize: 4
this.cm = cm; })
} });
$('.cm-mainer').prepend(cm.dom);
$('#text')[0].form && $('#text')[0].form.addEventListener('submit', () => $('#text').val(cm.state.doc.toString()));
this.cm = cm;
}
/* 已测 √ */ /* 已测 √ */
init_Preview() { init_Preview() {
const move = (nowClientX, nowWidth, clientX) => { const move = (nowClientX, nowWidth, clientX) => {
let moveX = nowClientX - clientX; let moveX = nowClientX - clientX;
let moveWidth = nowWidth + moveX; let moveWidth = nowWidth + moveX;
if (moveWidth <= 0) moveWidth = 0; if (moveWidth <= 0) moveWidth = 0;
if (moveWidth >= $('.cm-mainer').outerWidth() - 16) moveWidth = $('.cm-mainer').outerWidth() - 16; if (moveWidth >= $('.cm-mainer').outerWidth() - 16) moveWidth = $('.cm-mainer').outerWidth() - 16;
$('.cm-preview').width(moveWidth); $('.cm-preview').width(moveWidth);
}; };
$('.cm-resize').on({ $('.cm-resize').on({
mousedown: e => { mousedown: e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const nowWidth = $('.cm-preview').outerWidth(); const nowWidth = $('.cm-preview').outerWidth();
const nowClientX = e.clientX; const nowClientX = e.clientX;
$('.cm-preview').addClass('move'); $('.cm-preview').addClass('move');
document.onmousemove = _e => { document.onmousemove = _e => {
if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.clientX)); if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.clientX));
else move(nowClientX, nowWidth, _e.clientX); else move(nowClientX, nowWidth, _e.clientX);
}; };
document.onmouseup = () => { document.onmouseup = () => {
document.onmousemove = null; document.onmousemove = null;
document.onmouseup = null; document.onmouseup = null;
$('.cm-preview').removeClass('move'); $('.cm-preview').removeClass('move');
}; };
return false; return false;
}, },
touchstart: e => { touchstart: e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const nowWidth = $('.cm-preview').outerWidth(); const nowWidth = $('.cm-preview').outerWidth();
const nowClientX = e.originalEvent.targetTouches[0].clientX; const nowClientX = e.originalEvent.targetTouches[0].clientX;
$('.cm-preview').addClass('move'); $('.cm-preview').addClass('move');
document.ontouchmove = _e => { document.ontouchmove = _e => {
if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.targetTouches[0].clientX)); if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.targetTouches[0].clientX));
else move(nowClientX, nowWidth, _e.targetTouches[0].clientX); else move(nowClientX, nowWidth, _e.targetTouches[0].clientX);
}; };
document.ontouchend = () => { document.ontouchend = () => {
document.ontouchmove = null; document.ontouchmove = null;
document.ontouchend = null; document.ontouchend = null;
$('.cm-preview').removeClass('move'); $('.cm-preview').removeClass('move');
}; };
return false; return false;
} }
}); });
} }
/* 已测 √ */ /* 已测 √ */
init_Tools() { init_Tools() {
tools.forEach(item => { tools.forEach(item => {
if (item.type === 'title') { if (item.type === 'title') {
super.handleTitle(this.cm, item); super.handleTitle(this.cm, item);
} else { } else {
const el = $(`<div class="cm-tools-item" title="${item.title}">${item.innerHTML}</div>`); const el = $(`<div class="cm-tools-item" title="${item.title}">${item.innerHTML}</div>`);
el.on('click', e => { el.on('click', e => {
e.preventDefault(); e.preventDefault();
switch (item.type) { switch (item.type) {
case 'fullScreen': case 'fullScreen':
super.handleFullScreen(el); super.handleFullScreen(el);
break; break;
case 'publish': case 'publish':
super.handlePublish(); super.handlePublish();
break; break;
case 'undo': case 'undo':
super.handleUndo(this.cm); super.handleUndo(this.cm);
break; break;
case 'redo': case 'redo':
super.handleRedo(this.cm); super.handleRedo(this.cm);
break; break;
case 'time': case 'time':
super.handleTime(this.cm); super.handleTime(this.cm);
break; break;
case 'bold': case 'bold':
super._insetAmboText(this.cm, '**'); super._insetAmboText(this.cm, '**');
break; break;
case 'italic': case 'italic':
super._insetAmboText(this.cm, '*'); super._insetAmboText(this.cm, '*');
break; break;
case 'delete': case 'delete':
super._insetAmboText(this.cm, '~~'); super._insetAmboText(this.cm, '~~');
break; break;
case 'code-inline': case 'code-inline':
super._insetAmboText(this.cm, '`'); super._insetAmboText(this.cm, '`');
break; break;
case 'indent': case 'indent':
super.handleIndent(this.cm); super.handleIndent(this.cm);
break; break;
case 'hr': case 'hr':
super.handleHr(this.cm); super.handleHr(this.cm);
break; break;
case 'clean': case 'clean':
super.handleClean(this.cm); super.handleClean(this.cm);
break; break;
case 'ordered-list': case 'ordered-list':
super.handleOrdered(this.cm); super.handleOrdered(this.cm);
break; break;
case 'unordered-list': case 'unordered-list':
super.handleUnordered(this.cm); super.handleUnordered(this.cm);
break; break;
case 'quote': case 'quote':
super.handleQuote(this.cm); super.handleQuote(this.cm);
break; break;
case 'download': case 'download':
super.handleDownload(this.cm); super.handleDownload(this.cm);
break; break;
case 'link': case 'link':
super.handleLink(this.cm); super.handleLink(this.cm);
break; break;
case 'image': case 'image':
super.handleImage(this.cm); super.handleImage(this.cm);
break; break;
case 'table': case 'table':
super.handleTable(this.cm); super.handleTable(this.cm);
break; break;
case 'code-block': case 'code-block':
super.handleCodeBlock(this.cm); super.handleCodeBlock(this.cm);
break; break;
case 'about': case 'about':
super.handleAbout(); super.handleAbout();
break; break;
case 'character': case 'character':
super._createTableLists(this.cm, JoeConfig.characterAPI, '星星符号', '字符大全'); super._createTableLists(this.cm, JoeConfig.characterAPI, '星星符号', '字符大全');
break; break;
case 'emoji': case 'emoji':
super._createTableLists(this.cm, JoeConfig.emojiAPI, '表情', '符号表情(需数据库支持)'); super._createTableLists(this.cm, JoeConfig.emojiAPI, '表情', '符号表情(需数据库支持)');
break; break;
case 'task-no': case 'task-no':
super.handleTask(this.cm, false); super.handleTask(this.cm, false);
break; break;
case 'task-yes': case 'task-yes':
super.handleTask(this.cm, true); super.handleTask(this.cm, true);
break; break;
case 'netease-list': case 'netease-list':
super.handleNetease(this.cm, true); super.handleNetease(this.cm, true);
break; break;
case 'netease-single': case 'netease-single':
super.handleNetease(this.cm, false); super.handleNetease(this.cm, false);
break; break;
case 'bilibili': case 'bilibili':
super.handleBilibili(this.cm); super.handleBilibili(this.cm);
break; break;
case 'dplayer': case 'dplayer':
super.handleDplayer(this.cm); super.handleDplayer(this.cm);
break; break;
case 'draft': case 'draft':
super.handleDraft(); super.handleDraft();
break; break;
case 'expression': case 'expression':
super.handleExpression(this.cm); super.handleExpression(this.cm);
break; break;
case 'mtitle': case 'mtitle':
super.handleMtitle(this.cm); super.handleMtitle(this.cm);
break; break;
case 'html': case 'html':
super.handleHtml(this.cm); super.handleHtml(this.cm);
break; break;
case 'abtn': case 'abtn':
super.handleAbtn(this.cm); super.handleAbtn(this.cm);
break; break;
case 'anote': case 'anote':
super.handleAnote(this.cm); super.handleAnote(this.cm);
break; break;
case 'dotted': case 'dotted':
super.handleDotted(this.cm); super.handleDotted(this.cm);
break; break;
case 'hide': case 'hide':
super.handleHide(this.cm); super.handleHide(this.cm);
break; break;
case 'card-default': case 'card-default':
super.handleCardDefault(this.cm); super.handleCardDefault(this.cm);
break; break;
case 'message': case 'message':
super.handleMessage(this.cm); super.handleMessage(this.cm);
break; break;
case 'progress': case 'progress':
super.handleProgress(this.cm); super.handleProgress(this.cm);
break; break;
case 'callout': case 'callout':
super.handleCallout(this.cm); super.handleCallout(this.cm);
break; break;
} case 'mp3':
}); super.handleMp3(this.cm);
$('.cm-tools').append(el); break;
} }
}); });
} $('.cm-tools').append(el);
}
});
}
/* 已测 √ */ /* 已测 √ */
init_Insert() { init_Insert() {
Typecho.insertFileToEditor = (file, url, isImage) => { Typecho.insertFileToEditor = (file, url, isImage) => {
const str = `${super._getLineCh(this.cm) ? '\n' : ''}${isImage ? '!' : ''}[${file}](${url})\n`; const str = `${super._getLineCh(this.cm) ? '\n' : ''}${isImage ? '!' : ''}[${file}](${url})\n`;
super._replaceSelection(this.cm, str); super._replaceSelection(this.cm, str);
this.cm.focus(); this.cm.focus();
}; };
} }
/* 已测 √ */ /* 已测 √ */
init_AutoSave() { init_AutoSave() {
if (window.JoeConfig.autoSave !== 1) return; if (window.JoeConfig.autoSave !== 1) return;
const formEl = $('#text')[0].form; const formEl = $('#text')[0].form;
let cid = $('input[name="cid"]').val(); let cid = $('input[name="cid"]').val();
let temp = null; let temp = null;
const saveFn = () => { const saveFn = () => {
$('input[name="cid"]').val(cid); $('input[name="cid"]').val(cid);
$('#text').val(this.cm.state.doc.toString()); $('#text').val(this.cm.state.doc.toString());
let data = $(formEl).serialize(); let data = $(formEl).serialize();
if (data !== temp) { if (data !== temp) {
$('.cm-autosave').addClass('active'); $('.cm-autosave').addClass('active');
$.ajax({ $.ajax({
url: formEl.action, url: formEl.action,
type: 'POST', type: 'POST',
data: data + '&do=save', data: data + '&do=save',
dataType: 'json', dataType: 'json',
success: res => { success: res => {
cid = res.cid; cid = res.cid;
temp = data; temp = data;
let timer = setTimeout(() => { let timer = setTimeout(() => {
$('.cm-autosave').removeClass('active'); $('.cm-autosave').removeClass('active');
clearTimeout(timer); clearTimeout(timer);
}, 1000); }, 1000);
} }
}); });
} }
}; };
setInterval(saveFn, 5000); setInterval(saveFn, 5000);
} }
} }
document.addEventListener('DOMContentLoaded', () => new Joe()); document.addEventListener('DOMContentLoaded', () => new Joe());

View File

@ -9,7 +9,7 @@
"@codemirror/history": "^0.18.1", "@codemirror/history": "^0.18.1",
"@codemirror/matchbrackets": "^0.18.0", "@codemirror/matchbrackets": "^0.18.0",
"@codemirror/state": "^0.18.6", "@codemirror/state": "^0.18.6",
"@codemirror/view": "^0.18.7", "@codemirror/view": "^0.18.8",
"@rollup/plugin-node-resolve": "^11.2.1", "@rollup/plugin-node-resolve": "^11.2.1",
"rollup-plugin-uglify": "^6.0.4" "rollup-plugin-uglify": "^6.0.4"
} }

View File

@ -1,10 +1,10 @@
import { nodeResolve } from '@rollup/plugin-node-resolve'; import { nodeResolve } from '@rollup/plugin-node-resolve';
import { uglify } from 'rollup-plugin-uglify'; import { uglify } from 'rollup-plugin-uglify';
export default { export default {
input: './js/joe.write.js', input: './js/joe.write.js',
output: { output: {
file: './js/joe.write.chunk.js', file: './js/joe.write.chunk.js',
format: 'iife' format: 'iife'
}, },
plugins: [nodeResolve(), uglify()] plugins: [nodeResolve(), uglify()]
}; };