Bilibili-Evolved/registry/lib/components/feeds/image-auto-back-to-top/index.ts
2023-04-20 23:33:10 +08:00

70 lines
2.7 KiB
TypeScript

import { defineComponentMetadata } from '@/components/define'
import { forEachFeedsCard } from '@/components/feeds/api'
import { attributesSubtree, mutationObserve } from '@/core/observer'
import { useScopedConsole } from '@/core/utils/log'
import { feedsUrlsWithoutDetail } from '@/core/utils/urls'
export const component = defineComponentMetadata({
name: 'imageAutoBackToTop',
displayName: '动态看图自动回顶',
tags: [componentsTags.feeds],
urlInclude: feedsUrlsWithoutDetail,
entry: () => {
const console = useScopedConsole('imageAutoBackToTop')
forEachFeedsCard({
added: card => {
const scrollIntoView = (element: Element) => {
element?.scrollIntoView()
window.scrollBy({ top: -75 })
}
const albums = dqa(card.element, '.bili-album')
mutationObserve(albums, { childList: true, attributes: true, subtree: true }, records => {
records.forEach(record => {
const isAlbumVisible = () => {
if (
record.target instanceof HTMLElement &&
record.target.classList.contains('bili-album__watch') &&
record.attributeName === 'style'
) {
return record.target.style.display !== 'none'
}
return null
}
const hasAlbumPreviewNode = (nodeList: NodeList) =>
[...nodeList].some(node => {
return node instanceof HTMLElement && node.classList.contains('bili-album__watch')
})
const isImagePreviewExited =
hasAlbumPreviewNode(record.removedNodes) || isAlbumVisible() === false
if (isImagePreviewExited) {
scrollIntoView(card.element)
console.log('imagePreviewExited')
}
const isImagePreviewEntered =
hasAlbumPreviewNode(record.addedNodes) || isAlbumVisible() === true
if (isImagePreviewEntered) {
const controlBar = dq(card.element, '.bili-album__watch__control')
scrollIntoView(controlBar)
console.log('imagePreviewEntered')
}
})
})
attributesSubtree(card.element, records => {
records.forEach(record => {
if (
!(record.target instanceof HTMLImageElement) ||
!record.target.matches('.bili-album__watch__content img') ||
record.attributeName !== 'src'
) {
return
}
const controlBar = dq(card.element, '.bili-album__watch__control')
scrollIntoView(controlBar)
console.log('imagePreviewSwitched')
})
})
},
})
},
})