From f70dac57ba494c409528a431c33b13542d5fe7ec Mon Sep 17 00:00:00 2001 From: the1812 Date: Mon, 11 Apr 2022 13:17:25 +0800 Subject: [PATCH] Support fold comments --- .../feeds/fold-comments/fold-comment.scss | 2 +- .../components/feeds/fold-comments/index.ts | 75 +++++++++++++------ src/components/feeds/api/manager/base.ts | 2 + src/components/feeds/api/manager/v1.ts | 1 + src/components/feeds/api/manager/v2.ts | 1 + 5 files changed, 57 insertions(+), 24 deletions(-) diff --git a/registry/lib/components/feeds/fold-comments/fold-comment.scss b/registry/lib/components/feeds/fold-comments/fold-comment.scss index bcd326bd9..353e2e85b 100644 --- a/registry/lib/components/feeds/fold-comments/fold-comment.scss +++ b/registry/lib/components/feeds/fold-comments/fold-comment.scss @@ -1,4 +1,4 @@ -.panel-area .bb-comment { +.bb-comment { .fold-comment { position: -webkit-sticky; position: sticky; diff --git a/registry/lib/components/feeds/fold-comments/index.ts b/registry/lib/components/feeds/fold-comments/index.ts index 5bf77eae7..3ec8c64e8 100644 --- a/registry/lib/components/feeds/fold-comments/index.ts +++ b/registry/lib/components/feeds/fold-comments/index.ts @@ -1,16 +1,17 @@ import { ComponentMetadata } from '@/components/types' import { styledComponentEntry } from '@/components/styled-component' import { feedsUrlsWithoutDetail } from '@/core/utils/urls' +import { feedsCardsManager } from '@/components/feeds/api' +import { select } from '@/core/spin-query' +import { childListSubtree } from '@/core/observer' const entry = async () => { const { forEachFeedsCard } = await import('@/components/feeds/api') const { childList } = await import('@/core/observer') + const commentSelector = '.bb-comment' const injectButton = (card: HTMLElement) => { - const injectToComment = (panelArea: HTMLDivElement) => { - const button = document.createElement('div') - button.classList.add('fold-comment') - button.innerHTML = '收起评论' - const commentBox = panelArea.querySelector('.bb-comment') + const injectToComment = async (panelArea: HTMLElement, clickHandler: () => void) => { + const commentBox = await select(() => dq(panelArea, commentSelector)) if (commentBox.querySelector('.fold-comment') !== null) { return } @@ -18,30 +19,58 @@ const entry = async () => { console.error('未找到评论区') return } + const button = document.createElement('div') + button.classList.add('fold-comment') + button.innerHTML = '收起评论' button.addEventListener('click', () => { - const buttonBar = card.querySelector('.button-bar') as HTMLDivElement - const originalButton = buttonBar.children[1] as HTMLDivElement - if (originalButton !== null) { - originalButton.click() - card.scrollIntoView() - } + clickHandler() + card.scrollIntoView() }) commentBox.insertAdjacentElement('beforeend', button) } - const panelArea = card.querySelector('.panel-area') as HTMLDivElement - if (panelArea === null) { - console.log(card) + if (feedsCardsManager.managerType === 'v2') { + const existingComment = dq(card, commentSelector) as HTMLElement + const handler = () => { + const button = dq(card, '.bili-dyn-action.comment') as HTMLElement + button?.click() + } + if (!existingComment) { + const [observer] = childListSubtree(card, () => { + const panel = dq(card, commentSelector) + if (panel) { + injectToComment(card, handler) + observer.disconnect() + } + }) + } else { + injectToComment(existingComment, handler) + } + return } - if (panelArea.childElementCount === 0) { - const [observer] = childList(panelArea, records => { - if (records.length > 0) { - injectToComment(panelArea) - observer.disconnect() - } - }) - } else { - injectToComment(panelArea) + if (feedsCardsManager.managerType === 'v1') { + const panelArea = card.querySelector('.panel-area') as HTMLElement + if (panelArea === null) { + console.warn('panelArea not found', card) + return + } + const handler = () => { + const buttonBar = card.querySelector('.button-bar') + const originalButton = buttonBar.children[1] as HTMLElement + originalButton?.click() + } + if (panelArea.childElementCount === 0) { + const [observer] = childList(panelArea, records => { + if (records.length > 0) { + injectToComment(panelArea, handler) + observer.disconnect() + } + }) + } else { + injectToComment(panelArea, handler) + } + return } + console.warn('unrecognized card type', card) } forEachFeedsCard({ added: c => injectButton(c.element), diff --git a/src/components/feeds/api/manager/base.ts b/src/components/feeds/api/manager/base.ts index 8ebc9c6f9..ea7d8c3de 100644 --- a/src/components/feeds/api/manager/base.ts +++ b/src/components/feeds/api/manager/base.ts @@ -78,4 +78,6 @@ export abstract class FeedsCardsManager extends EventTarget { * @param cardsList 卡片列表元素 */ abstract updateCards(cardsList: HTMLElement): readonly [MutationObserver, MutationObserverInit] + /** 卡片管理器的标识名称, 组件如果需要对不同版本的动态做出行为区分, 可以读取这个字段 */ + abstract readonly managerType: string } diff --git a/src/components/feeds/api/manager/v1.ts b/src/components/feeds/api/manager/v1.ts index e886fd43b..fdc60ee49 100644 --- a/src/components/feeds/api/manager/v1.ts +++ b/src/components/feeds/api/manager/v1.ts @@ -155,6 +155,7 @@ const parseCard = async (element: HTMLElement): Promise => { /** 旧版动态卡片管理器实现 */ export class FeedsCardsManagerV1 extends FeedsCardsManager { + readonly managerType = 'v1' async addCard(node: Node) { if (!node) { return diff --git a/src/components/feeds/api/manager/v2.ts b/src/components/feeds/api/manager/v2.ts index e8066d521..8401ec2be 100644 --- a/src/components/feeds/api/manager/v2.ts +++ b/src/components/feeds/api/manager/v2.ts @@ -39,6 +39,7 @@ const isNodeValid = createNodeValidator('bili-dyn-item') /** 新版动态卡片管理器实现 */ export class FeedsCardsManagerV2 extends FeedsCardsManager { + readonly managerType = 'v2' async addCard(node: Node) { if (!isNodeValid(node)) { return