实现“加载多页回复”

Author: Codennnn

src/contents/globals.ts

@@ -1,5 +1,3 @@
-import type { CommentData } from '../types'
-
 /** 登录人的昵称 */
 export const loginName = $('#Top .tools > a[href^="/member"]').text()
 
@@ -17,9 +15,14 @@ export const $topicContentBox = $('#Main .box:has(.topic_content)')
 export const $commentBox = $('#Main .box:has(.cell[id^="r_"])')
 
 /** 评论区的回复 */
-export const $commentCells = $commentBox.find('.cell[id^="r_"]')
+export let $commentCells = $commentBox.find('.cell[id^="r_"]')
+
+export let $commentTableRows = $commentCells.find('> table > tbody > tr')
 
-export const $commentTableRows = $commentCells.find('> table > tbody > tr')
+export function updateCommentCells() {
+  $commentCells = $commentBox.find('.cell[id^="r_"]')
+  $commentTableRows = $commentCells.find('> table > tbody > tr')
+}
 
 /** 回复输入控件 */
 export const $replyBox = $('#reply-box')
@@ -31,54 +34,3 @@ export const colorTheme = $('#Wrapper').hasClass('Night') ? 'dark' : 'light'
 /** 主题回复输入框 */
 export const $replyTextArea = $('#reply_content')
 export const replyTextArea = document.querySelector('#reply_content')
-
-/** 每一页的回复列表数据 */
-export const commentDataList: readonly CommentData[] = $commentTableRows
-  .map<CommentData>((idx, tr) => {
-    const id = $commentCells[idx].id
-
-    const $tr = $(tr)
-    const $td = $tr.find('> td:nth-child(3)')
-
-    const thanked = $tr.find('> td:last-of-type > .fr').find('> .thank_area').hasClass('thanked')
-
-    const $member = $td.find('> strong > a')
-    const memberName = $member.text()
-    const memberLink = $member.prop('href')
-    const memberAvatar = $tr.find('.avatar').prop('src')
-
-    const content = $td.find('> .reply_content').text()
-    const likes = Number($td.find('span.small').text())
-    const floor = $td.find('span.no').text()
-
-    const memberNameMatches = Array.from(content.matchAll(/@([a-zA-Z0-9]+)/g))
-    const refMemberNames =
-      memberNameMatches.length > 0
-        ? memberNameMatches.map(([, name]) => {
-            return name
-          })
-        : undefined
-
-    const floorNumberMatches = Array.from(content.matchAll(/#(\d+)/g))
-    const refFloors =
-      floorNumberMatches.length > 0
-        ? floorNumberMatches.map(([, floor]) => {
-            return floor
-          })
-        : undefined
-
-    return {
-      id,
-      memberName,
-      memberLink,
-      memberAvatar,
-      content,
-      likes,
-      floor,
-      index: idx,
-      refMemberNames,
-      refFloors,
-      thanked,
-    }
-  })
-  .get()

src/contents/topic/comment.ts

@@ -3,21 +3,25 @@ import { createPopup } from '../../components/popup'
 import { createToast } from '../../components/toast'
 import { StorageKey } from '../../constants'
 import { iconHeart, iconHide, iconReply } from '../../icons'
-import type { Member } from '../../types'
+import { fetchTopicPage } from '../../services'
+import type { CommentData, Member } from '../../types'
 import { escapeHTML, getStorageSync } from '../../utils'
 import {
   $commentBox,
   $commentCells,
   $commentTableRows,
   $replyTextArea,
-  commentDataList,
   loginName,
   topicOwnerName,
+  updateCommentCells,
 } from '../globals'
 import { insertTextToReplyInput } from '../helpers'
 import { processAvatar } from './avatar'
 import { openTagsSetter, processReplyContent, updateMemberTag } from './content'
 
+/** 每一页的回复列表数据 */
+let commentDataList: readonly CommentData[] = []
+
 /**
  * 设置热门回复。
  */
@@ -199,7 +203,89 @@ function handlingControls() {
   })
 }
 
