diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 5407e10..7a70208 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Aktivieren" - } + }, + "search_placeholder": { + "message": "Suchen..." +} } \ No newline at end of file diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 18648ed..7c2f11f 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Enable" + }, + "search_placeholder": { + "message": "Search..." } } \ No newline at end of file diff --git a/_locales/es/messages.json b/_locales/es/messages.json index 496971a..8eed28a 100644 --- a/_locales/es/messages.json +++ b/_locales/es/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Activar" + }, + "search_placeholder": { + "message": "Buscar..." } } \ No newline at end of file diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json index bf11147..93ef3bf 100644 --- a/_locales/fr/messages.json +++ b/_locales/fr/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Activer" + }, + "search_placeholder": { + "message": "Rechercher..." } } \ No newline at end of file diff --git a/_locales/hi/messages.json b/_locales/hi/messages.json index 2b886e9..0fc8646 100644 --- a/_locales/hi/messages.json +++ b/_locales/hi/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "सक्षम करें" + }, + "search_placeholder": { + "message": "खोजें..." } } \ No newline at end of file diff --git a/_locales/it/messages.json b/_locales/it/messages.json index 5b72e8f..9a467b0 100644 --- a/_locales/it/messages.json +++ b/_locales/it/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Attiva" + }, + "search_placeholder": { + "message": "Cerca..." } } \ No newline at end of file diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json index 89f8d0a..205fcee 100644 --- a/_locales/ja/messages.json +++ b/_locales/ja/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "有効にする" + }, + "search_placeholder": { + "message": "検索..." } } \ No newline at end of file diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json index c664640..2a12a44 100644 --- a/_locales/ko/messages.json +++ b/_locales/ko/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "활성화" + }, + "search_placeholder": { + "message": "검색..." } } \ No newline at end of file diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json index 1f2bbb9..901ae74 100644 --- a/_locales/nl/messages.json +++ b/_locales/nl/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Inschakelen" + }, + "search_placeholder": { + "message": "Zoeken..." } } \ No newline at end of file diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json index 2243346..353fc65 100644 --- a/_locales/pl/messages.json +++ b/_locales/pl/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Włącz" + }, + "search_placeholder": { + "message": "Szukaj..." } } \ No newline at end of file diff --git a/_locales/pt_BR/messages.json b/_locales/pt_BR/messages.json index c5e6e67..be27005 100644 --- a/_locales/pt_BR/messages.json +++ b/_locales/pt_BR/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Ativar" - } + }, + "search_placeholder": { + "message": "Pesquisar..." +} } \ No newline at end of file diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index 2165a3a..6700373 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Вкл" + }, + "search_placeholder": { + "message": "Поиск..." } } \ No newline at end of file diff --git a/_locales/tr/messages.json b/_locales/tr/messages.json index ad6574c..9f61e54 100644 --- a/_locales/tr/messages.json +++ b/_locales/tr/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "Etkinleştir" + }, + "search_placeholder": { + "message": "Ara..." } } \ No newline at end of file diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json index 71ed5ea..86d7153 100644 --- a/_locales/zh_CN/messages.json +++ b/_locales/zh_CN/messages.json @@ -88,5 +88,8 @@ }, "global_highlight_toggle": { "message": "启用" - } + }, + "search_placeholder": { + "message": "搜索..." +} } \ No newline at end of file diff --git a/popup/popup.css b/popup/popup.css index 6940e2d..82f6a6a 100644 --- a/popup/popup.css +++ b/popup/popup.css @@ -236,6 +236,12 @@ button.danger:hover { gap: 6px; } +#wordSearch{ + width:100%; + margin-bottom:8px; + margin-top: 8px; +} + #wordList { margin-top: 8px; position: relative; diff --git a/popup/popup.html b/popup/popup.html index 2132ba6..54a8279 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -77,6 +77,7 @@ +
diff --git a/popup/popup.js b/popup/popup.js index 525b5b8..8c8ad1f 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -11,6 +11,7 @@ let currentListIndex = 0; let saveTimeout; let selectedCheckboxes = new Set(); let globalHighlightEnabled = true; +let wordSearchQuery = ""; function escapeHtml(str) { return str.replace(/[&<>"']/g, function (m) { @@ -108,7 +109,12 @@ function updateListForm() { function renderWords() { const list = lists[currentListIndex]; - const fragment = document.createDocumentFragment(); + + let filteredWords = list.words; + if (wordSearchQuery.trim()) { + const q = wordSearchQuery.trim().toLowerCase(); + filteredWords = list.words.filter(w => w.wordStr.toLowerCase().includes(q)); + } const itemHeight = 32; const containerHeight = wordList.clientHeight; @@ -116,18 +122,19 @@ function renderWords() { const startIndex = Math.floor(scrollTop / itemHeight); const endIndex = Math.min( startIndex + Math.ceil(containerHeight / itemHeight) + 2, - list.words.length + filteredWords.length ); wordList.innerHTML = ''; const spacer = document.createElement('div'); spacer.style.position = 'relative'; - spacer.style.height = `${list.words.length * itemHeight}px`; + spacer.style.height = `${filteredWords.length * itemHeight}px`; spacer.style.width = '100%'; for (let i = startIndex; i < endIndex; i++) { - const w = list.words[i]; + const w = filteredWords[i]; + if (!w) continue; const container = document.createElement("div"); container.style.height = `${itemHeight}px`; container.style.position = 'absolute'; @@ -143,18 +150,20 @@ function renderWords() { container.style.background = 'var(--highlight-tag)'; container.style.border = '1px solid var(--highlight-tag-border)'; + const realIndex = list.words.indexOf(w); + const cbSelect = document.createElement("input"); cbSelect.type = "checkbox"; cbSelect.className = "word-checkbox"; - cbSelect.dataset.index = i; - if (selectedCheckboxes.has(i)) { + cbSelect.dataset.index = realIndex; + if (selectedCheckboxes.has(realIndex)) { cbSelect.checked = true; } const inputWord = document.createElement("input"); inputWord.type = "text"; inputWord.value = w.wordStr; - inputWord.dataset.wordEdit = i; + inputWord.dataset.wordEdit = realIndex; inputWord.style.flexGrow = '1'; inputWord.style.minWidth = '0'; inputWord.style.padding = '4px 8px'; @@ -166,7 +175,7 @@ function renderWords() { const inputBg = document.createElement("input"); inputBg.type = "color"; inputBg.value = w.background || list.background; - inputBg.dataset.bgEdit = i; + inputBg.dataset.bgEdit = realIndex; inputBg.style.width = '24px'; inputBg.style.height = '24px'; inputBg.style.flexShrink = '0'; @@ -174,7 +183,7 @@ function renderWords() { const inputFg = document.createElement("input"); inputFg.type = "color"; inputFg.value = w.foreground || list.foreground; - inputFg.dataset.fgEdit = i; + inputFg.dataset.fgEdit = realIndex; inputFg.style.width = '24px'; inputFg.style.height = '24px'; inputFg.style.flexShrink = '0'; @@ -189,7 +198,7 @@ function renderWords() { const cbActive = document.createElement("input"); cbActive.type = "checkbox"; cbActive.checked = w.active !== false; - cbActive.dataset.activeEdit = i; + cbActive.dataset.activeEdit = realIndex; cbActive.className = "switch"; activeContainer.appendChild(cbActive); @@ -207,7 +216,7 @@ function renderWords() { const wordCount = document.getElementById('wordCount'); if (wordCount) { - wordCount.textContent = list.words.length; + wordCount.textContent = filteredWords.length; } } @@ -221,7 +230,6 @@ document.addEventListener('DOMContentLoaded', () => { renderWords(); }; - // Add event listener for the global toggle document.getElementById("globalHighlightToggle").addEventListener('change', function () { globalHighlightEnabled = this.checked; updateGlobalToggleState(); @@ -415,5 +423,11 @@ document.addEventListener('DOMContentLoaded', () => { renderWords(); }; + const wordSearch = document.getElementById("wordSearch"); + wordSearch.addEventListener("input", (e) => { + wordSearchQuery = e.target.value; + renderWords(); + }); + load(); });