This commit is contained in:
杜恒 2021-04-19 16:00:14 +08:00
parent e83e2f5cfb
commit 140760d820
13 changed files with 204 additions and 77 deletions

File diff suppressed because one or more lines are too long

View File

@ -2054,45 +2054,8 @@
height: 2px;
background-size: 80px;
}
/* 以下未测试 */
&-protected {
display: flex;
justify-content: center;
background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
padding: 20px 0;
margin-bottom: 18px;
.contain {
position: relative;
box-shadow: var(--box-shadow);
border-radius: 20px;
overflow: hidden;
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
}
.password {
width: 250px;
height: 40px;
border: none;
color: var(--routine);
padding-left: 50px;
background: var(--background);
}
.submit {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
color: var(--main);
border: none;
background: none;
}
}
}
&-message {
display: block;
position: relative;
border-left-width: 4px;
border-left-style: solid;
@ -2168,10 +2131,9 @@
}
}
}
.content {
display: block;
}
&-copy {
cursor: pointer;
user-select: none;
}
&-video {
margin-bottom: 18px;
@ -2252,6 +2214,48 @@
}
}
}
/* 以下未测试 */
&-protected {
display: flex;
justify-content: center;
background: repeating-linear-gradient(145deg, var(--classB), var(--classB) 15px, var(--background) 0, var(--background) 30px);
padding: 20px 0;
margin-bottom: 18px;
.contain {
position: relative;
box-shadow: var(--box-shadow);
border-radius: 20px;
overflow: hidden;
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px;
}
.password {
width: 250px;
height: 40px;
border: none;
color: var(--routine);
padding-left: 50px;
background: var(--background);
}
.submit {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
color: var(--main);
border: none;
background: none;
}
}
}
&-copy {
cursor: pointer;
user-select: none;
}
}
&__agree {
display: flex;

View File

@ -163,10 +163,27 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
window.customElements.define('joe-card-default', JoeCardDefault);
class JoeMessage extends HTMLElement {
constructor() {
super();
this.options = {
type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
content: this.getAttribute('content') || '消息内容'
};
this.innerHTML = `
<span class="joe_detail__article-message ${this.options.type}">
<span class="icon"></span>
<span class="content">${this.options.content}</span>
</span>
`;
}
}
window.customElements.define('joe-message', JoeMessage);
const article = document.querySelector('.joe_detail__article');
if (article) article.innerHTML = article.innerHTML.replace(/<p><\/p>/g, '');
/*
------------------------以下未测试------------------------------------------
*/
@ -193,27 +210,4 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
window.customElements.define('joe-copy', JoeCopy);
/* 消息提示 */
class JoeMessage extends HTMLElement {
constructor() {
super();
this.options = {
type: /^success$|^info$|^warning$|^error$/.test(this.getAttribute('type')) ? this.getAttribute('type') : 'info',
content: this.innerHTML.trim().replace(/^(<br>)|(<br>)$/g, '') || '提示内容'
};
this.render();
}
get template() {
return `
<div class="joe_detail__article-message ${this.options.type}">
<div class="icon"></div>
<div class="content">${this.options.content}</div>
</div>
`;
}
render() {
this.innerHTML = this.template;
}
}
window.customElements.define('joe-message', JoeMessage);
});

File diff suppressed because one or more lines are too long

View File

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

View File

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

File diff suppressed because one or more lines are too long

View File

