mirror of
https://github.com/obsqrbtz/goose-highlighter.git
synced 2026-04-09 12:37:48 +03:00
Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
11801bad88 | ||
| 647f4f8ad4 | |||
| 7a50d24a9d | |||
|
|
3de4190ad7 | ||
| 86b143f5a0 | |||
| 5d7766d5fd | |||
| f800318e66 |
15
CHANGELOG.md
15
CHANGELOG.md
@@ -1,3 +1,18 @@
|
|||||||
|
# [1.11.0](https://github.com/obsqrbtz/goose-highlighter/compare/v1.10.2...v1.11.0) (2025-12-11)
|
||||||
|
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
* NY ([647f4f8](https://github.com/obsqrbtz/goose-highlighter/commit/647f4f8ad489b4fa573b182c7f7e730b591dd595))
|
||||||
|
|
||||||
|
## [1.10.2](https://github.com/obsqrbtz/goose-highlighter/compare/v1.10.1...v1.10.2) (2025-11-22)
|
||||||
|
|
||||||
|
|
||||||
|
### Bug Fixes
|
||||||
|
|
||||||
|
* do not highlight textareas. create badge with popup instead ([f800318](https://github.com/obsqrbtz/goose-highlighter/commit/f800318e66aba17eb95d60c3bfa44c5215989314))
|
||||||
|
* update badge when textarea text changes ([5d7766d](https://github.com/obsqrbtz/goose-highlighter/commit/5d7766d5fd3df0204f64eb15f938cb2a459897ad))
|
||||||
|
|
||||||
## [1.10.1](https://github.com/obsqrbtz/goose-highlighter/compare/v1.10.0...v1.10.1) (2025-11-20)
|
## [1.10.1](https://github.com/obsqrbtz/goose-highlighter/compare/v1.10.0...v1.10.1) (2025-11-20)
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
BIN
img/logo-outlined-winter.png
Normal file
BIN
img/logo-outlined-winter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
BIN
img/logo-winter.png
Normal file
BIN
img/logo-winter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
@@ -2,7 +2,7 @@
|
|||||||
"manifest_version": 3,
|
"manifest_version": 3,
|
||||||
"name": "__MSG_extension_name__",
|
"name": "__MSG_extension_name__",
|
||||||
"description": "__MSG_extension_description__",
|
"description": "__MSG_extension_description__",
|
||||||
"version": "1.10.1",
|
"version": "1.11.0",
|
||||||
"default_locale": "en",
|
"default_locale": "en",
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"scripting",
|
"scripting",
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
:root {
|
:root {
|
||||||
--bg-color: #0f0f0f;
|
--bg-color: #0d0f13;
|
||||||
--text-color: #e8e8e8;
|
--text-color: #e8e8e8;
|
||||||
--input-bg: #1c1c1c;
|
--input-bg: #171b22;
|
||||||
--input-border: #2d2d2d;
|
--input-border: #2d2d2d;
|
||||||
--button-bg: #252525;
|
--button-bg: #252525;
|
||||||
--button-hover: #333333;
|
--button-hover: #333333;
|
||||||
--button-text: #e8e8e8;
|
--button-text: #e8e8e8;
|
||||||
--accent: #ec9c23;
|
--accent: #7dc7ff;
|
||||||
--accent-hover: #ffb84d;
|
--accent-hover: #a9ddff;
|
||||||
--accent-text: #000;
|
--accent-text: #000000;
|
||||||
--highlight-tag: #222222;
|
--highlight-tag: #222222;
|
||||||
--highlight-tag-border: #3a3a3a;
|
--highlight-tag-border: #3a3a3a;
|
||||||
--danger: #ef4444;
|
--danger: #ef4444;
|
||||||
@@ -16,7 +16,7 @@
|
|||||||
--shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
--shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
--border-radius: 10px;
|
--border-radius: 10px;
|
||||||
--section-bg: #161616;
|
--section-bg: #13161c;
|
||||||
--switch-bg: #3a3a3a;
|
--switch-bg: #3a3a3a;
|
||||||
--checkbox-accent: #ec9c23;
|
--checkbox-accent: #ec9c23;
|
||||||
--checkbox-border: #4a4a4a;
|
--checkbox-border: #4a4a4a;
|
||||||
@@ -73,22 +73,23 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body.light {
|
body.light {
|
||||||
--bg-color: #f8f9fa;
|
--bg-color: #eef6ff;
|
||||||
--text-color: #1a1a1a;
|
--text-color: #1a1a1a;
|
||||||
--input-bg: #ffffff;
|
--input-bg: #f3f8ff;
|
||||||
--input-border: #e0e0e0;
|
--input-border: #d0e4ff;
|
||||||
--button-bg: #f0f0f0;
|
--button-bg: #e0f0ff;
|
||||||
--button-hover: #e5e5e5;
|
--button-hover: #cde8ff;
|
||||||
--button-text: #1a1a1a;
|
--button-text: #1a1a1a;
|
||||||
--accent: #ec9c23;
|
--accent: #5ab6ff;
|
||||||
--accent-text: #000;
|
--accent-text: #000;
|
||||||
--highlight-tag: #f5f5f5;
|
--accent-hover: #8ccfff;
|
||||||
--highlight-tag-border: #e0e0e0;
|
--highlight-tag: #d8edff;
|
||||||
|
--highlight-tag-border: #c0e0ff;
|
||||||
--danger: #ef4444;
|
--danger: #ef4444;
|
||||||
--success: #10b981;
|
--success: #10b981;
|
||||||
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
--section-bg: #ffffff;
|
--section-bg: #f3f8ff;
|
||||||
--switch-bg: #d1d5db;
|
--switch-bg: #d1d5db;
|
||||||
--checkbox-accent: #ec9c23;
|
--checkbox-accent: #ec9c23;
|
||||||
--checkbox-border: #9ca3af;
|
--checkbox-border: #9ca3af;
|
||||||
@@ -872,3 +873,25 @@ body::-webkit-scrollbar-corner,
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.snow {
|
||||||
|
pointer-events: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snowflake {
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
color: #d0e7ff;
|
||||||
|
font-size: 6px;
|
||||||
|
opacity: 0.5;
|
||||||
|
user-select: none;
|
||||||
|
pointer-events: none;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
@@ -11,6 +11,7 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="dark">
|
<body class="dark">
|
||||||
|
<div class="snow" id="snowContainer"></div>
|
||||||
<div class="loading-overlay">
|
<div class="loading-overlay">
|
||||||
<div class="loading-spinner"></div>
|
<div class="loading-spinner"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -18,7 +19,8 @@
|
|||||||
|
|
||||||
<div class="header-bar">
|
<div class="header-bar">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
<img src="../img/logo-outlined.png" alt="Goose Highlighter" style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
|
<img src="../img/logo-outlined-winter.png" alt="Goose Highlighter"
|
||||||
|
style="height: 28px; vertical-align: middle; margin-right: 8px;"> Goose Highlighter
|
||||||
</span>
|
</span>
|
||||||
<div class="icon-toggles">
|
<div class="icon-toggles">
|
||||||
<label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting">
|
<label class="icon-toggle" data-i18n-title="toggle_highlighting_title" title="Toggle highlighting">
|
||||||
@@ -33,11 +35,16 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="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 active" data-tab="lists"><i class="fa-solid fa-list"></i> <span
|
||||||
<button class="tab-button" data-tab="words"><i class="fa-solid fa-tags"></i> <span data-i18n="tab_words">Words</span></button>
|
data-i18n="tab_lists">Lists</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="words"><i class="fa-solid fa-tags"></i> <span
|
||||||
<button class="tab-button" data-tab="exceptions"><i class="fa-solid fa-ban"></i> <span data-i18n="tab_exceptions">Exceptions</span></button>
|
data-i18n="tab_words">Words</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" 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>
|
</div>
|
||||||
|
|
||||||
<div class="tab-content active" data-tab-content="lists">
|
<div class="tab-content active" data-tab-content="lists">
|
||||||
@@ -68,7 +75,8 @@
|
|||||||
<span data-i18n="enable_highlight">Enable Highlighting</span>
|
<span data-i18n="enable_highlight">Enable Highlighting</span>
|
||||||
<input type="checkbox" class="switch" id="listActive" />
|
<input type="checkbox" class="switch" id="listActive" />
|
||||||
</label>
|
</label>
|
||||||
<button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span data-i18n="apply">Apply</span></button>
|
<button id="applyListSettingsBtn"><i class="fa-solid fa-check"></i> <span
|
||||||
|
data-i18n="apply">Apply</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -80,7 +88,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="section" data-section="wordlist">
|
<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>
|
<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">
|
<div class="button-row wrap">
|
||||||
<button id="selectAllBtn"><span data-i18n="select_all">Select All</span></button>
|
<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="deselectAllBtn"><span data-i18n="deselect_all">Clear</span></button>
|
||||||
@@ -95,11 +104,13 @@
|
|||||||
|
|
||||||
<div class="tab-content" data-tab-content="page-highlights">
|
<div class="tab-content" data-tab-content="page-highlights">
|
||||||
<div class="section" data-section="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>
|
<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">
|
<div class="page-highlights-info">
|
||||||
<span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong>
|
<span data-i18n="total_highlights">Total:</span> <strong id="totalHighlightsCount">0</strong>
|
||||||
</div>
|
</div>
|
||||||
<button id="refreshHighlightsBtn"><i class="fa-solid fa-rotate"></i> <span data-i18n="refresh">Refresh</span></button>
|
<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 id="pageHighlightsList" class="page-highlights-list"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,11 +119,13 @@
|
|||||||
<div class="section" data-section="exceptions">
|
<div class="section" data-section="exceptions">
|
||||||
<h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3>
|
<h3><i class="fa-solid fa-ban"></i> <span data-i18n="site_exceptions">Site Exceptions</span></h3>
|
||||||
<div class="button-row">
|
<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>
|
<button id="toggleExceptionBtn"><i class="fa-solid fa-plus"></i> <span id="exceptionBtnText"
|
||||||
|
data-i18n="add_exception">Add to Exceptions</span></button>
|
||||||
</div>
|
</div>
|
||||||
<h3 data-i18n="exceptions_list">Exception Sites:</h3>
|
<h3 data-i18n="exceptions_list">Exception Sites:</h3>
|
||||||
<div id="exceptionsList" class="exceptions-list"></div>
|
<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>
|
<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>
|
||||||
|
|
||||||
@@ -126,7 +139,8 @@
|
|||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
<button id="importBtn"><i class="fa-solid fa-upload"></i> <span data-i18n="import_list">Import</span></button>
|
<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 />
|
<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>
|
<button id="exportBtn"><i class="fa-solid fa-download"></i> <span
|
||||||
|
data-i18n="export_list">Export</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,76 @@
|
|||||||
import { HighlightList, ActiveWord, CONSTANTS } from '../types.js';
|
import { HighlightList, ActiveWord, CONSTANTS } from '../types.js';
|
||||||
import { DOMUtils } from '../utils/DOMUtils.js';
|
import { DOMUtils } from '../utils/DOMUtils.js';
|
||||||
|
|
||||||
|
|
||||||
export class HighlightEngine {
|
export class HighlightEngine {
|
||||||
|
private static escapeHtml(text: string): string {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
private static renderHighlighted(text: string, pattern: RegExp): string {
|
||||||
|
let html = '';
|
||||||
|
let lastIndex = 0;
|
||||||
|
pattern.lastIndex = 0;
|
||||||
|
let match;
|
||||||
|
while ((match = pattern.exec(text)) !== null) {
|
||||||
|
html += HighlightEngine.escapeHtml(text.substring(lastIndex, match.index));
|
||||||
|
html += `<mark>${HighlightEngine.escapeHtml(match[0])}</mark>`;
|
||||||
|
lastIndex = match.index + match[0].length;
|
||||||
|
}
|
||||||
|
html += HighlightEngine.escapeHtml(text.substring(lastIndex));
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
|
private static createOrUpdateBadge(input: HTMLTextAreaElement | HTMLInputElement, pattern: RegExp): void {
|
||||||
|
const text = input.value;
|
||||||
|
let matchCount = 0;
|
||||||
|
pattern.lastIndex = 0;
|
||||||
|
let match;
|
||||||
|
while ((match = pattern.exec(text)) !== null) {
|
||||||
|
matchCount++;
|
||||||
|
}
|
||||||
|
const oldBadge = input.parentElement?.querySelector('.goose-highlighter-textarea-badge');
|
||||||
|
if (oldBadge) oldBadge.remove();
|
||||||
|
if (matchCount > 0) {
|
||||||
|
const badge = document.createElement('div');
|
||||||
|
badge.className = 'goose-highlighter-textarea-badge';
|
||||||
|
badge.textContent = matchCount.toString();
|
||||||
|
badge.setAttribute('data-round', matchCount > 9 ? 'false' : 'true');
|
||||||
|
badge.style.position = 'absolute';
|
||||||
|
badge.style.left = '4px';
|
||||||
|
badge.style.top = '4px';
|
||||||
|
badge.style.zIndex = '10000';
|
||||||
|
const parent = input.parentElement;
|
||||||
|
if (parent && window.getComputedStyle(parent).position === 'static') {
|
||||||
|
parent.style.position = 'relative';
|
||||||
|
}
|
||||||
|
parent?.appendChild(badge);
|
||||||
|
badge.addEventListener('click', () => {
|
||||||
|
document.querySelectorAll('.goose-highlighter-textarea-popup').forEach(p => p.remove());
|
||||||
|
const popup = document.createElement('div');
|
||||||
|
popup.className = 'goose-highlighter-textarea-popup';
|
||||||
|
popup.innerHTML = `
|
||||||
|
<div class="gh-popup-titlebar">
|
||||||
|
<button class="gh-popup-close" title="Close">×</button>
|
||||||
|
</div>
|
||||||
|
<pre class="gh-popup-pre">${HighlightEngine.renderHighlighted(text, pattern)}</pre>
|
||||||
|
`;
|
||||||
|
document.body.appendChild(popup);
|
||||||
|
const closeBtn = popup.querySelector('.gh-popup-close');
|
||||||
|
closeBtn?.addEventListener('click', () => popup.remove());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private static attachBadgeListener(input: HTMLTextAreaElement | HTMLInputElement, pattern: RegExp): void {
|
||||||
|
const updateBadge = () => HighlightEngine.createOrUpdateBadge(input, pattern);
|
||||||
|
updateBadge();
|
||||||
|
input.removeEventListener('input', updateBadge);
|
||||||
|
input.addEventListener('input', updateBadge);
|
||||||
|
}
|
||||||
|
private _textareaMatchInfo: Array<{ input: HTMLTextAreaElement | HTMLInputElement; count: number; text: string }> = [];
|
||||||
private styleSheet: CSSStyleSheet | null = null;
|
private styleSheet: CSSStyleSheet | null = null;
|
||||||
private highlights = new Map<string, Highlight>();
|
private highlights = new Map<string, Highlight>();
|
||||||
private highlightsByWord = new Map<string, Range[]>();
|
private highlightsByWord = new Map<string, Range[]>();
|
||||||
@@ -9,13 +78,10 @@ export class HighlightEngine {
|
|||||||
private observer: MutationObserver;
|
private observer: MutationObserver;
|
||||||
private isHighlighting = false;
|
private isHighlighting = false;
|
||||||
private currentMatchCase = false;
|
private currentMatchCase = false;
|
||||||
private textareaOverlays = new Map<HTMLTextAreaElement | HTMLInputElement, HTMLElement>();
|
|
||||||
private resizeObserver: ResizeObserver;
|
|
||||||
|
|
||||||
constructor(private onUpdate: () => void) {
|
constructor(private onUpdate: () => void) {
|
||||||
this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => {
|
this.observer = new MutationObserver(DOMUtils.debounce((mutations: MutationRecord[]) => {
|
||||||
if (this.isHighlighting) return;
|
if (this.isHighlighting) return;
|
||||||
|
|
||||||
const hasContentChanges = mutations.some((mutation: MutationRecord) => {
|
const hasContentChanges = mutations.some((mutation: MutationRecord) => {
|
||||||
if (mutation.type !== 'childList') return false;
|
if (mutation.type !== 'childList') return false;
|
||||||
const allNodes = [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)];
|
const allNodes = [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)];
|
||||||
@@ -25,21 +91,10 @@ export class HighlightEngine {
|
|||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
if (hasContentChanges) {
|
if (hasContentChanges) {
|
||||||
this.onUpdate();
|
this.onUpdate();
|
||||||
}
|
}
|
||||||
}, CONSTANTS.DEBOUNCE_DELAY));
|
}, CONSTANTS.DEBOUNCE_DELAY));
|
||||||
|
|
||||||
this.resizeObserver = new ResizeObserver((entries) => {
|
|
||||||
for (const entry of entries) {
|
|
||||||
const input = entry.target as HTMLTextAreaElement | HTMLInputElement;
|
|
||||||
const overlay = this.textareaOverlays.get(input);
|
|
||||||
if (overlay) {
|
|
||||||
this.updateOverlayPosition(input, overlay);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private initializeStyleSheet(): void {
|
private initializeStyleSheet(): void {
|
||||||
@@ -75,24 +130,8 @@ export class HighlightEngine {
|
|||||||
clearHighlights(): void {
|
clearHighlights(): void {
|
||||||
this.observer.disconnect();
|
this.observer.disconnect();
|
||||||
this.clearHighlightsInternal();
|
this.clearHighlightsInternal();
|
||||||
this.clearTextareaOverlays();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private clearTextareaOverlays(): void {
|
|
||||||
for (const [input, overlay] of this.textareaOverlays.entries()) {
|
|
||||||
this.resizeObserver.unobserve(input);
|
|
||||||
overlay.remove();
|
|
||||||
}
|
|
||||||
this.textareaOverlays.clear();
|
|
||||||
}
|
|
||||||
|
|
||||||
private updateOverlayPosition(input: HTMLTextAreaElement | HTMLInputElement, overlay: HTMLElement): void {
|
|
||||||
const rect = input.getBoundingClientRect();
|
|
||||||
overlay.style.width = `${input.clientWidth}px`;
|
|
||||||
overlay.style.height = `${input.clientHeight}px`;
|
|
||||||
overlay.style.top = `${rect.top + window.scrollY}px`;
|
|
||||||
overlay.style.left = `${rect.left + window.scrollX}px`;
|
|
||||||
}
|
|
||||||
|
|
||||||
private getTextNodes(): Text[] {
|
private getTextNodes(): Text[] {
|
||||||
const textNodes: Text[] = [];
|
const textNodes: Text[] = [];
|
||||||
@@ -142,7 +181,6 @@ export class HighlightEngine {
|
|||||||
|
|
||||||
this.observer.disconnect();
|
this.observer.disconnect();
|
||||||
this.clearHighlightsInternal();
|
this.clearHighlightsInternal();
|
||||||
this.clearTextareaOverlays();
|
|
||||||
|
|
||||||
const activeWords = this.extractActiveWords(lists);
|
const activeWords = this.extractActiveWords(lists);
|
||||||
if (activeWords.length === 0) {
|
if (activeWords.length === 0) {
|
||||||
@@ -227,112 +265,145 @@ export class HighlightEngine {
|
|||||||
}
|
}
|
||||||
|
|
||||||
private highlightTextareas(pattern: RegExp, styleMap: Map<string, number>, activeWords: ActiveWord[]): void {
|
private highlightTextareas(pattern: RegExp, styleMap: Map<string, number>, activeWords: ActiveWord[]): void {
|
||||||
|
if (!document.getElementById('gh-textarea-badge-style')) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.id = 'gh-textarea-badge-style';
|
||||||
|
style.textContent = `
|
||||||
|
:root {
|
||||||
|
--gh-badge-accent: #ec9c23;
|
||||||
|
--gh-badge-text: #000;
|
||||||
|
--gh-badge-border: #2d2d2d;
|
||||||
|
--gh-popup-bg: #161616;
|
||||||
|
--gh-popup-border: #ec9c23;
|
||||||
|
--gh-popup-radius: 10px;
|
||||||
|
--gh-popup-shadow: 0 4px 12px rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-badge {
|
||||||
|
position: absolute !important;
|
||||||
|
left: 4px !important;
|
||||||
|
top: 4px !important;
|
||||||
|
background: var(--gh-badge-accent);
|
||||||
|
color: var(--gh-badge-text);
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 10000;
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 22px;
|
||||||
|
min-width: 22px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid var(--gh-badge-border);
|
||||||
|
transition: box-shadow 0.2s, background 0.2s;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-badge[data-round="true"] {
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 22px;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-badge:hover {
|
||||||
|
box-shadow: 0 4px 12px rgba(236,156,35,0.25);
|
||||||
|
background: #ffb84d;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-popup {
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background: var(--gh-popup-bg);
|
||||||
|
border: 2px solid var(--gh-popup-border);
|
||||||
|
border-radius: var(--gh-popup-radius);
|
||||||
|
box-shadow: var(--gh-popup-shadow);
|
||||||
|
padding: 0 0 20px 0;
|
||||||
|
z-index: 10001;
|
||||||
|
max-width: 420px;
|
||||||
|
max-height: 70vh;
|
||||||
|
overflow: auto;
|
||||||
|
color: #e8e8e8;
|
||||||
|
font-family: 'Inter', 'Segoe UI', sans-serif;
|
||||||
|
}
|
||||||
|
.gh-popup-titlebar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
background: #191919;
|
||||||
|
border-top-left-radius: var(--gh-popup-radius);
|
||||||
|
border-top-right-radius: var(--gh-popup-radius);
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 8px 0 0;
|
||||||
|
border-bottom: 1px solid #222;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gh-popup-close {
|
||||||
|
background: none;
|
||||||
|
color: #e8e8e8;
|
||||||
|
border: none;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
z-index: 10002;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.gh-popup-close:hover {
|
||||||
|
background: #ec9c23;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-popup::-webkit-scrollbar {
|
||||||
|
width: 10px;
|
||||||
|
background: #222;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-popup::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--gh-badge-accent);
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid #222;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-popup::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #ffb84d;
|
||||||
|
}
|
||||||
|
.goose-highlighter-textarea-popup {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: var(--gh-badge-accent) #222;
|
||||||
|
}
|
||||||
|
.gh-popup-pre {
|
||||||
|
background: #222;
|
||||||
|
border-radius: 7px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border: 1px solid #333;
|
||||||
|
color: #e8e8e8;
|
||||||
|
font-size: 15px;
|
||||||
|
font-family: inherit;
|
||||||
|
margin: 16px 16px 0 16px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
.gh-popup-pre mark {
|
||||||
|
background: none;
|
||||||
|
color: #ec9c23;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
const textareas = document.querySelectorAll('textarea, input[type="text"], input[type="search"], input[type="email"], input[type="url"]');
|
const textareas = document.querySelectorAll('textarea, input[type="text"], input[type="search"], input[type="email"], input[type="url"]');
|
||||||
|
this._textareaMatchInfo = [];
|
||||||
|
document.querySelectorAll('.goose-highlighter-textarea-badge').forEach(badge => badge.remove());
|
||||||
for (const element of Array.from(textareas)) {
|
for (const element of Array.from(textareas)) {
|
||||||
const input = element as HTMLTextAreaElement | HTMLInputElement;
|
const input = element as HTMLTextAreaElement | HTMLInputElement;
|
||||||
const text = input.value;
|
HighlightEngine.attachBadgeListener(input, pattern);
|
||||||
|
|
||||||
if (!text) continue;
|
|
||||||
|
|
||||||
const matches: Array<{ start: number; end: number; background: string; foreground: string }> = [];
|
|
||||||
pattern.lastIndex = 0;
|
|
||||||
let match;
|
|
||||||
|
|
||||||
while ((match = pattern.exec(text)) !== null) {
|
|
||||||
const lookup = this.currentMatchCase ? match[0] : match[0].toLowerCase();
|
|
||||||
const styleIdx = styleMap.get(lookup);
|
|
||||||
|
|
||||||
if (styleIdx !== undefined) {
|
|
||||||
const activeWord = activeWords.find(w =>
|
|
||||||
(this.currentMatchCase ? w.text : w.text.toLowerCase()) === lookup
|
|
||||||
);
|
|
||||||
if (activeWord) {
|
|
||||||
matches.push({
|
|
||||||
start: match.index,
|
|
||||||
end: match.index + match[0].length,
|
|
||||||
background: activeWord.background,
|
|
||||||
foreground: activeWord.foreground
|
|
||||||
});
|
|
||||||
|
|
||||||
// Track textarea matches for navigation
|
|
||||||
if (!this.textareaMatchesByWord.has(lookup)) {
|
|
||||||
this.textareaMatchesByWord.set(lookup, []);
|
|
||||||
}
|
|
||||||
this.textareaMatchesByWord.get(lookup)!.push({
|
|
||||||
input,
|
|
||||||
position: match.index
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (matches.length > 0) {
|
|
||||||
this.createTextareaOverlay(input, text, matches);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private createTextareaOverlay(input: HTMLTextAreaElement | HTMLInputElement, text: string, matches: Array<{ start: number; end: number; background: string; foreground: string }>): void {
|
|
||||||
const overlay = document.createElement('div');
|
|
||||||
overlay.className = 'goose-highlighter-textarea-overlay';
|
|
||||||
|
|
||||||
const computedStyle = window.getComputedStyle(input);
|
|
||||||
const styles = [
|
|
||||||
'font-family', 'font-size', 'font-weight', 'font-style',
|
|
||||||
'line-height', 'letter-spacing', 'word-spacing',
|
|
||||||
'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
|
|
||||||
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
|
|
||||||
'white-space', 'word-wrap', 'overflow-wrap'
|
|
||||||
];
|
|
||||||
|
|
||||||
overlay.style.position = 'absolute';
|
|
||||||
overlay.style.pointerEvents = 'none';
|
|
||||||
overlay.style.color = 'transparent';
|
|
||||||
overlay.style.overflow = 'hidden';
|
|
||||||
overlay.style.whiteSpace = input.tagName === 'TEXTAREA' ? 'pre-wrap' : 'pre';
|
|
||||||
overlay.style.overflowWrap = 'break-word';
|
|
||||||
|
|
||||||
for (const prop of styles) {
|
|
||||||
overlay.style.setProperty(prop, computedStyle.getPropertyValue(prop));
|
|
||||||
}
|
|
||||||
|
|
||||||
this.updateOverlayPosition(input, overlay);
|
|
||||||
|
|
||||||
let html = '';
|
|
||||||
let lastIndex = 0;
|
|
||||||
|
|
||||||
for (const match of matches) {
|
|
||||||
html += this.escapeHtml(text.substring(lastIndex, match.start));
|
|
||||||
html += `<mark style="background-color: ${match.background}; color: ${match.foreground}; padding: 0; margin: 0;">${this.escapeHtml(text.substring(match.start, match.end))}</mark>`;
|
|
||||||
lastIndex = match.end;
|
|
||||||
}
|
|
||||||
html += this.escapeHtml(text.substring(lastIndex));
|
|
||||||
|
|
||||||
overlay.innerHTML = html;
|
|
||||||
document.body.appendChild(overlay);
|
|
||||||
this.textareaOverlays.set(input, overlay);
|
|
||||||
|
|
||||||
this.resizeObserver.observe(input);
|
|
||||||
|
|
||||||
const updateOverlay = () => {
|
|
||||||
this.resizeObserver.unobserve(input);
|
|
||||||
overlay.remove();
|
|
||||||
this.textareaOverlays.delete(input);
|
|
||||||
};
|
|
||||||
|
|
||||||
input.addEventListener('input', updateOverlay, { once: true });
|
|
||||||
input.addEventListener('scroll', () => {
|
|
||||||
overlay.scrollTop = input.scrollTop;
|
|
||||||
overlay.scrollLeft = input.scrollLeft;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
private escapeHtml(text: string): string {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.textContent = text;
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
private clearHighlightsInternal(): void {
|
private clearHighlightsInternal(): void {
|
||||||
for (const name of this.highlights.keys()) {
|
for (const name of this.highlights.keys()) {
|
||||||
@@ -341,7 +412,6 @@ export class HighlightEngine {
|
|||||||
this.highlights.clear();
|
this.highlights.clear();
|
||||||
this.highlightsByWord.clear();
|
this.highlightsByWord.clear();
|
||||||
this.textareaMatchesByWord.clear();
|
this.textareaMatchesByWord.clear();
|
||||||
|
|
||||||
if (this.styleSheet && this.styleSheet.cssRules.length > 0) {
|
if (this.styleSheet && this.styleSheet.cssRules.length > 0) {
|
||||||
while (this.styleSheet.cssRules.length > 0) {
|
while (this.styleSheet.cssRules.length > 0) {
|
||||||
this.styleSheet.deleteRule(0);
|
this.styleSheet.deleteRule(0);
|
||||||
@@ -451,27 +521,6 @@ export class HighlightEngine {
|
|||||||
input.focus();
|
input.focus();
|
||||||
input.setSelectionRange(position, position + wordLength);
|
input.setSelectionRange(position, position + wordLength);
|
||||||
|
|
||||||
const overlay = this.textareaOverlays.get(input);
|
|
||||||
if (overlay) {
|
|
||||||
const marks = overlay.querySelectorAll('mark');
|
|
||||||
for (const mark of Array.from(marks)) {
|
|
||||||
const markElement = mark as HTMLElement;
|
|
||||||
const markText = markElement.textContent || '';
|
|
||||||
const markStart = this.getTextPosition(overlay, markElement);
|
|
||||||
|
|
||||||
if (markStart === position) {
|
|
||||||
const originalBackground = markElement.style.backgroundColor;
|
|
||||||
markElement.style.backgroundColor = 'rgba(255, 165, 0, 0.8)';
|
|
||||||
markElement.style.boxShadow = '0 0 10px 3px rgba(255, 165, 0, 0.8)';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
markElement.style.backgroundColor = originalBackground;
|
|
||||||
markElement.style.boxShadow = '';
|
|
||||||
}, 600);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private getTextPosition(overlay: HTMLElement, targetMark: HTMLElement): number {
|
private getTextPosition(overlay: HTMLElement, targetMark: HTMLElement): number {
|
||||||
@@ -541,8 +590,6 @@ export class HighlightEngine {
|
|||||||
|
|
||||||
destroy(): void {
|
destroy(): void {
|
||||||
this.observer.disconnect();
|
this.observer.disconnect();
|
||||||
this.resizeObserver.disconnect();
|
|
||||||
this.clearHighlights();
|
this.clearHighlights();
|
||||||
this.clearTextareaOverlays();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -25,6 +25,7 @@ export class PopupController {
|
|||||||
this.setupEventListeners();
|
this.setupEventListeners();
|
||||||
this.render();
|
this.render();
|
||||||
this.hideLoadingOverlay();
|
this.hideLoadingOverlay();
|
||||||
|
this.startSnow();
|
||||||
}
|
}
|
||||||
|
|
||||||
private hideLoadingOverlay(): void {
|
private hideLoadingOverlay(): void {
|
||||||
@@ -721,4 +722,86 @@ export class PopupController {
|
|||||||
(document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled;
|
(document.getElementById('matchCase') as HTMLInputElement).checked = this.matchCaseEnabled;
|
||||||
(document.getElementById('matchWhole') as HTMLInputElement).checked = this.matchWholeEnabled;
|
(document.getElementById('matchWhole') as HTMLInputElement).checked = this.matchWholeEnabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Ney year stuff
|
||||||
|
|
||||||
|
private snowflakes: HTMLSpanElement[] = [];
|
||||||
|
|
||||||
|
private startSnow(): void {
|
||||||
|
const maxFlakes = 20;
|
||||||
|
const spawnInterval = 500;
|
||||||
|
|
||||||
|
const spawnFlake = () => {
|
||||||
|
if (this.snowflakes.length >= maxFlakes) return;
|
||||||
|
|
||||||
|
const flake = document.createElement('div');
|
||||||
|
flake.className = 'snowflake';
|
||||||
|
flake.style.position = 'fixed';
|
||||||
|
flake.style.pointerEvents = 'none';
|
||||||
|
flake.style.zIndex = '9999';
|
||||||
|
flake.style.fontSize = `${8 + Math.random() * 8}px`;
|
||||||
|
flake.textContent = '❄';
|
||||||
|
|
||||||
|
const isLightTheme = document.body.classList.contains('light');
|
||||||
|
flake.style.color = isLightTheme ? 'rgba(90, 181, 255, 0.78)' : 'rgba(255, 255, 255, 0.8)';
|
||||||
|
|
||||||
|
flake.dataset.x = `${Math.random() * window.innerWidth}`;
|
||||||
|
flake.dataset.y = `${-10}`;
|
||||||
|
flake.dataset.speed = `${0.1 + Math.random() * 0.2}`;
|
||||||
|
flake.dataset.wind = `${Math.random() * 0.2 - 0.1}`;
|
||||||
|
flake.dataset.amplitude = `${1 + Math.random() * 1}`;
|
||||||
|
flake.dataset.angle = `${Math.random() * Math.PI * 2}`;
|
||||||
|
flake.dataset.angleSpeed = `${(Math.random() * 0.02 - 0.01)}`;
|
||||||
|
flake.dataset.opacity = `${0.2 + Math.random() * 0.3}`;
|
||||||
|
flake.style.opacity = flake.dataset.opacity!;
|
||||||
|
flake.dataset.fadeSpeed = `${0.002 + Math.random() * 0.003}`;
|
||||||
|
|
||||||
|
document.body.appendChild(flake);
|
||||||
|
this.snowflakes.push(flake);
|
||||||
|
};
|
||||||
|
|
||||||
|
setInterval(spawnFlake, spawnInterval);
|
||||||
|
this.animateSnow();
|
||||||
|
}
|
||||||
|
|
||||||
|
private animateSnow(): void {
|
||||||
|
const animate = () => {
|
||||||
|
this.snowflakes.forEach((flake) => {
|
||||||
|
let x = parseFloat(flake.dataset.x!);
|
||||||
|
let y = parseFloat(flake.dataset.y!);
|
||||||
|
const speed = parseFloat(flake.dataset.speed!);
|
||||||
|
let wind = parseFloat(flake.dataset.wind!);
|
||||||
|
const amp = parseFloat(flake.dataset.amplitude!);
|
||||||
|
let angle = parseFloat(flake.dataset.angle!);
|
||||||
|
const angleSpeed = parseFloat(flake.dataset.angleSpeed!);
|
||||||
|
|
||||||
|
y += speed;
|
||||||
|
angle += angleSpeed;
|
||||||
|
wind += (Math.random() * 0.002 - 0.001);
|
||||||
|
wind = Math.max(-0.1, Math.min(0.1, wind));
|
||||||
|
x += Math.sin(angle) * amp + wind;
|
||||||
|
|
||||||
|
if (y > window.innerHeight) {
|
||||||
|
y = -10;
|
||||||
|
x = Math.random() * window.innerWidth;
|
||||||
|
|
||||||
|
if (Math.random() < 0.2) {
|
||||||
|
flake.remove();
|
||||||
|
this.snowflakes = this.snowflakes.filter(f => f !== flake);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
flake.dataset.x = `${x}`;
|
||||||
|
flake.dataset.y = `${y}`;
|
||||||
|
flake.dataset.angle = `${angle}`;
|
||||||
|
flake.dataset.wind = `${wind}`;
|
||||||
|
flake.style.transform = `translate(${x}px, ${y}px)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user