load post detail information is automatically loaded when the button is clicked
目前為
// ==UserScript==
// @name NodeSeek+
// @namespace http://tampermonkey.net/
// @version 0.1
// @description load post detail information is automatically loaded when the button is clicked
// @author tsd
// @match https://www.nodeseek.com/*
// @match https://www.nodeseek.com/*
// @icon https://www.nodeseek.com/static/image/favicon/android-chrome-192x192.png
// @license GPLv3
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
console.log("script");
initializePage();
function initializePage() {
let lists = document.querySelectorAll(".post-list");
lists.forEach(list => {
let items = list.childNodes;
items.forEach((element) => {
setupPostItem(element);
});
});
}
function setupPostItem(element) {
let post_item = element.querySelector(".post-title>a");
let new_div = document.createElement("span");
new_div.className = 'info-triganle';
new_div.innerHTML = '<span class="triangle">▼</span>';
element.querySelector(".post-info").append(new_div);
setupCursorStyle(new_div);
new_div.onclick = function () {
togglePostContent(post_item, element, new_div);
};
}
function togglePostContent(post_item, element, new_div) {
let id = post_item.href.replace("https://www.nodeseek.com", "");
let content = document.getElementById(id);
if (content) {
toggleDisplay(content, new_div);
} else {
new_div.firstElementChild.innerText = "加载中";
document.body.style.cursor = "wait";
new_div.firstElementChild.className = "content-loaded";
fetchContent(post_item.href, element, (contents, targetEle) => {
insertContentAfter(contents, targetEle);
loadNextPage(contents, targetEle, 1);
new_div.firstElementChild.innerText = "▲";
document.body.style.cursor = "auto";
});
}
}
function toggleDisplay(content, new_div) {
if (content.style.display === "none") {
content.style.display = "block";
new_div.firstElementChild.innerText = "▲";
} else {
content.style.display = "none";
new_div.firstElementChild.innerText = "▼";
}
}
function fetchContent(url, targetEle, callback) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
if (xhr.status === 200) {
const tempContainer = document.createElement('div');
tempContainer.innerHTML = xhr.responseText;
let contents = document.createElement('div');
contents.id = url.replace("https://www.nodeseek.com", "");
contents.className = "content-div";
let post_contents = tempContainer.querySelectorAll(".post-content");
contents.innerHTML += '<div class="post-content-box"></div>';
post_contents.forEach((e) => {
contents.firstChild.appendChild(e.parentElement);
});
if (callback && typeof callback === 'function') {
callback(contents, targetEle);
}
} else {
console.info("加载完毕")
return
}
};
xhr.onerror = function() {
console.error('Network error occurred while loading content.');
};
xhr.send();
}
function insertContentAfter(content, targetEle) {
let ul = targetEle.parentNode;
ul.insertBefore(content, targetEle.nextSibling);
}
function loadNextPage(contentDiv, targetEle, currentPage) {
let nextPage = currentPage + 1;
let nextPageUrl = targetEle.querySelector(".post-title>a").href.replace(/(\d+)$/, nextPage);
fetchContent(nextPageUrl, targetEle, (nextContents, targetEle) => {
let postContentBox = contentDiv.querySelector(".post-content-box");
if (nextContents.querySelector(".post-content")) {
let nextPostContents = nextContents.querySelectorAll(".post-content");
nextPostContents.forEach((e) => {
postContentBox.appendChild(e.parentElement);
});
// 递归调用以加载后续页面,延迟1秒
setTimeout(() => {
loadNextPage(contentDiv, targetEle, nextPage);
}, 1000);
}
});
}
function setupCursorStyle(element) {
element.addEventListener("mouseover", function () {
document.body.style.cursor = "pointer";
});
element.addEventListener("mouseout", function () {
document.body.style.cursor = "auto";
});
}
let css = `
.content-div {
height: 600px;
padding: 10px;
margin: 10px auto;
border: 1px solid gray;
border-radius: 10px;
overflow: scroll;
}
.post-content-box {
border-bottom: 2px dashed gray;
padding-bottom: 10px;
margin-bottom: 10px;
}
.triangle {
font-size: medium;
color: gray;
}
.info-triganle{
position: absolute;
right: 54px;
}
.content-loaded {
font-size: medium;
color: red;
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
border-radius: 3px;
background: rgba(0,0,0,0.06);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
}
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(0,0,0,0.12);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
`
GM_addStyle(css)
})();