@ -506,7 +506,8 @@ body.fullscreen {
margin-right: 10px;
}
input,
select {
select,
textarea {
width: auto;
flex: 1;
-webkit-appearance: none;
@ -518,6 +519,10 @@ body.fullscreen {
border-radius: 3px;
color: #606266;
}
textarea {
height: 80px;
padding: 5px;
}
}
.tabbar {
position: relative;
@ -803,9 +808,82 @@ body.fullscreen {
height: 2px;
background-size: 80px;
}
.joe_detail__article-message {
display: block;
position: relative;
border-left-width: 4px;
border-left-style: solid;
padding: 8px 15px;
border-radius: 0 4px 4px 0;
> .icon {
position: absolute;
top: -9px;
left: -11px;
width: 18px;
height: 18px;
border-radius: 50%;
transition: transform 0.85s;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
fill: #fff;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
&.success {
border-left-color: #2bde3f;
background: #2bde3f20;
color: #2bde3f;
.icon {
background: #2bde3f;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MDE1ODgxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMTU3IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00MTMuMjU1IDY5MS40MzZjMTguNTQ2LTE3LjQ1IDMzLjE4Ni0zMC41NTIgNDcuMDc2LTQ0LjQyNyAxMzMuMDQtMTMyLjgxIDI2Ni4xODItMjY1LjUxMyAzOTguNzI0LTM5OC44MzcgMzIuMDc0LTMyLjI0NCA2NS42NjYtNDguNDUyIDEwNC45OTctMTQuNzUyIDMyLjk4MyAyOC4yNDEgMjguMDQ5IDY3LjQ2NS0xMi45MiAxMDguNTc0LTE1Ny4xNzUgMTU3LjcxLTMxNC41ODcgMzE1LjE4NC00NzIuMjkyIDQ3Mi4zOC00OS4zODkgNDkuMjI1LTc2LjMwOCA0OS41NDYtMTI0LjcxNiAxLjYwNy04NS41OS04NC43NjUtMTcwLjEzNS0xNzAuNTc5LTI1NS44LTI1NS4yNTctMzIuMjkyLTMxLjkyMy00OC42OC02NS41MTYtMTQuOTk3LTEwNC45NzYgMjguMTctMzIuOTk1IDY3LjU1Ny0yOC4xNTUgMTA4LjU1OCAxMi42NzUgNzMuNDI3IDczLjE2IDE0Ni4wNzkgMTQ3LjA5IDIyMS4zNyAyMjMuMDEzeiIgcC1pZD0iNDExNTgiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48L3N2Zz4=);
}
}
}
&.info {
border-left-color: #1d72f3;
background: #1d72f320;
color: #1d72f3;
.icon {
background: #1d72f3;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MzM4MjIxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYxNjg0IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik03NjcuOTczOTc1IDExNi4zNDYwODZjMCA2NC4yNTI3MzQtNDEuNjgzMjE0IDExNi4zODg3NS05My4wOTM5MzUgMTE2LjM4ODc1UzU4MS43ODYxMDYgMTgwLjU5ODgyIDU4MS43ODYxMDYgMTE2LjM0NjA4NkM1ODEuNzg2MTA2IDUyLjA5MzM1MiA2MjMuNDY5MzIgMCA2NzQuODgwMDQgMFM3NjcuOTczOTc1IDUyLjA5MzM1MiA3NjcuOTczOTc1IDExNi4zNDYwODZ6TTI1NiA1MDQuMjk0MzY1czcwLjgyMzA2Ni0yODQuNzg1NTIzIDI4Ni43NDgwOS0yNzEuMDQ3NTU1YzIxNS45MjUwMjQgMTMuNjk1MzA0IDY3LjIzOTI0OSAyNjEuNDQ4MDQzLTEzLjI2ODY1OSA1MDEuNjQ5MTY2LTgwLjUwNzkwOCAyNDAuMjAxMTIzIDEwMC4yNjE1NyA3MS40MjAzNjkgMTQ1LjQwMDYwOS03LjU1MTYxNiAwIDAtOTMuMTM2NTk5IDQwNi43NjMzMjMtMzY3LjM0MTMyNyAyNjcuNjc3MDYtMTI4LjU0ODEzMi02NS4yMzQwMTcgMzIuMjU0MzYtMzk4LjA1OTc2NSAxMDMuMTIwMDkyLTU0NS41OTM1OTlDNDgxLjU2NzIgMzAxLjgwODY1OCAzMzYuNjM1OTAxIDM4Ny42MDY5NjMgMjU2IDUwNC4yNTE3MDF6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSI2MTY4NSI+PC9wYXRoPjwvc3ZnPg==);
}
}
}
&.warning {
border-left-color: #ffc007;
background: #ffc00720;
color: #ffc007;
.icon {
background: #ffc007;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MTI5NTE1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3NDkyIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik00NzkuODE3MTQzIDY2NS42YzEwLjI0IDMwLjcyIDMwLjcyIDUxLjIgNjEuNDQgNTEuMnM1MS4yLTIwLjQ4IDYxLjQ0LTUxLjJsNDAuOTYtNTYzLjJDNjQzLjY1NzE0MyA0MC45NiA1OTIuNDU3MTQzIDAgNTQxLjI1NzE0MyAwIDQ3OS44MTcxNDMgMCA0MzguODU3MTQzIDUxLjIgNDM4Ljg1NzE0MyAxMTIuNjRsNDAuOTYgNTUyLjk2eiBtNjEuNDQgMTUzLjZjLTYxLjQ0IDAtMTAyLjQgNDAuOTYtMTAyLjQgMTAyLjQgMCA2MS40NCA0MC45NiAxMDIuNCAxMDIuNCAxMDIuNCA2MS40NCAwIDEwMi40LTQwLjk2IDEwMi40LTEwMi40IDAtNjEuNDQtNDAuOTYtMTAyLjQtMTAyLjQtMTAyLjR6IiBwLWlkPSI0NzQ5MyIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
}
}
}
&.error {
border-left-color: #f56c6c;
background: #f56c6c20;
color: #f56c6c;
.icon {
background: #f56c6c;
&::before {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjEyNTE4MjAyNDk4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ4OTE1IiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0xOTMuOCA4MzAuMmMtMTkuNC0xOS40LTE5LjQtNTEuMyAwLTcwLjdsNTY1LjctNTY1LjdjMTkuNC0xOS40IDUxLjMtMTkuNCA3MC43IDAgMTkuNCAxOS40IDE5LjQgNTEuMyAwIDcwLjdMMjY0LjUgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAweiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iNDg5MTYiPjwvcGF0aD48cGF0aCBkPSJNODMwLjIgODMwLjJjLTE5LjQgMTkuNC01MS4zIDE5LjQtNzAuNyAwTDE5My44IDI2NC41Yy0xOS40LTE5LjQtMTkuNC01MS4zIDAtNzAuNyAxOS40LTE5LjQgNTEuMy0xOS40IDcwLjcgMGw1NjUuNyA1NjUuN2MxOS40IDE5LjQgMTkuNCA1MS4zIDAgNzAuN3oiIGZpbGw9IiNmZmZmZmYiIHAtaWQ9IjQ4OTE3Ij48L3BhdGg+PC9zdmc+);
}
}
}
> .content {
display: block;
}
}
@media (max-width: 768px) {
.cm-modal__wrapper {

View File

@ -610,4 +610,32 @@ export default class JoeAction {
}
});
}
handleMessage(cm) {
this._openModal({
title: '消息提示',
innerHtml: `
<div class="fitem">
<label>消息类型</label>
<select name="type">
<option value="success" selected>success</option>
<option value="info">info</option>
<option value="warning">warning</option>
<option value="error">error</option>
</select>
</div>
<div class="fitem" style="align-items: flex-start">
<label>消息内容</label>
<textarea autocomplete="off" name="content" placeholder="请输入消息内容"></textarea>
</div>
`,
confirm: () => {
const type = $(".cm-modal select[name='type']").val();
const content = $(".cm-modal textarea[name='content']").val();
const str = `\n{message type="${type}" content="${content}"/}\n\n`;
if (this._getLineCh(cm)) this._replaceSelection(cm, '\n' + str);
else this._replaceSelection(cm, str);
cm.focus();
}
});
}
}

