mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-08 20:19:06 +03:00
1514 lines
54 KiB
TypeScript
1514 lines
54 KiB
TypeScript
import { HighlightList, HighlightWord, HighlightInfo, ExportData } from '../types.js';
|
|
import { StorageService } from '../services/StorageService.js';
|
|
import { MessageService } from '../services/MessageService.js';
|
|
import { DOMUtils } from '../utils/DOMUtils.js';
|
|
|
|
export class PopupController {
|
|
private lists: HighlightList[] = [];
|
|
private currentListIndex = 0;
|
|
private selectedCheckboxes = new Set<number>();
|
|
private globalHighlightEnabled = true;
|
|
private wordSearchQuery = '';
|
|
private currentPage = 1;
|
|
private pageSize = 100;
|
|
private totalWords = 0;
|
|
private matchCaseEnabled = false;
|
|
private matchWholeEnabled = false;
|
|
private exceptionsList: string[] = [];
|
|
private currentTabHost = '';
|
|
private activeTab = 'lists';
|
|
private pageHighlights: Array<{ word: string; count: number; background: string; foreground: string }> = [];
|
|
private highlightIndices = new Map<string, number>();
|
|
private wordMenuOpenForIndex: number | null = null;
|
|
private wordMenuCopyOnly = false;
|
|
private wordMenuCloseListener: (() => void) | null = null;
|
|
private periodicSaveInterval: ReturnType<typeof setInterval> | null = null;
|
|
|
|
async initialize(): Promise<void> {
|
|
await this.loadData();
|
|
await this.loadPopupState();
|
|
await this.getCurrentTab();
|
|
this.translateTitles();
|
|
this.setupEventListeners();
|
|
this.render();
|
|
this.restoreWordSearchInput();
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => this.restoreScrollPositions());
|
|
});
|
|
this.hideLoadingOverlay();
|
|
this.startPeriodicSave();
|
|
}
|
|
|
|
private hideLoadingOverlay(): void {
|
|
const overlay = document.querySelector('.loading-overlay');
|
|
if (overlay) {
|
|
overlay.classList.add('hidden');
|
|
setTimeout(() => overlay.remove(), 200);
|
|
}
|
|
}
|
|
|
|
private async loadData(): Promise<void> {
|
|
const data = await StorageService.get();
|
|
this.lists = data.lists || [];
|
|
this.globalHighlightEnabled = data.globalHighlightEnabled ?? true;
|
|
this.matchCaseEnabled = data.matchCaseEnabled ?? false;
|
|
this.matchWholeEnabled = data.matchWholeEnabled ?? false;
|
|
this.exceptionsList = data.exceptionsList || [];
|
|
|
|
if (this.lists.length === 0) {
|
|
this.lists.push({
|
|
id: Date.now(),
|
|
name: chrome.i18n.getMessage('default_list_name') || 'Default List',
|
|
background: '#ffff00',
|
|
foreground: '#000000',
|
|
active: true,
|
|
words: []
|
|
});
|
|
}
|
|
}
|
|
|
|
private async getCurrentTab(): Promise<void> {
|
|
try {
|
|
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
|
if (tab?.url) {
|
|
const url = new URL(tab.url);
|
|
this.currentTabHost = url.hostname;
|
|
}
|
|
} catch (e) {
|
|
console.warn('Could not get current tab:', e);
|
|
}
|
|
}
|
|
|
|
private static readonly POPUP_STATE_KEY = 'goose-popup-ui-state';
|
|
private scrollPositions: Record<string, number> = {};
|
|
|
|
private async loadPopupState(): Promise<void> {
|
|
try {
|
|
const result = await chrome.storage.local.get(PopupController.POPUP_STATE_KEY);
|
|
const raw = result[PopupController.POPUP_STATE_KEY];
|
|
if (raw === undefined || typeof raw !== 'string') return;
|
|
const state = JSON.parse(raw) as {
|
|
activeTab?: string;
|
|
currentListIndex?: number;
|
|
wordSearchQuery?: string;
|
|
currentPage?: number;
|
|
scrollPositions?: Record<string, number>;
|
|
};
|
|
if (typeof state.activeTab === 'string' && state.activeTab !== 'options') {
|
|
this.activeTab = state.activeTab;
|
|
}
|
|
if (typeof state.currentListIndex === 'number' && state.currentListIndex >= 0) {
|
|
this.currentListIndex = Math.min(state.currentListIndex, Math.max(0, this.lists.length - 1));
|
|
}
|
|
if (typeof state.wordSearchQuery === 'string') {
|
|
this.wordSearchQuery = state.wordSearchQuery;
|
|
}
|
|
if (typeof state.currentPage === 'number' && state.currentPage >= 1) {
|
|
this.currentPage = state.currentPage;
|
|
}
|
|
if (state.scrollPositions && typeof state.scrollPositions === 'object') {
|
|
this.scrollPositions = { ...state.scrollPositions };
|
|
}
|
|
} catch {
|
|
// keep defaults
|
|
}
|
|
}
|
|
|
|
private getPopupStatePayload(): { activeTab: string; currentListIndex: number; wordSearchQuery: string; currentPage: number; scrollPositions: Record<string, number> } {
|
|
return {
|
|
activeTab: this.activeTab,
|
|
currentListIndex: this.currentListIndex,
|
|
wordSearchQuery: this.wordSearchQuery,
|
|
currentPage: this.currentPage,
|
|
scrollPositions: this.scrollPositions
|
|
};
|
|
}
|
|
|
|
private savePopupState(): void {
|
|
chrome.storage.local.set({ [PopupController.POPUP_STATE_KEY]: JSON.stringify(this.getPopupStatePayload()) }).catch(() => {});
|
|
}
|
|
|
|
private startPeriodicSave(): void {
|
|
this.periodicSaveInterval = setInterval(() => {
|
|
const scrollEl = this.getScrollContainer(this.activeTab);
|
|
if (scrollEl) this.scrollPositions[this.activeTab] = scrollEl.scrollTop;
|
|
this.savePopupState();
|
|
}, 800);
|
|
}
|
|
|
|
captureScrollAndSave(): void {
|
|
if (this.periodicSaveInterval) {
|
|
clearInterval(this.periodicSaveInterval);
|
|
this.periodicSaveInterval = null;
|
|
}
|
|
const scrollEl = this.getScrollContainer(this.activeTab);
|
|
if (scrollEl) this.scrollPositions[this.activeTab] = scrollEl.scrollTop;
|
|
chrome.runtime.sendMessage({ type: 'SAVE_POPUP_STATE', payload: this.getPopupStatePayload() }).catch(() => {});
|
|
}
|
|
|
|
private restoreWordSearchInput(): void {
|
|
const wordSearch = document.getElementById('wordSearch') as HTMLInputElement;
|
|
if (wordSearch) {
|
|
wordSearch.value = this.wordSearchQuery;
|
|
}
|
|
}
|
|
|
|
private static readonly SCROLL_SELECTORS: Record<string, string> = {
|
|
lists: '.tab-inner',
|
|
words: '.word-list-container',
|
|
'page-highlights': '.page-highlights-list',
|
|
exceptions: '.exceptions-list'
|
|
};
|
|
|
|
private getScrollContainer(tabName: string): HTMLElement | null {
|
|
const sel = PopupController.SCROLL_SELECTORS[tabName];
|
|
if (!sel) return null;
|
|
const content = document.querySelector(`.tab-content[data-tab-content="${tabName}"]`);
|
|
return content?.querySelector(sel) ?? null;
|
|
}
|
|
|
|
private setupScrollListeners(): void {
|
|
const tabNames = ['lists', 'words', 'page-highlights', 'exceptions'];
|
|
tabNames.forEach(tabName => {
|
|
const el = this.getScrollContainer(tabName);
|
|
if (el) {
|
|
el.addEventListener('scroll', () => {
|
|
this.scrollPositions[tabName] = el.scrollTop;
|
|
this.savePopupState();
|
|
}, { passive: true });
|
|
}
|
|
});
|
|
}
|
|
|
|
private restoreScrollPositions(): void {
|
|
const el = this.getScrollContainer(this.activeTab);
|
|
if (el) {
|
|
const saved = this.scrollPositions[this.activeTab];
|
|
if (typeof saved === 'number' && saved >= 0) {
|
|
el.scrollTop = saved;
|
|
}
|
|
}
|
|
}
|
|
|
|
private translateTitles(): void {
|
|
document.querySelectorAll('[data-i18n-title]').forEach(element => {
|
|
const key = element.getAttribute('data-i18n-title');
|
|
if (key) {
|
|
const translation = chrome.i18n.getMessage(key);
|
|
if (translation) {
|
|
element.setAttribute('title', translation);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
private switchTab(tabName: string): void {
|
|
const isUserSwitch = tabName !== this.activeTab;
|
|
if (isUserSwitch) {
|
|
const scrollEl = this.getScrollContainer(this.activeTab);
|
|
if (scrollEl) {
|
|
this.scrollPositions[this.activeTab] = scrollEl.scrollTop;
|
|
}
|
|
this.activeTab = tabName;
|
|
this.savePopupState();
|
|
}
|
|
|
|
document.querySelectorAll('.tab-button').forEach(btn => {
|
|
btn.classList.toggle('active', btn.getAttribute('data-tab') === tabName);
|
|
});
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.toggle('active', content.getAttribute('data-tab-content') === tabName);
|
|
});
|
|
|
|
if (tabName === 'page-highlights') {
|
|
this.loadPageHighlights();
|
|
}
|
|
requestAnimationFrame(() => this.restoreScrollPositions());
|
|
}
|
|
|
|
private setupEventListeners(): void {
|
|
this.setupTabs();
|
|
this.setupScrollListeners();
|
|
this.setupSettingsOverlay();
|
|
this.setupSettingsExportImport();
|
|
this.setupListManagement();
|
|
this.setupWordManagement();
|
|
this.setupSettings();
|
|
this.setupPageHighlights();
|
|
this.setupExceptions();
|
|
this.setupImportExport();
|
|
this.setupTheme();
|
|
this.setupStorageSync();
|
|
}
|
|
|
|
private setupSettingsOverlay(): void {
|
|
const overlay = document.getElementById('settingsOverlay');
|
|
const settingsBtn = document.getElementById('settingsBtn');
|
|
const closeBtn = document.getElementById('settingsCloseBtn');
|
|
|
|
settingsBtn?.addEventListener('click', () => {
|
|
overlay?.classList.add('open');
|
|
});
|
|
|
|
closeBtn?.addEventListener('click', () => {
|
|
overlay?.classList.remove('open');
|
|
});
|
|
|
|
overlay?.addEventListener('click', (e) => {
|
|
if (e.target === overlay) {
|
|
overlay.classList.remove('open');
|
|
}
|
|
});
|
|
}
|
|
|
|
private setupSettingsExportImport(): void {
|
|
const importSettingsInput = document.getElementById('importSettingsInput') as HTMLInputElement;
|
|
|
|
document.getElementById('exportSettingsBtn')?.addEventListener('click', () => {
|
|
const data: ExportData = {
|
|
lists: this.lists,
|
|
exceptionsList: [...this.exceptionsList]
|
|
};
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'goose-highlighter-settings.json';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
|
|
document.getElementById('importSettingsBtn')?.addEventListener('click', () => {
|
|
importSettingsInput?.click();
|
|
});
|
|
|
|
importSettingsInput?.addEventListener('change', (e) => {
|
|
const file = (e.target as HTMLInputElement).files?.[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = async (event) => {
|
|
try {
|
|
const raw = event.target?.result as string;
|
|
const data = JSON.parse(raw) as unknown;
|
|
|
|
if (!data || typeof data !== 'object') {
|
|
alert(chrome.i18n.getMessage('invalid_import_format') || 'Invalid file format. Please select a valid export file.');
|
|
importSettingsInput.value = '';
|
|
return;
|
|
}
|
|
|
|
const obj = data as Record<string, unknown>;
|
|
let listsApplied = false;
|
|
let exceptionsApplied = false;
|
|
|
|
if (Array.isArray(obj.lists) && obj.lists.length > 0) {
|
|
const baseId = Date.now();
|
|
const validLists = obj.lists
|
|
.filter((item: unknown) => this.isValidList(item))
|
|
.map((item: HighlightList, i: number) => ({ ...item, id: baseId + i }));
|
|
if (validLists.length > 0) {
|
|
this.lists = validLists;
|
|
this.currentListIndex = Math.min(this.currentListIndex, this.lists.length - 1);
|
|
listsApplied = true;
|
|
}
|
|
}
|
|
|
|
if (Array.isArray(obj.exceptionsList)) {
|
|
this.exceptionsList = obj.exceptionsList.filter((d): d is string => typeof d === 'string');
|
|
exceptionsApplied = true;
|
|
}
|
|
|
|
if (!listsApplied && !exceptionsApplied) {
|
|
alert(chrome.i18n.getMessage('invalid_import_format') || 'Invalid file format. Please select a valid export file.');
|
|
importSettingsInput.value = '';
|
|
return;
|
|
}
|
|
|
|
if (listsApplied && this.lists.length === 0) {
|
|
this.lists.push({
|
|
id: Date.now(),
|
|
name: chrome.i18n.getMessage('default_list_name') || 'Default List',
|
|
background: '#ffff00',
|
|
foreground: '#000000',
|
|
active: true,
|
|
words: []
|
|
});
|
|
}
|
|
|
|
await this.save();
|
|
MessageService.sendToAllTabs({ type: 'WORD_LIST_UPDATED' });
|
|
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
|
|
this.render();
|
|
importSettingsInput.value = '';
|
|
} catch (err) {
|
|
alert((chrome.i18n.getMessage('invalid_json_error') || 'Invalid JSON file') + ': ' + (err as Error).message);
|
|
importSettingsInput.value = '';
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
});
|
|
}
|
|
|
|
private setupTabs(): void {
|
|
document.querySelectorAll('.tab-button').forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
const tabName = (button as HTMLElement).getAttribute('data-tab');
|
|
if (tabName) this.switchTab(tabName);
|
|
});
|
|
});
|
|
|
|
this.switchTab(this.activeTab);
|
|
}
|
|
|
|
private setupListManagement(): void {
|
|
const dropdownBtn = document.getElementById('listDropdownBtn');
|
|
const dropdownMenu = document.getElementById('listDropdownMenu');
|
|
|
|
// Toggle dropdown
|
|
dropdownBtn?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
dropdownMenu?.classList.toggle('open');
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', () => {
|
|
dropdownMenu?.classList.remove('open');
|
|
});
|
|
|
|
// Apply button for list settings
|
|
document.getElementById('applyListSettingsBtn')?.addEventListener('click', () => {
|
|
this.applyListSettings();
|
|
});
|
|
|
|
// Rename list
|
|
document.getElementById('renameListBtn')?.addEventListener('click', () => {
|
|
const newName = prompt(chrome.i18n.getMessage('enter_list_name') || 'Enter list name:', this.lists[this.currentListIndex].name);
|
|
if (newName && newName.trim()) {
|
|
this.lists[this.currentListIndex].name = newName.trim();
|
|
this.save();
|
|
}
|
|
});
|
|
|
|
// New list
|
|
document.getElementById('newListBtn')?.addEventListener('click', () => {
|
|
this.lists.push({
|
|
id: Date.now(),
|
|
name: chrome.i18n.getMessage('new_list_name') || 'New List',
|
|
background: '#22c55e',
|
|
foreground: '#000000',
|
|
active: true,
|
|
words: []
|
|
});
|
|
this.currentListIndex = this.lists.length - 1;
|
|
this.savePopupState();
|
|
this.save();
|
|
});
|
|
|
|
// Delete list
|
|
document.getElementById('deleteListBtn')?.addEventListener('click', () => {
|
|
if (this.lists.length <= 1) {
|
|
alert(chrome.i18n.getMessage('cannot_delete_last_list') || 'Cannot delete the last list');
|
|
return;
|
|
}
|
|
if (confirm(chrome.i18n.getMessage('confirm_delete_list') || 'Delete this list?')) {
|
|
this.lists.splice(this.currentListIndex, 1);
|
|
this.currentListIndex = Math.max(0, this.currentListIndex - 1);
|
|
this.savePopupState();
|
|
this.save();
|
|
}
|
|
});
|
|
|
|
// Color picker text inputs sync
|
|
const listBg = document.getElementById('listBg') as HTMLInputElement;
|
|
const listBgText = document.getElementById('listBgText') as HTMLInputElement;
|
|
const listFg = document.getElementById('listFg') as HTMLInputElement;
|
|
const listFgText = document.getElementById('listFgText') as HTMLInputElement;
|
|
|
|
listBg?.addEventListener('input', () => {
|
|
if (listBgText) listBgText.value = listBg.value;
|
|
this.updatePreview();
|
|
});
|
|
|
|
listBgText?.addEventListener('input', () => {
|
|
if (listBg && /^#[0-9A-F]{6}$/i.test(listBgText.value)) {
|
|
listBg.value = listBgText.value;
|
|
this.updatePreview();
|
|
}
|
|
});
|
|
|
|
listFg?.addEventListener('input', () => {
|
|
if (listFgText) listFgText.value = listFg.value;
|
|
this.updatePreview();
|
|
});
|
|
|
|
listFgText?.addEventListener('input', () => {
|
|
if (listFg && /^#[0-9A-F]{6}$/i.test(listFgText.value)) {
|
|
listFg.value = listFgText.value;
|
|
this.updatePreview();
|
|
}
|
|
});
|
|
}
|
|
|
|
private setupWordManagement(): void {
|
|
const bulkPaste = document.getElementById('bulkPaste') as HTMLTextAreaElement;
|
|
const wordList = document.getElementById('wordList') as HTMLDivElement;
|
|
const wordSearch = document.getElementById('wordSearch') as HTMLInputElement;
|
|
|
|
document.getElementById('addWordsBtn')?.addEventListener('click', () => {
|
|
const words = bulkPaste.value.split(/\n+/).map(w => w.trim()).filter(Boolean);
|
|
const list = this.lists[this.currentListIndex];
|
|
for (const w of words) {
|
|
list.words.push({
|
|
wordStr: w,
|
|
background: '',
|
|
foreground: '',
|
|
active: true
|
|
});
|
|
}
|
|
bulkPaste.value = '';
|
|
this.save();
|
|
});
|
|
|
|
this.setupWordListEvents(wordList);
|
|
|
|
wordSearch.addEventListener('input', (e) => {
|
|
this.wordSearchQuery = (e.target as HTMLInputElement).value;
|
|
this.currentPage = 1;
|
|
this.savePopupState();
|
|
this.renderWords();
|
|
});
|
|
}
|
|
|
|
private setupWordListEvents(wordList: HTMLDivElement): void {
|
|
wordList.addEventListener('click', (e) => {
|
|
const target = e.target as HTMLElement;
|
|
const list = this.lists[this.currentListIndex];
|
|
if (!list) return;
|
|
|
|
// Handle 3-dot menu button click
|
|
const menuBtn = target.closest('.word-item-menu-btn') as HTMLElement | null;
|
|
if (menuBtn) {
|
|
e.stopPropagation();
|
|
const index = Number(menuBtn.dataset.index);
|
|
if (!Number.isNaN(index)) {
|
|
this.openWordItemMenu(index, menuBtn);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Handle edit button click
|
|
const editBtn = target.closest('.word-item-icon-btn.edit-word-btn') as HTMLElement | null;
|
|
if (editBtn) {
|
|
e.stopPropagation();
|
|
const index = Number(editBtn.dataset.index);
|
|
if (!Number.isNaN(index)) {
|
|
this.startEditingWord(index);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Don't select if clicking on color inputs or edit input
|
|
if (target.tagName === 'INPUT') {
|
|
if ((target as HTMLInputElement).type === 'color') {
|
|
e.stopPropagation();
|
|
return;
|
|
}
|
|
if (target.classList.contains('word-item-edit-input')) {
|
|
e.stopPropagation();
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Don't select if clicking inside word-actions area
|
|
if (target.closest('.word-item-actions') && !target.classList.contains('word-item')) {
|
|
return;
|
|
}
|
|
|
|
// Don't select if clicking on eye toggle
|
|
if (target.closest('.word-item-eye-toggle')) {
|
|
return;
|
|
}
|
|
|
|
// Handle word item selection
|
|
const wordItem = target.closest('.word-item') as HTMLElement | null;
|
|
if (!wordItem) return;
|
|
|
|
const index = Number(wordItem.dataset.index);
|
|
if (Number.isNaN(index)) return;
|
|
|
|
const mouseEvent = e as MouseEvent;
|
|
this.toggleWordSelection(index, mouseEvent.ctrlKey || mouseEvent.metaKey);
|
|
});
|
|
|
|
wordList.addEventListener('change', (e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
const list = this.lists[this.currentListIndex];
|
|
|
|
// Handle eye toggle (active/disabled)
|
|
if (target.classList.contains('word-item-eye-input')) {
|
|
const wordItem = target.closest('.word-item') as HTMLElement;
|
|
if (wordItem) {
|
|
const index = Number(wordItem.dataset.index);
|
|
if (!Number.isNaN(index)) {
|
|
const word = list.words[index];
|
|
if (word) {
|
|
word.active = target.checked;
|
|
this.save();
|
|
}
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
|
|
const index = +(target.dataset.bgEdit ?? target.dataset.fgEdit ?? -1);
|
|
if (index === -1) return;
|
|
|
|
const word = this.lists[this.currentListIndex].words[index];
|
|
if (target.dataset.bgEdit != null) word.background = target.value;
|
|
if (target.dataset.fgEdit != null) word.foreground = target.value;
|
|
|
|
this.save();
|
|
});
|
|
|
|
wordList.addEventListener('keydown', (e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (!target.classList.contains('word-item-edit-input')) return;
|
|
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
target.blur();
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
this.renderWords();
|
|
}
|
|
});
|
|
|
|
wordList.addEventListener('blur', (e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (!target.classList.contains('word-item-edit-input')) return;
|
|
|
|
const list = this.lists[this.currentListIndex];
|
|
if (!list) return;
|
|
|
|
const index = Number(target.dataset.wordEdit ?? -1);
|
|
if (Number.isNaN(index) || index < 0) return;
|
|
|
|
const word = list.words[index];
|
|
if (!word) return;
|
|
|
|
const newValue = target.value.trim();
|
|
if (newValue && newValue !== word.wordStr) {
|
|
word.wordStr = newValue;
|
|
this.save();
|
|
} else {
|
|
this.renderWords();
|
|
}
|
|
}, true);
|
|
|
|
let scrolling = false;
|
|
wordList.addEventListener('scroll', () => {
|
|
if (scrolling) return;
|
|
scrolling = true;
|
|
requestAnimationFrame(() => {
|
|
this.renderWords();
|
|
scrolling = false;
|
|
});
|
|
});
|
|
}
|
|
|
|
private toggleWordSelection(index: number, multiSelect: boolean): void {
|
|
if (multiSelect) {
|
|
// Ctrl/Cmd + click for multi-select
|
|
if (this.selectedCheckboxes.has(index)) {
|
|
this.selectedCheckboxes.delete(index);
|
|
} else {
|
|
this.selectedCheckboxes.add(index);
|
|
}
|
|
} else {
|
|
// Regular click - clear all and select only this one
|
|
this.selectedCheckboxes.clear();
|
|
this.selectedCheckboxes.add(index);
|
|
}
|
|
this.renderWords();
|
|
}
|
|
|
|
private startEditingWord(index: number): void {
|
|
const wordItem = document.querySelector(`.word-item[data-index="${index}"]`);
|
|
if (!wordItem) return;
|
|
|
|
const textSpan = wordItem.querySelector('.word-item-text') as HTMLElement;
|
|
const input = wordItem.querySelector('.word-item-edit-input') as HTMLInputElement;
|
|
if (!textSpan || !input) return;
|
|
|
|
textSpan.style.display = 'none';
|
|
input.style.display = 'block';
|
|
input.focus();
|
|
input.select();
|
|
}
|
|
|
|
/** Effective selection for menu actions: multiple selected ? those indices : [wordIndex]. */
|
|
private getEffectiveSelectionForMenu(wordIndex: number): number[] {
|
|
if (this.selectedCheckboxes.size > 1 && this.selectedCheckboxes.has(wordIndex)) {
|
|
return Array.from(this.selectedCheckboxes);
|
|
}
|
|
return [wordIndex];
|
|
}
|
|
|
|
private openWordItemMenu(wordIndex: number, buttonEl: HTMLElement): void {
|
|
const dropdown = document.getElementById('wordItemMenuDropdown');
|
|
if (!dropdown) return;
|
|
|
|
this.closeWordItemMenu();
|
|
|
|
const effectiveIndices = this.getEffectiveSelectionForMenu(wordIndex);
|
|
const isMultiple = effectiveIndices.length > 1;
|
|
|
|
const rect = buttonEl.getBoundingClientRect();
|
|
const padding = 8;
|
|
dropdown.style.left = `${rect.left}px`;
|
|
dropdown.style.top = `${rect.bottom + 4}px`;
|
|
dropdown.style.right = '';
|
|
|
|
const moveLabel = isMultiple
|
|
? (chrome.i18n.getMessage('move_selected') || 'Move selected')
|
|
: (chrome.i18n.getMessage('move_to_list') || 'Move to list');
|
|
const copyLabel = isMultiple
|
|
? (chrome.i18n.getMessage('copy_selected') || 'Copy selected')
|
|
: (chrome.i18n.getMessage('copy_to_list') || 'Copy to list');
|
|
const enableSelectedLabel = chrome.i18n.getMessage('enable_selected') || 'Enable selected';
|
|
const disableSelectedLabel = chrome.i18n.getMessage('disable_selected') || 'Disable selected';
|
|
const deleteLabel = isMultiple
|
|
? (chrome.i18n.getMessage('delete_selected') || 'Delete selected')
|
|
: (chrome.i18n.getMessage('delete_selected') || 'Delete');
|
|
|
|
const enableDisableItems = isMultiple
|
|
? `
|
|
<button type="button" class="word-item-menu-item" data-action="enable">
|
|
<i class="fa-solid fa-eye"></i>
|
|
<span>${DOMUtils.escapeHtml(enableSelectedLabel)}</span>
|
|
</button>
|
|
<button type="button" class="word-item-menu-item" data-action="disable">
|
|
<i class="fa-solid fa-eye-slash"></i>
|
|
<span>${DOMUtils.escapeHtml(disableSelectedLabel)}</span>
|
|
</button>
|
|
`
|
|
: '';
|
|
|
|
dropdown.innerHTML = `
|
|
<button type="button" class="word-item-menu-item" data-action="move">
|
|
<i class="fa-solid fa-arrow-right"></i>
|
|
<span>${DOMUtils.escapeHtml(moveLabel)}</span>
|
|
</button>
|
|
<button type="button" class="word-item-menu-item" data-action="copy">
|
|
<i class="fa-solid fa-copy"></i>
|
|
<span>${DOMUtils.escapeHtml(copyLabel)}</span>
|
|
</button>
|
|
${enableDisableItems}
|
|
<button type="button" class="word-item-menu-item danger" data-action="delete">
|
|
<i class="fa-solid fa-trash"></i>
|
|
<span>${DOMUtils.escapeHtml(deleteLabel)}</span>
|
|
</button>
|
|
`;
|
|
|
|
dropdown.querySelectorAll('.word-item-menu-item').forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const action = (item as HTMLElement).dataset.action;
|
|
if (action === 'move') {
|
|
this.showWordMenuListPickerForIndices(effectiveIndices, false);
|
|
} else if (action === 'copy') {
|
|
this.showWordMenuListPickerForIndices(effectiveIndices, true);
|
|
} else if (action === 'enable') {
|
|
this.setSelectedWordsActive(effectiveIndices, true);
|
|
this.closeWordItemMenu();
|
|
this.save();
|
|
this.renderWords();
|
|
} else if (action === 'disable') {
|
|
this.setSelectedWordsActive(effectiveIndices, false);
|
|
this.closeWordItemMenu();
|
|
this.save();
|
|
this.renderWords();
|
|
} else if (action === 'delete') {
|
|
if (confirm(chrome.i18n.getMessage('confirm_delete_words') || 'Delete selected words?')) {
|
|
this.deleteWordsByIndices(effectiveIndices);
|
|
this.selectedCheckboxes.clear();
|
|
this.closeWordItemMenu();
|
|
this.save();
|
|
this.renderWords();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
this.wordMenuOpenForIndex = wordIndex;
|
|
this.wordMenuCopyOnly = false;
|
|
dropdown.classList.add('open');
|
|
dropdown.setAttribute('aria-hidden', 'false');
|
|
|
|
requestAnimationFrame(() => {
|
|
const dr = dropdown.getBoundingClientRect();
|
|
const vw = window.innerWidth;
|
|
const vh = window.innerHeight;
|
|
if (dr.right > vw - padding) {
|
|
dropdown.style.left = `${vw - dr.width - padding}px`;
|
|
}
|
|
if (dr.left < padding) {
|
|
dropdown.style.left = `${padding}px`;
|
|
}
|
|
if (dr.bottom > vh - padding) {
|
|
dropdown.style.top = `${vh - dr.height - padding}px`;
|
|
}
|
|
if (dr.top < padding) {
|
|
dropdown.style.top = `${padding}px`;
|
|
}
|
|
});
|
|
|
|
const closeHandler = (e: MouseEvent) => {
|
|
const target = e.target as Node;
|
|
if (dropdown.contains(target) || buttonEl.contains(target)) return;
|
|
this.closeWordItemMenu();
|
|
document.removeEventListener('click', closeHandler);
|
|
this.wordMenuCloseListener = null;
|
|
};
|
|
this.wordMenuCloseListener = () => {
|
|
document.removeEventListener('click', closeHandler);
|
|
this.wordMenuCloseListener = null;
|
|
};
|
|
setTimeout(() => document.addEventListener('click', closeHandler), 0);
|
|
}
|
|
|
|
private showWordMenuListPickerForIndices(indices: number[], copyOnly: boolean): void {
|
|
const dropdown = document.getElementById('wordItemMenuDropdown');
|
|
if (!dropdown || this.wordMenuOpenForIndex === null) return;
|
|
|
|
this.wordMenuCopyOnly = copyOnly;
|
|
const otherLists = this.lists
|
|
.map((list, index) => ({ list, index }))
|
|
.filter(({ index }) => index !== this.currentListIndex);
|
|
|
|
if (otherLists.length === 0) {
|
|
const noOtherLabel = chrome.i18n.getMessage('no_other_lists') || 'No other lists';
|
|
dropdown.innerHTML = `
|
|
<div class="word-item-menu-item disabled">
|
|
<span>${DOMUtils.escapeHtml(noOtherLabel)}</span>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
dropdown.innerHTML = otherLists.map(({ list, index }) => `
|
|
<button type="button" class="word-item-menu-item" data-target-index="${index}">
|
|
<span class="list-color-indicator" style="background-color: ${DOMUtils.escapeHtml(list.background)}"></span>
|
|
<span>${DOMUtils.escapeHtml(list.name)}</span>
|
|
</button>
|
|
`).join('');
|
|
|
|
dropdown.querySelectorAll('.word-item-menu-item[data-target-index]').forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
const targetIndex = Number((item as HTMLElement).dataset.targetIndex);
|
|
if (Number.isNaN(targetIndex)) return;
|
|
if (this.wordMenuCopyOnly) {
|
|
this.copyWordsToOtherList(indices, targetIndex);
|
|
} else {
|
|
this.moveWordsToOtherList(indices, targetIndex);
|
|
}
|
|
this.closeWordItemMenu();
|
|
this.save();
|
|
this.renderWords();
|
|
this.renderLists();
|
|
});
|
|
});
|
|
}
|
|
|
|
private setSelectedWordsActive(indices: number[], active: boolean): void {
|
|
const list = this.lists[this.currentListIndex];
|
|
if (!list) return;
|
|
indices.forEach(index => {
|
|
const word = list.words[index];
|
|
if (word) word.active = active;
|
|
});
|
|
}
|
|
|
|
private deleteWordsByIndices(indices: number[]): void {
|
|
const list = this.lists[this.currentListIndex];
|
|
if (!list) return;
|
|
const toDelete = new Set(indices);
|
|
this.lists[this.currentListIndex].words = list.words.filter((_, i) => !toDelete.has(i));
|
|
}
|
|
|
|
private moveWordsToOtherList(indices: number[], targetListIndex: number): void {
|
|
const list = this.lists[this.currentListIndex];
|
|
const targetList = this.lists[targetListIndex];
|
|
if (!list || !targetList) return;
|
|
const sorted = [...indices].sort((a, b) => b - a);
|
|
const wordsToMove = sorted.map(i => list.words[i]).filter(Boolean);
|
|
sorted.forEach(i => list.words.splice(i, 1));
|
|
targetList.words.push(...wordsToMove);
|
|
}
|
|
|
|
private copyWordsToOtherList(indices: number[], targetListIndex: number): void {
|
|
const list = this.lists[this.currentListIndex];
|
|
const targetList = this.lists[targetListIndex];
|
|
if (!list || !targetList) return;
|
|
indices.forEach(index => {
|
|
const word = list.words[index];
|
|
if (word) targetList.words.push({ ...word });
|
|
});
|
|
}
|
|
|
|
private closeWordItemMenu(): void {
|
|
const dropdown = document.getElementById('wordItemMenuDropdown');
|
|
if (dropdown) {
|
|
dropdown.classList.remove('open');
|
|
dropdown.setAttribute('aria-hidden', 'true');
|
|
dropdown.innerHTML = '';
|
|
}
|
|
this.wordMenuOpenForIndex = null;
|
|
if (this.wordMenuCloseListener) {
|
|
this.wordMenuCloseListener();
|
|
}
|
|
}
|
|
|
|
private setupSettings(): void {
|
|
const globalToggle = document.getElementById('globalHighlightToggle') as HTMLInputElement;
|
|
const matchCase = document.getElementById('matchCase') as HTMLInputElement;
|
|
const matchWhole = document.getElementById('matchWhole') as HTMLInputElement;
|
|
|
|
globalToggle?.addEventListener('change', async () => {
|
|
this.globalHighlightEnabled = globalToggle.checked;
|
|
await StorageService.update('globalHighlightEnabled', this.globalHighlightEnabled);
|
|
MessageService.sendToAllTabs({
|
|
type: 'GLOBAL_TOGGLE_UPDATED',
|
|
enabled: this.globalHighlightEnabled
|
|
});
|
|
});
|
|
|
|
matchCase?.addEventListener('change', async () => {
|
|
this.matchCaseEnabled = matchCase.checked;
|
|
await StorageService.update('matchCaseEnabled', this.matchCaseEnabled);
|
|
MessageService.sendToAllTabs({
|
|
type: 'MATCH_OPTIONS_UPDATED',
|
|
matchCase: this.matchCaseEnabled,
|
|
matchWhole: this.matchWholeEnabled
|
|
});
|
|
});
|
|
|
|
matchWhole?.addEventListener('change', async () => {
|
|
this.matchWholeEnabled = matchWhole.checked;
|
|
await StorageService.update('matchWholeEnabled', this.matchWholeEnabled);
|
|
MessageService.sendToAllTabs({
|
|
type: 'MATCH_OPTIONS_UPDATED',
|
|
matchCase: this.matchCaseEnabled,
|
|
matchWhole: this.matchWholeEnabled
|
|
});
|
|
});
|
|
}
|
|
|
|
private setupPageHighlights(): void {
|
|
document.getElementById('refreshHighlightsBtn')?.addEventListener('click', async () => {
|
|
await this.loadPageHighlights();
|
|
});
|
|
|
|
document.getElementById('pageHighlightsList')?.addEventListener('click', async (e) => {
|
|
const target = e.target as HTMLElement;
|
|
const item = target.closest('.page-highlight-item') as HTMLElement;
|
|
|
|
if (!item) return;
|
|
|
|
const word = item.dataset.word;
|
|
if (!word) return;
|
|
|
|
const button = target.closest('button');
|
|
|
|
if (button?.classList.contains('highlight-prev')) {
|
|
e.stopPropagation();
|
|
await this.navigateHighlight(word, -1);
|
|
} else if (button?.classList.contains('highlight-next')) {
|
|
e.stopPropagation();
|
|
await this.navigateHighlight(word, 1);
|
|
} else if (!button) {
|
|
const currentIndex = this.highlightIndices.get(word) || 0;
|
|
await this.jumpToHighlight(word, currentIndex);
|
|
}
|
|
});
|
|
}
|
|
|
|
private async loadPageHighlights(): Promise<void> {
|
|
try {
|
|
const response = await MessageService.sendToActiveTab({ type: 'GET_PAGE_HIGHLIGHTS' });
|
|
|
|
if (response && response.highlights) {
|
|
this.pageHighlights = response.highlights;
|
|
this.highlightIndices.clear();
|
|
this.pageHighlights.forEach(h => this.highlightIndices.set(h.word, 0));
|
|
this.renderPageHighlights();
|
|
}
|
|
} catch (e) {
|
|
console.error('Error loading page highlights:', e);
|
|
this.pageHighlights = [];
|
|
this.renderPageHighlights();
|
|
}
|
|
}
|
|
|
|
private async jumpToHighlight(word: string, index: number): Promise<void> {
|
|
this.highlightIndices.set(word, index);
|
|
await MessageService.sendToActiveTab({
|
|
type: 'SCROLL_TO_HIGHLIGHT',
|
|
word,
|
|
index
|
|
});
|
|
this.renderPageHighlights();
|
|
}
|
|
|
|
private async navigateHighlight(word: string, direction: number): Promise<void> {
|
|
const highlight = this.pageHighlights.find(h => h.word === word);
|
|
if (!highlight) return;
|
|
|
|
const currentIndex = this.highlightIndices.get(word) || 0;
|
|
let newIndex = currentIndex + direction;
|
|
|
|
if (newIndex < 0) newIndex = highlight.count - 1;
|
|
if (newIndex >= highlight.count) newIndex = 0;
|
|
|
|
await this.jumpToHighlight(word, newIndex);
|
|
}
|
|
|
|
private renderPageHighlights(): void {
|
|
const container = document.getElementById('pageHighlightsList');
|
|
const countElement = document.getElementById('totalHighlightsCount');
|
|
|
|
if (!container || !countElement) return;
|
|
|
|
const totalCount = this.pageHighlights.reduce((sum, h) => sum + h.count, 0);
|
|
countElement.textContent = totalCount.toString();
|
|
|
|
if (this.pageHighlights.length === 0) {
|
|
container.innerHTML = `<div class="page-highlights-empty">${chrome.i18n.getMessage('no_highlights_on_page') || 'No highlights on this page'}</div>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = this.pageHighlights.map(highlight => {
|
|
const currentIndex = this.highlightIndices.get(highlight.word) || 0;
|
|
return `
|
|
<div class="page-highlight-item" data-word="${DOMUtils.escapeHtml(highlight.word)}">
|
|
<div class="page-highlight-word">
|
|
<span class="page-highlight-preview" style="background-color: ${highlight.background}; color: ${highlight.foreground};">
|
|
${DOMUtils.escapeHtml(highlight.word)}
|
|
</span>
|
|
${highlight.count > 1 ? `<span class="page-highlight-position">${currentIndex + 1}/${highlight.count}</span>` : ''}
|
|
</div>
|
|
${highlight.count > 1 ? `
|
|
<div class="page-highlight-nav">
|
|
<button class="highlight-prev" title="${chrome.i18n.getMessage('previous') || 'Previous'}">
|
|
<i class="fa-solid fa-chevron-up"></i>
|
|
</button>
|
|
<button class="highlight-next" title="${chrome.i18n.getMessage('next') || 'Next'}">
|
|
<i class="fa-solid fa-chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
if (this.activeTab === 'page-highlights') {
|
|
requestAnimationFrame(() => this.restoreScrollPositions());
|
|
}
|
|
}
|
|
|
|
private setupExceptions(): void {
|
|
document.getElementById('toggleExceptionBtn')?.addEventListener('click', async () => {
|
|
if (!this.currentTabHost) return;
|
|
|
|
const isException = this.exceptionsList.includes(this.currentTabHost);
|
|
|
|
if (isException) {
|
|
this.exceptionsList = this.exceptionsList.filter(domain => domain !== this.currentTabHost);
|
|
} else {
|
|
this.exceptionsList.push(this.currentTabHost);
|
|
}
|
|
|
|
this.updateExceptionButton();
|
|
this.renderExceptions();
|
|
await StorageService.update('exceptionsList', this.exceptionsList);
|
|
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
|
|
});
|
|
|
|
document.getElementById('clearExceptionsBtn')?.addEventListener('click', async () => {
|
|
if (confirm(chrome.i18n.getMessage('confirm_clear_exceptions') || 'Clear all exceptions?')) {
|
|
this.exceptionsList = [];
|
|
this.updateExceptionButton();
|
|
this.renderExceptions();
|
|
await StorageService.update('exceptionsList', this.exceptionsList);
|
|
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
|
|
}
|
|
});
|
|
|
|
document.getElementById('exceptionsList')?.addEventListener('click', async (e) => {
|
|
const button = (e.target as HTMLElement).closest('.exception-remove');
|
|
if (button) {
|
|
const domain = (button as HTMLElement).dataset.domain!;
|
|
this.exceptionsList = this.exceptionsList.filter(d => d !== domain);
|
|
this.updateExceptionButton();
|
|
this.renderExceptions();
|
|
await StorageService.update('exceptionsList', this.exceptionsList);
|
|
MessageService.sendToAllTabs({ type: 'EXCEPTIONS_LIST_UPDATED' });
|
|
}
|
|
});
|
|
}
|
|
|
|
private setupImportExport(): void {
|
|
const importListInput = document.getElementById('importListInput') as HTMLInputElement;
|
|
|
|
document.getElementById('exportListBtn')?.addEventListener('click', () => {
|
|
const list = this.lists[this.currentListIndex];
|
|
if (!list) return;
|
|
const blob = new Blob([JSON.stringify(list, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
const safeName = (list.name || 'list').replace(/[^a-zA-Z0-9-_]/g, '-');
|
|
a.download = `${safeName}.json`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
});
|
|
|
|
document.getElementById('importListBtn')?.addEventListener('click', () => {
|
|
importListInput?.click();
|
|
});
|
|
|
|
importListInput?.addEventListener('change', (e) => {
|
|
const file = (e.target as HTMLInputElement).files?.[0];
|
|
if (!file) return;
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
try {
|
|
const data = JSON.parse(e.target?.result as string);
|
|
const toAdd: HighlightList[] = [];
|
|
|
|
if (Array.isArray(data)) {
|
|
data.forEach((item: unknown) => {
|
|
if (this.isValidList(item)) toAdd.push(item as HighlightList);
|
|
});
|
|
} else if (data && typeof data === 'object') {
|
|
if (Array.isArray(data.lists)) {
|
|
data.lists.forEach((item: unknown) => {
|
|
if (this.isValidList(item)) toAdd.push(item as HighlightList);
|
|
});
|
|
} else if (this.isValidList(data)) {
|
|
toAdd.push(data as HighlightList);
|
|
}
|
|
}
|
|
|
|
if (toAdd.length === 0) {
|
|
alert(chrome.i18n.getMessage('invalid_import_format') || 'Invalid list format. Please select a valid list file.');
|
|
return;
|
|
}
|
|
const baseId = Date.now();
|
|
toAdd.forEach((l, i) => {
|
|
this.lists.push({ ...l, id: baseId + i });
|
|
});
|
|
this.save();
|
|
this.renderLists();
|
|
} catch (err) {
|
|
alert(chrome.i18n.getMessage('invalid_json_error') + ': ' + (err as Error).message);
|
|
}
|
|
};
|
|
reader.readAsText(file);
|
|
importListInput.value = '';
|
|
});
|
|
}
|
|
|
|
private isValidList(obj: unknown): obj is HighlightList {
|
|
if (!obj || typeof obj !== 'object') return false;
|
|
const o = obj as Record<string, unknown>;
|
|
return (
|
|
typeof o.name === 'string' &&
|
|
Array.isArray(o.words) &&
|
|
(typeof o.background === 'string' || typeof o.background === 'undefined') &&
|
|
(typeof o.foreground === 'string' || typeof o.foreground === 'undefined')
|
|
);
|
|
}
|
|
|
|
private setupTheme(): void {
|
|
const themeToggle = document.getElementById('themeToggle') as HTMLInputElement;
|
|
|
|
// Load saved theme
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme === 'light') {
|
|
document.documentElement.classList.remove('dark');
|
|
document.documentElement.classList.add('light');
|
|
if (themeToggle) themeToggle.checked = false;
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
if (themeToggle) themeToggle.checked = true;
|
|
}
|
|
|
|
// Setup toggle listener
|
|
themeToggle?.addEventListener('change', () => {
|
|
if (themeToggle.checked) {
|
|
document.documentElement.classList.add('dark');
|
|
document.documentElement.classList.remove('light');
|
|
localStorage.setItem('theme', 'dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
document.documentElement.classList.add('light');
|
|
localStorage.setItem('theme', 'light');
|
|
}
|
|
});
|
|
}
|
|
|
|
private applyListSettings(): void {
|
|
const listBg = document.getElementById('listBg') as HTMLInputElement;
|
|
const listFg = document.getElementById('listFg') as HTMLInputElement;
|
|
const listActive = document.getElementById('listActive') as HTMLInputElement;
|
|
|
|
this.lists[this.currentListIndex].background = listBg.value;
|
|
this.lists[this.currentListIndex].foreground = listFg.value;
|
|
this.lists[this.currentListIndex].active = listActive.checked;
|
|
|
|
this.save();
|
|
}
|
|
|
|
private updatePreview(): void {
|
|
const listBg = document.getElementById('listBg') as HTMLInputElement;
|
|
const listFg = document.getElementById('listFg') as HTMLInputElement;
|
|
const preview = document.getElementById('previewHighlight') as HTMLElement;
|
|
|
|
if (preview && listBg && listFg) {
|
|
preview.style.backgroundColor = listBg.value;
|
|
preview.style.color = listFg.value;
|
|
}
|
|
}
|
|
|
|
private async save(): Promise<void> {
|
|
await StorageService.set({
|
|
lists: this.lists,
|
|
globalHighlightEnabled: this.globalHighlightEnabled,
|
|
matchCaseEnabled: this.matchCaseEnabled,
|
|
matchWholeEnabled: this.matchWholeEnabled,
|
|
exceptionsList: this.exceptionsList
|
|
});
|
|
|
|
this.renderLists();
|
|
MessageService.sendToAllTabs({ type: 'WORD_LIST_UPDATED' });
|
|
}
|
|
|
|
private setupStorageSync(): void {
|
|
chrome.storage.onChanged.addListener((changes, areaName) => {
|
|
if (areaName !== 'local') return;
|
|
if (changes.lists || changes.globalHighlightEnabled || changes.matchCaseEnabled || changes.matchWholeEnabled || changes.exceptionsList) {
|
|
this.reloadFromStorage();
|
|
}
|
|
});
|
|
}
|
|
|
|
private async reloadFromStorage(): Promise<void> {
|
|
const data = await StorageService.get();
|
|
this.lists = data.lists || [];
|
|
this.globalHighlightEnabled = data.globalHighlightEnabled ?? true;
|
|
this.matchCaseEnabled = data.matchCaseEnabled ?? false;
|
|
this.matchWholeEnabled = data.matchWholeEnabled ?? false;
|
|
this.exceptionsList = data.exceptionsList || [];
|
|
|
|
if (this.lists.length === 0) {
|
|
this.lists.push({
|
|
id: Date.now(),
|
|
name: chrome.i18n.getMessage('default_list_name') || 'Default List',
|
|
background: '#ffff00',
|
|
foreground: '#000000',
|
|
active: true,
|
|
words: []
|
|
});
|
|
}
|
|
|
|
this.currentListIndex = Math.min(this.currentListIndex, this.lists.length - 1);
|
|
this.render();
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private render(): void {
|
|
this.renderLists();
|
|
this.renderWords();
|
|
this.renderExceptions();
|
|
this.updateExceptionButton();
|
|
this.updateFormValues();
|
|
}
|
|
|
|
private renderLists(): void {
|
|
const currentListName = document.getElementById('currentListName');
|
|
const currentListColor = document.getElementById('currentListColor') as HTMLElement;
|
|
const dropdownMenu = document.getElementById('listDropdownMenu');
|
|
|
|
const list = this.lists[this.currentListIndex];
|
|
|
|
// Update current list display
|
|
if (currentListName) {
|
|
currentListName.textContent = list.name;
|
|
}
|
|
if (currentListColor) {
|
|
currentListColor.style.backgroundColor = list.background;
|
|
}
|
|
|
|
// Update dropdown menu
|
|
if (dropdownMenu) {
|
|
dropdownMenu.innerHTML = this.lists.map((l, index) => `
|
|
<div class="list-dropdown-item ${index === this.currentListIndex ? 'selected' : ''}" data-index="${index}">
|
|
<div class="list-color-indicator" style="background-color: ${l.background}"></div>
|
|
<span>${DOMUtils.escapeHtml(l.name)}</span>
|
|
${index === this.currentListIndex ? '<i class="fa-solid fa-check list-dropdown-item-check"></i>' : ''}
|
|
</div>
|
|
`).join('');
|
|
|
|
// Add click handlers to dropdown items
|
|
dropdownMenu.querySelectorAll('.list-dropdown-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
const index = Number((item as HTMLElement).dataset.index);
|
|
if (!Number.isNaN(index)) {
|
|
this.selectedCheckboxes.clear();
|
|
this.currentListIndex = index;
|
|
this.currentPage = 1;
|
|
this.savePopupState();
|
|
this.renderWords();
|
|
this.updateListForm();
|
|
this.renderLists();
|
|
dropdownMenu.classList.remove('open');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
this.updateListForm();
|
|
}
|
|
|
|
private updateListForm(): void {
|
|
const list = this.lists[this.currentListIndex];
|
|
const listBg = document.getElementById('listBg') as HTMLInputElement;
|
|
const listBgText = document.getElementById('listBgText') as HTMLInputElement;
|
|
const listFg = document.getElementById('listFg') as HTMLInputElement;
|
|
const listFgText = document.getElementById('listFgText') as HTMLInputElement;
|
|
const listActive = document.getElementById('listActive') as HTMLInputElement;
|
|
|
|
if (listBg) listBg.value = list.background;
|
|
if (listBgText) listBgText.value = list.background;
|
|
if (listFg) listFg.value = list.foreground;
|
|
if (listFgText) listFgText.value = list.foreground;
|
|
if (listActive) listActive.checked = list.active;
|
|
|
|
this.updatePreview();
|
|
}
|
|
|
|
private renderWords(): void {
|
|
this.closeWordItemMenu();
|
|
const list = this.lists[this.currentListIndex];
|
|
const wordList = document.getElementById('wordList') as HTMLDivElement;
|
|
|
|
let filteredWords = list.words;
|
|
if (this.wordSearchQuery.trim()) {
|
|
const q = this.wordSearchQuery.trim().toLowerCase();
|
|
filteredWords = list.words.filter(w => w.wordStr.toLowerCase().includes(q));
|
|
}
|
|
|
|
this.totalWords = filteredWords.length;
|
|
|
|
if (filteredWords.length === 0) {
|
|
wordList.innerHTML = '<div class="word-list-empty">No words found</div>';
|
|
const wordCount = document.getElementById('wordCount');
|
|
if (wordCount) wordCount.textContent = '0';
|
|
this.renderPaginationControls();
|
|
return;
|
|
}
|
|
|
|
const totalPages = Math.ceil(this.totalWords / this.pageSize);
|
|
if (this.currentPage > totalPages) {
|
|
this.currentPage = Math.max(1, totalPages);
|
|
this.savePopupState();
|
|
}
|
|
const startIndex = (this.currentPage - 1) * this.pageSize;
|
|
const endIndex = Math.min(startIndex + this.pageSize, this.totalWords);
|
|
const paginatedWords = filteredWords.slice(startIndex, endIndex);
|
|
|
|
wordList.innerHTML = paginatedWords.map(w => {
|
|
const realIndex = list.words.indexOf(w);
|
|
const isSelected = this.selectedCheckboxes.has(realIndex);
|
|
return this.createWordItemHTML(w, realIndex, isSelected);
|
|
}).join('');
|
|
|
|
const wordCount = document.getElementById('wordCount');
|
|
if (wordCount) {
|
|
wordCount.textContent = this.totalWords.toString();
|
|
}
|
|
|
|
this.renderPaginationControls();
|
|
}
|
|
|
|
private renderPaginationControls(): void {
|
|
const paginationContainer = document.getElementById('paginationControls');
|
|
if (!paginationContainer) return;
|
|
|
|
const totalPages = Math.ceil(this.totalWords / this.pageSize);
|
|
|
|
if (totalPages <= 1) {
|
|
paginationContainer.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const startItem = (this.currentPage - 1) * this.pageSize + 1;
|
|
const endItem = Math.min(this.currentPage * this.pageSize, this.totalWords);
|
|
|
|
const showingText = chrome.i18n.getMessage('showing_items')
|
|
?.replace('{start}', String(startItem))
|
|
.replace('{end}', String(endItem))
|
|
.replace('{total}', String(this.totalWords))
|
|
|| `Showing ${startItem}-${endItem} of ${this.totalWords} words`;
|
|
|
|
const pageInfoText = chrome.i18n.getMessage('page_info')
|
|
?.replace('{current}', String(this.currentPage))
|
|
.replace('{total}', String(totalPages))
|
|
|| `Page ${this.currentPage} of ${totalPages}`;
|
|
|
|
const firstPageTitle = chrome.i18n.getMessage('first_page') || 'First page';
|
|
const prevPageTitle = chrome.i18n.getMessage('previous_page') || 'Previous page';
|
|
const nextPageTitle = chrome.i18n.getMessage('next_page') || 'Next page';
|
|
const lastPageTitle = chrome.i18n.getMessage('last_page') || 'Last page';
|
|
|
|
paginationContainer.style.display = 'flex';
|
|
paginationContainer.innerHTML = `
|
|
<div class="pagination-info">
|
|
${showingText}
|
|
</div>
|
|
<div class="pagination-controls">
|
|
<button class="pagination-btn" id="firstPageBtn" ${this.currentPage === 1 ? 'disabled' : ''} title="${firstPageTitle}">
|
|
<i class="fa-solid fa-angles-left"></i>
|
|
</button>
|
|
<button class="pagination-btn" id="prevPageBtn" ${this.currentPage === 1 ? 'disabled' : ''} title="${prevPageTitle}">
|
|
<i class="fa-solid fa-angle-left"></i>
|
|
</button>
|
|
<div class="pagination-pages">
|
|
<span class="page-info">${pageInfoText}</span>
|
|
</div>
|
|
<button class="pagination-btn" id="nextPageBtn" ${this.currentPage === totalPages ? 'disabled' : ''} title="${nextPageTitle}">
|
|
<i class="fa-solid fa-angle-right"></i>
|
|
</button>
|
|
<button class="pagination-btn" id="lastPageBtn" ${this.currentPage === totalPages ? 'disabled' : ''} title="${lastPageTitle}">
|
|
<i class="fa-solid fa-angles-right"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
this.setupPaginationEventListeners();
|
|
}
|
|
|
|
private setupPaginationEventListeners(): void {
|
|
document.getElementById('firstPageBtn')?.addEventListener('click', () => {
|
|
this.goToPage(1);
|
|
});
|
|
|
|
document.getElementById('prevPageBtn')?.addEventListener('click', () => {
|
|
this.goToPage(this.currentPage - 1);
|
|
});
|
|
|
|
document.getElementById('nextPageBtn')?.addEventListener('click', () => {
|
|
this.goToPage(this.currentPage + 1);
|
|
});
|
|
|
|
document.getElementById('lastPageBtn')?.addEventListener('click', () => {
|
|
const totalPages = Math.ceil(this.totalWords / this.pageSize);
|
|
this.goToPage(totalPages);
|
|
});
|
|
}
|
|
|
|
private goToPage(page: number): void {
|
|
const totalPages = Math.ceil(this.totalWords / this.pageSize);
|
|
if (page < 1 || page > totalPages) return;
|
|
|
|
this.currentPage = page;
|
|
this.savePopupState();
|
|
this.renderWords();
|
|
}
|
|
|
|
private createWordItemHTML(word: HighlightWord, realIndex: number, isSelected: boolean): string {
|
|
const list = this.lists[this.currentListIndex];
|
|
const bgColor = word.background || list.background;
|
|
const fgColor = word.foreground || list.foreground;
|
|
const menuTitle = chrome.i18n.getMessage('word_actions') || 'Actions';
|
|
|
|
return `
|
|
<div class="word-item ${isSelected ? 'selected' : ''}" data-index="${realIndex}">
|
|
<span class="word-item-text">${DOMUtils.escapeHtml(word.wordStr)}</span>
|
|
<input type="text" class="word-item-edit-input" value="${DOMUtils.escapeHtml(word.wordStr)}" data-word-edit="${realIndex}" style="display: none;">
|
|
<div class="word-item-actions">
|
|
<button class="word-item-icon-btn edit-word-btn" data-index="${realIndex}" title="${chrome.i18n.getMessage('edit') || 'Edit'}">
|
|
<i class="fa-solid fa-pen"></i>
|
|
</button>
|
|
<input type="color" value="${bgColor}" data-bg-edit="${realIndex}" class="word-item-color-picker" title="${chrome.i18n.getMessage('background_color_title') || 'Background color'}">
|
|
<input type="color" value="${fgColor}" data-fg-edit="${realIndex}" class="word-item-color-picker" title="${chrome.i18n.getMessage('text_color_title') || 'Text color'}">
|
|
<label class="word-item-eye-toggle" title="${chrome.i18n.getMessage('toggle_active') || 'Toggle active'}" aria-label="${chrome.i18n.getMessage('toggle_active') || 'Toggle active'}">
|
|
<input type="checkbox" class="word-item-eye-input" ${word.active !== false ? 'checked' : ''} data-index="${realIndex}">
|
|
<span class="word-item-eye-icon">
|
|
<i class="fa-solid fa-eye eye-active"></i>
|
|
<i class="fa-solid fa-eye-slash eye-disabled"></i>
|
|
</span>
|
|
</label>
|
|
<button type="button" class="word-item-icon-btn word-item-menu-btn" data-index="${realIndex}" title="${DOMUtils.escapeHtml(menuTitle)}" aria-label="${DOMUtils.escapeHtml(menuTitle)}">
|
|
<i class="fa-solid fa-ellipsis-v"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private updateExceptionButton(): void {
|
|
const toggleBtn = document.getElementById('toggleExceptionBtn');
|
|
const btnText = document.getElementById('exceptionBtnText');
|
|
|
|
if (!toggleBtn || !btnText || !this.currentTabHost) return;
|
|
|
|
const isException = this.exceptionsList.includes(this.currentTabHost);
|
|
|
|
if (isException) {
|
|
btnText.textContent = chrome.i18n.getMessage('remove_exception') || 'Remove from Exceptions';
|
|
toggleBtn.classList.add('danger');
|
|
const icon = toggleBtn.querySelector('i');
|
|
if (icon) icon.className = 'fa-solid fa-trash';
|
|
} else {
|
|
btnText.textContent = chrome.i18n.getMessage('add_exception') || 'Add to Exceptions';
|
|
toggleBtn.classList.remove('danger');
|
|
const icon = toggleBtn.querySelector('i');
|
|
if (icon) icon.className = 'fa-solid fa-plus';
|
|
}
|
|
}
|
|
|
|
private renderExceptions(): void {
|
|
const container = document.getElementById('exceptionsList');
|
|
if (!container) return;
|
|
|
|
if (this.exceptionsList.length === 0) {
|
|
container.innerHTML = `<div class="exception-item">${chrome.i18n.getMessage('no_exceptions') || 'No exceptions'}</div>`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = this.exceptionsList.map(domain =>
|
|
`<div class="exception-item">
|
|
<span class="exception-domain">${DOMUtils.escapeHtml(domain)}</span>
|
|
<button type="button" class="exception-remove" data-domain="${DOMUtils.escapeHtml(domain)}" title="${DOMUtils.escapeHtml(chrome.i18n.getMessage('remove') || 'Remove')}" aria-label="${DOMUtils.escapeHtml(chrome.i18n.getMessage('remove') || 'Remove')}">
|
|
<i class="fa-solid fa-trash"></i>
|
|
</button>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
|
|
private updateFormValues(): void {
|
|
(document.getElementById('globalHighlightToggle') as HTMLInputElement).checked = this.globalHighlightEnabled;
|
|
(document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled;
|
|
(document.getElementById('matchWhole') as HTMLInputElement).checked = this.matchWholeEnabled;
|
|
}
|
|
}
|