可在水源论坛显示仅回复可见的回帖内容
// ==UserScript== // @name 水源显示回复可见 // @namespace CCCC_David // @version 0.3.1 // @description 可在水源论坛显示仅回复可见的回帖内容 // @author CCCC_David // @match https://shuiyuan.sjtu.edu.cn/* // @grant none // ==/UserScript== (async () => { 'use strict'; // From Font Awesome Free v5.15 by @fontawesome - https://fontawesome.com // License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) // Modified class attribute to fit in. const PREV_REPLY_ICON = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-left" class="svg-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>'; const NEXT_REPLY_ICON = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>'; const LOAD_ALL_REPLIES_ICON = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-double-right" class="svg-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"></path></svg>'; // Parameters. const FETCH_MAX_RETRIES = 15; const EXP_BACKOFF_START = 0.1; const EXP_BACKOFF_BASE = 1.2; const ADJUST_AVATAR_SIZE = 90; const EMPTY_IMG = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='; const INITIAL_REPLY_ID = 1; const MIN_WAIT_MS_BETWEEN_REPLIES = 600; const APPEND_VIEWER_TARGET_CLASS = 'post-stream'; // Utility functions. const escapeRegExpOutsideCharacterClass = (s) => s.replace(/[.*+?^${}()|[\]\\]/gu, '\\$&'); const escapeHtml = (html) => html.replace(/&/gu, '&').replace(/</gu, '<').replace(/>/gu, '>').replace(/"/gu, '"').replace(/'/gu, '''); // eslint-disable-next-line no-promise-executor-return const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); const allowedPolicy = window.trustedTypes?.createPolicy?.('allowedPolicy', {createHTML: (x) => x}); const createTrustedHTML = (html) => (allowedPolicy ? allowedPolicy.createHTML(html) : html); const htmlParser = new DOMParser(); const generateErrorOneboxR###lt = (msg) => `<aside><blockquote>[color=red](${escapeHtml(msg)})[/color]</blockquote></aside>`; // Fetch wrapper with: // - Discourse special headers. // - Response status code check. // - Limited exponential backoff retry upon 429 status code. const discourseFetch = async (url, options) => { let currentAttempt = 0; // eslint-disable-next-line no-constant-condition while (true) { // eslint-disable-next-line no-await-in-loop const response = await fetch(url, { method: options?.method ?? 'GET', headers: { 'Discourse-Present': 'true', 'Discourse-Logged-In': 'true', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-Token': document.querySelector('meta[name=csrf-token]').content, ...options?.headers, }, body: options?.body, mode: 'same-origin', credentials: 'include', redirect: 'follow', }); if (response.status === 429) { currentAttempt += 1; if (currentAttempt > FETCH_MAX_RETRIES) { throw new Error('Max retries exceeded'); } // eslint-disable-next-line no-await-in-loop await sleep(1000 * EXP_BACKOFF_START * EXP_BACKOFF_BASE ** (currentAttempt - 1)); continue; } if (!response.ok) { throw new Error(`${response.status}${response.statusText ? ` ${response.statusText}` : ''}`); } return response; } }; const fetchReply = async (topicId, replyId) => { const replyURL = `/t/topic/${topicId}/${replyId}`; try { const response = await discourseFetch(`/onebox?url=${encodeURIComponent(replyURL)}`); return response.text(); } catch (e) { return generateErrorOneboxR###lt(e.toString()); } }; const fetchTopicInfo = async (topicId) => { const [topicInfo1, topicInfo2] = await Promise.all([ `/t/${topicId}.json`, `/latest.json?topic_ids=${topicId}`, ].map(async (url) => (await discourseFetch(url, {headers: {Accept: 'application/json'}})).json())); return { isPrivateReply: topicInfo1.private_replies, maxReplyId: topicInfo2.topic_list?.topics?.[0]?.highest_post_number ?? 0, participants: topicInfo1.details?.participants ?? [], }; }; const fetchUserInfo = async (username) => { if (!username) { return { error: false, username: null, name: null, title: null, }; } try { const response = await discourseFetch(`/u/${encodeURIComponent(username)}/card.json`, {headers: {Accept: 'application/json'}}); const userInfo = await response.json(); return { error: false, username: userInfo.user.username, name: userInfo.user.name, title: userInfo.user.title, }; } catch (e) { // eslint-disable-next-line no-console console.error(e); return { error: true, username: null, name: null, title: null, }; } }; const renderReply = (tree) => { const blockquote = tree.querySelector('aside > blockquote'); if (!blockquote) { return '<p>(帖子已被作者删除)</p>'; } const reply = blockquote.innerHTML.trim(); if (!reply) { return '<p> </p>'; } // eslint-disable-next-line no-undef return require('discourse/lib/text').cookAsync(reply); }; const getAvatarURLFromReply = (tree) => { const img = tree.querySelector('aside > div > img'); if (!img) { return ''; } // Resize the avatar. return img.src.replace(/\/user_avatar\/([^/]+)\/([^/]+)\/40\//u, `/user_avatar/$1/$2/${ADJUST_AVATAR_SIZE}/`) .replace(/\/letter_avatar_proxy\/([^/]+)\/letter\/([^/]+)\/([^/]+)\/40\./u, `/letter_avatar_proxy/$1/letter/$2/$3/${ADJUST_AVATAR_SIZE}.`); }; const tryToFindUserByAvatar = async (avatarURL, participants) => { // Case 1: Extract username from URL if it is user avatar. const username = avatarURL.match(/\/user_avatar\/(?:[^/]+)\/([^/]+)\//u)?.[1]; if (username) { return { error: false, username: decodeURIComponent(username), name: null, title: null, }; } // Case 2: Try to match letter avatar with top participants of this topic. const letterAvatarMatch = avatarURL.match(/\/letter_avatar_proxy\/(?:[^/]+)\/letter\/([^/]+)\/([^/]+)\//u); // Letter and color if (!letterAvatarMatch) { // Unexpected format. return { error: false, username: null, name: null, title: null, }; } const letterAvatarTag = ['letter', letterAvatarMatch[1], letterAvatarMatch[2]].join('/'); for (const participant of participants) { if ((participant.avatar_template ?? '').includes(letterAvatarTag)) { return { error: false, username: participant.username, name: participant.name, title: null, }; } } // Case 3: Search for users with the letter and try to match letter avatar. let searchUsersByLetterR###lt; try { searchUsersByLetterR###lt = await (await discourseFetch(`/directory_items?period=all&order=username&name=${encodeURIComponent(decodeURIComponent(letterAvatarMatch[1]))}`)).json(); } catch (e) { // eslint-disable-next-line no-console console.error(e); return { error: true, username: null, name: null, title: null, }; } for (const user of searchUsersByLetterR###lt.directory_items) { if ((user.user.avatar_template ?? '').includes(letterAvatarTag)) { return { error: false, username: user.user.username, name: user.user.name, title: user.user.title ?? '', }; } } // We are unable to figure out the username by avatar. return { error: false, username: null, name: null, title: null, }; }; const viewerTemplate = (options) => ` <div class="topic-post clearfix regular"> <article role="region" class="boxed"> <div class="row"> <div class="topic-avatar"> <a ${options.hasElementId ? 'id="show-private-reply-avatar"' : ''} class="trigger-user-card main-avatar" href="${options.userPage}" data-user-card="${options.dataUserCard}" aria-hidden="true" style="${options.avatarStyle}"> <img width="45" height="45" src="${options.avatarURL}" class="avatar" loading="lazy"> </a> </div> <div class="topic-body clearfix"> <div role="heading" class="topic-meta-data"> <div class="names trigger-user-card"> <span class="first full-name"> <a ${options.hasElementId ? 'id="show-private-reply-name"' : ''} href="${options.userPage}" data-user-card="${options.dataUserCard}" style="${options.nameStyle}">${options.name}</a> </span> <span class="second username" style="${options.usernameStyle}"> <a ${options.hasElementId ? 'id="show-private-reply-username"' : ''} href="${options.userPage}" data-user-card="${options.dataUserCard}">${options.username}</a> </span> <span ${options.hasElementId ? 'id="show-private-reply-user-title"' : ''} class="user-title" style="${options.userTitleStyle}">${options.userTitle}</span> </div> <span style="text-align: right; margin-left: auto;"> ${options.hasElementId ? ` <span id="show-private-reply-id" title="跳转到回复..." style="font-size: var(--font-up-2); cursor: pointer;">${options.replyId}</span> ` : ` <span style="font-size: var(--font-up-2);">${options.replyId}</span> `} ${options.hasElementId ? ` <button id="show-private-reply-dec-id" class="btn" title="上一条" style="margin-left: 0.5em;">${PREV_REPLY_ICON}</button> <button id="show-private-reply-inc-id" class="btn" title="下一条" style="margin-left: 0.5em;">${NEXT_REPLY_ICON}</button> <button id="show-private-reply-load-all" class="btn" title="加载剩余所有回复" style="margin-left: 0.5em;">${LOAD_ALL_REPLIES_ICON}</button> ` : ''} </span> </div> <div class="regular contents"> <div ${options.hasElementId ? 'id="show-private-reply-content"' : ''} class="cooked">${options.content}</div> </div> </div> </div> </article> </div> `; let viewerInitialized = false; const addViewer = async (parentNode) => { if (!parentNode) { return; } // Do not add the viewer more than once for a page. if (document.getElementById('show-private-reply-div')) { return; } viewerInitialized = false; const topicId = parseInt(window.location.pathname.match(/^\/t\/topic\/(\d+)(?=\/|$)/u)?.[1], 10); if (Number.isNaN(topicId)) { // Unable to parse topic ID, maybe not a topic page, give up. return; } const {isPrivateReply, maxReplyId, participants} = await fetchTopicInfo(topicId); // Do not add viewer if current topic is not private reply. // Double check for race condition after await. if (!isPrivateReply || maxReplyId < 1 || document.getElementById('show-private-reply-div')) { return; } const viewerContainer = document.createElement('div'); viewerContainer.id = 'show-private-reply-div'; viewerContainer.style.visibility = 'hidden'; viewerContainer.innerHTML = createTrustedHTML(viewerTemplate({ hasElementId: true, userPage: '', dataUserCard: '', avatarStyle: 'visibility: hidden; cursor: default;', avatarURL: escapeHtml(EMPTY_IMG), nameStyle: 'display: none;', name: ' ', usernameStyle: 'display: none;', username: '', userTitleStyle: 'display: none;', userTitle: '', replyId: INITIAL_REPLY_ID, content: '<p>正在加载回复可见内容...</p>', })); parentNode.appendChild(viewerContainer); const replyAvatarElement = document.getElementById('show-private-reply-avatar'); const replyNameElement = document.getElementById('show-private-reply-name'); const replyUsernameElement = document.getElementById('show-private-reply-username'); const replyUserTitleElement = document.getElementById('show-private-reply-user-title'); const replyIdElement = document.getElementById('show-private-reply-id'); const replyContentElement = document.getElementById('show-private-reply-content'); const replyLoadAllButton = document.getElementById('show-private-reply-load-all'); let lastGetReplyFullInfoTime = null; const getReplyFullInfo = async (replyId) => { // Require a minimum wait time between two fetches of replies. if (lastGetReplyFullInfoTime) { const remainingTimeMs = MIN_WAIT_MS_BETWEEN_REPLIES - (new Date() - lastGetReplyFullInfoTime); if (remainingTimeMs > 0) { await sleep(remainingTimeMs); } } // eslint-disable-next-line require-atomic-updates lastGetReplyFullInfoTime = new Date(); const reply = await fetchReply(topicId, replyId); let tree; try { tree = htmlParser.parseFromString(reply, 'text/html'); } catch (e) { // eslint-disable-next-line no-console console.error(e); tree = htmlParser.parseFromString(generateErrorOneboxR###lt('Unable to parse r###lt from `/onebox`'), 'text/html'); } const avatarURL = getAvatarURLFromReply(tree); // eslint-disable-next-line no-shadow let {error, username, name, title} = await tryToFindUserByAvatar(avatarURL, participants); if (title === null && !error) { ({error, username, name, title} = await fetchUserInfo(username)); } return { error, avatarURL, username, name, title, content: await renderReply(tree), }; }; const updateView = async (replyId) => { // eslint-disable-next-line no-shadow const {error, avatarURL, username, name, title, content} = await getReplyFullInfo(replyId); const nameToShow = name || username; replyAvatarElement.href = replyNameElement.href = replyUsernameElement.href = username ? `/u/${encodeURIComponent(username)}` : ''; for (const userCardElement of [replyAvatarElement, replyNameElement, replyUsernameElement]) { userCardElement.setAttribute('data-user-card', username ?? ''); // eslint-disable-next-line no-undef jQuery(userCardElement).data('user-card', username ?? ''); } replyAvatarElement.children[0].src = avatarURL || EMPTY_IMG; replyAvatarElement.style.visibility = avatarURL ? 'visible' : 'hidden'; replyAvatarElement.style.cursor = username ? 'pointer' : 'default'; replyNameElement.textContent = error ? '(加载用户信息失败)' : nameToShow || '未知用户的回复'; replyNameElement.style.cursor = nameToShow ? 'pointer' : 'text'; replyNameElement.style.display = ''; replyUsernameElement.textContent = username ?? ''; replyUsernameElement.parentNode.style.display = name && name !== username ? '' : 'none'; replyUserTitleElement.textContent = title ?? ''; replyUserTitleElement.style.display = title ? '' : 'none'; replyIdElement.textContent = replyId.toString(); replyContentElement.innerHTML = createTrustedHTML(content); }; for (const userCardElement of [replyAvatarElement, replyNameElement, replyUsernameElement]) { userCardElement.addEventListener('click', (e) => { if (!userCardElement.getAttribute('data-user-card')) { e.preventDefault(); e.stopPropagation(); } }); } viewerContainer.style.visibility = ''; let replyNavigationInProgress = false; document.getElementById('show-private-reply-inc-id').addEventListener('click', async () => { if (!viewerInitialized || replyNavigationInProgress) { return; } let replyId = parseInt(replyIdElement.textContent, 10); replyId = Math.max(replyId < maxReplyId ? replyId + 1 : 1, 1); replyNavigationInProgress = true; try { await updateView(replyId); } catch (e) { // eslint-disable-next-line no-console console.error(e); } // eslint-disable-next-line require-atomic-updates replyNavigationInProgress = false; }); document.getElementById('show-private-reply-dec-id').addEventListener('click', async () => { if (!viewerInitialized || replyNavigationInProgress) { return; } let replyId = parseInt(replyIdElement.textContent, 10); replyId = Math.min(replyId > 1 ? replyId - 1 : maxReplyId, maxReplyId); replyNavigationInProgress = true; try { await updateView(replyId); } catch (e) { // eslint-disable-next-line no-console console.error(e); } // eslint-disable-next-line require-atomic-updates replyNavigationInProgress = false; }); replyIdElement.addEventListener('click', async () => { if (!viewerInitialized || replyNavigationInProgress) { return; } const newReplyIdText = prompt('跳转到回复...', replyIdElement.textContent); if (!newReplyIdText) { return; } let newReplyId = parseInt(newReplyIdText, 10); if (Number.isNaN(newReplyId)) { newReplyId = 1; } newReplyId = Math.min(Math.max(newReplyId, 1), maxReplyId); replyNavigationInProgress = true; try { await updateView(newReplyId); } catch (e) { // eslint-disable-next-line no-console console.error(e); } // eslint-disable-next-line require-atomic-updates replyNavigationInProgress = false; }); replyLoadAllButton.addEventListener('click', async () => { if (!viewerInitialized) { return; } replyLoadAllButton.style.display = 'none'; let currentReplyId = parseInt(replyIdElement.textContent, 10); if (Number.isNaN(currentReplyId)) { currentReplyId = 1; } currentReplyId = Math.min(Math.max(currentReplyId, 1), maxReplyId); const loadingStateNode = document.createTextNode('加载中...'); parentNode.parentNode.appendChild(loadingStateNode); for (let replyId = currentReplyId + 1; replyId <= maxReplyId; replyId += 1) { // eslint-disable-next-line no-shadow, no-await-in-loop const {error, avatarURL, username, name, title, content} = await getReplyFullInfo(replyId); const nameToShow = name || username; const replyContainer = document.createElement('div'); replyContainer.style.visibility = 'hidden'; replyContainer.innerHTML = createTrustedHTML(viewerTemplate({ hasElementId: false, userPage: escapeHtml(username ? `/u/${encodeURIComponent(username)}` : ''), dataUserCard: escapeHtml(username ?? ''), avatarStyle: `visibility: ${avatarURL ? 'visible' : 'hidden'}; cursor: ${username ? 'pointer' : 'default'};`, avatarURL: escapeHtml(avatarURL || EMPTY_IMG), nameStyle: `cursor: ${nameToShow ? 'pointer' : 'text'};`, name: escapeHtml(error ? '(加载用户信息失败)' : nameToShow || '未知用户的回复'), usernameStyle: name && name !== username ? '' : 'display: none;', username: escapeHtml(username ?? ''), userTitleStyle: title ? '' : 'display: none;', userTitle: escapeHtml(title ?? ''), replyId, content, })); parentNode.appendChild(replyContainer); for (const selector of ['.main-avatar', '.full-name > a', '.username > a']) { const userCardElement = replyContainer.querySelector(selector); // eslint-disable-next-line no-undef jQuery(userCardElement).data('user-card', username ?? ''); userCardElement.addEventListener('click', (e) => { if (!userCardElement.getAttribute('data-user-card')) { e.preventDefault(); e.stopPropagation(); } }); } // Reload avatar image if failed. const avatarElement = replyContainer.querySelector('.avatar'); avatarElement.reloadAttempt = 0; avatarElement.addEventListener('error', async () => { if (!avatarElement.src || avatarElement.src === EMPTY_IMG) { return; } avatarElement.reloadAttempt += 1; if (avatarElement.reloadAttempt > FETCH_MAX_RETRIES) { return; } await sleep(1000 * EXP_BACKOFF_START * EXP_BACKOFF_BASE ** (avatarElement.reloadAttempt - 1)); // eslint-disable-next-line no-self-assign avatarElement.src = avatarElement.src; }); replyContainer.style.visibility = ''; loadingStateNode.textContent = `加载中 (${replyId} / ${maxReplyId}) ...`; } loadingStateNode.textContent = '加载完成'; }); await updateView(INITIAL_REPLY_ID); viewerInitialized = true; }; const observer = new MutationObserver(async (mutationsList) => { for (const mutation of mutationsList) { if (mutation.type === 'childList') { for (const el of mutation.addedNodes) { if (el.classList?.contains(APPEND_VIEWER_TARGET_CLASS)) { // eslint-disable-next-line no-await-in-loop -- addViewer should ideally only happen once await addViewer(el); } } } else if (mutation.type === 'attributes') { if (!mutation.oldValue?.match(new RegExp(`(?:^|\\s)${escapeRegExpOutsideCharacterClass(APPEND_VIEWER_TARGET_CLASS)}(?:\\s|$)`, 'u')) && mutation.target.classList?.contains(APPEND_VIEWER_TARGET_CLASS)) { // eslint-disable-next-line no-await-in-loop -- addViewer should ideally only happen once await addViewer(mutation.target); } } } }); observer.observe(document.documentElement, { subtree: true, childList: true, attributeFilter: ['class'], attributeOldValue: true, }); await addViewer(document.getElementsByClassName(APPEND_VIEWER_TARGET_CLASS)[0]); })();