diff --git a/public/content.html b/public/content.html index 9cbf7b4..9c060b7 100644 --- a/public/content.html +++ b/public/content.html @@ -17,40 +17,45 @@ @@ -60,7 +65,7 @@

-

React is a JavaScript library for building user interfaces.

+

React is a JavaScript library for building user interfaces.

Shadow 1

diff --git a/src/libs/translator.js b/src/libs/translator.js index ca28f46..5140da2 100644 --- a/src/libs/translator.js +++ b/src/libs/translator.js @@ -37,7 +37,7 @@ export class Translator { "iframe", ]; _rootNodes = new Set(); - _tranNodes = new Set(); + _tranNodes = new Map(); // 显示 _interseObserver = new IntersectionObserver( @@ -182,7 +182,9 @@ export class Translator { this._rootNodes.add(outNode.shadowRoot); this._queryFilter(inSelector, outNode.shadowRoot).forEach( (item) => { - this._tranNodes.add(item); + if (!this._tranNodes.has(item)) { + this._tranNodes.set(item, ""); + } } ); } @@ -190,7 +192,9 @@ export class Translator { } } else { this._queryFilter(selector, rootNode).forEach((item) => { - this._tranNodes.add(item); + if (!this._tranNodes.has(item)) { + this._tranNodes.set(item, ""); + } }); } }); @@ -209,7 +213,7 @@ export class Translator { }); }); - this._tranNodes.forEach((node) => { + this._tranNodes.forEach((_, node) => { // 监听节点显示 this._interseObserver.observe(node); }); @@ -223,7 +227,7 @@ export class Translator { this._interseObserver.disconnect(); // 移除已插入元素 - this._tranNodes.forEach((node) => { + this._tranNodes.forEach((_, node) => { node.querySelector(APP_LCNAME)?.remove(); }); @@ -242,22 +246,37 @@ export class Translator { }, 500); _render = (el) => { + let traEl = el.querySelector(APP_LCNAME); + // 已翻译 - if (el.querySelector(APP_LCNAME)) { - return; + if (traEl) { + const preText = this._tranNodes.get(el); + const curText = el.innerText.trim(); + // const traText = traEl.innerText.trim(); + + // todo + // 1. traText when loading + // 2. replace startsWith + if (curText.startsWith(preText)) { + return; + } + + traEl.remove(); } - // 太长或太短 const q = el.innerText.trim(); + this._tranNodes.set(el, q); + + // 太长或太短 if (!q || q.length < this._minLength || q.length > this._maxLength) { return; } // console.log("---> ", q); - const span = document.createElement(APP_LCNAME); - span.style.visibility = "visible"; - el.appendChild(span); + traEl = document.createElement(APP_LCNAME); + traEl.style.visibility = "visible"; + el.appendChild(traEl); el.style.cssText += "-webkit-line-clamp: unset; max-height: none; height: auto;"; if (el.parentElement) { @@ -265,7 +284,7 @@ export class Translator { "-webkit-line-clamp: unset; max-height: none; height: auto;"; } - const root = createRoot(span); + const root = createRoot(traEl); root.render(); }; }