mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Support fold comments
This commit is contained in:
parent
6ea0b973e6
commit
f70dac57ba
@ -1,4 +1,4 @@
|
|||||||
.panel-area .bb-comment {
|
.bb-comment {
|
||||||
.fold-comment {
|
.fold-comment {
|
||||||
position: -webkit-sticky;
|
position: -webkit-sticky;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|||||||
@ -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),
|
||||||
|
|||||||
@ -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
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user