Bilibili-Evolved/registry/lib/components/style/simplify/comments/index.ts
2024-10-13 19:28:38 +08:00

104 lines
3.0 KiB
TypeScript

import { wrapSwitchOptions } from '@/components/switch-options'
const name = 'simplifyComments'
export const component = wrapSwitchOptions({
name: 'simplifyOptions',
switchProps: {
checkedIcon: 'mdi-checkbox-marked-circle',
notCheckedIcon: 'mdi-checkbox-blank-circle-outline',
},
dimAt: false,
switches: {
userLevel: {
defaultValue: true,
displayName: '用户等级',
},
decorateAndTime: {
defaultValue: true,
displayName: '装扮 & 时间',
},
subReplyNewLine: {
defaultValue: true,
displayName: '回复换行',
},
replyEditor: {
defaultValue: true,
displayName: '编辑框',
},
fansMedal: {
defaultValue: false,
displayName: '粉丝勋章',
},
eventBanner: {
defaultValue: true,
displayName: '小喇叭横幅',
},
},
})({
name,
displayName: '简化评论区',
entry: async ({ metadata, settings }) => {
const { addStyle, getDefaultStyleID } = await import('@/core/style')
const { isContainerStyleQuerySupported } = await import('@/core/container-query')
const { addComponentListener } = await import('@/core/settings')
addComponentListener(
metadata.name,
(value: boolean) => {
document.body.classList.toggle('simplify-comment', value)
},
true,
)
// 等 Firefox 支持 [Container Style Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_size_and_style_queries#container_style_queries_2) 可去除此判断
if (isContainerStyleQuerySupported()) {
const { shadowRootStyles } = await import('@/core/shadow-root')
const v3Style = await import('./comments-v3.scss').then(m => m.default)
shadowRootStyles.toggleWithComponent(metadata.name, { id: name, style: v3Style })
} else {
const { shadowRootStyles } = await import('@/core/shadow-root')
const firefoxStyles = require.context('./comments-v3-firefox', false, /\.scss$/)
Object.keys(settings.options).forEach(key => {
if (!key.startsWith('switch-')) {
return
}
const id = `${component.name}.${key}`
const styleName = lodash.kebabCase(key.replace(/^switch-/, ''))
const path = `./${styleName}.scss`
if (!firefoxStyles.keys().includes(path)) {
return
}
addComponentListener(
id,
(value: boolean) => {
if (value) {
const style = firefoxStyles(path) as string
addStyle(style, styleName)
shadowRootStyles.addStyle({
id,
style,
})
} else {
document.getElementById(getDefaultStyleID(styleName))?.remove()
shadowRootStyles.removeStyle(id)
}
},
true,
)
})
}
},
instantStyles: [
{
name: `${name}v1`,
style: () => import('./comments.scss'),
},
{
name: `${name}v2`,
style: () => import('./comments-v2.scss'),
},
],
tags: [componentsTags.style],
})