From 219c402e346fab141127c5be6131846f506106a0 Mon Sep 17 00:00:00 2001 From: festoney8 Date: Fri, 12 Jan 2024 01:08:19 +0800 Subject: [PATCH] fix: fix radioItem bugs, update item info --- CHANGELOG.md | 3 ++- src/core/group.ts | 12 ++++++------ src/core/item.ts | 33 ++++++++++++++++++++------------- src/pages/common.ts | 2 +- src/pages/homepage.ts | 8 ++++---- src/pages/popular.ts | 5 ++--- 6 files changed, 35 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7eb7d96..ef5334ef 100644 --- 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 index 4ccad9eb..7216f40d 100644 --- 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', '
') 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 index fb3edd38..3ac22a85 100644 --- 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 ((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 index cd3d62a7..34d0cb25 100644 --- 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 index ce607c13..10e0ad5a 100644 --- 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 index 0c39766a..f8152d47 100644 --- 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 {