-export function handlingComments() {
+export async function handlingComments() {
+  if (false) {
+    const $paging = $('.v2p-paging')
+    const $pagingTop = $paging.eq(0)
+    const $pagingBottom = $paging.eq(1)
+
+    const $pageCurrent = $pagingTop.find('.page_current')
+    const currentPage = $pageCurrent.text()
+
+    if (currentPage === '1') {
+      const $pageNormal = $pagingTop.find('.page_normal')
+      const pages: string[] = []
+      $pageNormal.each((_, ele) => {
+        if (ele.textContent) {
+          ele.classList.add('page_current')
+          pages.push(ele.textContent)
+        }
+      })
+
+      if (pages.length > 0) {
+        const pagesText = await Promise.all(
+          pages.map((p) => fetchTopicPage(window.location.pathname, p))
+        )
+
+        pagesText.map((pageText) => {
+          $pagingBottom.before($(pageText).find('.cell[id^="r_"]'))
+        })
+      }
+
+      updateCommentCells()
+    }
+  }
+
+  commentDataList = $commentTableRows
+    .map<CommentData>((idx, tr) => {
+      const id = $commentCells[idx].id
+
+      const $tr = $(tr)
+      const $td = $tr.find('> td:nth-child(3)')
+
+      const thanked = $tr.find('> td:last-of-type > .fr').find('> .thank_area').hasClass('thanked')
+
+      const $member = $td.find('> strong > a')
+      const memberName = $member.text()
+      const memberLink = $member.prop('href')
+      const memberAvatar = $tr.find('.avatar').prop('src')
+
+      const content = $td.find('> .reply_content').text()
+      const likes = Number($td.find('span.small').text())
+      const floor = $td.find('span.no').text()
+
+      const memberNameMatches = Array.from(content.matchAll(/@([a-zA-Z0-9]+)/g))
+      const refMemberNames =
+        memberNameMatches.length > 0
+          ? memberNameMatches.map(([, name]) => {
+              return name
+            })
+          : undefined
+
+      const floorNumberMatches = Array.from(content.matchAll(/#(\d+)/g))
+      const refFloors =
+        floorNumberMatches.length > 0
+          ? floorNumberMatches.map(([, floor]) => {
+              return floor
+            })
+          : undefined
+
+      return {
+        id,
+        memberName,
+        memberLink,
+        memberAvatar,
+        content,
+        likes,
+        floor,
+        index: idx,
+        refMemberNames,
+        refFloors,
+        thanked,
+      }
+    })
+    .get()
+
   const storage = getStorageSync()
 
   const tagData = storage[StorageKey.MemberTag]

src/contents/topic/index.ts

@@ -82,7 +82,7 @@ void (async () => {
     }
   }
 
-  handlingComments()
   handlingPaging()
+  void handlingComments()
   handleReply()
 })()

src/contents/topic/paging.ts

@@ -1,13 +1,15 @@
 import { $commentBox } from '../globals'
 
 export function handlingPaging() {
-  const notCommentCells = $commentBox.find('> .cell:not([id^="r_"])')
+  const $notCommentCells = $commentBox.find('> .cell:not([id^="r_"])')
 
-  if (notCommentCells.length <= 1) {
+  if ($notCommentCells.length <= 1) {
     return
   }
 
-  const pagingCells = notCommentCells.slice(1).addClass('v2p-paging')
+  // $notCommentCells 的第一个为 “xxx 条回复”
+  const pagingCells = $notCommentCells.slice(1).addClass('v2p-paging')
+
   const pageBtns = pagingCells.find('.super.button')
   pageBtns.eq(0).addClass('v2p-prev-btn')
   pageBtns.eq(1).addClass('v2p-next-btn')

src/services.ts

@@ -218,3 +218,9 @@ export async function setV2P_Settings(storageSettings: StorageSettings) {
 
   await setStorage(StorageKey.SyncInfo, syncInfo)
 }
+
+export async function fetchTopicPage(path: string, page: string) {
+  const res = await fetch(`${V2EX.Origin}${path}?p=${page}`)
+  const htmlText = await res.text()
+  return htmlText
+}