View File

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

View File

@ -165,6 +165,11 @@ export default [
title: '默认卡片',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M928 160H96a32 32 0 0 0-32 32v672a32 32 0 0 0 32 32h832a32 32 0 0 0 32-32V192a32 32 0 0 0-32-32zm-32 672H128V224h768v608zM230.592 448.096H544a32 32 0 1 0 0-64H230.592a32 32 0 0 0 0 64zm0 192H544a32 32 0 1 0 0-64H230.592a32 32 0 1 0 0 64zM768 704a32 32 0 0 0 32-32V350.016a32 32 0 1 0-64 0V672a32 32 0 0 0 32 32z"/></svg>'
},
{
type: 'message',
title: '消息提示',
innerHTML: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M195.181 164.694c-13.024-13.029-34.144-13.029-47.159 0-13.029 13.019-13.029 34.134 0 47.163l47.159 47.158c13.024 13.024 34.129 13.024 47.162 0 13.019-13.019 13.019-34.129 0-47.158l-47.162-47.163zm633.634 0l-47.162 47.163c-13.02 13.029-13.02 34.139 0 47.158 13.009 13.024 34.129 13.024 47.162 0l47.148-47.158c13.029-13.029 13.029-34.139 0-47.163-13.019-13.024-34.124-13.024-47.148 0zM111.809 428.626H45.115c-18.416 0-33.352 14.928-33.352 33.342 0 18.419 14.933 33.351 33.352 33.351h66.698c18.415 0 33.347-14.931 33.347-33.351 0-18.415-14.933-33.342-33.347-33.342h-.004zm867.072 0h-66.698c-18.416 0-33.352 14.928-33.352 33.342 0 18.419 14.933 33.351 33.352 33.351h66.693c18.419 0 33.361-14.931 33.361-33.351 0-18.415-14.941-33.342-33.361-33.342h.005zM478.648 45.108v66.698c0 18.42 14.928 33.347 33.347 33.347 18.41 0 33.351-14.928 33.351-33.347V45.108c0-18.415-14.941-33.347-33.351-33.347-18.419 0-33.347 14.933-33.347 33.347zM278.557 511.993c0-128.923 104.506-233.438 233.438-233.438 128.927 0 233.442 104.516 233.442 233.438 0 128.926-104.515 233.447-233.442 233.447-128.932 0-233.438-104.52-233.438-233.447zm-66.698 0c0 165.78 134.365 300.155 300.137 300.155 165.766 0 300.141-134.375 300.141-300.155 0-165.767-134.376-300.137-300.141-300.137-165.767.001-300.137 134.371-300.137 300.137zm233.437 466.895c0 18.405 14.933 33.351 33.352 33.351h66.698c18.419 0 33.347-14.946 33.347-33.351 0-18.429-14.928-33.347-33.347-33.347h-66.698c-18.419 0-33.352 14.918-33.352 33.347zm-66.693-100.045c0 18.405 14.933 33.346 33.342 33.346h200.096c18.419 0 33.351-14.941 33.351-33.346 0-18.434-14.931-33.357-33.351-33.357H411.945c-18.414 0-33.342 14.923-33.342 33.357zm0 0"/></svg>'
},
/* --------------------------- 短代码结束 --------------------------- */
{
type: 'clean',

File diff suppressed because one or more lines are too long

View File

@ -295,6 +295,9 @@ class Joe extends JoeAction {
case 'card-default':
super.handleCardDefault(this.cm);
break;
case 'message':
super.handleMessage(this.cm);
break;
}
});
$('.cm-tools').append(el);