mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-08 20:19:06 +03:00
redesign of popup
This commit is contained in:
1549
popup/popup.css
1549
popup/popup.css
File diff suppressed because it is too large
Load Diff
346
popup/popup.html
346
popup/popup.html
@@ -4,160 +4,292 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title data-i18n="extension_name"winter>Goose Highlighter</title>
|
||||
<title data-i18n="extension_name">Goose Highlighter</title>
|
||||
<link rel="stylesheet" href="popup.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading-overlay">
|
||||
<div class="loading-spinner"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="popup-container">
|
||||
|
||||
<div class="header-bar">
|
||||
<span class="title">
|
||||
<img src="../img/logo-outlined.png" alt="Goose Highlighter"
|
||||
style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
|
||||
</span>
|
||||
<div class="icon-toggles">
|
||||
<label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting">
|
||||
<input type="checkbox" class="hidden-toggle" id="globalHighlightToggle" />
|
||||
<i class="toggle-icon global-icon fa-solid"></i>
|
||||
</label>
|
||||
<label class="icon-toggle" data-i18n-title="toggle_dark_mode_title" title="Toggle dark mode">
|
||||
<input type="checkbox" class="hidden-toggle" id="themeToggle" />
|
||||
<i class="toggle-icon theme-icon fa-solid"></i>
|
||||
</label>
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="header-logo">
|
||||
<img src="../img/logo-outlined.png" alt="Goose" style="width: 20px; height: 20px;">
|
||||
</div>
|
||||
<span class="header-title" data-i18n="extension_name">Goose Highlighter</span>
|
||||
</div>
|
||||
<label class="switch-wrapper">
|
||||
<input type="checkbox" id="globalHighlightToggle" class="switch-input" />
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button class="tab-button active" data-tab="lists"><i class="fa-solid fa-list"></i> <span
|
||||
data-i18n="tab_lists">Lists</span></button>
|
||||
<button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span
|
||||
data-i18n="tab_words">Words</span></button>
|
||||
<button class="tab-button" data-tab="page-highlights"><i class="fa-solid fa-location-dot"></i> <span
|
||||
data-i18n="tab_page_highlights">On Page</span></button>
|
||||
<button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span
|
||||
data-i18n="tab_exceptions">Exceptions</span></button>
|
||||
<button class="tab-button" data-tab="options"><i class="fa-solid fa-sliders"></i> <span
|
||||
data-i18n="options">Options</span></button>
|
||||
<button class="tab-button active" data-tab="lists">
|
||||
<i class="fa-solid fa-list"></i>
|
||||
<span data-i18n="tab_lists">Lists</span>
|
||||
</button>
|
||||
<button class="tab-button" data-tab="words">
|
||||
<i class="fa-solid fa-tags"></i>
|
||||
<span data-i18n="tab_words">Words</span>
|
||||
</button>
|
||||
<button class="tab-button" data-tab="page-highlights">
|
||||
<i class="fa-solid fa-location-dot"></i>
|
||||
<span data-i18n="tab_page_highlights">On Page</span>
|
||||
</button>
|
||||
<button class="tab-button" data-tab="exceptions">
|
||||
<i class="fa-solid fa-ban"></i>
|
||||
<span data-i18n="tab_exceptions">Exceptions</span>
|
||||
</button>
|
||||
<button class="tab-button" data-tab="options">
|
||||
<i class="fa-solid fa-sliders"></i>
|
||||
<span data-i18n="options">Options</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Lists Tab -->
|
||||
<div class="tab-content active" data-tab-content="lists">
|
||||
<div class="section" data-section="lists">
|
||||
<label for="listSelect" data-i18n="select_list">Select List:</label>
|
||||
<select id="listSelect"></select>
|
||||
<div class="button-row">
|
||||
<button id="newListBtn"><i class="fa-solid fa-plus"></i> <span data-i18n="new_list">New</span></button>
|
||||
<button id="deleteListBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
|
||||
data-i18n="delete_list">Delete</span></button>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="manageListsBtn"><i class="fa-solid fa-layer-group"></i> Manage Lists</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-inner">
|
||||
<div class="list-selector-section">
|
||||
<!-- List Selector with Actions -->
|
||||
<div class="list-selector-row">
|
||||
<div class="list-dropdown-wrapper">
|
||||
<button class="list-dropdown-button" id="listDropdownBtn">
|
||||
<div class="list-dropdown-content">
|
||||
<div class="list-color-indicator" id="currentListColor"></div>
|
||||
<span class="list-dropdown-text" id="currentListName">Default List</span>
|
||||
</div>
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
</button>
|
||||
<div class="list-dropdown-menu" id="listDropdownMenu">
|
||||
<!-- Populated dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
<button class="icon-button" id="renameListBtn" title="Rename List">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</button>
|
||||
<button class="icon-button" id="newListBtn" title="New List">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</button>
|
||||
<button class="icon-button danger" id="deleteListBtn" title="Delete List">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="section" data-section="settings">
|
||||
<h3><i class="fa-solid fa-gear"></i> <span data-i18n="list_settings">List Settings</span></h3>
|
||||
<label><span data-i18n="list_name">List Name:</span> <input type="text" id="listName" /></label>
|
||||
<div class="color-row">
|
||||
<div class="color-label">
|
||||
<span data-i18n="background">Background:</span>
|
||||
<input type="color" id="listBg" />
|
||||
<!-- Manage Lists Button -->
|
||||
<button class="manage-lists-btn" id="manageListsBtn">
|
||||
<i class="fa-solid fa-layer-group"></i>
|
||||
<span>Manage Lists</span>
|
||||
</button>
|
||||
|
||||
<!-- Color Pickers -->
|
||||
<div class="color-pickers-row">
|
||||
<div class="color-picker-group">
|
||||
<label class="color-picker-label">Background</label>
|
||||
<div class="color-picker-input-group">
|
||||
<input type="color" id="listBg" class="color-picker-swatch" />
|
||||
<input type="text" id="listBgText" class="color-picker-text" maxlength="7" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-picker-group">
|
||||
<label class="color-picker-label">Foreground</label>
|
||||
<div class="color-picker-input-group">
|
||||
<input type="color" id="listFg" class="color-picker-swatch" />
|
||||
<input type="text" id="listFgText" class="color-picker-text" maxlength="7" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-label">
|
||||
<span data-i18n="foreground">Foreground:</span>
|
||||
<input type="color" id="listFg" />
|
||||
|
||||
<!-- Preview -->
|
||||
<div class="preview-section">
|
||||
<label class="preview-label">Preview</label>
|
||||
<div class="preview-box">
|
||||
<p class="preview-text">
|
||||
This is how your <span class="preview-highlight" id="previewHighlight">highlighted text</span> will appear.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Enable Toggle -->
|
||||
<div class="enable-toggle-section">
|
||||
<div class="enable-toggle-content">
|
||||
<div class="enable-toggle-text">
|
||||
<p class="enable-toggle-title">Enable Highlighting</p>
|
||||
<p class="enable-toggle-subtitle">Show highlights on pages</p>
|
||||
</div>
|
||||
<label class="switch-wrapper">
|
||||
<input type="checkbox" id="listActive" class="switch-input" />
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label>
|
||||
<span data-i18n="enable_highlight">Enable Highlighting</span>
|
||||
<input type="checkbox" class="switch" id="listActive" />
|
||||
</label>
|
||||
<button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span
|
||||
data-i18n="apply">Apply</span></button>
|
||||
|
||||
<!-- Apply Button -->
|
||||
<button class="apply-button" id="applyListSettingsBtn">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
<span data-i18n="apply">Apply Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Words Tab -->
|
||||
<div class="tab-content" data-tab-content="words">
|
||||
<div class="section" data-section="addwords">
|
||||
<h3><i class="fa-solid fa-pen"></i> <span data-i18n="add_words">Add Words</span></h3>
|
||||
<textarea id="bulkPaste" data-i18n="paste_hint" placeholder="Paste words here..."></textarea>
|
||||
<button id="addWordsBtn"><span data-i18n="apply_paste">Add Words</span></button>
|
||||
</div>
|
||||
|
||||
<div class="section" data-section="wordlist">
|
||||
<h3><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span> (<span
|
||||
id="wordCount">0</span>)</h3>
|
||||
<div class="button-row wrap">
|
||||
<button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
|
||||
<button id="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
|
||||
<button id="enableSelectedBtn"><span data-i18n="enable_selected">Enable</span></button>
|
||||
<button id="disableSelectedBtn"><span data-i18n="disable_selected">Disable</span></button>
|
||||
<button id="deleteSelectedBtn" class="danger"><span data-i18n="delete_selected">Delete</span></button>
|
||||
<div class="tab-inner">
|
||||
<!-- Add Words Section -->
|
||||
<div class="add-words-section">
|
||||
<label class="section-label">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
<span data-i18n="add_words">Add Words</span>
|
||||
</label>
|
||||
<textarea id="bulkPaste" class="add-words-textarea" data-i18n="paste_hint" placeholder="Paste words or phrases here. Each new word/phrase should start from next line."></textarea>
|
||||
<button class="add-words-button" id="addWordsBtn">
|
||||
<span data-i18n="apply_paste">Add Words</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Word List Section -->
|
||||
<div class="word-list-section">
|
||||
<div class="word-list-header">
|
||||
<label class="section-label">
|
||||
<i class="fa-solid fa-tags"></i>
|
||||
<span data-i18n="word_list">Word List</span>
|
||||
<span class="word-count-badge" id="wordCount">0</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="word-actions-row">
|
||||
<button class="word-action-btn" id="selectAllBtn">
|
||||
<span data-i18n="select_all">Select</span>
|
||||
</button>
|
||||
<button class="word-action-btn" id="deselectAllBtn">
|
||||
<span data-i18n="deselect_all">Deselect</span>
|
||||
</button>
|
||||
<button class="word-action-btn" id="enableSelectedBtn">
|
||||
<span data-i18n="enable_selected">Enable</span>
|
||||
</button>
|
||||
<button class="word-action-btn" id="disableSelectedBtn">
|
||||
<span data-i18n="disable_selected">Disable</span>
|
||||
</button>
|
||||
<button class="word-action-btn danger" id="deleteSelectedBtn">
|
||||
<span data-i18n="delete_selected">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="word-search-wrapper">
|
||||
<i class="fa-solid fa-search word-search-icon"></i>
|
||||
<input type="text" id="wordSearch" class="word-search-input" data-i18n="search_placeholder" placeholder="Search..." />
|
||||
</div>
|
||||
|
||||
<!-- Word List -->
|
||||
<div id="wordList" class="word-list-container"></div>
|
||||
|
||||
<!-- Help text -->
|
||||
<p class="word-list-hint">Click to select • Ctrl/Cmd+Click for multi-select</p>
|
||||
</div>
|
||||
<input type="text" id="wordSearch" data-i18n="search_placeholder" placeholder="Search..." />
|
||||
<div id="wordList"></div>
|
||||
<div class="selection-hint">Click to select • Ctrl/Cmd+Click for multi-select</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Highlights Tab -->
|
||||
<div class="tab-content" data-tab-content="page-highlights">
|
||||
<div class="section" data-section="page-highlights">
|
||||
<h3><i class="fa-solid fa-location-dot"></i> <span data-i18n="highlights_on_page">Highlights on This Page</span>
|
||||
</h3>
|
||||
<div class="page-highlights-info">
|
||||
<span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong>
|
||||
<div class="tab-inner">
|
||||
<div class="page-highlights-section">
|
||||
<div class="page-highlights-info-card">
|
||||
<span data-i18n="total_highlights">Total:</span>
|
||||
<strong id="totalHighlightsCount">0</strong>
|
||||
</div>
|
||||
|
||||
<button class="refresh-button" id="refreshHighlightsBtn">
|
||||
<i class="fa-solid fa-rotate"></i>
|
||||
<span data-i18n="refresh">Refresh</span>
|
||||
</button>
|
||||
|
||||
<div id="pageHighlightsList" class="page-highlights-list"></div>
|
||||
</div>
|
||||
<button id="refreshHighlightsBtn"><i class="fa-solid fa-rotate"></i> <span
|
||||
data-i18n="refresh">Refresh</span></button>
|
||||
<div id="pageHighlightsList" class="page-highlights-list"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Exceptions Tab -->
|
||||
<div class="tab-content" data-tab-content="exceptions">
|
||||
<div class="section" data-section="exceptions">
|
||||
<h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3>
|
||||
<div class="button-row">
|
||||
<button id="toggleExceptionBtn"><i class="fa-solid fa-plus"></i> <span id="exceptionBtnText"
|
||||
data-i18n="add_exception">Add to Exceptions</span></button>
|
||||
<div class="tab-inner">
|
||||
<div class="exceptions-section">
|
||||
<label class="section-label">
|
||||
<i class="fa-solid fa-ban"></i>
|
||||
<span data-i18n="site_exceptions">Site Exceptions</span>
|
||||
</label>
|
||||
|
||||
<button class="exception-toggle-btn" id="toggleExceptionBtn">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span>
|
||||
</button>
|
||||
|
||||
<div class="exceptions-list-wrapper">
|
||||
<label class="section-label">
|
||||
<span data-i18n="exceptions_list">Exception Sites:</span>
|
||||
</label>
|
||||
<div id="exceptionsList" class="exceptions-list"></div>
|
||||
</div>
|
||||
|
||||
<button class="clear-exceptions-btn" id="clearExceptionsBtn">
|
||||
<i class="fa-solid fa-trash"></i>
|
||||
<span data-i18n="clear_all">Clear All</span>
|
||||
</button>
|
||||
</div>
|
||||
<h3 data-i18n="exceptions_list">Exception Sites:</h3>
|
||||
<div id="exceptionsList" class="exceptions-list"></div>
|
||||
<button id="clearExceptionsBtn" class="danger"><i class="fa-solid fa-trash"></i> <span
|
||||
data-i18n="clear_all">Clear All</span></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Options Tab -->
|
||||
<div class="tab-content" data-tab-content="options">
|
||||
<div class="section" data-section="options">
|
||||
<h3><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></h3>
|
||||
<div class="button-row" style="margin-bottom:8px;">
|
||||
<label><input type="checkbox" id="matchCase" /> <span data-i18n="match_case">Match Case</span></label>
|
||||
<label><input type="checkbox" id="matchWhole" /> <span data-i18n="match_whole">Match Whole Word</span></label>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button id="importBtn"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import</span></button>
|
||||
<input type="file" id="importInput" accept="application/json" hidden />
|
||||
<button id="exportBtn"><i class="fa-solid fa-download"></i> <span
|
||||
data-i18n="export_list">Export</span></button>
|
||||
<div class="tab-inner">
|
||||
<div class="options-section">
|
||||
<label class="section-label">
|
||||
<i class="fa-solid fa-sliders"></i>
|
||||
<span data-i18n="options">Options</span>
|
||||
</label>
|
||||
|
||||
<div class="options-checkboxes">
|
||||
<label class="option-checkbox-label">
|
||||
<input type="checkbox" id="matchCase" class="option-checkbox" />
|
||||
<span data-i18n="match_case">Match Case</span>
|
||||
</label>
|
||||
<label class="option-checkbox-label">
|
||||
<input type="checkbox" id="matchWhole" class="option-checkbox" />
|
||||
<span data-i18n="match_whole">Match Whole Word</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="options-buttons">
|
||||
<button class="option-button" id="importBtn">
|
||||
<i class="fa-solid fa-upload"></i>
|
||||
<span data-i18n="import_list">Import</span>
|
||||
</button>
|
||||
<input type="file" id="importInput" accept="application/json" hidden />
|
||||
<button class="option-button" id="exportBtn">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
<span data-i18n="export_list">Export</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<span class="version">v<span id="version-number">...</span></span>
|
||||
<a href="https://github.com/obsqrbtz/goose-highlighter" target="_blank" class="github-link">
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
<span class="footer-version">v<span id="version-number">...</span></span>
|
||||
<a href="https://github.com/obsqrbtz/goose-highlighter" target="_blank" class="footer-link">
|
||||
<i class="fa-brands fa-github"></i>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module" src="../dist/popup/popup.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -131,13 +131,18 @@ export class PopupController {
|
||||
}
|
||||
|
||||
private setupListManagement(): void {
|
||||
const listSelect = document.getElementById('listSelect') as HTMLSelectElement;
|
||||
const dropdownBtn = document.getElementById('listDropdownBtn');
|
||||
const dropdownMenu = document.getElementById('listDropdownMenu');
|
||||
|
||||
listSelect.addEventListener('change', () => {
|
||||
this.selectedCheckboxes.clear();
|
||||
this.currentListIndex = +listSelect.value;
|
||||
this.renderWords();
|
||||
this.updateListForm();
|
||||
// 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
|
||||
@@ -145,11 +150,21 @@ export class PopupController {
|
||||
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: '#ffff00',
|
||||
background: '#22c55e',
|
||||
foreground: '#000000',
|
||||
active: true,
|
||||
words: []
|
||||
@@ -158,7 +173,12 @@ export class PopupController {
|
||||
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);
|
||||
@@ -166,9 +186,40 @@ export class PopupController {
|
||||
}
|
||||
});
|
||||
|
||||
// Manage lists
|
||||
document.getElementById('manageListsBtn')?.addEventListener('click', () => {
|
||||
this.openListManagerWindow();
|
||||
});
|
||||
|
||||
// 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 {
|
||||
@@ -206,8 +257,22 @@ export class PopupController {
|
||||
const list = this.lists[this.currentListIndex];
|
||||
if (!list) return;
|
||||
|
||||
// Handle checkbox click
|
||||
if (target.classList.contains('word-item-checkbox')) {
|
||||
e.stopPropagation();
|
||||
const wordItem = target.closest('.word-item') as HTMLElement;
|
||||
if (wordItem) {
|
||||
const index = Number(wordItem.dataset.index);
|
||||
if (!Number.isNaN(index)) {
|
||||
const mouseEvent = e as MouseEvent;
|
||||
this.toggleWordSelection(index, mouseEvent.ctrlKey || mouseEvent.metaKey);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle edit button click
|
||||
const editBtn = target.closest('.icon-btn.edit-word-btn') as HTMLElement | null;
|
||||
const editBtn = target.closest('.word-item-icon-btn.edit-word-btn') as HTMLElement | null;
|
||||
if (editBtn) {
|
||||
e.stopPropagation();
|
||||
const index = Number(editBtn.dataset.index);
|
||||
@@ -217,34 +282,25 @@ export class PopupController {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle toggle button click
|
||||
if (target.classList.contains('toggle-btn')) {
|
||||
e.stopPropagation();
|
||||
const index = Number(target.dataset.index);
|
||||
if (!Number.isNaN(index)) {
|
||||
const word = list.words[index];
|
||||
if (word) {
|
||||
word.active = !word.active;
|
||||
this.save();
|
||||
}
|
||||
}
|
||||
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-edit-input')) {
|
||||
if (target.classList.contains('word-item-edit-input')) {
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Don't select if clicking inside word-actions area
|
||||
if (target.closest('.word-actions') && !target.classList.contains('word-item')) {
|
||||
if (target.closest('.word-item-actions') && !target.classList.contains('word-item')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Don't select if clicking on switch
|
||||
if (target.closest('.switch-wrapper')) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -256,28 +312,29 @@ export class PopupController {
|
||||
if (Number.isNaN(index)) return;
|
||||
|
||||
const mouseEvent = e as MouseEvent;
|
||||
// Ctrl/Cmd + click for multi-select
|
||||
if (mouseEvent.ctrlKey || mouseEvent.metaKey) {
|
||||
if (this.selectedCheckboxes.has(index)) {
|
||||
this.selectedCheckboxes.delete(index);
|
||||
} else {
|
||||
this.selectedCheckboxes.add(index);
|
||||
}
|
||||
this.renderWords();
|
||||
return;
|
||||
}
|
||||
|
||||
// Regular click - toggle selection
|
||||
if (this.selectedCheckboxes.has(index)) {
|
||||
this.selectedCheckboxes.delete(index);
|
||||
} else {
|
||||
this.selectedCheckboxes.add(index);
|
||||
}
|
||||
this.renderWords();
|
||||
this.toggleWordSelection(index, mouseEvent.ctrlKey || mouseEvent.metaKey);
|
||||
});
|
||||
|
||||
wordList.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const list = this.lists[this.currentListIndex];
|
||||
|
||||
// Handle switch toggle
|
||||
if (target.classList.contains('switch-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;
|
||||
|
||||
@@ -290,7 +347,7 @@ export class PopupController {
|
||||
|
||||
wordList.addEventListener('keydown', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (!target.classList.contains('word-edit-input')) return;
|
||||
if (!target.classList.contains('word-item-edit-input')) return;
|
||||
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
@@ -303,7 +360,7 @@ export class PopupController {
|
||||
|
||||
wordList.addEventListener('blur', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (!target.classList.contains('word-edit-input')) return;
|
||||
if (!target.classList.contains('word-item-edit-input')) return;
|
||||
|
||||
const list = this.lists[this.currentListIndex];
|
||||
if (!list) return;
|
||||
@@ -334,16 +391,33 @@ export class PopupController {
|
||||
});
|
||||
}
|
||||
|
||||
private toggleWordSelection(index: number, multiSelect: boolean): void {
|
||||
if (multiSelect) {
|
||||
if (this.selectedCheckboxes.has(index)) {
|
||||
this.selectedCheckboxes.delete(index);
|
||||
} else {
|
||||
this.selectedCheckboxes.add(index);
|
||||
}
|
||||
} else {
|
||||
if (this.selectedCheckboxes.has(index)) {
|
||||
this.selectedCheckboxes.delete(index);
|
||||
} else {
|
||||
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-text') as HTMLElement;
|
||||
const input = wordItem.querySelector('.word-edit-input') as HTMLInputElement;
|
||||
const textSpan = wordItem.querySelector('.word-item-text') as HTMLElement;
|
||||
const input = wordItem.querySelector('.word-item-edit-input') as HTMLInputElement;
|
||||
if (!textSpan || !input) return;
|
||||
|
||||
textSpan.classList.add('editing');
|
||||
input.classList.add('active');
|
||||
textSpan.style.display = 'none';
|
||||
input.style.display = 'block';
|
||||
input.focus();
|
||||
input.select();
|
||||
}
|
||||
@@ -397,7 +471,7 @@ export class PopupController {
|
||||
const matchCase = document.getElementById('matchCase') as HTMLInputElement;
|
||||
const matchWhole = document.getElementById('matchWhole') as HTMLInputElement;
|
||||
|
||||
globalToggle.addEventListener('change', async () => {
|
||||
globalToggle?.addEventListener('change', async () => {
|
||||
this.globalHighlightEnabled = globalToggle.checked;
|
||||
await StorageService.update('globalHighlightEnabled', this.globalHighlightEnabled);
|
||||
MessageService.sendToAllTabs({
|
||||
@@ -406,7 +480,7 @@ export class PopupController {
|
||||
});
|
||||
});
|
||||
|
||||
matchCase.addEventListener('change', async () => {
|
||||
matchCase?.addEventListener('change', async () => {
|
||||
this.matchCaseEnabled = matchCase.checked;
|
||||
await StorageService.update('matchCaseEnabled', this.matchCaseEnabled);
|
||||
MessageService.sendToAllTabs({
|
||||
@@ -416,7 +490,7 @@ export class PopupController {
|
||||
});
|
||||
});
|
||||
|
||||
matchWhole.addEventListener('change', async () => {
|
||||
matchWhole?.addEventListener('change', async () => {
|
||||
this.matchWholeEnabled = matchWhole.checked;
|
||||
await StorageService.update('matchWholeEnabled', this.matchWholeEnabled);
|
||||
MessageService.sendToAllTabs({
|
||||
@@ -524,10 +598,10 @@ export class PopupController {
|
||||
${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>
|
||||
<i class="lucide lucide-chevron-up"></i>
|
||||
</button>
|
||||
<button class="highlight-next" title="${chrome.i18n.getMessage('next') || 'Next'}">
|
||||
<i class="fa-solid fa-chevron-down"></i>
|
||||
<i class="lucide lucide-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
` : ''}
|
||||
@@ -631,44 +705,23 @@ export class PopupController {
|
||||
}
|
||||
|
||||
private setupTheme(): void {
|
||||
const toggle = document.getElementById('themeToggle') as HTMLInputElement;
|
||||
const body = document.body;
|
||||
|
||||
// Theme is now controlled by system/browser preference
|
||||
// Remove the manual theme toggle from the UI
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme === 'light') {
|
||||
body.classList.remove('dark');
|
||||
body.classList.add('light');
|
||||
toggle.checked = false;
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
} else {
|
||||
body.classList.add('dark');
|
||||
body.classList.remove('light');
|
||||
toggle.checked = true;
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
}
|
||||
|
||||
toggle.addEventListener('change', () => {
|
||||
if (toggle.checked) {
|
||||
body.classList.add('dark');
|
||||
body.classList.remove('light');
|
||||
document.documentElement.classList.add('dark');
|
||||
document.documentElement.classList.remove('light');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
body.classList.remove('dark');
|
||||
body.classList.add('light');
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.documentElement.classList.add('light');
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private applyListSettings(): void {
|
||||
const listName = document.getElementById('listName') as HTMLInputElement;
|
||||
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].name = listName.value;
|
||||
this.lists[this.currentListIndex].background = listBg.value;
|
||||
this.lists[this.currentListIndex].foreground = listFg.value;
|
||||
this.lists[this.currentListIndex].active = listActive.checked;
|
||||
@@ -676,6 +729,17 @@ export class PopupController {
|
||||
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,
|
||||
@@ -744,20 +808,64 @@ export class PopupController {
|
||||
}
|
||||
|
||||
private renderLists(): void {
|
||||
const listSelect = document.getElementById('listSelect') as HTMLSelectElement;
|
||||
listSelect.innerHTML = this.lists.map((list, index) =>
|
||||
`<option value="${index}">${DOMUtils.escapeHtml(list.name)}</option>`
|
||||
).join('');
|
||||
listSelect.value = this.currentListIndex.toString();
|
||||
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.renderWords();
|
||||
this.updateListForm();
|
||||
this.renderLists();
|
||||
dropdownMenu.classList.remove('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.updateListForm();
|
||||
}
|
||||
|
||||
private updateListForm(): void {
|
||||
const list = this.lists[this.currentListIndex];
|
||||
(document.getElementById('listName') as HTMLInputElement).value = list.name;
|
||||
(document.getElementById('listBg') as HTMLInputElement).value = list.background;
|
||||
(document.getElementById('listFg') as HTMLInputElement).value = list.foreground;
|
||||
(document.getElementById('listActive') as HTMLInputElement).checked = list.active;
|
||||
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 {
|
||||
@@ -770,32 +878,18 @@ export class PopupController {
|
||||
filteredWords = list.words.filter(w => w.wordStr.toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
const itemHeight = 32;
|
||||
const itemSpacing = 4;
|
||||
const totalItemHeight = itemHeight + itemSpacing;
|
||||
const containerHeight = wordList.clientHeight || 250;
|
||||
const scrollTop = wordList.scrollTop;
|
||||
const startIndex = Math.max(0, Math.floor(scrollTop / totalItemHeight) - 1);
|
||||
const visibleCount = Math.ceil(containerHeight / totalItemHeight);
|
||||
const endIndex = Math.min(startIndex + visibleCount + 2, filteredWords.length);
|
||||
|
||||
wordList.innerHTML = '';
|
||||
|
||||
const spacer = document.createElement('div');
|
||||
spacer.style.position = 'relative';
|
||||
spacer.style.height = `${filteredWords.length * totalItemHeight - itemSpacing}px`;
|
||||
spacer.style.width = '100%';
|
||||
|
||||
for (let i = startIndex; i < endIndex; i++) {
|
||||
const w = filteredWords[i];
|
||||
if (!w) continue;
|
||||
|
||||
const realIndex = list.words.indexOf(w);
|
||||
const container = this.createWordItem(w, realIndex, i, itemHeight);
|
||||
spacer.appendChild(container);
|
||||
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';
|
||||
return;
|
||||
}
|
||||
|
||||
wordList.appendChild(spacer);
|
||||
wordList.innerHTML = filteredWords.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) {
|
||||
@@ -803,37 +897,29 @@ export class PopupController {
|
||||
}
|
||||
}
|
||||
|
||||
private createWordItem(word: HighlightWord, realIndex: number, displayIndex: number, itemHeight: number): HTMLDivElement {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'word-item';
|
||||
if (this.selectedCheckboxes.has(realIndex)) {
|
||||
container.classList.add('selected');
|
||||
}
|
||||
if (word.active === false) {
|
||||
container.classList.add('disabled');
|
||||
}
|
||||
container.style.cssText = `
|
||||
position: absolute;
|
||||
top: ${displayIndex * (itemHeight + 4)}px;
|
||||
`;
|
||||
container.dataset.index = realIndex.toString();
|
||||
|
||||
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;
|
||||
|
||||
container.innerHTML = `
|
||||
<span class="word-text">${DOMUtils.escapeHtml(word.wordStr)}</span>
|
||||
<input type="text" class="word-edit-input" value="${DOMUtils.escapeHtml(word.wordStr)}" data-word-edit="${realIndex}">
|
||||
<div class="word-actions">
|
||||
<button class="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="${word.background || list.background}" data-bg-edit="${realIndex}" title="${chrome.i18n.getMessage('background_color_title') || 'Background color'}">
|
||||
<input type="color" value="${word.foreground || list.foreground}" data-fg-edit="${realIndex}" title="${chrome.i18n.getMessage('text_color_title') || 'Text color'}">
|
||||
<button class="toggle-btn ${word.active !== false ? 'active' : ''}" data-index="${realIndex}" title="${chrome.i18n.getMessage('toggle_active') || 'Toggle active'}"></button>
|
||||
return `
|
||||
<div class="word-item ${isSelected ? 'selected' : ''}" data-index="${realIndex}">
|
||||
<div class="word-item-checkbox ${isSelected ? 'checked' : ''}"></div>
|
||||
<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="switch-wrapper word-item-switch">
|
||||
<input type="checkbox" class="switch-input" ${word.active !== false ? 'checked' : ''} title="${chrome.i18n.getMessage('toggle_active') || 'Toggle active'}">
|
||||
<span class="switch-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return container;
|
||||
}
|
||||
|
||||
private updateExceptionButton(): void {
|
||||
@@ -846,12 +932,12 @@ export class PopupController {
|
||||
|
||||
if (isException) {
|
||||
btnText.textContent = chrome.i18n.getMessage('remove_exception') || 'Remove from Exceptions';
|
||||
toggleBtn.className = 'danger';
|
||||
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.className = '';
|
||||
toggleBtn.classList.remove('danger');
|
||||
const icon = toggleBtn.querySelector('i');
|
||||
if (icon) icon.className = 'fa-solid fa-plus';
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user