Support fold comments

This commit is contained in:
the1812 2022-04-11 13:17:25 +08:00
parent 6ea0b973e6
commit f70dac57ba
5 changed files with 57 additions and 24 deletions

View File

@ -1,4 +1,4 @@
.panel-area .bb-comment { .bb-comment {
.fold-comment { .fold-comment {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;

View File

@ -1,16 +1,17 @@
import { ComponentMetadata } from '@/components/types' import { ComponentMetadata } from '@/components/types'
import { styledComponentEntry } from '@/components/styled-component' import { styledComponentEntry } from '@/components/styled-component'
import { feedsUrlsWithoutDetail } from '@/core/utils/urls' 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 entry = async () => {
const { forEachFeedsCard } = await import('@/components/feeds/api') const { forEachFeedsCard } = await import('@/components/feeds/api')
const { childList } = await import('@/core/observer') const { childList } = await import('@/core/observer')
const commentSelector = '.bb-comment'
const injectButton = (card: HTMLElement) => { const injectButton = (card: HTMLElement) => {
const injectToComment = (panelArea: HTMLDivElement) => { const injectToComment = async (panelArea: HTMLElement, clickHandler: () => void) => {
const button = document.createElement('div') const commentBox = await select(() => dq(panelArea, commentSelector))
button.classList.add('fold-comment')
button.innerHTML = '收起评论'
const commentBox = panelArea.querySelector('.bb-comment')
if (commentBox.querySelector('.fold-comment') !== null) { if (commentBox.querySelector('.fold-comment') !== null) {
return return
} }
@ -18,30 +19,58 @@ const entry = async () => {
console.error('未找到评论区') console.error('未找到评论区')
return return
} }
const button = document.createElement('div')
button.classList.add('fold-comment')
button.innerHTML = '收起评论'
button.addEventListener('click', () => { button.addEventListener('click', () => {
const buttonBar = card.querySelector('.button-bar') as HTMLDivElement clickHandler()
const originalButton = buttonBar.children[1] as HTMLDivElement card.scrollIntoView()
if (originalButton !== null) {
originalButton.click()
card.scrollIntoView()
}
}) })
commentBox.insertAdjacentElement('beforeend', button) commentBox.insertAdjacentElement('beforeend', button)
} }
const panelArea = card.querySelector('.panel-area') as HTMLDivElement if (feedsCardsManager.managerType === 'v2') {
if (panelArea === null) { const existingComment = dq(card, commentSelector) as HTMLElement
console.log(card) 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) { if (feedsCardsManager.managerType === 'v1') {
const [observer] = childList(panelArea, records => { const panelArea = card.querySelector('.panel-area') as HTMLElement
if (records.length > 0) { if (panelArea === null) {
injectToComment(panelArea) console.warn('panelArea not found', card)
observer.disconnect() return
} }
}) const handler = () => {
} else { const buttonBar = card.querySelector('.button-bar')
injectToComment(panelArea) 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({ forEachFeedsCard({
added: c => injectButton(c.element), added: c => injectButton(c.element),

View File

@ -78,4 +78,6 @@ export abstract class FeedsCardsManager extends EventTarget {
* @param cardsList * @param cardsList
*/ */
abstract updateCards(cardsList: HTMLElement): readonly [MutationObserver, MutationObserverInit] abstract updateCards(cardsList: HTMLElement): readonly [MutationObserver, MutationObserverInit]
/** 卡片管理器的标识名称, 组件如果需要对不同版本的动态做出行为区分, 可以读取这个字段 */
abstract readonly managerType: string
} }

View File

@ -155,6 +155,7 @@ const parseCard = async (element: HTMLElement): Promise<FeedsCard> => {
/** 旧版动态卡片管理器实现 */ /** 旧版动态卡片管理器实现 */
export class FeedsCardsManagerV1 extends FeedsCardsManager { export class FeedsCardsManagerV1 extends FeedsCardsManager {
readonly managerType = 'v1'
async addCard(node: Node) { async addCard(node: Node) {
if (!node) { if (!node) {
return return

View File

@ -39,6 +39,7 @@ const isNodeValid = createNodeValidator('bili-dyn-item')
/** 新版动态卡片管理器实现 */ /** 新版动态卡片管理器实现 */
export class FeedsCardsManagerV2 extends FeedsCardsManager { export class FeedsCardsManagerV2 extends FeedsCardsManager {
readonly managerType = 'v2'
async addCard(node: Node) { async addCard(node: Node) {
if (!isNodeValid(node)) { if (!isNodeValid(node)) {
return return