fix: 笔记目录及查找框不显示

pref: 笔记查找和书架搜索添加防抖
Higurashi-kagome · Sep 5, 2024 · f287ca4 · f287ca4
1 parent 3ea6f8d
commit f287ca4
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 147 deletions.
diff --git a/package.json b/package.json
@@ -1,82 +1,84 @@
-{
-  "name": "wereader",
-  "version": "2.24.2",
-  "description": "<h2 align=\"center\"><img src=\"res/README/icon128.png\" height=\"128\"><br>Wereader</h2>",
-  "main": "test.js",
-  "directories": {
-    "test": "test"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "eslint src --ext .ts",
-    "lint-fix": "eslint src --fix --ext .ts",
-    "build-dev": "webpack --config webpack/webpack.config.dev.js && node scripts/zip.js",
-    "build": "webpack --config webpack/webpack.config.production.js && node scripts/zip.js",
-    "pack-zip": "node scripts/zip.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Higurashi-kagome/wereader.git"
-  },
-  "keywords": [],
-  "author": "HL",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Higurashi-kagome/wereader/issues"
-  },
-  "homepage": "https://github.com/Higurashi-kagome/wereader#readme",
-  "devDependencies": {
-    "@babel/core": "^7.17.12",
-    "@babel/preset-env": "^7.17.12",
-    "@plasmo-corp/ewu": "^0.6.0",
-    "@types/arrive": "^2.4.1",
-    "@types/chart.js": "^2.9.37",
-    "@types/chrome": "^0.0.266",
-    "@types/jquery": "^3.5.14",
-    "@types/jquery-mousewheel": "^3.1.9",
-    "@types/lodash.escaperegexp": "^4.1.7",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.4",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
-    "archiver": "^5.3.1",
-    "arrive": "^2.4.1",
-    "babel-loader": "^8.2.5",
-    "chart.js": "^2.9.4",
-    "chrome-webstore-upload-cli": "^2.1.0",
-    "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.4",
-    "core-js": "^3.22.5",
-    "css-loader": "^6.7.1",
-    "dot-json": "^1.2.0",
-    "eslint": "^8.2.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-plugin-import": "^2.25.2",
-    "html-webpack-plugin": "^5.5.0",
-    "jquery": "^3.6.0",
-    "jquery-mousewheel": "^3.1.13",
-    "less": "^4.1.2",
-    "less-loader": "^11.0.0",
-    "lodash.escaperegexp": "^4.1.2",
-    "postcss": "^8.4.14",
-    "postcss-loader": "^7.0.0",
-    "postcss-preset-env": "^7.5.0",
-    "python-shell": "^3.0.1",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "string-replace-loader": "^3.1.0",
-    "style-loader": "^3.3.1",
-    "sweetalert2": "^9.15.1",
-    "terser-webpack-plugin": "^5.3.1",
-    "ts-loader": "^9.2.9",
-    "typescript": "^4.6.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.8.1",
-    "webpack-merge": "^5.8.0"
-  },
-  "dependencies": {
-    "@types/nunjucks": "^3.2.3",
-    "nunjucks": "^3.2.4"
-  }
-}
+{
+  "name": "wereader",
+  "version": "2.24.2",
+  "description": "<h2 align=\"center\"><img src=\"res/README/icon128.png\" height=\"128\"><br>Wereader</h2>",
+  "main": "test.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "lint": "eslint src --ext .ts",
+    "lint-fix": "eslint src --fix --ext .ts",
+    "build-dev": "webpack --config webpack/webpack.config.dev.js && node scripts/zip.js",
+    "build": "webpack --config webpack/webpack.config.production.js && node scripts/zip.js",
+    "pack-zip": "node scripts/zip.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Higurashi-kagome/wereader.git"
+  },
+  "keywords": [],
+  "author": "HL",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Higurashi-kagome/wereader/issues"
+  },
+  "homepage": "https://github.com/Higurashi-kagome/wereader#readme",
+  "devDependencies": {
+    "@babel/core": "^7.17.12",
+    "@babel/preset-env": "^7.17.12",
+    "@plasmo-corp/ewu": "^0.6.0",
+    "@types/arrive": "^2.4.1",
+    "@types/chart.js": "^2.9.37",
+    "@types/chrome": "^0.0.266",
+    "@types/jquery": "^3.5.14",
+    "@types/jquery-mousewheel": "^3.1.9",
+    "@types/lodash.escaperegexp": "^4.1.7",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "archiver": "^5.3.1",
+    "arrive": "^2.4.1",
+    "babel-loader": "^8.2.5",
+    "chart.js": "^2.9.4",
+    "chrome-webstore-upload-cli": "^2.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "core-js": "^3.22.5",
+    "css-loader": "^6.7.1",
+    "dot-json": "^1.2.0",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "html-webpack-plugin": "^5.5.0",
+    "jquery": "^3.6.0",
+    "jquery-mousewheel": "^3.1.13",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
+    "lodash.escaperegexp": "^4.1.2",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
+    "postcss-preset-env": "^7.5.0",
+    "python-shell": "^3.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "string-replace-loader": "^3.1.0",
+    "style-loader": "^3.3.1",
+    "sweetalert2": "^9.15.1",
+    "terser-webpack-plugin": "^5.3.1",
+    "ts-loader": "^9.2.9",
+    "typescript": "^4.6.3",
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.8.1",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.17.7",
+    "lodash": "^4.17.21",
+    "@types/nunjucks": "^3.2.3",
+    "nunjucks": "^3.2.4"
+  }
+}
diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -1,5 +1,6 @@
-export const noteClassName = 'wr_underline_wrapper'
-export const noteSelector = '.' + noteClassName
-export const IMG_TAG = '[插图]'
-export const scaleStorageKey = 'scale'
-export const notesCounterKey = 'notesCounter'
+export const noteClassName = 'wr_underline_wrapper'
+export const noteSelector = '.' + noteClassName
+export const IMG_TAG = '[插图]'
+export const scaleStorageKey = 'scale'
+export const notesCounterKey = 'notesCounter'
+export const noteBtnClassName = 'wr_note'
diff --git a/src/content/modules/content-notesMenu.ts b/src/content/modules/content-notesMenu.ts
@@ -1,52 +1,53 @@
-/* 给标注添加目录 */
-import $ from 'jquery'
-import { getCurrentChapTitle, loadCSS } from './content-utils'
-
-function initNotesMenu() {
-    console.log('initNotesMenu')
-    loadCSS('content/static/css/notes-menu.css', 'wereader-notes-menu-style-el')
-    window.addEventListener('load', () => {
-        const titleScrollSelector = '#sectionListItem_title_scroll'
-        // 出现切换章节且已经创建目录，则重新标记当前章节（点击 .note 再处理比较慢，所以提前监听，加快处理目录的速度）
-        // 后来发现好像和扩展也没多少关系，标注比较多时本来就比较慢...
-        const content = $('.app_content')[0] || $('.wr_horizontalReader_app_content')[0]
-        content.arrive('.readerChapterContent', function () {
-            const curChapTitle = getCurrentChapTitle()
-            if ($(titleScrollSelector).length) { // 如果已经创建目录
-                $(`${titleScrollSelector} a.current`).removeClass('current') // 删除之前章节标注
-                $(`${titleScrollSelector} a`).each((idx, el) => { // 标记当前章节
-                    const title = $(el)
-                    if (title.text() === curChapTitle) title.addClass('current')
-                })
-            }
-        })
-        document.querySelector('.note')!.addEventListener('click', () => {
-            if ($(titleScrollSelector).length) return // 已经创建则不需要重新创建
-            // 开始创建
-            const btn = $('<button class=\'notesMenuBtn\'>目录</button>').prependTo('#noteTools') // #noteTools 在 searchNote 中创建
-            const ul = $(`<ul id='${titleScrollSelector.replace('#', '')}'></ul>`).prependTo('#noteTools')
-            const curChapTitle = getCurrentChapTitle()
-            $('.sectionListItem_title').each((idx, titleEl) => {
-            // 标记当前章节
-                const titleText = titleEl.textContent
-                const className = (titleText === curChapTitle) ? 'current' : ''
-                // 生成目录
-                const li = $(`<li><a class='${className}'>${titleText}</a></li>`).click(() => {
-                    // 标题被搜索框排除时也能够跳转
-                    const titleParent = $(titleEl.parentElement!)
-                    const isHide = titleParent.css('display') === 'none'
-                    if (isHide) titleParent.css('display', 'block')
-                    titleEl.parentElement!.scrollIntoView({ behavior: 'smooth' })
-                    if (isHide) titleParent.css('display', 'none')
-                    ul.toggle()
-                })
-                ul.append(li)
-            })
-            btn.on('click', () => { // “目录”按钮点击事件
-                $(titleScrollSelector).toggle()
-            })
-        }, false)
-    })
-}
-
-export { initNotesMenu }
+/* 给标注添加目录 */
+import $ from 'jquery'
+import { getCurrentChapTitle, loadCSS } from './content-utils'
+import { noteBtnClassName } from '../../common/constants'
+
+function initNotesMenu() {
+    console.log('initNotesMenu')
+    loadCSS('content/static/css/notes-menu.css', 'wereader-notes-menu-style-el')
+    window.addEventListener('load', () => {
+        const titleScrollSelector = '#sectionListItem_title_scroll'
+        // 出现切换章节且已经创建目录，则重新标记当前章节（点击按钮再处理比较慢，所以提前监听，加快处理目录的速度）
+        // 后来发现好像和扩展也没多少关系，标注比较多时本来就比较慢...
+        const content = $('.app_content')[0] || $('.wr_horizontalReader_app_content')[0]
+        content.arrive('.readerChapterContent', function onArrive() {
+            const curChapTitle = getCurrentChapTitle()
+            if ($(titleScrollSelector).length) { // 如果已经创建目录
+                $(`${titleScrollSelector} a.current`).removeClass('current') // 删除之前章节标注
+                $(`${titleScrollSelector} a`).each((idx, el) => { // 标记当前章节
+                    const title = $(el)
+                    if (title.text() === curChapTitle) title.addClass('current')
+                })
+            }
+        })
+        document.querySelector(`.${noteBtnClassName}`)?.addEventListener('click', () => {
+            if ($(titleScrollSelector).length) return // 已经创建则不需要重新创建
+            // 开始创建
+            const btn = $('<button class=\'notesMenuBtn\'>目录</button>').prependTo('#noteTools') // #noteTools 在 searchNote 中创建
+            const ul = $(`<ul id='${titleScrollSelector.replace('#', '')}'></ul>`).prependTo('#noteTools')
+            const curChapTitle = getCurrentChapTitle()
+            $('.sectionListItem_title').each((idx, titleEl) => {
+            // 标记当前章节
+                const titleText = titleEl.textContent
+                const className = (titleText === curChapTitle) ? 'current' : ''
+                // 生成目录
+                const li = $(`<li><a class='${className}'>${titleText}</a></li>`).click(() => {
+                    // 标题被搜索框排除时也能够跳转
+                    const titleParent = $(titleEl.parentElement!)
+                    const isHide = titleParent.css('display') === 'none'
+                    if (isHide) titleParent.css('display', 'block')
+                    titleEl.parentElement!.scrollIntoView({ behavior: 'smooth' })
+                    if (isHide) titleParent.css('display', 'none')
+                    ul.toggle()
+                })
+                ul.append(li)
+            })
+            btn.on('click', () => { // “目录”按钮点击事件
+                $(titleScrollSelector).toggle()
+            })
+        }, false)
+    })
+}
+
+export { initNotesMenu }
diff --git a/src/content/modules/content-searchNote.ts b/src/content/modules/content-searchNote.ts
@@ -1,12 +1,15 @@
 import $ from 'jquery'
