obsqrbtz/goose-highlighter
1
0
Fork 0
mirror of https://github.com/obsqrbtz/goose-highlighter.git synced 2026-04-08 20:19:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add collapsible sections

Browse Source
This commit is contained in:
Daniel Dada
2025-10-07 14:46:03 +03:00
parent 915add3a4c
commit a158a303b0
17 changed files with 268 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
_locales/de/messages.json
View File

@@ -115,5 +115,8 @@
},
"confirm_clear_exceptions": {
"message": "Möchten Sie wirklich alle Ausnahmen löschen?"
},
"remove": {
"message": "Entfernen"
}
}

3
_locales/en/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Are you sure you want to clear all exceptions?"
},
"remove": {
"message": "Remove"
}
}

3
_locales/es/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "¿Estás seguro de que deseas limpiar todas las excepciones?"
},
"remove": {
"message": "Eliminar"
}
}

3
_locales/fr/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Êtes-vous sûr de vouloir effacer toutes les exceptions ?"
},
"remove": {
"message": "Supprimer"
}
}

3
_locales/hi/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "क्या आप वाकई सभी अपवादों को साफ करना चाहते हैं?"
},
"remove": {
"message": "हटाएं"
}
}

3
_locales/it/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Sei sicuro di voler cancellare tutte le eccezioni?"
},
"remove": {
"message": "Rimuovi"
}
}

3
_locales/ja/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "すべての例外をクリアしてもよろしいですか？"
},
"remove": {
"message": "削除"
}
}

3
_locales/ko/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "모든 예외를 지우시겠습니까?"
},
"remove": {
"message": "제거"
}
}

3
_locales/nl/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Weet je zeker dat je alle uitzonderingen wilt wissen?"
},
"remove": {
"message": "Verwijderen"
}
}

3
_locales/pl/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Czy na pewno chcesz wyczyścić wszystkie wyjątki?"
},
"remove": {
"message": "Usuń"
}
}

3
_locales/pt_BR/messages.json
View File

@@ -115,5 +115,8 @@
},
"confirm_clear_exceptions": {
"message": "Tem certeza de que deseja limpar todas as exceções?"
},
"remove": {
"message": "Remover"
}
}

3
_locales/ru/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Вы уверены, что хотите очистить все исключения?"
},
"remove": {
"message": "Удалить"
}
}

3
_locales/tr/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "Tüm istisnaları temizlemek istediğinizden emin misiniz?"
},
"remove": {
"message": "Kaldır"
}
}

3
_locales/zh_CN/messages.json
View File

@@ -121,5 +121,8 @@
},
"confirm_clear_exceptions": {
"message": "您确定要清除所有例外吗？"
},
"remove": {
"message": "移除"
}
}

56
popup/popup.css
View File

