auto load item detail when mouseover title
目前為
// ==UserScript==
// @name v2ex+
// @namespace http://tampermonkey.net/
// @version 0.11
// @description auto load item detail when mouseover title
// @author Silvio27
// @match https://www.v2ex.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=v2ex.com
// @license GPLv3
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
console.log("script")
function load_item(topic_ele, url, load_btn, target_ele) {
// 创建一个临时容器元素来容纳加载的内容
const tempContainer = document.createElement('div');
// 使用Ajax异步加载下一页的内容
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function () {
if (xhr.status === 200) {
tempContainer.innerHTML = xhr.responseText
// 最终返回的创建内容元素
let contents = document.createElement('div')
contents.id = url.replace("https://www.v2ex.com/t/", "")
contents.className = "woDeStyle"
// 获得 topic_content
let topic_contents = tempContainer.querySelectorAll(".topic_content")
contents.innerHTML += '<div class="topic-content-box"></div>'
topic_contents.forEach((e) => {
// 即 .topic-content-box
contents.firstChild.appendChild(e.parentElement)
})
// todo 展示不清楚为什么box会出现不同的情况，待研究
let replay_string = tempContainer.querySelectorAll(".box")[3].innerText
// 获得 reply_content
if (replay_string.includes("条回复")) {
contents.appendChild(tempContainer.querySelectorAll(".box")[3])
} else {
contents.appendChild(tempContainer.querySelectorAll(".box")[4])
}
// 去除reply_content中头像及空格
contents.querySelectorAll("tbody>tr").forEach((e) => {
e.removeChild(e.firstElementChild)
e.removeChild(e.firstElementChild)
})
// 添加一个折叠按钮 todo 是否可以直接把tr中添加的拿来用？
let hideBtn = document.createElement("div")
hideBtn.innerText = "▲"
hideBtn.className = "content-loaded"
hideBtn.style.textAlign = "right"
hideBtn.onclick = (() => {
// 隐藏主题详情
hideBtn.parentElement.style.display = "none"
// 切换主题展开为关闭
hideBtn.parentElement.parentElement.querySelector(".content-loaded").innerText = "▼"
})
cursor_style(hideBtn)
contents.appendChild(hideBtn)
// content添加到target_ele
target_ele.appendChild(contents)
// 修改折叠按钮为展开，切换样式
load_btn.firstElementChild.innerText = "▲"
load_btn.firstElementChild.className = "content-loaded"
document.body.style.cursor = "auto";
}
};
xhr.send();
}
function cursor_style(element) {
element.addEventListener("mouseover", function () {
document.body.style.cursor = "pointer";
});
element.addEventListener("mouseout", function () {
document.body.style.cursor = "auto";
});
}
// 获得全部item
let items = document.querySelectorAll(".cell.item")
items.forEach((element, index) => {
let topic_item = element.querySelector(".topic-link")
// 创建新的列
let new_tr = document.createElement("td")
new_tr.setAttribute("width", "20")
new_tr.innerHTML = '<div class="triangle">▼</div>'
element.querySelector("tr").appendChild(new_tr)
cursor_style(new_tr)
new_tr.onclick = function () {
let id = topic_item.href.replace("https://www.v2ex.com/t/", "")
let content = document.getElementById(id)
if (content) {
if (content.style.display === "none") {
content.style.display = "block"
this.firstElementChild.innerText = "▲"
} else {
content.style.display = "none"
this.firstElementChild.innerText = "▼"
}
} else {
this.firstElementChild.innerText = "加载中"
document.body.style.cursor = "wait";
this.firstElementChild.className = "content-loaded"
load_item(topic_item, topic_item.href, new_tr, element)
}
}
})
let css = `
.woDeStyle {
height: 600px;
padding: 10px;
margin: 10px auto;
border: 1px solid gray;
border-radius: 10px;
overflow: scroll;
}
.topic-content-box {
border-bottom: 2px dashed black;
padding-bottom: 10px;
margin-bottom: 10px;
}
.triangle {
font-size: medium;
color: gray;
}
.content-loaded {
font-size: medium;
color: greenyellow;
}
`
GM_addStyle(css)
})();