Bilibili-Evolved/registry/lib/components/style/hide/home-carousel/index.ts
2025-07-12 04:51:52 +08:00

106 lines
2.7 KiB
TypeScript

import { wrapSwitchOptions } from '@/components/switch-options'
import { ComponentEntry } from '@/components/types'
import { addComponentListener } from '@/core/settings'
import { select, selectAll } from '@/core/spin-query'
import { useScopedConsole } from '@/core/utils/log'
const logger = useScopedConsole('hideHomeCarousel')
// 轮播容器 mouseleave 事件拦截
const onCarouselMouseLeaveHandler = (event: MouseEvent) => {
event.stopPropagation()
}
const entry: ComponentEntry = async ({ metadata }) => {
// 监听【禁用轮播】选项
addComponentListener(
`${metadata.name}.disableCarousel`,
async (value: boolean) => {
const node = (await select('.vui_carousel')) as HTMLElement
if (!node) {
logger.error('找不到轮播容器节点')
return
}
if (value) {
node.addEventListener('mouseleave', onCarouselMouseLeaveHandler, true)
// 触发事件停止轮播
const event = new MouseEvent('mouseenter')
node.dispatchEvent(event)
} else {
node.removeEventListener('mouseleave', onCarouselMouseLeaveHandler, true)
// 触发事件恢复轮播
const event = new MouseEvent('mouseleave')
node.dispatchEvent(event)
}
},
true,
)
// 监听【图片模糊】选项
addComponentListener(
`${metadata.name}.blur`,
async (value: number) => {
const nodes = (await selectAll('.vui_carousel__slide')) as HTMLElement[]
if (!nodes || nodes.length === 0) {
logger.error('找不到轮播图片节点')
return
}
nodes.forEach(node => {
node.style.setProperty('--blur-amount', `${value}px`)
})
},
true,
)
}
export const component = wrapSwitchOptions({
name: 'hideHomeCarouselOptions',
switches: {
full: {
displayName: '隐藏轮播区域占位',
defaultValue: true,
},
transparent: {
displayName: '透明化轮播区域',
defaultValue: false,
},
picture: {
displayName: '隐藏轮播图片',
defaultValue: false,
},
footerText: {
displayName: '隐藏图片标题',
defaultValue: false,
},
},
})({
name: 'hideHomeCarousel',
displayName: '隐藏首页轮播图',
entry,
tags: [componentsTags.style],
urlInclude: [/^https:\/\/www\.bilibili\.com\/$/, /^https:\/\/www\.bilibili\.com\/index\.html$/],
instantStyles: [
{
name: 'hide-home-carousel',
style: () => import('./hide-home-carousel.scss'),
},
],
options: {
disableCarousel: {
displayName: '禁用轮播',
defaultValue: false,
},
blur: {
displayName: '图片模糊',
defaultValue: 0,
slider: {
min: 0,
max: 100,
step: 1,
},
},
},
})