This commit is contained in:
haoouba 2021-04-17 12:19:43 +08:00
parent fa7b938dca
commit 3ac6b2ed35
17 changed files with 1439 additions and 1357 deletions

File diff suppressed because one or more lines are too long

View File

@ -2220,6 +2220,11 @@
} }
} }
} }
&-dotted {
width: 100%;
height: 2px;
background-size: 80px;
}
} }
&__agree { &__agree {
display: flex; display: flex;

View File

@ -1,210 +1,221 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
class JoeMtitle extends HTMLElement { class JoeMtitle extends HTMLElement {
constructor() { constructor() {
super(); super();
this.innerHTML = ` this.innerHTML = `
<div class="joe_detail__article-mtitle"> <div class="joe_detail__article-mtitle">
<span class="text"> <span class="text">
${this.getAttribute('title') || '默认标题'} ${this.getAttribute('title') || '默认标题'}
</span> </span>
</div>`; </div>`;
} }
} }
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 JoeMusic extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
id: this.getAttribute('id'), id: this.getAttribute('id'),
width: this.getAttribute('width') || '100%', width: this.getAttribute('width') || '100%',
autoplay: this.getAttribute('autoplay') ? 1 : 0 autoplay: this.getAttribute('autoplay') ? 1 : 0
}; };
this.render(); this.render();
} }
render() { 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>`; 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未填写'; else this.innerHTML = '网易云歌曲ID未填写';
} }
} }
window.customElements.define('joe-music', JoeMusic); window.customElements.define('joe-music', JoeMusic);
class JoeMlist extends HTMLElement { class JoeMlist extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
id: this.getAttribute('id'), id: this.getAttribute('id'),
width: this.getAttribute('width') || '100%', width: this.getAttribute('width') || '100%',
autoplay: this.getAttribute('autoplay') ? 1 : 0 autoplay: this.getAttribute('autoplay') ? 1 : 0
}; };
this.render(); this.render();
} }
get template() { 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>`; 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() { render() {
if (this.options.id) this.innerHTML = this.template; if (this.options.id) this.innerHTML = this.template;
else this.innerHTML = '网易云歌单ID未填写'; else this.innerHTML = '网易云歌单ID未填写';
} }
} }
window.customElements.define('joe-mlist', JoeMlist); window.customElements.define('joe-mlist', JoeMlist);
class JoeAbtn extends HTMLElement { class JoeAbtn extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
icon: this.getAttribute('icon') || '', icon: this.getAttribute('icon') || '',
color: this.getAttribute('color') || '#ff6800', color: this.getAttribute('color') || '#ff6800',
href: this.getAttribute('href') || '#', href: this.getAttribute('href') || '#',
radius: this.getAttribute('radius') || '17.5px', radius: this.getAttribute('radius') || '17.5px',
content: this.getAttribute('content') || '多彩按钮' content: this.getAttribute('content') || '多彩按钮'
}; };
this.innerHTML = ` 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 {
constructor() {
super();
this.startColor = this.getAttribute('startColor') || '#ff6c6c';
this.endColor = this.getAttribute('endColor') || '#1989fa';
this.innerHTML = `
<div 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%)"></div>
`;
}
}
window.customElements.define('joe-dotted', JoeDotted);
/* /*
------------------------以下未测试------------------------------------------ ------------------------以下未测试------------------------------------------
*/ */
/* 点击复制 */ /* 点击复制 */
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);
/* 消息提示 */ /* 消息提示 */
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.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '提示内容' content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '提示内容'
}; };
this.render(); this.render();
} }
get template() { get template() {
return ` return `
<div class="joe_detail__article-message ${this.options.type}"> <div class="joe_detail__article-message ${this.options.type}">
<div class="icon"></div> <div class="icon"></div>
<div class="content">${this.options.content}</div> <div class="content">${this.options.content}</div>
</div> </div>
`; `;
} }
render() { render() {
this.innerHTML = this.template; this.innerHTML = this.template;
} }
} }
window.customElements.define('joe-message', JoeMessage); window.customElements.define('joe-message', JoeMessage);
/* 默认卡片 */ /* 默认卡片 */
class JoeCard extends HTMLElement { class JoeCard extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
width: this.getAttribute('width') || '100%', width: this.getAttribute('width') || '100%',
label: this.getAttribute('label') || '默认标题', label: this.getAttribute('label') || '默认标题',
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 ` return `
<div class="joe_detail__article-card" style="width: ${this.options.width}"> <div class="joe_detail__article-card" style="width: ${this.options.width}">
<div class="title">${this.options.label}</div> <div class="title">${this.options.label}</div>
<div class="content">${this.options.content}</div> <div class="content">${this.options.content}</div>
</div> </div>
`; `;
} }
render() { render() {
this.innerHTML = this.template; this.innerHTML = this.template;
} }
} }
window.customElements.define('joe-card', JoeCard); window.customElements.define('joe-card', JoeCard);
/* 回复可见 - 显示状态 */ /* 回复可见 - 显示状态 */
class JoeShow extends HTMLElement { class JoeShow extends HTMLElement {
constructor() { constructor() {
super(); super();
this.options = { this.options = {
content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '默认隐藏的内容' content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '默认隐藏的内容'
}; };
this.render(); this.render();
} }
render() { render() {
this.innerHTML = this.options.content; this.innerHTML = this.options.content;
} }
} }
window.customElements.define('joe-show', JoeShow); window.customElements.define('joe-show', JoeShow);
/* 回复可见 - 隐藏状态 */ /* 回复可见 - 隐藏状态 */
class JoeHide extends HTMLElement { class JoeHide extends HTMLElement {
constructor() { constructor() {
super(); super();
this.render(); this.render();
} }
get template() { get template() {
return ` return `
<style> <style>
.container { .container {
background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px); background: repeating-linear-gradient(145deg, var(--classD), var(--classD) 15px, var(--background) 0, var(--background) 25px);
@ -225,20 +236,20 @@ document.addEventListener('DOMContentLoaded', () => {
此处内容作者设置了 <i>回复</i> 此处内容作者设置了 <i>回复</i>
</div> </div>
`; `;
} }
render() { render() {
this.innerHTML = ''; this.innerHTML = '';
this._shadowRoot = this.attachShadow({ mode: 'closed' }); this._shadowRoot = this.attachShadow({ mode: 'closed' });
this._shadowRoot.innerHTML = this.template; this._shadowRoot.innerHTML = this.template;
this.event(); this.event();
} }
event() { event() {
this.$button = this._shadowRoot.querySelector('i'); this.$button = this._shadowRoot.querySelector('i');
this.$button.addEventListener('click', () => { this.$button.addEventListener('click', () => {
const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15; const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15;
window.scrollTo({ top, behavior: 'smooth' }); window.scrollTo({ top, behavior: 'smooth' });
}); });
} }
} }
window.customElements.define('joe-hide', JoeHide); window.customElements.define('joe-hide', JoeHide);
}); });

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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

View File

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

View File

@ -18,7 +18,7 @@
<?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=20210414'); ?>"> <link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/joe.global.min.css?v=20200417'); ?>">
<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" />
@ -38,6 +38,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=202104161759'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.global.min.js?v=20200417'); ?>"></script>
<script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=202104161759'); ?>"></script> <script src="<?php $this->options->themeUrl('assets/js/joe.short.min.js?v=20200417'); ?>"></script>
<?php $this->options->JCustomHeadEnd() ?> <?php $this->options->JCustomHeadEnd() ?>

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

View File

@ -1,7 +1,7 @@
import { undo, redo } from '@codemirror/history'; import { undo, redo } from '@codemirror/history';
export default class JoeAction { export default class JoeAction {
constructor() { constructor() {
$('body').append(` $('body').append(`
<div class="cm-modal"> <div class="cm-modal">
<div class="cm-modal__wrapper"> <div class="cm-modal__wrapper">
<div class="cm-modal__wrapper-header"> <div class="cm-modal__wrapper-header">
@ -16,186 +16,186 @@ export default class JoeAction {
</div> </div>
</div> </div>
`); `);
$('.cm-modal__wrapper-footer--cancle, .cm-modal__wrapper-header--close').on('click', () => $('.cm-modal').removeClass('active')); $('.cm-modal__wrapper-footer--cancle, .cm-modal__wrapper-header--close').on('click', () => $('.cm-modal').removeClass('active'));
$('.cm-modal__wrapper-footer--confirm').on('click', () => { $('.cm-modal__wrapper-footer--confirm').on('click', () => {
this.options.confirm(); this.options.confirm();
$('.cm-modal').removeClass('active'); $('.cm-modal').removeClass('active');
}); });
} }
_openModal(options = {}) { _openModal(options = {}) {
const _options = { const _options = {
title: '提示', title: '提示',
innerHtml: '内容', innerHtml: '内容',
hasFooter: true, hasFooter: true,
confirm: () => {}, confirm: () => {},
handler: () => {} handler: () => {}
}; };
this.options = Object.assign(_options, options); this.options = Object.assign(_options, options);
$('.cm-modal__wrapper-header--text').html(this.options.title); $('.cm-modal__wrapper-header--text').html(this.options.title);
$('.cm-modal__wrapper-bodyer').html(this.options.innerHtml); $('.cm-modal__wrapper-bodyer').html(this.options.innerHtml);
this.options.hasFooter ? $('.cm-modal__wrapper-footer').show() : $('.cm-modal__wrapper-footer').hide(); this.options.hasFooter ? $('.cm-modal__wrapper-footer').show() : $('.cm-modal__wrapper-footer').hide();
$('.cm-modal').addClass('active'); $('.cm-modal').addClass('active');
this.options.handler(); this.options.handler();
} }
_getLineCh(cm) { _getLineCh(cm) {
const head = cm.state.selection.main.head; const head = cm.state.selection.main.head;
const line = cm.state.doc.lineAt(head); const line = cm.state.doc.lineAt(head);
return head - line.from; return head - line.from;
} }
_replaceSelection(cm, str) { _replaceSelection(cm, str) {
cm.dispatch(cm.state.replaceSelection(str)); cm.dispatch(cm.state.replaceSelection(str));
} }
_setCursor(cm, pos) { _setCursor(cm, pos) {
cm.dispatch({ selection: { anchor: pos } }); cm.dispatch({ selection: { anchor: pos } });
} }
_getSelection(cm) { _getSelection(cm) {
return cm.state.sliceDoc(cm.state.selection.main.from, cm.state.selection.main.to); return cm.state.sliceDoc(cm.state.selection.main.from, cm.state.selection.main.to);
} }
_insetAmboText(cm, str) { _insetAmboText(cm, str) {
const cursor = cm.state.selection.main.head; const cursor = cm.state.selection.main.head;
const selection = this._getSelection(cm); const selection = this._getSelection(cm);
this._replaceSelection(cm, ` ${str + selection + str} `); this._replaceSelection(cm, ` ${str + selection + str} `);
if (selection === '') this._setCursor(cm, cursor + str.length + 1); if (selection === '') this._setCursor(cm, cursor + str.length + 1);
cm.focus(); cm.focus();
} }
_createTableLists(cm, url, activeTab = '', modalTitle) { _createTableLists(cm, url, activeTab = '', modalTitle) {
$.ajax({ $.ajax({
url, url,
dataType: 'json', dataType: 'json',
success: res => { success: res => {
let tabbarStr = ''; let tabbarStr = '';
let listsStr = ''; let listsStr = '';
for (let key in res) { for (let key in res) {
const arr = res[key].split(' '); const arr = res[key].split(' ');
tabbarStr += `<div class="tabbar-item ${key === activeTab ? 'active' : ''}" data-show="${key}">${key}</div>`; tabbarStr += `<div class="tabbar-item ${key === activeTab ? 'active' : ''}" data-show="${key}">${key}</div>`;
listsStr += `<div class="lists ${key === activeTab ? 'active' : ''}" data-show="${key}">${arr.map(item => `<div class="lists-item" data-text="${item}">${item}</div>`).join(' ')}</div>`; listsStr += `<div class="lists ${key === activeTab ? 'active' : ''}" data-show="${key}">${arr.map(item => `<div class="lists-item" data-text="${item}">${item}</div>`).join(' ')}</div>`;
} }
this._openModal({ this._openModal({
title: modalTitle, title: modalTitle,
hasFooter: false, hasFooter: false,
innerHtml: `<div class="tabbar">${tabbarStr}</div>${listsStr}`, innerHtml: `<div class="tabbar">${tabbarStr}</div>${listsStr}`,
handler: () => { handler: () => {
$('.cm-modal__wrapper-bodyer .tabbar-item').on('click', function () { $('.cm-modal__wrapper-bodyer .tabbar-item').on('click', function () {
const activeTab = $(this); const activeTab = $(this);
const show = activeTab.attr('data-show'); const show = activeTab.attr('data-show');
const tabbar = $('.cm-modal__wrapper-bodyer .tabbar'); const tabbar = $('.cm-modal__wrapper-bodyer .tabbar');
activeTab.addClass('active').siblings().removeClass('active'); activeTab.addClass('active').siblings().removeClass('active');
tabbar.stop().animate({ tabbar.stop().animate({
scrollLeft: activeTab[0].offsetLeft - tabbar[0].offsetWidth / 2 + activeTab[0].offsetWidth / 2 - 15 scrollLeft: activeTab[0].offsetLeft - tabbar[0].offsetWidth / 2 + activeTab[0].offsetWidth / 2 - 15
}); });
$('.cm-modal__wrapper-bodyer .lists').removeClass('active'); $('.cm-modal__wrapper-bodyer .lists').removeClass('active');
$(".cm-modal__wrapper-bodyer .lists[data-show='" + show + "']").addClass('active'); $(".cm-modal__wrapper-bodyer .lists[data-show='" + show + "']").addClass('active');
}); });
const _this = this; const _this = this;
$('.cm-modal__wrapper-bodyer .lists-item').on('click', function () { $('.cm-modal__wrapper-bodyer .lists-item').on('click', function () {
const text = $(this).attr('data-text'); const text = $(this).attr('data-text');
_this._replaceSelection(cm, ` ${text} `); _this._replaceSelection(cm, ` ${text} `);
$('.cm-modal').removeClass('active'); $('.cm-modal').removeClass('active');
cm.focus(); cm.focus();
}); });
} }
}); });
} }
}); });
} }
handleFullScreen(el) { handleFullScreen(el) {
el.toggleClass('active'); el.toggleClass('active');
$('body').toggleClass('fullscreen'); $('body').toggleClass('fullscreen');
$('.cm-container').toggleClass('fullscreen'); $('.cm-container').toggleClass('fullscreen');
$('.cm-preview').width(0); $('.cm-preview').width(0);
} }
handlePublish() { handlePublish() {
$('#btn-submit').click(); $('#btn-submit').click();
} }
handleUndo(cm) { handleUndo(cm) {
undo(cm); undo(cm);
cm.focus(); cm.focus();
} }
handleRedo(cm) { handleRedo(cm) {
redo(cm); redo(cm);
cm.focus(); cm.focus();
} }
handleIndent(cm) { handleIndent(cm) {
this._replaceSelection(cm, ' '); this._replaceSelection(cm, ' ');
cm.focus(); cm.focus();
} }
handleTime(cm) { handleTime(cm) {
const time = new Date(); const time = new Date();
const _Year = time.getFullYear(); const _Year = time.getFullYear();
const _Month = String(time.getMonth() + 1).padStart(2, 0); const _Month = String(time.getMonth() + 1).padStart(2, 0);
const _Date = String(time.getDate()).padStart(2, 0); const _Date = String(time.getDate()).padStart(2, 0);
const _Hours = String(time.getHours()).padStart(2, 0); const _Hours = String(time.getHours()).padStart(2, 0);
const _Minutes = String(time.getMinutes()).padStart(2, 0); const _Minutes = String(time.getMinutes()).padStart(2, 0);
const _Seconds = String(time.getSeconds()).padStart(2, 0); const _Seconds = String(time.getSeconds()).padStart(2, 0);
const _Day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][time.getDay()]; const _Day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][time.getDay()];
const _time = `${this._getLineCh(cm) ? '\n' : ''}${_Year}-${_Month}-${_Date} ${_Hours}:${_Minutes}:${_Seconds} ${_Day}\n`; const _time = `${this._getLineCh(cm) ? '\n' : ''}${_Year}-${_Month}-${_Date} ${_Hours}:${_Minutes}:${_Seconds} ${_Day}\n`;
this._replaceSelection(cm, _time); this._replaceSelection(cm, _time);
cm.focus(); cm.focus();
} }
handleHr(cm) { handleHr(cm) {
const str = `${this._getLineCh(cm) ? '\n' : ''}\n------------\n\n`; const str = `${this._getLineCh(cm) ? '\n' : ''}\n------------\n\n`;
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
cm.focus(); cm.focus();
} }
handleClean(cm) { handleClean(cm) {
cm.dispatch({ changes: { from: 0, to: cm.state.doc.length, insert: '' } }); cm.dispatch({ changes: { from: 0, to: cm.state.doc.length, insert: '' } });
cm.focus(); cm.focus();
} }
handleOrdered(cm) { handleOrdered(cm) {
const selection = this._getSelection(cm); const selection = this._getSelection(cm);
if (selection === '') { if (selection === '') {
const str = (this._getLineCh(cm) ? '\n\n' : '') + '1. '; const str = (this._getLineCh(cm) ? '\n\n' : '') + '1. ';
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
} else { } else {
const selectionText = selection.split('\n'); const selectionText = selection.split('\n');
for (let i = 0, len = selectionText.length; i < len; i++) { for (let i = 0, len = selectionText.length; i < len; i++) {
selectionText[i] = selectionText[i] === '' ? '' : i + 1 + '. ' + selectionText[i]; selectionText[i] = selectionText[i] === '' ? '' : i + 1 + '. ' + selectionText[i];
} }
const str = (this._getLineCh(cm) ? '\n' : '') + selectionText.join('\n'); const str = (this._getLineCh(cm) ? '\n' : '') + selectionText.join('\n');
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
} }
cm.focus(); cm.focus();
} }
handleUnordered(cm) { handleUnordered(cm) {
const selection = this._getSelection(cm); const selection = this._getSelection(cm);
if (selection === '') { if (selection === '') {
const str = (this._getLineCh(cm) ? '\n' : '') + '- '; const str = (this._getLineCh(cm) ? '\n' : '') + '- ';
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
} else { } else {
const selectionText = selection.split('\n'); const selectionText = selection.split('\n');
for (let i = 0, len = selectionText.length; i < len; i++) { for (let i = 0, len = selectionText.length; i < len; i++) {
selectionText[i] = selectionText[i] === '' ? '' : '- ' + selectionText[i]; selectionText[i] = selectionText[i] === '' ? '' : '- ' + selectionText[i];
} }
const str = (this._getLineCh(cm) ? '\n' : '') + selectionText.join('\n'); const str = (this._getLineCh(cm) ? '\n' : '') + selectionText.join('\n');
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
} }
cm.focus(); cm.focus();
} }
handleQuote(cm) { handleQuote(cm) {
const selection = this._getSelection(cm); const selection = this._getSelection(cm);
if (selection === '') { if (selection === '') {
this._replaceSelection(cm, `${this._getLineCh(cm) ? '\n' : ''}> `); this._replaceSelection(cm, `${this._getLineCh(cm) ? '\n' : ''}> `);
} else { } else {
const selectionText = selection.split('\n'); const selectionText = selection.split('\n');
for (let i = 0, len = selectionText.length; i < len; i++) { for (let i = 0, len = selectionText.length; i < len; i++) {
selectionText[i] = selectionText[i] === '' ? '' : '> ' + selectionText[i]; selectionText[i] = selectionText[i] === '' ? '' : '> ' + selectionText[i];
} }
const str = (this._getLineCh(cm) ? '\n' : '') + selectionText.join('\n'); const str = (this._getLineCh(cm) ? '\n' : '') + selectionText.join('\n');
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
} }
cm.focus(); cm.focus();
} }
handleDownload(cm) { handleDownload(cm) {
const title = $('#title').val() || '新文章'; const title = $('#title').val() || '新文章';
const aTag = document.createElement('a'); const aTag = document.createElement('a');
let blob = new Blob([cm.state.doc.toString()]); let blob = new Blob([cm.state.doc.toString()]);
aTag.download = title + '.md'; aTag.download = title + '.md';
aTag.href = URL.createObjectURL(blob); aTag.href = URL.createObjectURL(blob);
aTag.click(); aTag.click();
URL.revokeObjectURL(blob); URL.revokeObjectURL(blob);
} }
handleTitle(cm, tool) { handleTitle(cm, tool) {
const item = $(` const item = $(`
<div class="cm-tools-item" title="${tool.title}"> <div class="cm-tools-item" title="${tool.title}">
${tool.innerHTML} ${tool.innerHTML}
<div class="cm-tools__dropdown"> <div class="cm-tools__dropdown">
@ -208,26 +208,26 @@ export default class JoeAction {
</div> </div>
</div> </div>
`); `);
item.on('click', function (e) { item.on('click', function (e) {
e.stopPropagation(); e.stopPropagation();
$(this).toggleClass('active'); $(this).toggleClass('active');
}); });
const _this = this; const _this = this;
item.on('click', '.cm-tools__dropdown-item', function (e) { item.on('click', '.cm-tools__dropdown-item', function (e) {
e.stopPropagation(); e.stopPropagation();
const text = $(this).attr('data-text'); const text = $(this).attr('data-text');
if (_this._getLineCh(cm)) _this._replaceSelection(cm, '\n\n' + text); if (_this._getLineCh(cm)) _this._replaceSelection(cm, '\n\n' + text);
else _this._replaceSelection(cm, text); else _this._replaceSelection(cm, text);
item.removeClass('active'); item.removeClass('active');
cm.focus(); cm.focus();
}); });
$(document).on('click', () => item.removeClass('active')); $(document).on('click', () => item.removeClass('active'));
$('.cm-tools').append(item); $('.cm-tools').append(item);
} }
handleLink(cm) { handleLink(cm) {
this._openModal({ this._openModal({
title: '插入链接', title: '插入链接',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>链接标题</label> <label>链接标题</label>
<input autocomplete="off" name="title" placeholder="请输入链接标题"/> <input autocomplete="off" name="title" placeholder="请输入链接标题"/>
@ -237,18 +237,18 @@ export default class JoeAction {
<input autocomplete="off" name="url" placeholder="请输入链接地址"/> <input autocomplete="off" name="url" placeholder="请输入链接地址"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const title = $(".cm-modal input[name='title']").val() || 'Test'; const title = $(".cm-modal input[name='title']").val() || 'Test';
const url = $(".cm-modal input[name='url']").val() || 'http://'; const url = $(".cm-modal input[name='url']").val() || 'http://';
this._replaceSelection(cm, ` [${title}](${url}) `); this._replaceSelection(cm, ` [${title}](${url}) `);
cm.focus(); cm.focus();
} }
}); });
} }
handleImage(cm) { handleImage(cm) {
this._openModal({ this._openModal({
title: '插入图片', title: '插入图片',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>图片名称</label> <label>图片名称</label>
<input autocomplete="off" name="title" placeholder="请输入图片名称"/> <input autocomplete="off" name="title" placeholder="请输入图片名称"/>
@ -258,18 +258,18 @@ export default class JoeAction {
<input autocomplete="off" name="url" placeholder="请输入图片地址"/> <input autocomplete="off" name="url" placeholder="请输入图片地址"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const title = $(".cm-modal input[name='title']").val() || 'Test'; const title = $(".cm-modal input[name='title']").val() || 'Test';
const url = $(".cm-modal input[name='url']").val() || 'http://'; const url = $(".cm-modal input[name='url']").val() || 'http://';
this._replaceSelection(cm, ` ![${title}](${url}) `); this._replaceSelection(cm, ` ![${title}](${url}) `);
cm.focus(); cm.focus();
} }
}); });
} }
handleTable(cm) { handleTable(cm) {
this._openModal({ this._openModal({
title: '插入表格', title: '插入表格',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>表格行</label> <label>表格行</label>
<input style="width: 50px; flex: none; margin-right: 10px;" value="3" autocomplete="off" name="row"/> <input style="width: 50px; flex: none; margin-right: 10px;" value="3" autocomplete="off" name="row"/>
@ -277,40 +277,40 @@ export default class JoeAction {
<input style="width: 50px; flex: none;" value="3" autocomplete="off" name="column"/> <input style="width: 50px; flex: none;" value="3" autocomplete="off" name="column"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
let row = $(".cm-modal input[name='row']").val(); let row = $(".cm-modal input[name='row']").val();
let column = $(".cm-modal input[name='column']").val(); let column = $(".cm-modal input[name='column']").val();
if (isNaN(row)) row = 3; if (isNaN(row)) row = 3;
if (isNaN(column)) column = 3; if (isNaN(column)) column = 3;
let rowStr = ''; let rowStr = '';
let rangeStr = ''; let rangeStr = '';
let columnlStr = ''; let columnlStr = '';
for (let i = 0; i < column; i++) { for (let i = 0; i < column; i++) {
rowStr += '| 表头 '; rowStr += '| 表头 ';
rangeStr += '| :--: '; rangeStr += '| :--: ';
} }
for (let i = 0; i < row; i++) { for (let i = 0; i < row; i++) {
for (let j = 0; j < column; j++) columnlStr += '| 表格 '; for (let j = 0; j < column; j++) columnlStr += '| 表格 ';
columnlStr += '|\n'; columnlStr += '|\n';
} }
const htmlStr = `${rowStr}|\n${rangeStr}|\n${columnlStr}\n`; const htmlStr = `${rowStr}|\n${rangeStr}|\n${columnlStr}\n`;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n\n' + htmlStr); if (this._getLineCh(cm)) this._replaceSelection(cm, '\n\n' + htmlStr);
else this._replaceSelection(cm, htmlStr); else this._replaceSelection(cm, htmlStr);
cm.focus(); cm.focus();
} }
}); });
} }
handleCodeBlock(cm) { handleCodeBlock(cm) {
const language = 'rss+atom+ssml+mathml+svg+html+markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+clojure+cmake+cobol+coffeescript+concurnas+csp+coq+crystal+css-extras+csv+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+kumir+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+jsx+tsx+reason+regex+rego+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig'; const language = 'rss+atom+ssml+mathml+svg+html+markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+asciidoc+aspnet+asm6502+autohotkey+autoit+bash+basic+batch+bbcode+birb+bison+bnf+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+clojure+cmake+cobol+coffeescript+concurnas+csp+coq+crystal+css-extras+csv+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gcode+gdscript+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keyman+kotlin+kumir+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+jsx+tsx+reason+regex+rego+renpy+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+iecst+stylus+swift+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+turtle+twig+typescript+typoscript+unrealscript+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+wiki+xeora+xml-doc+xojo+xquery+yaml+yang+zig';
const languageArr = language.split('+').sort((a, b) => a.localeCompare(b)); const languageArr = language.split('+').sort((a, b) => a.localeCompare(b));
const sessionStorageType = sessionStorage.getItem('selectType') || ''; const sessionStorageType = sessionStorage.getItem('selectType') || '';
let htmlStr = ''; let htmlStr = '';
languageArr.forEach(item => { languageArr.forEach(item => {
htmlStr += `<option ${sessionStorageType === item ? 'selected' : ''} value="${item}">${item.toUpperCase()}</option>`; htmlStr += `<option ${sessionStorageType === item ? 'selected' : ''} value="${item}">${item.toUpperCase()}</option>`;
}); });
this._openModal({ this._openModal({
title: '插入代码块', title: '插入代码块',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>语言类型</label> <label>语言类型</label>
<select name="type"> <select name="type">
@ -319,39 +319,39 @@ export default class JoeAction {
</select> </select>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const type = $(".cm-modal select[name='type']").val(); const type = $(".cm-modal select[name='type']").val();
if (!type) return; if (!type) return;
const htmlStr = `\`\`\`${type}\ncode here...\n\`\`\``; const htmlStr = `\`\`\`${type}\ncode here...\n\`\`\``;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n\n' + htmlStr); if (this._getLineCh(cm)) this._replaceSelection(cm, '\n\n' + htmlStr);
else this._replaceSelection(cm, htmlStr); else this._replaceSelection(cm, htmlStr);
cm.focus(); cm.focus();
sessionStorage.setItem('selectType', type); sessionStorage.setItem('selectType', type);
} }
}); });
} }
handleAbout() { handleAbout() {
this._openModal({ this._openModal({
title: '关于', title: '关于',
hasFooter: false, hasFooter: false,
innerHtml: ` innerHtml: `
<ul> <ul>
<li>短代码功能正在开发中...</li> <li>短代码功能正在开发中...</li>
<li>仅支持网络图片粘贴上传截图等</li> <li>仅支持网络图片粘贴上传截图等</li>
<li>本编辑器仅供Joe主题使用未经允许不得移植至其他主题</li> <li>本编辑器仅供Joe主题使用未经允许不得移植至其他主题</li>
</ul> </ul>
` `
}); });
} }
handleTask(cm, type) { handleTask(cm, type) {
const str = type ? '{x}' : '{ }'; const str = type ? '{x}' : '{ }';
this._replaceSelection(cm, ` ${str} `); this._replaceSelection(cm, ` ${str} `);
cm.focus(); cm.focus();
} }
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"/>
@ -368,122 +368,126 @@ export default class JoeAction {
</select> </select>
</div> </div>
`, `,
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 width = $(".cm-modal input[name='width']").val() || '100%';
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}" width="${width}" ${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();
} }
}); });
} }
handleBilibili(cm) { handleBilibili(cm) {
this._openModal({ this._openModal({
title: 'BiliBili视频', title: 'BiliBili视频',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>视频Bvid</label> <label>视频Bvid</label>
<input autocomplete="off" name="bvid" placeholder="请输入视频Bvid"/> <input autocomplete="off" name="bvid" placeholder="请输入视频Bvid"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const bvid = $(".cm-modal input[name='bvid']").val(); const bvid = $(".cm-modal input[name='bvid']").val();
const str = `\n{bilibili bvid="${bvid}"/}\n\n`; const str = `\n{bilibili bvid="${bvid}"/}\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();
} }
}); });
} }
handleDplayer(cm) { handleDplayer(cm) {
this._openModal({ this._openModal({
title: 'M3U8/MP4视频', title: 'M3U8/MP4视频',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>视频地址</label> <label>视频地址</label>
<input autocomplete="off" name="src" placeholder="请输入视频地址"/> <input autocomplete="off" name="src" placeholder="请输入视频地址"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const src = $(".cm-modal input[name='src']").val(); const src = $(".cm-modal input[name='src']").val();
const str = `\n{dplayer src="${src}"/}\n\n`; const str = `\n{dplayer src="${src}"/}\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();
} }
}); });
} }
handleDraft() { handleDraft() {
$('#btn-save').click(); $('#btn-save').click();
} }
handleExpression(cm) { handleExpression(cm) {
$.ajax({ $.ajax({
url: window.JoeConfig.expressionAPI, url: window.JoeConfig.expressionAPI,
dataType: 'json', dataType: 'json',
success: res => { success: res => {
let tabbarStr = ''; let tabbarStr = '';
let listsStr = ''; let listsStr = '';
for (let key in res) { for (let key in res) {
const arr = res[key]; const arr = res[key];
tabbarStr += `<div class="tabbar-item ${key === '泡泡' ? 'active' : ''}" data-show="${key}">${key}</div>`; tabbarStr += `<div class="tabbar-item ${key === '泡泡' ? 'active' : ''}" data-show="${key}">${key}</div>`;
listsStr += `<div class="lists ${key === '泡泡' ? 'active' : ''}" data-show="${key}">${arr.map(item => `<div class="lists-item" data-text="${item.data}">${key === '颜文字' ? item.icon : `<img src="${window.JoeConfig.themeURL + item.icon}">`}</div>`).join(' ')}</div>`; listsStr += `<div class="lists ${key === '泡泡' ? 'active' : ''}" data-show="${key}">${arr.map(item => `<div class="lists-item" data-text="${item.data}">${key === '颜文字' ? item.icon : `<img src="${window.JoeConfig.themeURL + item.icon}">`}</div>`).join(' ')}</div>`;
} }
this._openModal({ this._openModal({
title: '普通表情', title: '普通表情',
hasFooter: false, hasFooter: false,
innerHtml: `<div class="tabbar">${tabbarStr}</div>${listsStr}`, innerHtml: `<div class="tabbar">${tabbarStr}</div>${listsStr}`,
handler: () => { handler: () => {
$('.cm-modal__wrapper-bodyer .tabbar-item').on('click', function () { $('.cm-modal__wrapper-bodyer .tabbar-item').on('click', function () {
const show = $(this).attr('data-show'); const show = $(this).attr('data-show');
$(this).addClass('active').siblings().removeClass('active'); $(this).addClass('active').siblings().removeClass('active');
$('.cm-modal__wrapper-bodyer .lists').removeClass('active'); $('.cm-modal__wrapper-bodyer .lists').removeClass('active');
$(".cm-modal__wrapper-bodyer .lists[data-show='" + show + "']").addClass('active'); $(".cm-modal__wrapper-bodyer .lists[data-show='" + show + "']").addClass('active');
}); });
const _this = this; const _this = this;
$('.cm-modal__wrapper-bodyer .lists-item').on('click', function () { $('.cm-modal__wrapper-bodyer .lists-item').on('click', function () {
const text = $(this).attr('data-text'); const text = $(this).attr('data-text');
_this._replaceSelection(cm, ` ${text} `); _this._replaceSelection(cm, ` ${text} `);
$('.cm-modal').removeClass('active'); $('.cm-modal').removeClass('active');
cm.focus(); cm.focus();
}); });
} }
}); });
} }
}); });
} }
handleMtitle(cm) { handleMtitle(cm) {
this._openModal({ this._openModal({
title: '居中标题', title: '居中标题',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>标题内容</label> <label>标题内容</label>
<input autocomplete="off" maxlength="10" name="text" placeholder="请输入标题内容10字以内"/> <input autocomplete="off" maxlength="10" name="text" placeholder="请输入标题内容10字以内"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const text = $(".cm-modal input[name='text']").val(); const text = $(".cm-modal input[name='text']").val();
const str = `\n{mtitle title="${text}"/}\n\n`; const str = `\n{mtitle title="${text}"/}\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();
} }
}); });
} }
handleHtml(cm) { handleHtml(cm) {
const str = `${this._getLineCh(cm) ? '\n' : ''}!!!\n<p align="center">居中</p>\n<p align="right">居右</p>\n<font size="5" color="red">颜色大小</font>\n!!!\n`; const str = `${this._getLineCh(cm) ? '\n' : ''}!!!\n<p align="center">居中</p>\n<p align="right">居右</p>\n<font size="5" color="red">颜色大小</font>\n!!!\n`;
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
cm.focus(); cm.focus();
} }
handleAbtn(cm) { handleAbtn(cm) {
this._openModal({ this._openModal({
title: '多彩按钮', title: '多彩按钮',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>按钮图标</label> <label>按钮图标</label>
<input autocomplete="off" name="icon" placeholder="请输入fa图标fa-download"/> <input autocomplete="off" name="icon" placeholder="请输入fa图标fa-download"/>
</div> </div>
<div class="fitem">
<label>图标大全</label>
<a href="https://fontawesome.dashgame.com" target="_blank">fontawesome.dashgame.com</a>
</div>
<div class="fitem"> <div class="fitem">
<label>按钮颜色</label> <label>按钮颜色</label>
<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#ff6800" name="color" type="color"/> <input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#ff6800" name="color" type="color"/>
@ -501,26 +505,30 @@ export default class JoeAction {
<input autocomplete="off" name="content" placeholder="请输入按钮内容"/> <input autocomplete="off" name="content" placeholder="请输入按钮内容"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const icon = $(".cm-modal input[name='icon']").val(); const icon = $(".cm-modal input[name='icon']").val();
const color = $(".cm-modal input[name='color']").val(); const color = $(".cm-modal input[name='color']").val();
const href = $(".cm-modal input[name='href']").val(); const href = $(".cm-modal input[name='href']").val();
const radius = $(".cm-modal input[name='radius']").val(); const radius = $(".cm-modal input[name='radius']").val();
const content = $(".cm-modal input[name='content']").val(); const content = $(".cm-modal input[name='content']").val();
const str = ` {abtn icon="${icon}" color="${color}" href="${href}" radius="${radius}" content="${content}"/} `; const str = ` {abtn icon="${icon}" color="${color}" href="${href}" radius="${radius}" content="${content}"/} `;
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
cm.focus(); cm.focus();
} }
}); });
} }
handleAnote(cm) { handleAnote(cm) {
this._openModal({ this._openModal({
title: '便条按钮', title: '便条按钮',
innerHtml: ` innerHtml: `
<div class="fitem"> <div class="fitem">
<label>按钮图标</label> <label>按钮图标</label>
<input autocomplete="off" name="icon" placeholder="请输入fa图标fa-download"/> <input autocomplete="off" name="icon" placeholder="请输入fa图标fa-download"/>
</div> </div>
<div class="fitem">
<label>图标大全</label>
<a href="https://fontawesome.dashgame.com" target="_blank">fontawesome.dashgame.com</a>
</div>
<div class="fitem"> <div class="fitem">
<label>跳转链接</label> <label>跳转链接</label>
<input autocomplete="off" name="href" placeholder="请输入跳转链接"/> <input autocomplete="off" name="href" placeholder="请输入跳转链接"/>
@ -540,15 +548,38 @@ export default class JoeAction {
<input autocomplete="off" name="content" placeholder="请输入按钮内容"/> <input autocomplete="off" name="content" placeholder="请输入按钮内容"/>
</div> </div>
`, `,
confirm: () => { confirm: () => {
const icon = $(".cm-modal input[name='icon']").val(); const icon = $(".cm-modal input[name='icon']").val();
const href = $(".cm-modal input[name='href']").val(); const href = $(".cm-modal input[name='href']").val();
const type = $(".cm-modal select[name='type']").val(); const type = $(".cm-modal select[name='type']").val();
const content = $(".cm-modal input[name='content']").val(); const content = $(".cm-modal input[name='content']").val();
const str = ` {anote icon="${icon}" href="${href}" type="${type}" content="${content}"/} `; const str = ` {anote icon="${icon}" href="${href}" type="${type}" content="${content}"/} `;
this._replaceSelection(cm, str); this._replaceSelection(cm, str);
cm.focus(); cm.focus();
} }
}); });
} }
handleDotted(cm) {
this._openModal({
title: '彩色虚线',
innerHtml: `
<div class="fitem">
<label>开始颜色</label>
<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#ff6c6c" name="startColor" type="color"/>
</div>
<div class="fitem">
<label>结束颜色</label>
<input style="width: 44px;padding: 0 2px;flex: none" autocomplete="off" value="#1989fa" name="endColor" type="color"/>
</div>
`,
confirm: () => {
const startColor = $(".cm-modal input[name='startColor']").val();
const endColor = $(".cm-modal input[name='endColor']").val();
const str = `\n{dotted startColor="${startColor}" endColor="${endColor}"/}\n\n`;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
else this._replaceSelection(cm, str);
cm.focus();
}
});
}
} }

View File

@ -23,6 +23,7 @@ export default function createPreviewHtml(str) {
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(/{abtn([^}]*)\/}/g, '<joe-abtn $1></joe-abtn>');
str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>'); str = str.replace(/{anote([^}]*)\/}/g, '<joe-anote $1></joe-anote>');
str = str.replace(/{dotted([^}]*)\/}/g, '<joe-dotted $1></joe-dotted>');
$('.cm-preview-content').html(str); $('.cm-preview-content').html(str);
$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el)); $('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));

View File

@ -150,6 +150,11 @@ export default [
title: '便条按钮', title: '便条按钮',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M856.73 796.7h-690c-57.9 0-105-47.1-105-105v-360c0-57.9 47.1-105 105-105h690c57.9 0 105 47.1 105 105v360c0 57.89-47.1 105-105 105zm-690-500.01c-19.3 0-35 15.7-35 35v360c0 19.3 15.7 35 35 35h690c19.3 0 35-15.7 35-35v-360c0-19.3-15.7-35-35-35h-690z"/><path d="M233.16 431.69H790.3v160H233.16z"/></svg>' innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M856.73 796.7h-690c-57.9 0-105-47.1-105-105v-360c0-57.9 47.1-105 105-105h690c57.9 0 105 47.1 105 105v360c0 57.89-47.1 105-105 105zm-690-500.01c-19.3 0-35 15.7-35 35v360c0 19.3 15.7 35 35 35h690c19.3 0 35-15.7 35-35v-360c0-19.3-15.7-35-35-35h-690z"/><path d="M233.16 431.69H790.3v160H233.16z"/></svg>'
}, },
{
type: 'dotted',
title: '彩色虚线',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M111.09 562.26a42.6 42.6 0 1 1 0-85.19h127.78a42.6 42.6 0 0 1 0 85.19zm340.75-3a42.59 42.59 0 1 1 0-85.18h127.78a42.59 42.59 0 1 1 0 85.18zm340.75 0a42.59 42.59 0 0 1 0-85.18h127.79a42.59 42.59 0 1 1 0 85.18zm0 0"/></svg>'
},
/* --------------------------- 短代码结束 --------------------------- */ /* --------------------------- 短代码结束 --------------------------- */
{ {
type: 'clean', type: 'clean',

File diff suppressed because one or more lines are too long

View File

@ -286,6 +286,9 @@ class Joe extends JoeAction {
case 'anote': case 'anote':
super.handleAnote(this.cm); super.handleAnote(this.cm);
break; break;
case 'dotted':
super.handleDotted(this.cm);
break;
} }
}); });
$('.cm-tools').append(el); $('.cm-tools').append(el);

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()]
}; };