This commit is contained in:
haoouba
2021-02-18 13:06:37 +08:00
parent 32a5e981b3
commit 8ea1bd4df2
15 changed files with 380 additions and 182 deletions

File diff suppressed because one or more lines are too long

View File

@@ -2044,6 +2044,85 @@
cursor: pointer;
user-select: none;
}
&-video {
margin-bottom: 15px;
.play,
.episodes {
position: relative;
background: var(--classD);
padding: 60px 15px 15px;
.title {
position: absolute;
top: 15px;
left: -10px;
background: var(--theme);
color: #fff;
font-weight: 500;
box-shadow: 2px 5px 10px rgba(49, 58, 70, 0.15);
height: 30px;
line-height: 30px;
padding: 0 12px;
border-radius: 2px 2px 2px 0;
user-select: none;
&::after {
content: '';
position: absolute;
bottom: -10px;
left: -10px;
border-style: solid;
border-width: 10px;
border-color: var(--theme) transparent transparent;
transform: rotate(90deg);
}
}
.box {
border-top: 1px solid var(--classB);
padding-top: 15px;
}
}
.play {
margin-bottom: 15px;
.box {
iframe {
background: #000;
width: 100%;
height: 520px;
}
}
}
.episodes {
.box {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
.item {
height: 30px;
line-height: 30px;
border-radius: 15px;
background: var(--background);
color: var(--routine);
cursor: pointer;
text-align: center;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: transform 0.35s, box-shadow 0.35s, background 0.35s, color 0.35s;
padding: 0 10px;
&.active {
transform: translateY(-2px);
color: #fff;
background: var(--theme);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
}
}
}
}
}
&__agree {
display: flex;

File diff suppressed because one or more lines are too long

View File

@@ -77,6 +77,12 @@ html {
.joe_video__list-item .item .thumb {
height: 200px;
}
.joe_detail__article-video .play .box iframe {
height: 420px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 992px) {
.joe_aside {
@@ -115,6 +121,12 @@ html {
.joe_header__above-searchicon {
display: block;
}
.joe_detail__article-video .play .box iframe {
height: 420px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 768px) {
.joe_header {
@@ -270,7 +282,7 @@ html {
}
&__loading {
.item {
.thumbnail{
.thumbnail {
width: 120px;
min-width: 120px;
height: 80px;
@@ -369,6 +381,20 @@ html {
pre[class*='language-'] {
font-size: 13px;
}
&-video {
.play {
.box {
iframe {
height: 220px;
}
}
}
.episodes {
.box {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
}
.joe_comment {
@@ -381,10 +407,10 @@ html {
position: absolute;
top: 15px;
right: 15px;
.item:first-child{
.item:first-child {
border-bottom-left-radius: var(--radius-inner);
}
.item:last-child{
.item:last-child {
border-bottom-right-radius: var(--radius-inner);
}
}
@@ -473,6 +499,12 @@ html .noaside {
.joe_index__hot-list .item .link .inner .image {
height: 140px;
}
.joe_detail__article-video .play .box iframe {
height: 600px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(8, 1fr);
}
@media (max-width: 1400px) {
.joe_video__list-item {
grid-template-columns: repeat(6, 1fr);
@@ -483,6 +515,12 @@ html .noaside {
.joe_list__item.single .thumbnail {
height: 270px;
}
.joe_detail__article-video .play .box iframe {
height: 550px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(7, 1fr);
}
}
@media (max-width: 1200px) {
.joe_wallpaper__list {
@@ -506,6 +544,12 @@ html .noaside {
.joe_index__banner-recommend .item {
height: 180px;
}
.joe_detail__article-video .play .box iframe {
height: 500px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(6, 1fr);
}
}
@media (max-width: 992px) {
.joe_wallpaper__list {
@@ -538,6 +582,12 @@ html .noaside {
.joe_list__item.multiple .thumbnail {
grid-template-rows: 130px;
}
.joe_detail__article-video .play .box iframe {
height: 400px;
}
.joe_detail__article-video .episodes .box {
grid-template-columns: repeat(5, 1fr);
}
}
@media (max-width: 768px) {
.joe_wallpaper {
@@ -549,6 +599,22 @@ html .noaside {
&__friends {
grid-template-columns: repeat(1, 1fr);
}
&__article {
&-video {
.play {
.box {
iframe {
height: 220px;
}
}
}
.episodes {
.box {
grid-template-columns: repeat(3, 1fr);
}
}
}
}
}
.joe_video {
&__list-item {

File diff suppressed because one or more lines are too long

View File

@@ -326,7 +326,7 @@
.item {
height: 30px;
line-height: 30px;
border-radius: 14px;
border-radius: 15px;
background: var(--classD);
color: var(--routine);
cursor: pointer;

View File

@@ -1,181 +1,197 @@
document.addEventListener('DOMContentLoaded', () => {
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid');
/* 当前页的CID */
const cid = $('.joe_detail').attr('data-cid')
/* 获取本篇文章百度收录情况 */
{
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: { routeType: 'baidu_record', site: window.location.href },
success(res) {
if (res.data && res.data === '已收录') {
$('#Joe_Baidu_Record').css('color', '#67C23A');
$('#Joe_Baidu_Record').html('已收录');
} else {
/* 如果填写了Token则自动推送给百度 */
if (Joe.BAIDU_PUSH) {
$('#Joe_Baidu_Record').html('<span style="color: #E6A23C">未收录,推送中...</span>');
const _timer = setTimeout(function () {
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: {
routeType: 'baidu_push',
domain: encodeURI(window.location.hostname),
url: encodeURI(window.location.href)
},
success(res) {
if (res.error) {
$('#Joe_Baidu_Record').html('<span style="color: #F56C6C">推送失败,请检查!</span>');
} else {
$('#Joe_Baidu_Record').html('<span style="color: #67C23A">推送成功!</span>');
}
}
});
clearTimeout(_timer);
}, 1000);
} else {
const url = `https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}`;
$('#Joe_Baidu_Record').html(`<a target="_blank" href="${url}" rel="noopener noreferrer nofollow" style="color: #F56C6C">未收录,提交收录</a>`);
}
}
}
});
}
/* 获取本篇文章百度收录情况 */
{
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: { routeType: 'baidu_record', site: window.location.href },
success(res) {
if (res.data && res.data === '已收录') {
$('#Joe_Baidu_Record').css('color', '#67C23A')
$('#Joe_Baidu_Record').html('已收录')
} else {
/* 如果填写了Token则自动推送给百度 */
if (Joe.BAIDU_PUSH) {
$('#Joe_Baidu_Record').html('<span style="color: #E6A23C">未收录,推送中...</span>')
const _timer = setTimeout(function () {
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: {
routeType: 'baidu_push',
domain: encodeURI(window.location.hostname),
url: encodeURI(window.location.href)
},
success(res) {
if (res.error) {
$('#Joe_Baidu_Record').html('<span style="color: #F56C6C">推送失败,请检查!</span>')
} else {
$('#Joe_Baidu_Record').html('<span style="color: #67C23A">推送成功!</span>')
}
}
})
clearTimeout(_timer)
}, 1000)
} else {
const url = `https://ziyuan.baidu.com/linksubmit/url?sitename=${encodeURI(window.location.href)}`
$('#Joe_Baidu_Record').html(`<a target="_blank" href="${url}" rel="noopener noreferrer nofollow" style="color: #F56C6C">未收录,提交收录</a>`)
}
}
}
})
}
/* 激活代码高亮 */
{
Prism.highlightAll();
$("pre[class*='language-']").each(function (index, item) {
let text = $(item).find("code[class*='language-']").text();
let span = $(`<span class="copy"><i class="fa fa-clone"></i></span>`);
new ClipboardJS(span[0], { text: () => text }).on('success', () => Qmsg.success('复制成功!'));
$(item).append(span);
});
}
/* 激活代码高亮 */
{
Prism.highlightAll()
$("pre[class*='language-']").each(function (index, item) {
let text = $(item).find("code[class*='language-']").text()
let span = $(`<span class="copy"><i class="fa fa-clone"></i></span>`)
new ClipboardJS(span[0], { text: () => text }).on('success', () => Qmsg.success('复制成功!'))
$(item).append(span)
})
}
/* 激活复制功能 */
{
new ClipboardJS('.joe_detail__article-copy').on('success', () => Qmsg.success('复制成功!'));
}
/* 激活复制功能 */
{
new ClipboardJS('.joe_detail__article-copy').on('success', () => Qmsg.success('复制成功!'))
}
/* 激活图片预览功能 */
{
$('.joe_detail__article img:not(img.owo_image)').each(function () {
$(this).wrap($(`<span data-fancybox="Joe" href="${$(this).attr('src')}"></span>`));
});
}
/* 激活图片预览功能 */
{
$('.joe_detail__article img:not(img.owo_image)').each(function () {
$(this).wrap($(`<span data-fancybox="Joe" href="${$(this).attr('src')}"></span>`))
})
}
/* 设置文章内的链接为新窗口打开 */
{
$('.joe_detail__article a:not(.joe_detail__article-anote)').each(function () {
$(this).attr({ target: '_blank', rel: 'noopener noreferrer nofollow' });
});
}
/* 设置文章内的链接为新窗口打开 */
{
$('.joe_detail__article a:not(.joe_detail__article-anote)').each(function () {
$(this).attr({ target: '_blank', rel: 'noopener noreferrer nofollow' })
})
}
/* 激活浏览功能 */
{
let viewsArr = localStorage.getItem(Joe.encryption('views')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('views')))) : [];
const flag = viewsArr.includes(cid);
if (!flag) {
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: { routeType: 'handle_views', cid },
success(res) {
if (res.code !== 1) return;
$('#Joe_Article_Views').html(`${res.data.views} 阅读`);
viewsArr.push(cid);
const name = Joe.encryption('views');
const val = Joe.encryption(JSON.stringify(viewsArr));
localStorage.setItem(name, val);
}
});
}
}
/* 激活浏览功能 */
{
let viewsArr = localStorage.getItem(Joe.encryption('views')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('views')))) : []
const flag = viewsArr.includes(cid)
if (!flag) {
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: { routeType: 'handle_views', cid },
success(res) {
if (res.code !== 1) return
$('#Joe_Article_Views').html(`${res.data.views} 阅读`)
viewsArr.push(cid)
const name = Joe.encryption('views')
const val = Joe.encryption(JSON.stringify(viewsArr))
localStorage.setItem(name, val)
}
})
}
}
/* 激活文章点赞功能 */
{
let agreeArr = localStorage.getItem(Joe.encryption('agree')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('agree')))) : [];
if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active');
else $('.joe_detail__agree .icon-2').addClass('active');
let _loading = false;
$('.joe_detail__agree .icon').on('click', function () {
if (_loading) return;
_loading = true;
agreeArr = localStorage.getItem(Joe.encryption('agree')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('agree')))) : [];
let flag = agreeArr.includes(cid);
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' },
success(res) {
if (res.code !== 1) return;
$('.joe_detail__agree .text').html(res.data.agree);
if (flag) {
const index = agreeArr.findIndex(_ => _ === cid);
agreeArr.splice(index, 1);
$('.joe_detail__agree .icon-1').removeClass('active');
$('.joe_detail__agree .icon-2').addClass('active');
$('.joe_detail__agree .icon').removeClass('active');
} else {
agreeArr.push(cid);
$('.joe_detail__agree .icon-2').removeClass('active');
$('.joe_detail__agree .icon-1').addClass('active');
$('.joe_detail__agree .icon').addClass('active');
}
const name = Joe.encryption('agree');
const val = Joe.encryption(JSON.stringify(agreeArr));
localStorage.setItem(name, val);
},
complete() {
_loading = false;
}
});
});
}
/* 激活文章点赞功能 */
{
let agreeArr = localStorage.getItem(Joe.encryption('agree')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('agree')))) : []
if (agreeArr.includes(cid)) $('.joe_detail__agree .icon-1').addClass('active')
else $('.joe_detail__agree .icon-2').addClass('active')
let _loading = false
$('.joe_detail__agree .icon').on('click', function () {
if (_loading) return
_loading = true
agreeArr = localStorage.getItem(Joe.encryption('agree')) ? JSON.parse(Joe.decrypt(localStorage.getItem(Joe.encryption('agree')))) : []
let flag = agreeArr.includes(cid)
$.ajax({
url: Joe.BASE_API,
type: 'POST',
data: { routeType: 'handle_agree', cid, type: flag ? 'disagree' : 'agree' },
success(res) {
if (res.code !== 1) return
$('.joe_detail__agree .text').html(res.data.agree)
if (flag) {
const index = agreeArr.findIndex(_ => _ === cid)
agreeArr.splice(index, 1)
$('.joe_detail__agree .icon-1').removeClass('active')
$('.joe_detail__agree .icon-2').addClass('active')
$('.joe_detail__agree .icon').removeClass('active')
} else {
agreeArr.push(cid)
$('.joe_detail__agree .icon-2').removeClass('active')
$('.joe_detail__agree .icon-1').addClass('active')
$('.joe_detail__agree .icon').addClass('active')
}
const name = Joe.encryption('agree')
const val = Joe.encryption(JSON.stringify(agreeArr))
localStorage.setItem(name, val)
},
complete() {
_loading = false
}
})
})
}
/* 格式化分页的hash值 */
{
$('.joe_comment .joe_pagination a').each((index, item) => {
const href = $(item).attr('href');
if (href && href.includes('#')) {
$(item).attr('href', href.replace('#comments', '?scroll=joe_comment'));
}
});
}
/* 格式化分页的hash值 */
{
$('.joe_comment .joe_pagination a').each((index, item) => {
const href = $(item).attr('href')
if (href && href.includes('#')) {
$(item).attr('href', href.replace('#comments', '?scroll=joe_comment'))
}
})
}
/* 密码保护文章,输入密码访问 */
{
$('.joe_detail__article-protected').on('submit', function (e) {});
}
});
/* 密码保护文章,输入密码访问 */
{
$('.joe_detail__article-protected').on('submit', function (e) {})
}
/* 激活文章视频模块 */
{
if ($('.joe_detail__article-video').length > 0) {
const player = $('.joe_detail__article-video .play iframe').attr('data-player')
$('.joe_detail__article-video .episodes .item').on('click', function () {
$(this).addClass('active').siblings().removeClass('active')
const url = $(this).attr('data-src')
$('.joe_detail__article-video .play iframe').attr({ src: player + url })
$('.joe_detail__article-video .play .title').html('正在播放:' + $(this).html())
const offset = $('.joe_detail__article-video .play').offset().top - $('.joe_header').height() - 15
window.scrollTo({ top: offset, behavior: 'smooth' })
})
$('.joe_detail__article-video .episodes .item').first().click()
}
}
})
/* 写在load事件里为了解决图片未加载完成滚动距离获取会不准确的问题 */
window.addEventListener('load', function () {
/* 激活点击回复可见的回复按钮,页面滚动到评论区 */
{
$('.joe_detail__article-hide i').on('click', function () {
const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15;
window.scrollTo({ top, behavior: 'smooth' });
});
}
/* 判断地址栏是否有锚点链接,有则跳转到对应位置 */
{
const scroll = new URLSearchParams(location.search).get('scroll');
if (scroll) {
const height = $('.joe_header').height();
let elementEL = null;
if ($('#' + scroll).length > 0) {
elementEL = $('#' + scroll);
} else {
elementEL = $('.' + scroll);
}
if (elementEL && elementEL.length > 0) {
const top = elementEL.offset().top - height - 15;
window.scrollTo({ top, behavior: 'smooth' });
}
}
}
});
/* 激活点击回复可见的回复按钮,页面滚动到评论区 */
{
$('.joe_detail__article-hide i').on('click', function () {
const top = $('.joe_comment').offset().top - $('.joe_header').height() - 15
window.scrollTo({ top, behavior: 'smooth' })
})
}
/* 判断地址栏是否有锚点链接,有则跳转到对应位置 */
{
const scroll = new URLSearchParams(location.search).get('scroll')
if (scroll) {
const height = $('.joe_header').height()
let elementEL = null
if ($('#' + scroll).length > 0) {
elementEL = $('#' + scroll)
} else {
elementEL = $('.' + scroll)
}
if (elementEL && elementEL.length > 0) {
const top = elementEL.offset().top - height - 15
window.scrollTo({ top, behavior: 'smooth' })
}
}
}
})