This commit is contained in:
杜恒 2021-01-27 17:10:23 +08:00
parent 775a57e7dd
commit c8c194ab55
11 changed files with 350 additions and 177 deletions

File diff suppressed because one or more lines are too long

View File

@ -1493,11 +1493,11 @@ html[data-night='night'] {
height: 44px;
line-height: 44px;
width: 44px;
transition: opacity 0.35s;
cursor: pointer;
text-align: center;
font-size: 13px;
color: var(--main);
user-select: none;
}
}
}
@ -1804,7 +1804,6 @@ html[data-night='night'] {
padding: 0 15px;
height: 40px;
color: var(--routine);
font-size: 14px;
}
&:nth-child(2) {
position: relative;
@ -1837,7 +1836,7 @@ html[data-night='night'] {
vertical-align: middle;
color: var(--routine);
background: transparent;
font-size: 14px;
font-size: 15px;
}
.draw {
position: relative;
@ -1915,6 +1914,16 @@ html[data-night='night'] {
justify-content: flex-end;
padding: 0 15px 15px;
.submit {
.cancle {
display: none;
color: var(--main);
cursor: pointer;
margin-right: 10px;
transition: color 0.35s;
&:hover {
color: var(--theme);
}
}
button {
border-radius: 3px;
height: 32px;
@ -1928,10 +1937,11 @@ html[data-night='night'] {
}
}
}
&__list {
.comment-list {
padding-top: 15px;
.comment-list__item {
.contain {
&__item {
&-contain {
.term {
display: flex;
margin-bottom: 15px;
.avatar {
@ -2002,15 +2012,43 @@ html[data-night='night'] {
.date {
margin-right: 10px;
}
.reply {
display: flex;
align-items: center;
color: var(--main);
font-size: 13px;
cursor: pointer;
transition: color 0.35s;
.icon {
margin-right: 5px;
fill: var(--main);
transition: fill 0.35s;
}
&:hover {
color: var(--theme);
.icon {
fill: var(--theme);
}
}
}
.children {
}
}
}
}
&-children {
padding-left: 63px;
.children {
.comment-list__item-children {
padding-left: 0;
}
}
.joe_comment__respond {
margin-left: 63px;
margin-bottom: 15px;
animation: showComment 0.5s;
}
}
.comment-list {
padding-top: 0;
}
}
.joe_pagination {
@ -2098,6 +2136,24 @@ html[data-night='night'] {
.profile-color-modes-illu-frame:nth-child(10) {
animation: none;
}
@keyframes showComment {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes box_shadow {
0% {
box-shadow: 0 0 0 0 #f56c6c;

View File

@ -1,3 +1,4 @@
/* 搜索页面需要用到的JS */
console.time('Archive.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
/* 激活列表特效 */

View File

@ -1,3 +1,4 @@
/* 全局公用JS */
console.time('Global.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
@ -216,8 +217,12 @@ document.addEventListener('DOMContentLoaded', () => {
if ($(this).attr('data-type') === 'draw') {
$('.joe_comment__respond-form .body .draw').show().siblings().hide();
$('#joe_comment_draw').prop('width', $('.joe_comment__respond-form .body').width());
/* 设置表单格式为画图模式 */
$('.joe_comment__respond-form').attr('data-type', 'draw');
} else {
$('.joe_comment__respond-form .body .text').show().siblings().hide();
/* 设置表单格式为文字模式 */
$('.joe_comment__respond-form').attr('data-type', 'text');
}
});
}
@ -244,6 +249,74 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
/* 重写评论功能 */
{
const respond = $('.joe_comment__respond');
/* 重写回复功能 */
$('.joe_comment__reply').on('click', function () {
/* 父级ID */
const coid = $(this).attr('data-coid');
/* 当前的项 */
const item = $('#' + $(this).attr('data-id'));
/* 添加自定义属性表示父级ID */
respond.find('.joe_comment__respond-form').attr('data-coid', coid);
item.append(respond);
$(".joe_comment__respond-type .item[data-type='text']").click();
$('.joe_comment__cancle').show();
window.scrollTo({
top: item.offset().top - $('.joe_header').height() - 15,
behavior: 'smooth'
});
});
/* 重写取消回复功能 */
$('.joe_comment__cancle').on('click', function () {
/* 移除自定义属性父级ID */
respond.find('.joe_comment__respond-form').removeAttr('data-coid');
$('.joe_comment__cancle').hide();
$('.joe_comment__title').after(respond);
$(".joe_comment__respond-type .item[data-type='text']").click();
window.scrollTo({
top: $('.joe_comment').offset().top - $('.joe_header').height() - 15,
behavior: 'smooth'
});
});
}
/* 激活评论提交 */
{
$('.joe_comment__respond-form').on('submit', function (e) {
e.preventDefault();
const url = $('.joe_comment__respond-form').attr('action');
const type = $('.joe_comment__respond-form').attr('data-type');
const parent = $('.joe_comment__respond-form').attr('data-coid');
const author = $(".joe_comment__respond-form .head input[name='author']").val();
const mail = $(".joe_comment__respond-form .head input[name='mail']").val();
let text = $(".joe_comment__respond-form .body textarea[name='text']").val();
if (author.trim() === '') return alert('请输入用户名!');
if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(mail)) return alert('请输入正确的邮箱!');
if (type === 'text' && text.trim() === '') return alert('请输入评论内容!');
if (type === 'draw') {
const txt = $('#joe_comment_draw')[0].toDataURL('image/webp', 0.1);
text = '{!{' + txt + '}!} ';
}
$.ajax({
url,
type: 'POST',
data: { author, mail, text, parent },
success(res) {
let arr = [],
str = '';
arr = $(res).contents();
Array.from(arr).forEach(_ => {
if (_.parentNode.className === 'container') str = _;
});
if (!/Joe/.test(res)) return alert(str.textContent.trim() || '');
window.location.href = Joe.changeURLArg(location.href, 'scroll', 'joe_comment');
}
});
});
}
/* 懒加载 */
new LazyLoad('.lazyload');

View File

@ -1,3 +1,4 @@
/* 首页需要用到的JS */
console.time("Index.js执行时长")
document.addEventListener('DOMContentLoaded', () => {
/* 激活轮播图功能 */

View File

@ -1,6 +1,10 @@
/* 详情页和独立页面需要用到的JS */
console.time('Post&Page.js执行时长');
document.addEventListener('DOMContentLoaded', () => {
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid');
/* 获取本篇文章百度收录情况 */
{
$.ajax({
@ -62,9 +66,6 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid');
/* 激活浏览功能 */
{
let viewsArr = localStorage.getItem(Joe.encryption('views')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('views')))) : [];
@ -137,6 +138,13 @@ document.addEventListener('DOMContentLoaded', () => {
});
}
/* 密码保护文章,输入密码访问 */
{
$('.joe_detail__article-protected').on('submit', function (e) {
});
}
console.timeEnd('Post&Page.js执行时长');
});

View File

@ -145,3 +145,4 @@ function _pushRecord($self)
$result = curl_exec($ch);
$self->response->throwJson(json_decode($result));
}

View File

@ -40,16 +40,16 @@
<div class="joe_detail__article">
<?php if ($this->is('post')) : ?>
<?php if ($this->hidden) : ?>
<div data-cid="<?php $this->cid(); ?>" class="joe_detail__article-protected" data-action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>">
<form class="joe_detail__article-protected" action="<?php echo Typecho_Widget::widget('Widget_Security')->getTokenUrl($this->permalink); ?>">
<div class="contain">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M812.63104 664.064h-439.0912a79.0272 79.0272 0 0 0-78.95552 79.09888v196.9664h518.04672a79.0272 79.0272 0 0 0 78.9504-79.09888v-117.84704a79.0272 79.0272 0 0 0-78.9504-79.11936z" fill="#F4CA1C" p-id="7008"></path>
<path d="M812.97408 382.976h-32.36864V313.3696a272.256 272.256 0 1 0-544.512 0V382.976h-25.0624A113.91488 113.91488 0 0 0 97.28 496.77312v367.32928A113.91488 113.91488 0 0 0 211.03104 977.92h601.94304A113.90976 113.90976 0 0 0 926.72 864.1024V496.77312A113.90976 113.90976 0 0 0 812.97408 382.976zM305.7152 313.3696a202.63424 202.63424 0 1 1 405.26848 0V382.976H305.7152V313.3696zM857.088 864.1024a44.1856 44.1856 0 0 1-44.12416 44.15488H211.03104a44.19584 44.19584 0 0 1-44.11904-44.15488V496.77312a44.19584 44.19584 0 0 1 44.11904-44.16512h601.94304a44.1856 44.1856 0 0 1 44.12416 44.16v367.3344z m-331.71456-309.9648a62.69952 62.69952 0 0 0-34.816 114.82112v103.45984a34.816 34.816 0 1 0 69.632 0v-103.45984a62.69952 62.69952 0 0 0-34.80576-114.82112z" fill="#595BB3" p-id="7009"></path>
</svg>
<input class="password" type="password" placeholder="请输入访问密码...">
<span class="submit">确定</span>
</div>
<button class="submit" type="submit">确定</button>
</div>
</form>
<?php else : ?>
<?php _parseContent($this, $this->user->hasLogin()) ?>
<?php endif; ?>

View File

@ -1,14 +1,23 @@
<?php $this->comments()->to($comments); ?>
<div class="joe_comment">
<h3 class="joe_comment__title">评论 <?php if ($this->allow('comment')) : ?>(<?php $this->commentsNum(); ?>)<?php endif; ?></h3>
<?php if ($this->hidden) : ?>
<div class="joe_comment__close">
<svg class="joe_comment__close-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18417" width="18" height="18">
<path d="M512.3072 0.9728C794.624 0.9728 1023.488 202.24 1023.488 450.56a402.8416 402.8416 0 0 1-39.2704 173.2608 232.448 232.448 0 0 0-52.6336-45.9776c16.384-39.7824 25.2928-82.688 25.2928-127.2832 0-211.0976-199.1168-382.1568-444.6208-382.1568-245.5552 0-444.5696 171.0592-444.5696 382.1568 0 133.4272 79.5136 250.88 200.0384 319.1808v107.9808l102.0416-65.1264a510.1568 510.1568 0 0 0 142.4896 20.1216l19.4048-0.3584c19.4048-0.7168 38.7584-2.5088 57.9584-5.4272l3.584 13.4144c5.376 17.7152 12.8512 34.7136 22.3232 50.688l-20.6336 3.328a581.4784 581.4784 0 0 1-227.1232-12.288l-131.1232 100.352c-19.6608 15.0016-35.6352 7.168-35.6352-17.664v-157.3888C79.4112 725.1968 1.024 595.968 1.024 450.56 1.024 202.24 229.9392 0.9728 512.3072 0.9728z m318.464 617.0112c97.4848 0 176.7936 80.4352 176.7936 179.2s-79.3088 179.0464-176.7936 179.0464c-97.4336 0-176.7424-80.2816-176.7424-179.0464 0-98.816 79.3088-179.1488 176.7424-179.1488z m-103.0144 101.0176a131.1744 131.1744 0 0 0-25.7536 78.1824c0 71.8848 57.8048 130.4064 128.768 130.4064 28.8768 0 55.552-9.6256 77.056-26.0096z m103.0144-52.3264c-19.712 0-39.1168 4.5568-56.6784 13.312l172.2368 174.592c8.4992-17.3056 13.1584-36.864 13.1584-57.3952 0-71.9872-57.8048-130.5088-128.7168-130.5088z m-318.464-283.5456l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 445.6448 450.56a67.072 67.072 0 0 1 66.6624-67.4304z m266.752 0l6.8608 0.3584a67.072 67.072 0 0 1 59.8528 67.072l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584a67.072 67.072 0 0 1-59.8528-67.072h-0.0512l0.3072-6.8608a67.072 67.072 0 0 1 66.4064-60.5696z m-533.504 0l6.8608 0.3584A67.072 67.072 0 0 1 312.2688 450.56l-0.3072 6.8608a67.072 67.072 0 0 1-66.4064 60.5696l-6.8096-0.3584A67.072 67.072 0 0 1 178.8928 450.56a67.072 67.072 0 0 1 66.6624-67.4304z" p-id="18418"></path>
</svg>
<span>当前文章受密码保护,无法评论</span>
</div>
<?php else : ?>
<?php if ($this->allow('comment')) : ?>
<div class="joe_comment__respond">
<div class="joe_comment__respond-type">
<button class="item" data-type="draw">画图模式</button>
<button class="item active" data-type="text">文本模式</button>
</div>
<div class="joe_comment__respond-form" data-action="<?php $this->commentUrl() ?>">
<form method="post" class="joe_comment__respond-form" action="<?php $this->commentUrl() ?>" data-type="text">
<div class="head">
<div class="list">
<input type="text" value="<?php $this->user->hasLogin() ? $this->user->screenName() : $this->remember('author') ?>" autocomplete="off" name="author" maxlength="16" placeholder="请输入昵称..." />
@ -21,7 +30,7 @@
</div>
</div>
<div class="body">
<textarea class="text" name="text" autocomplete="off" rows="5" placeholder="说点什么吧,点击右上方切换成画图试试?"></textarea>
<textarea class="text" name="text" autocomplete="off" placeholder="说点什么吧,点击右上方切换成画图试试?"></textarea>
<div class="draw" style="display: none;">
<ul class="line">
<li data-line="3"></li>
@ -45,17 +54,15 @@
</div>
</div>
<div class="foot">
<div class="owo" id="OwO_Container"></div>
<div class="submit">
<button>发表评论</button>
</div>
<span class="cancle joe_comment__cancle">取消</span>
<button type="submit">发表评论</button>
</div>
</div>
</form>
</div>
<?php if ($comments->have()) : ?>
<div class="joe_comment__list">
<?php $comments->listComments(); ?>
</div>
<?php $comments->pageNav(
'<svg class="icon icon-prev" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
'<svg class="icon icon-next" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M822.272 146.944l-396.8 396.8c-19.456 19.456-51.2 19.456-70.656 0-18.944-19.456-18.944-51.2 0-70.656l396.8-396.8c19.456-19.456 51.2-19.456 70.656 0 18.944 19.456 18.944 45.056 0 70.656z" fill="" p-id="9417"></path><path d="M745.472 940.544l-396.8-396.8c-19.456-19.456-19.456-51.2 0-70.656 19.456-19.456 51.2-19.456 70.656 0l403.456 390.144c19.456 25.6 19.456 51.2 0 76.8-26.112 19.968-51.712 19.968-77.312 0.512zM181.248 877.056c0-3.584 0-7.68 0.512-11.264h-0.512V151.552h0.512c-0.512-3.584-0.512-7.168-0.512-11.264 0-43.008 21.504-78.336 48.128-78.336s48.128 34.816 48.128 78.336c0 3.584 0 7.68-0.512 11.264h0.512V865.792h-0.512c0.512 3.584 0.512 7.168 0.512 11.264 0 43.008-21.504 78.336-48.128 78.336s-48.128-35.328-48.128-78.336z"></path></svg>',
@ -81,13 +88,17 @@
<span>博主关闭了当前页面的评论</span>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
<?php
function threadedComments($comments, $options)
{ ?>
<li class="comment-list__item" id="<?php $comments->theId(); ?>">
<div class="contain">
<li class="comment-list__item">
<div class="comment-list__item-contain" id="<?php $comments->theId(); ?>">
<div class="term">
<img class="avatar lazyload" src="<?php _getAvatarLazyload() ?>" data-original="<?php _getAvatarByMail($comments->mail); ?>" alt="<?php $comments->author(); ?>" />
<div class="content">
<div class="user">
@ -106,11 +117,18 @@ function threadedComments($comments, $options)
</div>
<div class="handle">
<time class="date" datetime="<?php $comments->date('Y-m-d'); ?>"><?php $comments->date('Y-m-d'); ?></time>
<span class="reply joe_comment__reply" data-id="<?php $comments->theId(); ?>" data-coid="<?php $comments->coid(); ?>">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
<path d="M947.2 467.968h-276.48v61.44h276.48zM947.2 650.24h-363.52v61.44h363.52zM947.2 832.512H482.304v61.44H947.2zM519.168 179.2l122.368 85.504-352.256 503.808-122.368-85.504L519.168 179.2m-14.848-85.504L81.92 698.368l223.232 156.16L727.04 249.856 504.32 93.696z" p-id="6645"></path>
<path d="M433.152 195.072L397.824 245.76l223.232 155.648 35.328-50.176zM143.36 740.864l-61.44-42.496v237.056l222.72-81.408-60.928-43.008-100.352 36.864z" p-id="6646"></path>
</svg>回复
</span>
</div>
</div>
</div>
</div>
<?php if ($comments->children) : ?>
<div class="children">
<div class="comment-list__item-children">
<?php $comments->threadedComments($options); ?>
</div>
<?php endif; ?>

View File

@ -10,6 +10,21 @@
BAIDU_PUSH: <?php echo $this->options->JBaiduToken ? 'true' : 'false' ?>,
encryption: str => window.btoa(unescape(encodeURIComponent(str))),
decrypt: str => decodeURIComponent(escape(window.atob(str))),
changeURLArg: function(url, arg, arg_val) {
let pattern = arg + '=([^&]*)'
let replaceText = arg + '=' + arg_val
if (url.match(pattern)) {
let tmp = '/(' + arg + '=)([^&]*)/gi'
return url.replace(eval(tmp), replaceText)
} else {
if (url.match('[?]')) {
return url + '&' + replaceText
} else {
return url + '?' + replaceText
}
}
return url + '\n' + arg + '\n' + arg_val
}
}
</script>
<style>