admin/kiss-translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

re translate when text changed

Browse Source
This commit is contained in:
Gabe Yuan
2023-08-26 13:10:13 +08:00
parent 6bcf294635
commit 2636c24e84
2 changed files with 68 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
public/content.html
View File

@@ -17,40 +17,45 @@
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
(() => {
var shadow = document.querySelector("#shadow1");
var root = shadow.attachShadow({ mode: "open" });
var newLine = document.createElement("p");
newLine.innerText = "new line";
root.appendChild(newLine);
})();
// (() => {
// var shadow = document.querySelector("#shadow1");
// var root = shadow.attachShadow({ mode: "open" });
// var newLine = document.createElement("p");
// newLine.innerText = "new line";
// root.appendChild(newLine);
// })();
// setTimeout(function () {
// var shadow = document.querySelector("#shadow2");
// var root = shadow.attachShadow({ mode: "open" });
// }, 1000);
// setTimeout(() => {
// var newLine = document.createElement("p");
// newLine.innerText = "new line";
// var shadow = document.querySelector("#shadow2");
// shadow.shadowRoot.appendChild(newLine);
// }, 2000);
// setTimeout(() => {
// var newLine = document.createElement("div");
// newLine.innerHTML = "<p>second line</p><p>third line</p>";
// var shadow = document.querySelector("#shadow2");
// shadow.shadowRoot.appendChild(newLine);
// }, 3000);
// setTimeout(function () {
// var el = document.querySelector("h2");
// el.innerText = "hello world";
// var title = document.querySelector("#addtitle");
// title.innerHTML =
// "<div><p>second title</p><ul><li>second title</li><li><p>second title</p></li></ul></div>";
// }, 1000);
setTimeout(function () {
var shadow = document.querySelector("#shadow2");
var root = shadow.attachShadow({ mode: "open" });
}, 1000);
setTimeout(() => {
var newLine = document.createElement("p");
newLine.innerText = "new line";
var shadow = document.querySelector("#shadow2");
shadow.shadowRoot.appendChild(newLine);
}, 2000);
setTimeout(() => {
var newLine = document.createElement("div");
newLine.innerHTML = "<p>second line</p><p>third line</p>";
var shadow = document.querySelector("#shadow2");
shadow.shadowRoot.appendChild(newLine);
}, 3000);
setTimeout(function () {
var el = document.querySelector("h2");
var el = document.querySelector("h2>p>span");
el.innerText = "hello world";
var title = document.querySelector("#addtitle");
title.innerHTML =
"<div><p>second title</p><ul><li>second title</li><li><p>second title</p></li></ul></div>";
}, 1000);
});
</script>
@@ -60,7 +65,7 @@
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<h2>
<p>React is a JavaScript library for building user interfaces.</p>
<p><span>React is a JavaScript library for building user interfaces.</span></p>
</h2>
<div id="addtitle"></div>
<h2>Shadow 1</h2>

41
src/libs/translator.js
View File

@@ -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)) {
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(<Content q={q} translator={this} />);
};
}