Skip to content

Commit f81680f

Browse files
author
Sebi Nemeth
committed
refine cache
beautify enablebutton
1 parent bab996a commit f81680f

File tree

2 files changed

+94
-33
lines changed

2 files changed

+94
-33
lines changed

‎dist/index.js

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,27 @@ import set from 'lodash/set';
55
const css = `
66
.live-translator-enable-button {
77
position: fixed !important;
8-
top: 0;
9-
left: 0;
8+
top: 2px;
9+
left: 2px;
1010
z-index: 10000;
11-
padding: 2px;
11+
padding: 1px;
12+
padding-left: 2px;
1213
color: black;
1314
background: rgba(255, 255, 255, 0.6);
1415
font-family: sans-serif;
1516
font-size: 8px;
17+
border-radius: 10px;
18+
display: flex;
19+
gap: 2px;
20+
align-items: center;
1621
}
1722
.live-translator-enable-button:hover {
1823
background: white;
1924
}
2025
.live-translator-enable-button-indicator {
2126
display: inline-block;
22-
height: 6px;
23-
width: 6px;
24-
margin-left: 2px;
27+
height: 10px;
28+
width: 10px;
2529
border-radius: 100%;
2630
background-color: red;
2731
}
@@ -147,14 +151,40 @@ class ZeroWidthEncoder {
147151
return text;
148152
}
149153
}
154+
class Cache {
155+
_cache = {};
156+
has(key) {
157+
return key in this._cache;
158+
}
159+
store(key, value) {
160+
this._cache[key] = { value, locked: true };
161+
}
162+
lock(key) {
163+
this._cache[key].locked = true;
164+
}
165+
clear(force = false) {
166+
for (const key in this._cache) {
167+
if (!force && this._cache[key].locked) {
168+
this._cache[key].locked = false;
169+
}
170+
else {
171+
this._cache[key].value.remove();
172+
delete this._cache[key];
173+
}
174+
}
175+
}
176+
get length() {
177+
return Object.keys(this._cache).length;
178+
}
179+
}
150180
class LiveTranslatorManager {
151181
_enabled;
152182
_options;
153183
_enableButton;
154184
_indicator;
155185
_box;
156186
_wrapper;
157-
_cache = {};
187+
_cache = new Cache();
158188
constructor(options) {
159189
this._enabled = false;
160190
this._options = options;
@@ -225,13 +255,15 @@ class LiveTranslatorManager {
225255
localStorage.setItem('live-translator-enabled', JSON.stringify(this._enabled));
226256
}
227257
console.log(`%c Live Translator ${this._enabled ? 'ON' : 'OFF'} `, 'background: #222; color: #bada55');
258+
if (!this._enabled) {
259+
this._cache.clear(true);
260+
}
228261
}
229262
render() {
230263
this._indicator.style.background = this._enabled ? 'lightgreen' : 'red';
231264
if (!this._enabled) {
232265
return;
233266
}
234-
const newCache = {};
235267
const re = new RegExp(ZeroWidthEncoder.PATTERN, 'gm');
236268
const queue = [this.root];
237269
while (queue.length > 0) {
@@ -290,7 +322,7 @@ class LiveTranslatorManager {
290322
}
291323
cacheKeyParts.unshift(position.left, position.top);
292324
const cacheKey = cacheKeyParts.join(';');
293-
if (!(cacheKey in this._cache)) {
325+
if (!this._cache.has(cacheKey)) {
294326
const container = document.createElement('span');
295327
container.classList.add('live-translator-badge-container');
296328
container.style.top = position.top + 'px';
@@ -299,21 +331,17 @@ class LiveTranslatorManager {
299331
for (const badge of badges) {
300332
container.appendChild(badge);
301333
}
302-
newCache[cacheKey] = container;
334+
this._cache.store(cacheKey, container);
303335
}
304336
else {
305-
newCache[cacheKey] = this._cache[cacheKey];
306-
delete this._cache[cacheKey];
337+
this._cache.lock(cacheKey);
307338
}
308339
}
309340
for (const child of node.childNodes) {
310341
queue.push(child);
311342
}
312343
}
313-
for (const elem of Object.values(this._cache)) {
314-
elem.remove();
315-
}
316-
this._cache = newCache;
344+
this._cache.clear();
317345
}
318346
showBox(node, attribute = false) {
319347
const rect = !attribute ? getBoundingClientRect(node) : node.getClientRects()[0];

‎src/index.ts

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,27 @@ import set from 'lodash/set'
66
const css = `
77
.live-translator-enable-button {
88
position: fixed !important;
9-
top: 0;
10-
left: 0;
9+
top: 2px;
10+
left: 2px;
1111
z-index: 10000;
12-
padding: 2px;
12+
padding: 1px;
13+
padding-left: 2px;
1314
color: black;
1415
background: rgba(255, 255, 255, 0.6);
1516
font-family: sans-serif;
1617
font-size: 8px;
18+
border-radius: 10px;
19+
display: flex;
20+
gap: 2px;
21+
align-items: center;
1722
}
1823
.live-translator-enable-button:hover {
1924
background: white;
2025
}
2126
.live-translator-enable-button-indicator {
2227
display: inline-block;
23-
height: 6px;
24-
width: 6px;
25-
margin-left: 2px;
28+
height: 10px;
29+
width: 10px;
2630
border-radius: 100%;
2731
background-color: red;
2832
}
@@ -171,6 +175,38 @@ abstract class ZeroWidthEncoder {
171175
}
172176
}
173177

