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

Solve the problem of multi-layer shadowroot selector and input box translation

Browse Source
This commit is contained in:
Gabe Yuan
2023-09-22 15:33:02 +08:00
parent 5306d81284
commit 87f099dd7f
1 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/libs/translator.js
View File

@@ -91,8 +91,8 @@ function addLoading(node, loadingId) {
node.offsetParent?.appendChild(div);
}
function removeLoading(loadingId) {
const div = document.getElementById(loadingId);
function removeLoading(node, loadingId) {
const div = node.offsetParent.querySelector(`#${loadingId}`);
if (div) {
div.remove();
}
@@ -259,6 +259,22 @@ export class Translator {
);
};
_queryShadowNodes = (selector, rootNode) => {
this._rootNodes.add(rootNode);
this._queryFilter(selector, rootNode).forEach((item) => {
if (!this._tranNodes.has(item)) {
this._tranNodes.set(item, "");
}
});
Array.from(rootNode.querySelectorAll("*"))
.map((item) => item.shadowRoot)
.filter(Boolean)
.forEach((item) => {
this._queryShadowNodes(selector, item);
});
};
_queryNodes = (rootNode = document) => {
// const childRoots = Array.from(rootNode.querySelectorAll("*"))
// .map((item) => item.shadowRoot)
@@ -281,14 +297,15 @@ export class Translator {
const outNodes = this._querySelectorAll(outSelector, rootNode);
outNodes.forEach((outNode) => {
if (outNode.shadowRoot) {
this._rootNodes.add(outNode.shadowRoot);
this._queryFilter(inSelector, outNode.shadowRoot).forEach(
(item) => {
if (!this._tranNodes.has(item)) {
this._tranNodes.set(item, "");
}
}
);
// this._rootNodes.add(outNode.shadowRoot);
// this._queryFilter(inSelector, outNode.shadowRoot).forEach(
// (item) => {
// if (!this._tranNodes.has(item)) {
// this._tranNodes.set(item, "");
// }
// }
// );
this._queryShadowNodes(inSelector, outNode.shadowRoot);
}
});
}
@@ -357,8 +374,17 @@ export class Translator {
stepShortcutRegister(
triggerShortcut,
async () => {
const node = document.activeElement;
if (!node || !(isInputNode(node) || isEditAbleNode(node))) {
let node = document.activeElement;
if (!node) {
return;
}
while (node.shadowRoot) {
node = node.shadowRoot.activeElement;
}
if (!isInputNode(node) && !isEditAbleNode(node)) {
return;
}
@@ -435,7 +461,7 @@ export class Translator {
} catch (err) {
console.log("[translate input]", err.message);
} finally {
removeLoading(loadingId);
removeLoading(node, loadingId);
}
},
triggerCount,