Bilibili-Evolved/registry/lib/components/feeds/fold-comments/index.ts
2021-10-26 13:19:37 +08:00

63 lines
2.1 KiB
TypeScript

import { ComponentMetadata } from '@/components/types'
import { styledComponentEntry } from '@/components/styled-component'
import { feedsUrlsWithoutDetail } from '@/core/utils/urls'
const entry = async () => {
const { forEachFeedsCard } = await import('@/components/feeds/api')
const { childList } = await import('@/core/observer')
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')
if (commentBox.querySelector('.fold-comment') !== null) {
return
}
if (commentBox === null) {
console.error('未找到评论区')
return
}
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()
}
})
commentBox.insertAdjacentElement('beforeend', button)
}
const panelArea = card.querySelector('.panel-area') as HTMLDivElement
if (panelArea === null) {
console.log(card)
}
if (panelArea.childElementCount === 0) {
const [observer] = childList(panelArea, records => {
if (records.length > 0) {
injectToComment(panelArea)
observer.disconnect()
}
})
} else {
injectToComment(panelArea)
}
}
forEachFeedsCard({
added: c => injectButton(c.element),
})
}
export const component: ComponentMetadata = {
name: 'foldComments',
displayName: '快速收起评论',
description: {
'zh-CN': '动态里查看评论区时, 在底部添加一个`收起评论`按钮, 这样就不用再回到上面收起了.',
},
urlInclude: feedsUrlsWithoutDetail,
tags: [
componentsTags.feeds,
],
entry: styledComponentEntry(() => import('./fold-comment.scss'), entry),
}