178+
type CacheElem = { value: Element, locked: boolean }
179+
class Cache {
180+
private _cache: Record<string, CacheElem> = {}
181+
182+
has (key: string) {
183+
return key in this._cache
184+
}
185+
186+
store (key: string, value: Element) {
187+
this._cache[key] = { value, locked: true }
188+
}
189+
190+
lock (key: string) {
191+
this._cache[key].locked = true
192+
}
193+
194+
clear(force = false) {
195+
for (const key in this._cache) {
196+
if (!force && this._cache[key].locked) {
197+
this._cache[key].locked = false
198+
} else {
199+
this._cache[key].value.remove()
200+
delete this._cache[key]
201+
}
202+
}
203+
}
204+
205+
get length () {
206+
return Object.keys(this._cache).length
207+
}
208+
}
209+
174210
class LiveTranslatorManager {
175211
_enabled: boolean
176212
_options: LiveTranslatorPluginOptions
@@ -181,7 +217,7 @@ class LiveTranslatorManager {
181217
_box: HTMLDivElement
182218
_wrapper: HTMLDivElement
183219

184-
_cache: Record<string, Element> = {}
220+
_cache = new Cache()
185221

186222
constructor (options: LiveTranslatorPluginOptions) {
187223
this._enabled = false
@@ -266,6 +302,9 @@ class LiveTranslatorManager {
266302
localStorage.setItem('live-translator-enabled', JSON.stringify(this._enabled))
267303
}
268304
console.log(`%c Live Translator ${this._enabled ? 'ON' : 'OFF'} `, 'background: #222; color: #bada55');
305+
if (!this._enabled) {
306+
this._cache.clear(true)
307+
}
269308
}
270309

271310
render () {
@@ -275,8 +314,6 @@ class LiveTranslatorManager {
275314
return
276315
}
277316

278-
const newCache = {}
279-
280317
const re = new RegExp(ZeroWidthEncoder.PATTERN, 'gm')
281318

282319
const queue = [this.root] as Node[]
@@ -341,7 +378,7 @@ class LiveTranslatorManager {
341378
cacheKeyParts.unshift(position.left, position.top)
342379
const cacheKey = cacheKeyParts.join(';')
343380

344-
if (!(cacheKey in this._cache)) {
381+
if (!this._cache.has(cacheKey)) {
345382
const container = document.createElement('span')
346383
container.classList.add('live-translator-badge-container')
347384
container.style.top = position.top + 'px'
@@ -351,10 +388,9 @@ class LiveTranslatorManager {
351388
for (const badge of badges) {
352389
container.appendChild(badge)
353390
}
354-
newCache[cacheKey] = container
391+
this._cache.store(cacheKey, container)
355392
} else {
356-
newCache[cacheKey] = this._cache[cacheKey]
357-
delete this._cache[cacheKey]
393+
this._cache.lock(cacheKey)
358394
}
359395
}
360396

@@ -363,10 +399,7 @@ class LiveTranslatorManager {
363399
}
364400
}
365401

366-
for (const elem of Object.values(this._cache)) {
367-
elem.remove()
368-
}
369-
this._cache = newCache
402+
this._cache.clear()
370403
}
371404

372405
showBox(node: Node, attribute = false) {

0 commit comments

Comments
 (0)