更新

assets/js/joe.short.js

@@ -1,4 +1,30 @@
 document.addEventListener('DOMContentLoaded', () => {
+	/* 网易云音乐 - 歌单 √ */
+	class JoeMlist extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				id: this.getAttribute('id'),
+				width: this.getAttribute('width') || '100%',
+				autoplay: this.getAttribute('autoplay') ? 1 : 0
+			};
+			this.render();
+		}
+		get template() {
+			return `
+				<style>iframe {display: block;margin: 0 auto;border: none;}</style>
+				<iframe src="//music.163.com/outchain/player?type=0&id=${this.options.id}&auto=${this.options.autoplay}&height=430" width="${this.options.width}" height="450px"></iframe>
+			`;
+		}
+		render() {
+			this.innerHTML = '';
+			this._shadowRoot = this.attachShadow({ mode: 'closed' });
+			if (this.options.id) this._shadowRoot.innerHTML = this.template;
+			else this._shadowRoot.innerHTML = '网易云歌单ID未填写！';
+		}
+	}
+	window.customElements.define('joe-mlist', JoeMlist);
+
 	/* 网易云音乐 - 单首 - 已测试 √ */
 	class JoeMusic extends HTMLElement {
 		constructor() {
@@ -245,44 +271,6 @@ document.addEventListener('DOMContentLoaded', () => {
 	 *
 	 */
 
-	/* 网易云音乐 - 歌单 */
-	class JoeMlist extends HTMLElement {
-		constructor() {
-			super();
-			this.options = {
-				id: this.getAttribute('id'),
-				width: this.getAttribute('width') || '100%',
-				height: this.getAttribute('height') || '450px',
-				autoplay: this.getAttribute('autoplay') ? 1 : 0
-			};
-			this.render();
-		}
-		get template() {
-			return `
-                <style>
-                    .container {
-                        width: 100%;
-                    }
-                    .container iframe {
-                        display: block;
-                        margin: 0 auto;
-                        border: none;
-                        vertical-align: middle;
-                    }
-                </style>
-                <div class="container">
-                    <iframe src="//music.163.com/outchain/player?type=0&id=${this.options.id}&auto=${this.options.autoplay}&height=430" width="${this.options.width}" height="${this.options.height}"></iframe>
-                </div>
-            `;
-		}
-		render() {
-			this.innerHTML = '';
-			this._shadowRoot = this.attachShadow({ mode: 'closed' });
-			if (this.options.id) this._shadowRoot.innerHTML = this.template;
-			else this._shadowRoot.innerHTML = '网易云歌单ID未填写！';
-		}
-	}
-	window.customElements.define('joe-mlist', JoeMlist);
 	/* 回复可见 - 隐藏状态 */
 	class JoeHide extends HTMLElement {
 		constructor() {

core/factory.php

@@ -51,6 +51,7 @@ class Editor
             }
         </script>
         <script src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/plugin/prism/prism.js"></script>
+        <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.short.min.js') ?>"></script>
         <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.parse.min.js?v=6.1.8') ?>"></script>
         <script src="<?php Helper::options()->themeUrl('typecho/write/js/joe.write.chunk.js?v=6.1.8') ?>"></script>
 <?php

core/function.php

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

core/short.php

@@ -13,14 +13,9 @@ function _parseContent($post, $login)
         ));
     }
     
-
+    /* 过滤网易云音乐 - √ */
-
-
-
-
-    /* 过滤网易云音乐 -  */
     if (strpos($content, '{music') !== false) {
-        $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);
     }
 

package.json

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

typecho/write/css/joe.write.min.scss

@@ -138,7 +138,7 @@ body.fullscreen {
 				}
 				.cm-content {
 					width: 100%;
-					white-space: pre-wrap;
+					white-space: normal;
 					overflow-wrap: break-word;
 					color: #ccc;
 					caret-color: #ccc;
@@ -183,6 +183,9 @@ body.fullscreen {
 			overflow: auto;
 			box-sizing: border-box;
 			overscroll-behavior: none;
+			&.move {
+				pointer-events: none;
+			}
 			&::-webkit-scrollbar-track {
 				background: #fff;
 			}
@@ -198,7 +201,7 @@ body.fullscreen {
 				padding: 20px;
 				font-size: 14px;
 				font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-				white-space: pre-wrap;
+				white-space: normal;
 				overflow-wrap: break-word;
 				color: #606266;
 				-webkit-font-smoothing: antialiased;
@@ -497,7 +500,8 @@ body.fullscreen {
 				label {
 					margin-right: 10px;
 				}
-				input {
+				input,
+				select {
 					width: auto;
 					flex: 1;
 					-webkit-appearance: none;

typecho/write/js/_actions.js

@@ -373,4 +373,35 @@ export default class JoeAction {
 		this._replaceSelection(cm, ` ${str} `);
 		cm.focus();
 	}
+	handleNeteaseList(cm) {
+		this._openModal({
+			title: '网易云歌单',
+			innerHtml: `
+				<div class="fitem">
+					<label>歌单　ID</label>
+					<input autocomplete="off" name="id" placeholder="请输入歌单ID"/>
+				</div>
+				<div class="fitem">
+					<label>显示宽度</label>
+					<input autocomplete="off" value="100%" name="width" placeholder="请输入宽度（百分比/像素）"/>
+				</div>
+				<div class="fitem">
+					<label>自动播放</label>
+					<select name="autoplay">
+						<option value="1" selected>是</option>
+						<option value="0">否</option>
+					</select>
+				</div>
+            `,
+			confirm: () => {
+				const id = $(".cm-modal input[name='id']").val();
+				const width = $(".cm-modal input[name='width']").val() || '100%';
+				const autoplay = $(".cm-modal select[name='autoplay']").val();
+				const str = `{music-list id="${id}" width="${width}" ${autoplay === '1' ? 'autoplay ' : ''}/}\n`;
+				if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
+				else this._replaceSelection(cm, str);
+				cm.focus();
+			}
+		});
+	}
 }

typecho/write/js/_create.js

@@ -2,8 +2,14 @@ const parser = new HyperDown();
 export default function createPreviewHtml(str) {
 	str = parser.makeHtml(str);
 
-    str = str.replace(/{x}/g, '<input type="checkbox" class="task" checked disabled></input>')
+	/* 任务 - 完成 */
-    str = str.replace(/{ }/g, '<input type="checkbox" class="task" disabled></input>')
+	str = str.replace(/{x}/g, '<input type="checkbox" class="task" checked disabled></input>');
+
+	/* 任务 - 未完成 */
+	str = str.replace(/{ }/g, '<input type="checkbox" class="task" disabled></input>');
+
+	/* 网易云 - 歌单 */
+	str = str.replace(/{music-list([^\/})]*)\/}/g, '<joe-mlist $1></joe-mlist>');
 	
 	$('.cm-preview-content').html(str);
 	$('.cm-preview-content pre code').each((i, el) => Prism.highlightElement(el));

typecho/write/js/_tools.js

@@ -94,6 +94,11 @@ export default [
 		title: '任务 - 已完成',
 		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M831.551 64.623h-639.11c-70.3 0-127.816 57.517-127.816 127.819v639.103c0 70.308 57.515 127.833 127.816 127.833h639.11c70.294 0 127.822-57.525 127.822-127.833V192.442c0-70.302-57.527-127.82-127.822-127.82zM646.217 486.44c-108.652 159.779-204.52 345.115-204.52 345.115L192.443 550.351l63.916-70.303 153.385 146.994s76.695-127.822 178.95-236.469c102.261-108.652 223.689-198.127 223.689-198.127l19.17 63.916c0-.001-102.255 108.646-185.337 230.078z"/></svg>'
 	},
+	{
+		type: 'netease-list',
+		title: '网易云列表',
+		innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18"><path d="M919.438 376.378c-3.328 17.214-8.767 31.228-16.254 42.043-7.487 10.815-13.822 15.87-19.005 15.166-5.248-.768-9.92-4.48-14.015-11.198-4.095-6.72-7.295-19.07-9.535-36.988-3.711-29.18-13.246-50.682-28.54-64.504-15.295-13.822-38.972-23.741-71.095-29.692-33.596-6.72-63.225-20.35-89.013-40.956-25.725-20.54-47.227-39.802-64.377-57.784-16.382-15.742-29.053-21.31-38.012-16.83s-13.437 12.734-13.437 24.7v48.25l-1.088 493.444v63.93c.768 17.916-2.048 37.946-8.383 60.023-6.335 22.077-18.302 42.81-35.836 62.264s-40.89 36.092-69.943 49.915c-29.117 13.822-65.337 21.884-108.595 24.124-44.027 2.24-83.766-5.631-119.217-23.55-35.452-17.916-62.905-40.569-82.295-67.83-19.39-27.26-28.923-57.21-28.54-89.718.384-32.508 14.335-62.967 41.98-91.38 27.644-28.413 57.464-48.25 89.589-59.45 32.06-11.197 63.03-17.405 92.916-18.492 29.884-1.088 56.505.96 80.054 6.143 23.485 5.247 40.827 10.11 52.025 14.59 0 0 .384-505.026 1.152-615.669 0-21.693 5.631-39.42 16.766-53.306 11.2-13.821 26.11-21.884 44.795-24.124 15.614-2.368 28.477.768 38.524 9.407 10.11 8.574 20.35 20.541 30.78 35.9 10.494 15.293 23.356 32.699 38.65 52.153 15.295 19.454 36.029 38.522 62.137 57.21 22.397 17.212 41.979 29.499 58.809 36.986a4986.732 4986.732 0 0 0 47.034 20.734c14.526 6.335 28.924 14.014 43.13 22.973 14.207 8.96 29.885 23.55 47.035 43.706 17.15 19.454 27.644 39.612 31.356 60.537 3.647 20.99 3.84 40.06.448 57.273z"/></svg>'
+	},
 	{
 		type: 'code-block',
 		title: '代码块',

typecho/write/js/joe.short.js

@@ -0,0 +1,27 @@
+document.addEventListener('DOMContentLoaded', () => {
+	/* 网易云音乐 - 歌单 */
+	class JoeMlist extends HTMLElement {
+		constructor() {
+			super();
+			this.options = {
+				id: this.getAttribute('id'),
+				width: this.getAttribute('width') || '100%',
+				autoplay: this.getAttribute('autoplay') ? 1 : 0
+			};
+			this.render();
+		}
+		get template() {
+			return `
+            <style>iframe {display: block;margin: 0 auto;border: none;}</style>
+            <iframe src="//music.163.com/outchain/player?type=0&id=${this.options.id}&auto=${this.options.autoplay}&height=430" width="${this.options.width}" height="450px"></iframe>
+        `;
+		}
+		render() {
+			this.innerHTML = '';
+			this._shadowRoot = this.attachShadow({ mode: 'closed' });
+			if (this.options.id) this._shadowRoot.innerHTML = this.template;
+			else this._shadowRoot.innerHTML = '网易云歌单ID未填写！';
+		}
+	}
+	window.customElements.define('joe-mlist', JoeMlist);
+});

typecho/write/js/joe.short.min.js

@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",()=>{class t extends HTMLElement{constructor(){super(),this.options={id:this.getAttribute("id"),width:this.getAttribute("width")||"100%",autoplay:this.getAttribute("autoplay")?1:0},this.render()}get template(){return`\n            <style>iframe {display: block;margin: 0 auto;border: none;}</style>\n            <iframe src="//music.163.com/outchain/player?type=0&id=${this.options.id}&auto=${this.options.autoplay}&height=430" width="${this.options.width}" height="450px"></iframe>\n        `}render(){this.innerHTML="",this._shadowRoot=this.attachShadow({mode:"closed"}),this.options.id?this._shadowRoot.innerHTML=this.template:this._shadowRoot.innerHTML="网易云歌单ID未填写！"}}window.customElements.define("joe-mlist",t)});

typecho/write/js/joe.write.js

@@ -49,7 +49,8 @@ class Joe extends JoeAction {
 					keymap.of([defaultTabBinding, ...defaultKeymap, ...historyKeymap, ...closeBracketsKeymap]),
 					EditorView.updateListener.of(update => {
 						if (!update.docChanged) return;
-						createPreviewHtml(update.state.doc.toString());
+						if (window.requestAnimationFrame) window.requestAnimationFrame(() => createPreviewHtml(update.state.doc.toString()));
+						else createPreviewHtml(update.state.doc.toString());
 					}),
 					EditorView.domEventHandlers({
 						paste: e => {
@@ -137,6 +138,7 @@ class Joe extends JoeAction {
 				e.stopPropagation();
 				const nowWidth = $('.cm-preview').outerWidth();
 				const nowClientX = e.clientX;
+				$('.cm-preview').addClass('move');
 				document.onmousemove = _e => {
 					if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.clientX));
 					else move(nowClientX, nowWidth, _e.clientX);
@@ -144,6 +146,7 @@ class Joe extends JoeAction {
 				document.onmouseup = () => {
 					document.onmousemove = null;
 					document.onmouseup = null;
+					$('.cm-preview').removeClass('move');
 				};
 				return false;
 			},
@@ -152,6 +155,7 @@ class Joe extends JoeAction {
 				e.stopPropagation();
 				const nowWidth = $('.cm-preview').outerWidth();
 				const nowClientX = e.originalEvent.targetTouches[0].clientX;
+				$('.cm-preview').addClass('move');
 				document.ontouchmove = _e => {
 					if (window.requestAnimationFrame) requestAnimationFrame(() => move(nowClientX, nowWidth, _e.targetTouches[0].clientX));
 					else move(nowClientX, nowWidth, _e.targetTouches[0].clientX);
@@ -159,6 +163,7 @@ class Joe extends JoeAction {
 				document.ontouchend = () => {
 					document.ontouchmove = null;
 					document.ontouchend = null;
+					$('.cm-preview').removeClass('move');
 				};
 				return false;
 			}
@@ -250,6 +255,9 @@ class Joe extends JoeAction {
 						case 'task-yes':
 							super.handleTask(this.cm, true);
 							break;
+						case 'netease-list':
+							super.handleNeteaseList(this.cm);
+							break;
 					}
 				});
 				$('.cm-tools').append(el);

typecho/write/rollup.config.js

@@ -6,5 +6,5 @@ export default {
 		file: './js/joe.write.chunk.js',
 		format: 'iife'
 	},
-	plugins: [nodeResolve(), uglify()]
+	plugins: [nodeResolve()]
 };