fix: fix radioItem bugs, update item info

festoney8 · Jan 11, 2024 · 219c402 · 219c402
1 parent 1adf2b0
commit 219c402
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## 2.3.2
 
--   优化：N 选 1 的选项使用互斥开关
+-   新增：互斥开关
+-   优化：N 选 1 的单选选项使用互斥开关（首页布局、热门页布局、顶栏收藏/稍后再看）
 
 ## 2.3.1
 

diff --git a/src/core/group.ts b/src/core/group.ts
@@ -23,7 +23,7 @@ export class Group implements IGroup {
     /**
      * Group是每个页面的规则组，每个页面有多个组
      * @param groupID group的唯一ID
-     * @param title group标题, 显示在group顶部
+     * @param title group标题, 显示在group顶部, 可使用换行符'\n', 可使用HTML
      * @param items group内功能列表
      */
     constructor(
@@ -39,7 +39,7 @@ export class Group implements IGroup {
         const e = document.createElement('div')
         e.innerHTML = this.groupHTML.trim()
         e.querySelector('.bili-cleaner-group')!.id = this.groupID
-        e.querySelector('.bili-cleaner-group-title')!.textContent = this.title
+        e.querySelector('.bili-cleaner-group-title')!.innerHTML = this.title.replaceAll('\n', '<br>')
 
         const groupList = document.getElementById('bili-cleaner-group-list') as HTMLFormElement
         groupList.appendChild(e)
@@ -49,7 +49,7 @@ export class Group implements IGroup {
         try {
             this.items.forEach((e) => {
                 e.insertItem(this.groupID)
-                if (e instanceof CheckboxItem || e instanceof RadioItem) {
+                if (typeof e.watchItem === 'function') {
                     e.watchItem()
                 }
             })
@@ -66,7 +66,7 @@ export class Group implements IGroup {
     enableGroup(enableFunc = true) {
         try {
             this.items.forEach((e) => {
-                if (e instanceof CheckboxItem || e instanceof RadioItem) {
+                if (typeof e.enableItem === 'function') {
                     e.enableItem(enableFunc)
                 }
             })
@@ -80,7 +80,7 @@ export class Group implements IGroup {
     reloadGroup() {
         try {
             this.items.forEach((e) => {
-                if (e instanceof CheckboxItem) {
+                if (typeof e.reloadItem === 'function') {
                     e.reloadItem()
                 }
             })
@@ -94,7 +94,7 @@ export class Group implements IGroup {
     disableGroup() {
         try {
             this.items.forEach((e) => {
-                if (e instanceof CheckboxItem) {
+                if (typeof e.removeItemCSS === 'function') {
                     e.removeItemCSS()
                 }
             })

diff --git a/src/core/item.ts b/src/core/item.ts
@@ -5,6 +5,11 @@ import { debug, error } from '../utils/logger'
 interface IItem {
     readonly nodeHTML: myHTML
     insertItem(groupID: string): void
+    insertItemCSS?(): void
+    removeItemCSS?(): void
+    watchItem?(): void
+    enableItem?(): void
+    reloadItem?(): void
 }
 
 /** 普通开关 */
@@ -280,25 +285,26 @@ export class RadioItem implements IItem {
             this.itemEle = document.querySelector(`#${this.itemID} input`) as HTMLInputElement
             this.itemEle.addEventListener('change', (event: Event) => {
                 if ((<HTMLInputElement>event.target).checked) {
-                    debug(`radioItem ${this.itemID} change, now checked`)
+                    debug(`radioItem ${this.itemID} checked`)
                     this.setStatus(true)
                     this.insertItemCSS()
                     if (this.itemFunc !== undefined) {
                         this.itemFunc()
                     }
                     // 相同name的其他option自动置为uncheck, 但这一行为无法被监听, 需传入itemID逐一修改
-                    this.radioItemIDList.forEach((t) => {
-                        if (t === this.itemID) {
-                            return
+                    this.radioItemIDList.forEach((targetID) => {
+                        if (targetID !== this.itemID) {
+                            // 移除CSS, 修改互斥item状态
+                            const style = document.querySelector(
+                                `html>style[bili-cleaner-css=${targetID}]`,
+                            ) as HTMLStyleElement
+                            if (style) {
+                                style.parentNode?.removeChild(style)
+                                debug(`removeItemCSS ${targetID} OK`)
+                            }
+                            this.setStatus(false, targetID)
+                            debug(`disable same name radioItem ${targetID}, OK`)
                         }
-                        // 移除CSS, 修改互斥item状态
-                        const style = document.querySelector(`html>style[bili-cleaner-css=${t}]`) as HTMLStyleElement
-                        if (style) {
-                            style.parentNode?.removeChild(style)
-                            debug(`removeItemCSS ${this.itemID} OK`)
-                        }
-                        this.setStatus(false, t)
-                        debug(`disable radioItem ${this.itemID}, OK`)
                     })
                 }
             })
@@ -331,7 +337,8 @@ export class RadioItem implements IItem {
      * 重载item, 用于非页面刷新但URL变动情况, 此时已注入CSS只重新运行func, 如: 非刷新式切换视频
      */
     reloadItem() {
-        // this.getStatus()
+        // 存在其他item修改当前item状态的情况
+        this.getStatus()
         if (this.isItemFuncReload && this.isEnable && this.itemFunc instanceof Function) {
             try {
                 this.itemFunc()

diff --git a/src/pages/common.ts b/src/pages/common.ts
@@ -742,7 +742,7 @@ if (location.host != 'live.bilibili.com') {
             headerRightItems.push(
                 new RadioItem(
                     'common-nav-favorite-watchlater-default',
-                    '显示收藏 (官方默认)\n新增稍后再看时，自动切换为稍后再看',
+                    '显示 收藏 (官方默认)\n新增稍后再看视频时，自动切换为稍后再看',
                     'common-header-fav-option',
                     favoriteRadioItemIDList,
                     true,

diff --git a/src/pages/homepage.ts b/src/pages/homepage.ts
@@ -256,7 +256,7 @@ if (location.href.startsWith('https://www.bilibili.com/') && ['/index.html', '/'
         layoutItems.push(
             new RadioItem(
                 'homepage-layout-default',
-                '官方默认布局\n跟随页面缩放自动匹配 4列/5列',
+                '官方默认，自动匹配页面缩放',
                 'homepage-layout-option',
                 layoutRadioItemIDList,
                 true,
@@ -269,7 +269,7 @@ if (location.href.startsWith('https://www.bilibili.com/') && ['/index.html', '/'
         layoutItems.push(
             new RadioItem(
                 'homepage-layout-4-column',
-                '强制使用 4 列布局\n建议开启 增大视频信息字号',
+                '强制使用 4 列布局',
                 'homepage-layout-option',
                 layoutRadioItemIDList,
                 false,
@@ -299,7 +299,7 @@ if (location.href.startsWith('https://www.bilibili.com/') && ['/index.html', '/'
         layoutItems.push(
             new RadioItem(
                 'homepage-layout-6-column',
-                '强制使用 6 列布局\n建议 隐藏发布时间、隐藏视频tag，开启增大字号',
+                '强制使用 6 列布局 (刷新)\n建议 隐藏发布时间，可选 显示活动轮播',
                 'homepage-layout-option',
                 layoutRadioItemIDList,
                 false,
@@ -311,7 +311,7 @@ if (location.href.startsWith('https://www.bilibili.com/') && ['/index.html', '/'
             ),
         )
     }
-    homepageGroupList.push(new Group('homepage-layout', '页面强制布局 (默认关闭)', layoutItems))
+    homepageGroupList.push(new Group('homepage-layout', '页面强制布局 (单选)', layoutItems))
 
     // 视频列表part, rcmdListItems
     {

diff --git a/src/pages/popular.ts b/src/pages/popular.ts
@@ -206,12 +206,11 @@ if (location.href.includes('bilibili.com/v/popular/')) {
                 null,
             ),
         )
-
         // 强制使用 4 列布局
         layoutItems.push(
             new RadioItem(
                 'popular-layout-4-column',
-                '强制使用 4 列布局',
+                '强制使用 4 列布局\n默认屏蔽Tag和简介，下同',
                 'popular-layout-option',
                 layoutRadioItemIDList,
                 false,
@@ -697,7 +696,7 @@ if (location.href.includes('bilibili.com/v/popular/')) {
             ),
         )
     }
-    popularGroupList.push(new Group('popular-layout', '页面强制布局 (三选一, 实验性)', layoutItems))
+    popularGroupList.push(new Group('popular-layout', '页面强制布局 (单选，实验性)', layoutItems))
 
     // 综合热门part, hotItems
     {