Merge pull request #70 from festoney8/dev

merge dev to main, v3.5.2

CHANGELOG.md

@@ -1,5 +1,12 @@
 # CHANGELOG
 
+## 3.5.2
+
+-   新增：动态页 交换左栏和右栏位置
+-   新增：动态页 双行显示UP主列表
+-   新增：动态页 扩增中栏宽度
+-   优化：插件菜单相关功能
+
 ## 3.5.1
 
 -   优化：视频质量计算参数

src/components/panel.ts

@@ -1,6 +1,6 @@
 import { debugComponents as debug, error } from '../utils/logger'
 
-class Panel {
+export class Panel {
     panelCSS = `
     #bili-cleaner{position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);width:max(32vw,300px);height:90vh;border-radius:10px;background:#f4f5f7;box-shadow:0 0 8px rgba(0,0,0,.25);overflow:auto;z-index:2147483640;overscroll-behavior:contain}#bili-cleaner #bili-cleaner-bar{width:max(32vw,300px);height:6vh;background:#00aeec;border-top-left-radius:10px;border-top-right-radius:10px;cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}#bili-cleaner #bili-cleaner-bar #bili-cleaner-title{width:max(32vw,300px);height:6vh;display:flex;justify-content:center;align-items:center;color:#fff;font-weight:bold;font-size:22px}#bili-cleaner #bili-cleaner-bar #bili-cleaner-title span{text-align:center}#bili-cleaner #bili-cleaner-bar #bili-cleaner-close{position:absolute;top:0;right:0;width:6vh;height:6vh;border-radius:6vh;display:flex;justify-content:center;align-items:center;cursor:auto}#bili-cleaner #bili-cleaner-bar #bili-cleaner-close:hover{background:rgba(255,255,255,.2)}#bili-cleaner #bili-cleaner-bar #bili-cleaner-close svg{text-align:center}#bili-cleaner #bili-cleaner-group-list{height:84vh;overflow:auto;scrollbar-width:none !important;overscroll-behavior:contain}#bili-cleaner #bili-cleaner-group-list::-webkit-scrollbar{display:none}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group{margin:14px;background:#fff;border-radius:6px;padding:8px 16px;border:1px solid #ddd;-webkit-user-select:none;-moz-user-select:none;user-select:none}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group hr{border:1px solid #eee;margin:5px 0 10px 0}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-group-title{font-size:20px;font-weight:bold;padding:2px;color:#000;letter-spacing:1px}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-list label{display:flex;align-items:center;margin:6px 0 6px 10px;font-size:16px;color:#000}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-list hr{border:1px solid #eee;margin:15px 20px}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox{width:50px;min-width:50px;height:27px;margin:0 1em 0 0;position:relative;border:1px solid #dfdfdf;background-color:#fdfdfd;box-shadow:#dfdfdf 0 0 0 0 inset;border-radius:50px;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox:before{content:"";width:25px;height:25px;position:absolute;top:0px;left:0;border-radius:50px;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5)}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox:checked{border-color:#00aeec;box-shadow:#00aeec 0 0 0 16px inset;background-color:#00aeec}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-checkbox:checked:before{left:25px}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-number{width:50px;min-width:50px;height:27px;margin:0 .5em 0 .5em;position:relative;border:1px solid #dfdfdf;background-color:#fdfdfd;box-shadow:#dfdfdf 0 0 0 0 inset;border-radius:5px;-moz-appearance:none;appearance:none;-webkit-appearance:none;text-align:center;color:blue;font-size:16px;-moz-appearance:textfield}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-number::-webkit-inner-spin-button,#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-number::-webkit-inner-spin-button{-webkit-appearance:none}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-button{width:50px;background-color:#fff;border:1px solid #666;border-radius:6px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:16px;margin:0 1em 0 0;outline:none;padding:5px 0;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;transition:box-shadow .2s,transform .1s;-moz-user-select:none;user-select:none;-webkit-user-select:none}#bili-cleaner #bili-cleaner-group-list .bili-cleaner-group .bili-cleaner-item-button:active{background-color:#f7f7f7;border-color:#000;transform:scale(0.96)}#bili-cleaner-wordlist{background:#fff;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.25);overflow:hidden;position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;flex-direction:column;z-index:2147483641;overscroll-behavior:contain}#bili-cleaner-wordlist .wordlist-header{background-color:#00aeec;color:#fff;font-size:22px;font-weight:bold;margin:0;height:100%;width:100%;line-height:36px;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}#bili-cleaner-wordlist .wordlist-description{font-size:16px;margin:6px auto;line-height:18px;text-align:center}#bili-cleaner-wordlist textarea.wordlist-body{width:400px;height:500px;margin:0 12px;border:2px solid #ccc;overflow-y:scroll;font-size:16px;line-height:22px;padding:5px 10px;flex-grow:1;resize:none;overscroll-behavior:contain}#bili-cleaner-wordlist textarea.wordlist-body:focus{outline:none !important}#bili-cleaner-wordlist .wordlist-footer{height:50px;display:flex;justify-content:space-evenly;padding:0 10px;align-items:center}#bili-cleaner-wordlist .wordlist-footer button{width:100px;height:30px;border-radius:5px;border:1px solid #666;font-size:18px}#bili-cleaner-wordlist .wordlist-footer button:hover{background-color:#666;color:#fff}
     `
@@ -21,6 +21,8 @@ class Panel {
     // mode用于记录panel中功能类型, 如 屏蔽元素/视频过滤器
     mode: string | undefined = undefined
 
+    isShowing = false
+
     constructor() {}
 
     /** 向document.head中添加panel CSS */
@@ -129,13 +131,15 @@ class Panel {
             // 使用 display:none 代替 remove(), 同一页面内再次打开panel记录上次位置
             panel.style.display = 'none'
         }
+        this.isShowing = false
     }
     /** 显示panel */
     show() {
         const panel = document.getElementById('bili-cleaner') as HTMLFormElement
         if (panel) {
             panel.style.removeProperty('display')
         }
+        this.isShowing = true
     }
     /** 清空panel内groups, 用于替换功能group */
     clearGroups() {
@@ -146,7 +150,3 @@ class Panel {
         debug('panel clearGroups OK')
     }
 }
-
-// panel全局单例
-const panelInstance = new Panel()
-export default panelInstance

src/components/sideBtn.ts

@@ -31,8 +31,7 @@ export class SideBtn {
     constructor(
         private btnID: string,
         private btnContent: string,
-        private showFunc: () => void,
-        private hideFunc: () => void,
+        private btnFunc: () => void,
     ) {}
 
     enable() {
@@ -88,15 +87,8 @@ export class SideBtn {
             })
 
             // 单击事件
-            let isShowing = false
             node.addEventListener('click', () => {
-                if (!isShowing) {
-                    this.showFunc()
-                    isShowing = true
-                } else {
-                    this.hideFunc()
-                    isShowing = false
-                }
+                this.btnFunc()
             })
 
             // 插入节点

src/main.ts

@@ -1,5 +1,5 @@
 // @ts-ignore isolatedModules
-import { GM_getValue, GM_registerMenuCommand } from '$'
+import { GM_getValue, GM_registerMenuCommand, GM_unregisterMenuCommand } from '$'
 import { log, error, debugMain as debug } from './utils/logger'
 import { init } from './init'
 import { Group } from './components/group'
@@ -28,23 +28,13 @@ import { searchPageVideoFilterGroupList } from './filters/videoFilter/pages/sear
 import { SideBtn } from './components/sideBtn'
 import { channelGroupList } from './rules/channel'
 import { channelPageVideoFilterGroupList } from './filters/videoFilter/pages/channel'
-import panelInstance from './components/panel'
 import { videoPageCommentFilterGroupList } from './filters/commentFilter/pages/video'
 import { spacePageVideoFilterGroupList } from './filters/videoFilter/pages/space'
-
-log('script start')
+import { Panel } from './components/panel'
 
 const main = async () => {
-    // 初始化
-    try {
-        await init()
-    } catch (err) {
-        error(err)
-        error('init error, try continue')
-    }
-
     // 载入元素屏蔽规则
-    const RULE_GROUPS: Group[] = [
+    const RULE_GROUPS = [
         ...homepageGroupList,
         ...popularGroupList,
         ...videoGroupList,
@@ -58,7 +48,7 @@ const main = async () => {
     RULE_GROUPS.forEach((e) => e.enableGroup())
 
     // 载入视频过滤器
-    const VIDEO_FILTER_GROUPS: Group[] = [
+    const VIDEO_FILTER_GROUPS = [
         ...homepagePageVideoFilterGroupList,
         ...videoPageVideoFilterGroupList,
         ...popularPageVideoFilterGroupList,
@@ -69,7 +59,7 @@ const main = async () => {
     VIDEO_FILTER_GROUPS.forEach((e) => e.enableGroup())
 
     // 载入评论过滤器
-    const COMMENT_FILTER_GROUPS: Group[] = [...videoPageCommentFilterGroupList]
+    const COMMENT_FILTER_GROUPS = [...videoPageCommentFilterGroupList]
     COMMENT_FILTER_GROUPS.forEach((e) => e.enableGroup())
 
     // 监听各种形式的URL变化 (普通监听无法检测到切换视频)
@@ -85,137 +75,142 @@ const main = async () => {
     // 全局启动/关闭快捷键 chrome: Alt+B，firefox: Ctrl+Alt+B
     let isGroupEnable = true
     document.addEventListener('keydown', (event) => {
-        let flag = false
-        if (event.altKey && event.ctrlKey && (event.key === 'b' || event.key === 'B')) {
-            flag = true
-        } else if (event.altKey && (event.key === 'b' || event.key === 'B')) {
-            if (navigator.userAgent.toLocaleLowerCase().includes('chrome')) {
-                flag = true
-            }
-        }
-        if (flag) {
+        if (
+            event.altKey &&
+            ['b', 'B'].includes(event.key) &&
+            (event.ctrlKey || navigator.userAgent.toLocaleLowerCase().includes('chrome'))
+        ) {
             debug('hotkey detected')
             if (isGroupEnable) {
                 RULE_GROUPS.forEach((e) => e.disableGroup())
-                isGroupEnable = false
             } else {
                 RULE_GROUPS.forEach((e) => e.enableGroup(false))
-                isGroupEnable = true
             }
+            isGroupEnable = !isGroupEnable
         }
     })
 
-    // 注册油猴菜单, 根据功能模式显示不同panel
+    // 创建panel，插入功能
+    const panel = new Panel()
     const createPanelWithMode = (mode: string, groups: Group[]) => {
-        switch (panelInstance.mode) {
+        switch (panel.mode) {
             case undefined:
-                panelInstance.create()
-                panelInstance.mode = mode
+                panel.create()
+                panel.mode = mode
                 groups.forEach((e) => {
                     e.insertGroup()
                     e.insertGroupItems()
                 })
-                panelInstance.show()
+                panel.show()
                 break
             case mode:
-                panelInstance.show()
+                panel.show()
                 break
             default:
-                panelInstance.clearGroups()
-                panelInstance.mode = mode
+                panel.clearGroups()
+                panel.mode = mode
                 groups.forEach((e) => {
                     e.insertGroup()
                     e.insertGroupItems()
                 })
-                panelInstance.show()
+                panel.show()
         }
     }
-    // 页面净化设置
-    GM_registerMenuCommand('✅页面净化设置', () => {
-        createPanelWithMode('rule', RULE_GROUPS)
-    })
-    // 视频过滤设置
-    if (
-        isPageHomepage() ||
-        isPageVideo() ||
-        isPagePopular() ||
-        isPageSearch() ||
-        isPageChannel() ||
-        isPagePlaylist() ||
-        isPageSpace()
-    ) {
-        GM_registerMenuCommand('✅视频过滤设置', () => {
-            createPanelWithMode('videoFilter', VIDEO_FILTER_GROUPS)
-        })
-    }
-    // 评论过滤设置
-    if (isPageVideo() || isPageBangumi() || isPagePlaylist()) {
-        GM_registerMenuCommand('✅评论过滤设置', () => {
-            createPanelWithMode('commentFilter', COMMENT_FILTER_GROUPS)
-        })
+
+    // 记录reg menu ID
+    const regIDs: string[] = []
+    const unregister = () => {
+        regIDs.forEach((regID) => GM_unregisterMenuCommand(regID))
+        regIDs.splice(0, regIDs.length)
     }
-    // 视频过滤 快捷按钮
-    if (
-        isPageHomepage() ||
-        isPageVideo() ||
-        isPagePopular() ||
-        isPageSearch() ||
-        isPageChannel() ||
-        isPagePlaylist() ||
-        isPageSpace()
-    ) {
-        const videoFilterSideBtnID = 'video-filter-side-btn'
-        const sideBtn = new SideBtn(
-            videoFilterSideBtnID,
-            '视频过滤',
-            () => {
-                createPanelWithMode('videoFilter', VIDEO_FILTER_GROUPS)
-            },
-            () => {
-                panelInstance.hide()
-            },
-        )
-        if (GM_getValue(`BILICLEANER_${videoFilterSideBtnID}`, false)) {
-            sideBtn.enable()
-            GM_registerMenuCommand('⚡️关闭 视频过滤 快捷按钮 (刷新)', () => {
-                sideBtn.disable()
+    const register = () => {
+        regIDs.push(GM_registerMenuCommand('✅页面净化设置', () => createPanelWithMode('rule', RULE_GROUPS)))
+        if (
+            isPageHomepage() ||
+            isPageVideo() ||
+            isPagePopular() ||
+            isPageSearch() ||
+            isPageChannel() ||
+            isPagePlaylist() ||
+            isPageSpace()
+        ) {
+            regIDs.push(
+                GM_registerMenuCommand('✅视频过滤设置', () => createPanelWithMode('videoFilter', VIDEO_FILTER_GROUPS)),
+            )
+        }
+        if (isPageVideo() || isPageBangumi() || isPagePlaylist()) {
+            regIDs.push(
+                GM_registerMenuCommand('✅评论过滤设置', () =>
+                    createPanelWithMode('commentFilter', COMMENT_FILTER_GROUPS),
+                ),
+            )
+        }
+        // 快捷按钮
+        if (
+            isPageHomepage() ||
+            isPageVideo() ||
+            isPagePopular() ||
+            isPageSearch() ||
+            isPageChannel() ||
+            isPagePlaylist() ||
+            isPageSpace()
+        ) {
+            const videoFilterSideBtnID = 'video-filter-side-btn'
+            const sideBtn = new SideBtn(videoFilterSideBtnID, '视频过滤', () => {
+                panel.isShowing ? panel.hide() : createPanelWithMode('videoFilter', VIDEO_FILTER_GROUPS)
             })
-        } else {
-            GM_registerMenuCommand('⚡️启用 视频过滤 快捷按钮 (刷新)', () => {
+            if (GM_getValue(`BILICLEANER_${videoFilterSideBtnID}`, false)) {
                 sideBtn.enable()
-            })
+                regIDs.push(
+                    GM_registerMenuCommand('⚡️关闭 视频过滤 快捷按钮', () => {
+                        sideBtn.disable()
+                        unregister()
+                        register()
+                    }),
+                )
+            } else {
+                regIDs.push(
+                    GM_registerMenuCommand('⚡️启用 视频过滤 快捷按钮', () => {
+                        sideBtn.enable()
+                        unregister()
+                        register()
+                    }),
+                )
+            }
         }
-    }
-    // 评论过滤 快捷按钮
-    if (isPageVideo() || isPageBangumi() || isPagePlaylist()) {
-        const commentFilterSideBtnID = 'comment-filter-side-btn'
-        const sideBtn = new SideBtn(
-            commentFilterSideBtnID,
-            '评论过滤',
-            () => {
-                createPanelWithMode('commentFilter', COMMENT_FILTER_GROUPS)
-            },
-            () => {
-                panelInstance.hide()
-            },
-        )
-        if (GM_getValue(`BILICLEANER_${commentFilterSideBtnID}`, false)) {
-            sideBtn.enable()
-            GM_registerMenuCommand('⚡️关闭 评论过滤 快捷按钮 (刷新)', () => {
-                sideBtn.disable()
+        if (isPageVideo() || isPageBangumi() || isPagePlaylist()) {
+            const commentFilterSideBtnID = 'comment-filter-side-btn'
+            const sideBtn = new SideBtn(commentFilterSideBtnID, '评论过滤', () => {
+                panel.isShowing ? panel.hide() : createPanelWithMode('commentFilter', COMMENT_FILTER_GROUPS)
             })
-        } else {
-            GM_registerMenuCommand('⚡️启用 评论过滤 快捷按钮 (刷新)', () => {
+            if (GM_getValue(`BILICLEANER_${commentFilterSideBtnID}`, false)) {
                 sideBtn.enable()
-            })
+                regIDs.push(
+                    GM_registerMenuCommand('⚡️关闭 评论过滤 快捷按钮', () => {
+                        sideBtn.disable()
+                        unregister()
+                        register()
+                    }),
+                )
+            } else {
+                regIDs.push(
+                    GM_registerMenuCommand('⚡️启用 评论过滤 快捷按钮', () => {
+                        sideBtn.enable()
+                        unregister()
+                        register()
+                    }),
+                )
+            }
         }
     }
-    debug('register menu complete')
+    register()
 }
 
 try {
+    log('script start')
+    await init()
     await main()
+    log('script end')
 } catch (err) {
     error(err)
 }
-log('script end')

src/rules/channel.ts

@@ -268,7 +268,7 @@ if (isPageChannel()) {
             itemID: 'channel-hide-ad-banner',
             description: '隐藏 广告banner',
             defaultStatus: true,
-            itemCSS: `.eva-banner:has([href*="cm.bilibili.com"]) {display: none !important;}
+            itemCSS: `.eva-banner {display: none !important;}
                     .bili-grid {margin-bottom: 20px !important;}`,
         }),
         // 隐藏 发布时间