@@ -80,6 +80,7 @@ h1 {
border-radius: var(--border-radius);
padding: 14px;
box-shadow: var(--shadow);
transition: all 0.2s ease;
}
.section-header {
@@ -87,6 +88,60 @@ h1 {
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
padding-left: 8px;
padding-right: 8px;
}
.section-header:hover {
background: var(--highlight-tag);
border-radius: 6px;
transition: background 0.2s ease;
}
.collapse-toggle {
background: none !important;
border: none !important;
color: var(--text-color) !important;
padding: 4px !important;
margin: 0 !important;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.collapse-toggle:hover {
background: var(--button-hover) !important;
color: var(--accent) !important;
}
.collapse-toggle i {
transition: transform 0.2s ease;
font-size: 0.8em;
}
.section.collapsed .collapse-toggle i {
transform: rotate(180deg);
}
.section-content {
overflow: hidden;
max-height: 2000px;
}
.section.collapsed .section-content {
max-height: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.section.collapsed .section-header {
margin-bottom: 0;
}
.section h2 {
@@ -96,6 +151,7 @@ h1 {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
input[type="text"],

158
popup/popup.html
View File

@@ -29,83 +29,121 @@
</div>
</div>
<div class="section">
<div class="section" data-section="exceptions">
<div class="section-header">
<h2><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h2>
<button class="collapse-toggle" data-target="exceptions">
<i class="fa-solid fa-chevron-up"></i>
</button>
</div>
<div class="button-row">
<button id="toggleExceptionBtn"><i class="fa-solid fa-ban"></i> <span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span></button>
<button id="manageExceptionsBtn"><i class="fa-solid fa-list"></i> <span data-i18n="manage_exceptions">Manage</span></button>
</div>
<div id="exceptionsPanel" class="exceptions-panel" style="display: none;">
<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 class="section-content" id="exceptions-content">
<div class="button-row">
<button id="toggleExceptionBtn"><i class="fa-solid fa-ban"></i> <span id="exceptionBtnText" data-i18n="add_exception">Add to Exceptions</span></button>
<button id="manageExceptionsBtn"><i class="fa-solid fa-list"></i> <span data-i18n="manage_exceptions">Manage</span></button>
</div>
<div id="exceptionsPanel" class="exceptions-panel" style="display: none;">
<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>
</div>
<div class="section">
<div class="section" data-section="lists">
<div class="section-header">
<h2><i class="fa-solid fa-list"></i> <span data-i18n="highlight_lists">Highlight Lists</span></h2>
<button class="collapse-toggle" data-target="lists">
<i class="fa-solid fa-chevron-up"></i>
</button>
</div>
<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>
<div class="section">
<h2><i class="fa-solid fa-gear"></i> <span data-i18n="list_settings">List Settings</span></h2>
<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" />
</div>
<div class="color-label">
<span data-i18n="foreground">Foreground:</span>
<input type="color" id="listFg" />
<div class="section-content" id="lists-content">
<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>
<label>
<span data-i18n="enable_highlight">Enable Highlighting</span>
<input type="checkbox" class="switch" id="listActive" />
</label>
</div>
<div class="section">
<h2><i class="fa-solid fa-pen"></i> <span data-i18n="add_words">Add Words</span></h2>
<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">
<h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span>(<span id="wordCount">0</span>)
</h2>
<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="section" data-section="settings">
<div class="section-header">
<h2><i class="fa-solid fa-gear"></i> <span data-i18n="list_settings">List Settings</span></h2>
<button class="collapse-toggle" data-target="settings">
<i class="fa-solid fa-chevron-up"></i>
</button>
</div>
<div class="section-content" id="settings-content">
<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" />
</div>
<div class="color-label">
<span data-i18n="foreground">Foreground:</span>
<input type="color" id="listFg" />
</div>
</div>
<label>
<span data-i18n="enable_highlight">Enable Highlighting</span>
<input type="checkbox" class="switch" id="listActive" />
</label>
</div>
<input type="text" id="wordSearch" data-i18n="search_placeholder" placeholder="Search..." />
<div id="wordList"></div>
</div>
<div class="section">
<h2><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></h2>
<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 class="section" data-section="addwords">
<div class="section-header">
<h2><i class="fa-solid fa-pen"></i> <span data-i18n="add_words">Add Words</span></h2>
<button class="collapse-toggle" data-target="addwords">
<i class="fa-solid fa-chevron-up"></i>
</button>
</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="section-content" id="addwords-content">
<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>
<div class="section" data-section="wordlist">
<div class="section-header">
<h2><i class="fa-solid fa-tags"></i> <span data-i18n="word_list">Word List</span>(<span id="wordCount">0</span>)
</h2>
<button class="collapse-toggle" data-target="wordlist">
<i class="fa-solid fa-chevron-up"></i>
</button>
</div>
<div class="section-content" id="wordlist-content">
<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>
<input type="text" id="wordSearch" data-i18n="search_placeholder" placeholder="Search..." />
<div id="wordList"></div>
</div>
</div>
<div class="section" data-section="options">
<div class="section-header">
<h2><i class="fa-solid fa-sliders"></i> <span data-i18n="options">Options</span></h2>
<button class="collapse-toggle" data-target="options">
<i class="fa-solid fa-chevron-up"></i>
</button>
</div>
<div class="section-content" id="options-content">
<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>
</div>
</div>
</div>

73
popup/popup.js
View File

@@ -17,6 +17,51 @@ let matchCaseEnabled = false;
let matchWholeEnabled = false;
let exceptionsList = [];
let currentTabHost = '';
let sectionStates = {};
function loadSectionStates() {
const saved = localStorage.getItem('goose-highlighter-section-states');
if (saved) {
try {
sectionStates = JSON.parse(saved);
} catch {
sectionStates = {};
}
}
}
function saveSectionStates() {
localStorage.setItem('goose-highlighter-section-states', JSON.stringify(sectionStates));
}
function toggleSection(sectionName) {
const section = document.querySelector(`[data-section="${sectionName}"]`);
if (!section) return;
const isCollapsed = section.classList.contains('collapsed');
if (isCollapsed) {
section.classList.remove('collapsed');
sectionStates[sectionName] = false;
} else {
section.classList.add('collapsed');
sectionStates[sectionName] = true;
}
saveSectionStates();
}
function initializeSectionStates() {
loadSectionStates();
// Apply saved states
Object.keys(sectionStates).forEach(sectionName => {
const section = document.querySelector(`[data-section="${sectionName}"]`);
if (section && sectionStates[sectionName]) {
section.classList.add('collapsed');
}
});
}
function escapeHtml(str) {
return str.replace(/[&<>"']/g, function (m) {
@@ -278,13 +323,39 @@ function renderExceptions() {
container.innerHTML = exceptionsList.map(domain =>
`<div class="exception-item">
<span class="exception-domain">${escapeHtml(domain)}</span>
<button class="exception-remove" data-domain="${escapeHtml(domain)}">Remove</button>
<button class="exception-remove" data-domain="${escapeHtml(domain)}">${chrome.i18n.getMessage('remove')}</button>
</div>`
).join('');
}
document.addEventListener('DOMContentLoaded', () => {
initializeSectionStates();
localizePage();
// Add event listeners for collapse toggles
document.querySelectorAll('.collapse-toggle').forEach(button => {
button.addEventListener('click', (e) => {
e.stopPropagation();
const targetSection = button.getAttribute('data-target');
toggleSection(targetSection);
});
});
// Also allow clicking section headers to toggle
document.querySelectorAll('.section-header').forEach(header => {
header.addEventListener('click', (e) => {
// Don't toggle if clicking on a button or input within the header
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'INPUT' || e.target.closest('button')) {
return;
}
const section = header.closest('.section');
const sectionName = section.getAttribute('data-section');
if (sectionName) {
toggleSection(sectionName);
}
});
});
document.getElementById('selectAllBtn').onclick = () => {
const list = lists[currentListIndex];
list.words.forEach((_, index) => {