+import { debounce } from 'lodash'
+import { noteBtnClassName } from '../../common/constants'
 
 function initSearchNote() {
     console.log('initSearchNote')
-    document.querySelector('.note')!.addEventListener('click', function () {
+    document.querySelector(`.${noteBtnClassName}`)?.addEventListener('click', function onClick() {
         if (document.getElementById('searchNoteInput')) return
         $('.readerNotePanel').prepend('<div id=\'noteTools\' style="display: flex;flex-direction: column;align-items: stretch;"><input type="text" id="searchNoteInput" style="background:transparent; font-size: 16px;padding: 12px 20px 12px 40px;border:1px groove; flex-grow: 1;" placeholder="搜索..."></div>')
-        $('#searchNoteInput').on('keyup', function () {
-            const input = $(this)
+        const selector = '#searchNoteInput'
+        $(selector).on('keyup', debounce(function onSearch() {
+            const input = $(selector)
             const filter = (input.val() as string).toUpperCase()
             $('.sectionListItem').each((idx, el) => {
                 const div = $(el)
@@ -21,7 +24,7 @@ function initSearchNote() {
                     div.css('display', 'none')
                 }
             })
-        })
+        }, 500))
     })
 }
 

diff --git a/src/content/static/css/common.css b/src/content/static/css/common.css
@@ -4,3 +4,6 @@
 .cursor-default {
     cursor: default;
 }
+.readerNotePanel{
+    padding-top: 0px;
+}
diff --git a/src/popup/modules/popup-shelf-search.ts b/src/popup/modules/popup-shelf-search.ts
@@ -1,10 +1,12 @@
 import $ from 'jquery'
+import { debounce } from 'lodash'
 
 function createSearchInput() {
-    if ($('#searchBookInput').length) return
+    const selector = '#searchBookInput'
+    if ($(selector).length) return
     $('#shelf').prepend('<input type="text" id="searchBookInput" style="width: -webkit-fill-available; font-style: italic; font-size: 13px; padding: 10px 17px 10px 17px; border: 1px solid #ddd; " placeholder="搜索...">')
-    $('#searchBookInput').on('keyup', function () {
-        const val: string = $(this).val() as string
+    $(selector).on('keyup', debounce(function onSearch() {
+        const val: string = $(selector).val() as string
         const filter = val.toUpperCase()
         $('.dropdown-container > a').each((index, el) => {
             const a = $(el)
@@ -15,7 +17,7 @@ function createSearchInput() {
                 a.css('display', 'none')
             }
         })
-    })
+    }, 500))
 }
 
 export { createSearchInput }