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,89 +1937,118 @@ html[data-night='night'] {
}
}
}
&__list {
.comment-list {
padding-top: 15px;
.comment-list__item {
.contain {
display: flex;
margin-bottom: 15px;
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 15px;
padding: 3px;
border: 1px solid var(--classD);
}
.content {
min-width: 0;
flex: 1;
border-bottom: 1px solid var(--classC);
padding-bottom: 15px;
.user {
display: flex;
align-items: center;
margin-bottom: 8px;
line-height: 20px;
color: var(--main);
.author {
margin-right: 10px;
&__item {
&-contain {
.term {
display: flex;
margin-bottom: 15px;
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 15px;
padding: 3px;
border: 1px solid var(--classD);
}
.content {
min-width: 0;
flex: 1;
border-bottom: 1px solid var(--classC);
padding-bottom: 15px;
.user {
display: flex;
align-items: center;
margin-bottom: 8px;
line-height: 20px;
color: var(--main);
.author {
margin-right: 10px;
}
.owner {
background: var(--theme);
color: #fff;
padding: 0 5px;
border-radius: 2px;
font-style: normal;
}
.agent {
margin-left: auto;
font-size: 12px;
color: var(--minor);
}
.waiting {
color: #e6a23c;
font-style: normal;
}
}
.owner {
background: var(--theme);
color: #fff;
padding: 0 5px;
border-radius: 2px;
font-style: normal;
.substance {
width: 100%;
background: var(--classD);
padding: 12px 15px;
border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
color: var(--main);
margin-bottom: 8px;
word-break: break-all;
line-height: 24px;
.parent {
color: #388bff;
margin-bottom: 5px;
user-select: none;
font-weight: 500;
}
.owo_image {
height: 22px;
}
.draw_image {
max-width: 100%;
}
}
.agent {
margin-left: auto;
font-size: 12px;
.handle {
display: flex;
align-items: center;
color: var(--minor);
}
.waiting {
color: #e6a23c;
font-style: normal;
}
}
.substance {
width: 100%;
background: var(--classD);
padding: 12px 15px;
border-radius: 0 var(--radius-inner) var(--radius-inner) 10px;
color: var(--main);
margin-bottom: 8px;
word-break: break-all;
line-height: 24px;
.parent {
color: #388bff;
margin-bottom: 5px;
user-select: none;
font-weight: 500;
}
.owo_image {
height: 22px;
}
.draw_image {
max-width: 100%;
}
}
.handle {
display: flex;
align-items: center;
color: var(--minor);
.date {
margin-right: 10px;
.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,8 +249,76 @@ 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');
console.timeEnd('Global.js执行时长');
});
});

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执行时长');
});