305 lines
9.8 KiB
JavaScript
305 lines
9.8 KiB
JavaScript
if (GLOBAL_CONFIG.htmlType != 'comments' && document.querySelector('#post-comment')) {
|
||
|
||
var commentBarrageConfig = {
|
||
//同时最多显示弹幕数
|
||
maxBarrage: GLOBAL_CONFIG.source.comments.maxBarrage,
|
||
//弹幕显示间隔时间ms
|
||
barrageTime: GLOBAL_CONFIG.source.comments.barrageTime,
|
||
//twikoo部署地址腾讯云的为环境ID
|
||
twikooUrl: GLOBAL_CONFIG.source.twikoo.twikooUrl,
|
||
artalkUrl: GLOBAL_CONFIG.source.artalk.artalkUrl,
|
||
walineUrl: GLOBAL_CONFIG.source.waline.serverURL,
|
||
//token获取见上方
|
||
accessToken: GLOBAL_CONFIG.source.twikoo.accessToken,
|
||
mailMd5: GLOBAL_CONFIG.source.comments.mailMd5,
|
||
pageUrl: window.location.pathname.replace(/\/page\/\d$/, ""),
|
||
barrageTimer: [],
|
||
barrageList: [],
|
||
siteName: GLOBAL_CONFIG.source.artalk.siteName,
|
||
barrageIndex: 0,
|
||
dom: document.querySelector('.comment-barrage'),
|
||
use: GLOBAL_CONFIG.source.comments.use
|
||
}
|
||
|
||
var commentInterval = null;
|
||
var hoverOnCommentBarrage = false;
|
||
|
||
$(".comment-barrage").hover(function() {
|
||
hoverOnCommentBarrage = true;
|
||
//console.log("热评悬浮");
|
||
}, function() {
|
||
hoverOnCommentBarrage = false;
|
||
//console.log("停止悬浮");
|
||
});
|
||
|
||
function initCommentBarrage() {
|
||
//console.log("开始创建热评")
|
||
|
||
if (commentBarrageConfig.use == 'Twikoo') {
|
||
var data = JSON.stringify({
|
||
"event": "COMMENT_GET",
|
||
"commentBarrageConfig.accessToken": commentBarrageConfig.accessToken,
|
||
"url": commentBarrageConfig.pageUrl
|
||
});
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.withCredentials = true;
|
||
xhr.addEventListener("readystatechange", function() {
|
||
if (this.readyState === 4) {
|
||
commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data);
|
||
commentBarrageConfig.dom.innerHTML = '';
|
||
}
|
||
});
|
||
xhr.open("POST", commentBarrageConfig.twikooUrl);
|
||
xhr.setRequestHeader("Content-Type", "application/json");
|
||
xhr.send(data);
|
||
}
|
||
|
||
// if (commentBarrageConfig.use == 'Artalk') {
|
||
// var data = {
|
||
// "site_name": commentBarrageConfig.siteName,
|
||
// "page_key": commentBarrageConfig.pageUrl,
|
||
// "limit": 100,
|
||
// "offset": 0
|
||
// };
|
||
// var xhr = new XMLHttpRequest();
|
||
// xhr.withCredentials = true;
|
||
// xhr.addEventListener("readystatechange", function() {
|
||
// if (this.readyState === 4) {
|
||
// console.log(this.responseText.length);
|
||
// if (this.responseText.length > 0) {
|
||
// commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data
|
||
// .comments);
|
||
// commentBarrageConfig.dom.innerHTML = '';
|
||
// }
|
||
// }
|
||
// });
|
||
// const usp = new URLSearchParams(data);
|
||
// const query = usp.toString();
|
||
// xhr.open("GET", commentBarrageConfig.artalkUrl + 'api/v2/comments?' + query);
|
||
// xhr.send();
|
||
// }
|
||
|
||
if (commentBarrageConfig.use == 'Artalk') {
|
||
var data = {
|
||
"site_name": commentBarrageConfig.siteName,
|
||
"page_key": commentBarrageConfig.pageUrl,
|
||
"limit": 100,
|
||
"offset": 0
|
||
};
|
||
|
||
fetch(commentBarrageConfig.artalkUrl + 'api/v2/comments?' + new URLSearchParams(data).toString(), {
|
||
method: 'GET',
|
||
headers: {
|
||
'Content-Type': 'application/x-www-form-urlencoded',
|
||
'Origin': window.location.origin
|
||
}
|
||
})
|
||
.then(response => {
|
||
if (!response.ok) {
|
||
throw new Error('Network response was not ok');
|
||
}
|
||
return response.json();
|
||
})
|
||
.then(data => {
|
||
// 处理数据
|
||
commentBarrageConfig.barrageList = commentLinkFilter(data.comments);
|
||
commentBarrageConfig.dom.innerHTML = '';
|
||
})
|
||
.catch(error => {
|
||
// 处理错误
|
||
console.log('Error:', error);
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
if (commentBarrageConfig.use == 'Waline') {
|
||
fetch(commentBarrageConfig.walineUrl +
|
||
`/comment?path=${commentBarrageConfig.pageUrl}&pageSize=100&page=1&lang=zh-CN&sortBy=insertedAt_desc`
|
||
)
|
||
.then((e => e.json())).then((({
|
||
data: t
|
||
}) => {
|
||
if (t.length > 0) {
|
||
commentBarrageConfig.barrageList = commentLinkFilter(t);
|
||
commentBarrageConfig.dom.innerHTML = '';
|
||
}
|
||
}))
|
||
}
|
||
|
||
clearInterval(commentInterval);
|
||
commentInterval = null;
|
||
|
||
commentInterval = setInterval(() => {
|
||
if (commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage) {
|
||
popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]);
|
||
commentBarrageConfig.barrageIndex += 1;
|
||
commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length;
|
||
}
|
||
if ((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length >
|
||
commentBarrageConfig.maxBarrage ? commentBarrageConfig.maxBarrage : commentBarrageConfig
|
||
.barrageList.length)) && !hoverOnCommentBarrage) {
|
||
removeCommentBarrage(commentBarrageConfig.barrageTimer.shift())
|
||
}
|
||
}, commentBarrageConfig.barrageTime)
|
||
}
|
||
|
||
function commentLinkFilter(data) {
|
||
let newData = [];
|
||
if (commentBarrageConfig.use == 'Twikoo') {
|
||
data.sort((a, b) => {
|
||
return a.created - b.created;
|
||
})
|
||
data.forEach(item => {
|
||
newData.push(...getCommentReplies(item));
|
||
});
|
||
}
|
||
if (commentBarrageConfig.use == 'Artalk') {
|
||
data.sort((a, b) => {
|
||
const aCreated = Date.parse(a.date);
|
||
const bCreated = Date.parse(b.date);
|
||
return aCreated - bCreated;
|
||
})
|
||
data.forEach(item => {
|
||
newData.push(item);
|
||
});
|
||
}
|
||
if (commentBarrageConfig.use == 'Waline') {
|
||
data.sort((a, b) => {
|
||
return a.time - b.time;
|
||
})
|
||
data.forEach(item => {
|
||
newData.push(...getCommentWalineReplies(item));
|
||
});
|
||
}
|
||
return newData;
|
||
}
|
||
|
||
function getCommentReplies(item) {
|
||
if (item.replies) {
|
||
let replies = [item];
|
||
item.replies.forEach(item => {
|
||
replies.push(...getCommentReplies(item));
|
||
})
|
||
return replies;
|
||
} else {
|
||
return [];
|
||
}
|
||
}
|
||
|
||
function getCommentWalineReplies(item) {
|
||
if (item.children) {
|
||
let children = [item];
|
||
item.children.forEach(item => {
|
||
children.push(...getCommentReplies(item));
|
||
})
|
||
return children;
|
||
} else {
|
||
return [];
|
||
}
|
||
}
|
||
|
||
function changeContents(content) {
|
||
if (content === '') return content
|
||
|
||
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
|
||
//content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
|
||
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
|
||
content = content.replace(/<[^>]+>/g, "") // remove html tag
|
||
|
||
if (content.length > 150) {
|
||
content = content.substring(0, 150) + '...'
|
||
}
|
||
return content
|
||
}
|
||
|
||
function popCommentBarrage(data) {
|
||
let isTwikoo = commentBarrageConfig.use == 'Twikoo'
|
||
let isArtalk = commentBarrageConfig.use == 'Artalk';
|
||
let isWaline = commentBarrageConfig.use == 'Waline';
|
||
let nick = data.nick;
|
||
let avatar = isTwikoo ? `https://cravatar.cn/avatar/${data.mailMd5}` :
|
||
isArtalk ? `https://cravatar.cn/avatar/${data.email_encrypted}?d=mp&s=240` :
|
||
isWaline ? data.avatar : 'https://cravatar.cn/avatar/';
|
||
let barrageBlogger = isTwikoo ? data.mailMd5 === commentBarrageConfig.mailMd5 :
|
||
isArtalk ? data.email_encrypted === commentBarrageConfig.mailMd5 :
|
||
isWaline ? data.type === 'administrator' : false;
|
||
let id = isTwikoo ? data.id :
|
||
isArtalk ? 'atk-comment-' + data.id :
|
||
isWaline ? data.objectId : 'post-comment';
|
||
let comment = isTwikoo ? data.comment :
|
||
isArtalk ? data.content_marked :
|
||
isWaline ? data.comment : '';
|
||
|
||
let badge_name = isArtalk ? data.badge_name : '博主'
|
||
let badgeName = !barrageBlogger ? "热评" : badge_name != '' ? badge_name : "博主"
|
||
let barrage = document.createElement('div');
|
||
let width = commentBarrageConfig.dom.clientWidth;
|
||
let height = commentBarrageConfig.dom.clientHeight;
|
||
barrage.className = 'comment-barrage-item'
|
||
barrage.innerHTML = `
|
||
<div class="barrageHead">
|
||
<a class="barrageTitle
|
||
${barrageBlogger ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')">
|
||
${badgeName}
|
||
</a>
|
||
<div class="barrageNick">${nick}</div>
|
||
<img class="barrageAvatar" src="${avatar}"/>
|
||
<a class="comment-barrage-close" href="javascript:heo.switchCommentBarrage()"><i class="haofont hao-icon-xmark"></i></a>
|
||
</div>
|
||
<a class="barrageContent" href="javascript:heo.scrollTo('${id}');">${changeContents(comment)}</a>
|
||
`
|
||
// 获取hao标签内的所有pre元素
|
||
let haoPres = barrage.querySelectorAll(".barrageContent pre");
|
||
|
||
// 遍历每个pre元素，将其替换为"【代码】"
|
||
haoPres.forEach((pre) => {
|
||
let codePlaceholder = document.createElement("span");
|
||
codePlaceholder.innerText = "【代码】";
|
||
pre.parentNode.replaceChild(codePlaceholder, pre);
|
||
});
|
||
|
||
// 获取hao标签内的所有图片元素
|
||
let haoImages = barrage.querySelectorAll(".barrageContent img");
|
||
|
||
// 遍历每个图片元素，将其替换为"【图片】"，但排除带有class=tk-owo-emotion的图片
|
||
haoImages.forEach((image) => {
|
||
if (!image.classList.contains("tk-owo-emotion")) {
|
||
image.style.display = "none"; // 隐藏图片
|
||
let placeholder = document.createElement("span");
|
||
placeholder.innerText = "【图片】";
|
||
image.parentNode.replaceChild(placeholder, image);
|
||
}
|
||
});
|
||
commentBarrageConfig.barrageTimer.push(barrage);
|
||
commentBarrageConfig.dom.append(barrage);
|
||
}
|
||
|
||
function removeCommentBarrage(barrage) {
|
||
barrage.className = 'comment-barrage-item out';
|
||
setTimeout(() => {
|
||
commentBarrageConfig.dom.removeChild(barrage);
|
||
}, 1000)
|
||
}
|
||
|
||
initCommentBarrage();
|
||
|
||
if (localStorage.getItem('commentBarrageSwitch') !== 'false') {
|
||
$(".comment-barrage").show();
|
||
$(".menu-commentBarrage-text").text("关闭热评");
|
||
document.querySelector("#consoleCommentBarrage").classList.add("on");
|
||
|
||
} else {
|
||
$(".comment-barrage").hide();
|
||
$(".menu-commentBarrage-text").text("显示热评");
|
||
document.querySelector("#consoleCommentBarrage").classList.remove("on");
|
||
|
||
|
||
}
|
||
|
||
|
||
document.addEventListener('pjax:send', function() {
|
||
clearInterval(commentInterval);
|
||
});
|
||
} |