bad/flashlang
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Content script fixes

Browse source
This commit is contained in:
a 2020-08-05 16:25:05 +02:00
parent f8404a1e12
commit d94cfdf01d
2 changed files with 53 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/content_script/content_script.ts
View file

@ -14,14 +14,6 @@ declare global {
if (window.hasRun) return;
window.hasRun = true;
const setEnabled = (v: boolean) => {
document.removeEventListener("selectionchange", onSelectionChange); //Always remove it avoid duplicate event listeners
if (v) {
onSelectionChange(); // Call it since selection may have changed since it was enabled
document.addEventListener("selectionchange", onSelectionChange);
} else tippyInstance.hide();
};
browser.runtime.onMessage.addListener((c: command) => {
switch (c.commandKind) {
case commands.setEnabled:
@ -30,20 +22,7 @@ declare global {
}
});
const tippyInstance = tippy(document.body, {
allowHTML: true,
trigger: "manual",
interactive: true,
getReferenceClientRect: () =>
document.getSelection().getRangeAt(0).getBoundingClientRect(),
onShow: (instance) => {
instance.setContent(
`<lingo-translate toTranslate="${document
.getSelection()
.toString()}"></lingo-translate>`
);
},
});
const tippyInstance = setupTippy();
let timeoutID: number;
const onSelectionChange = () => {
@ -52,4 +31,35 @@ declare global {
if (document.getSelection().type == "Range")
timeoutID = window.setTimeout(tippyInstance.show, 500);
};
function setEnabled(v: boolean) {
document.removeEventListener("selectionchange", onSelectionChange); //Always remove it avoid duplicate event listeners
if (v) {
onSelectionChange(); // Call it since selection may have changed since it was enabled
document.addEventListener("selectionchange", onSelectionChange);
} else tippyInstance.hide();
}
function setupTippy() {
const translateElement = document.createElement("lingo-translate");
return tippy(document.body, {
content: translateElement,
allowHTML: true,
trigger: "manual",
interactive: true,
getReferenceClientRect: () =>
document.getSelection().getRangeAt(0).getBoundingClientRect(),
onCreate: (instance) => {
translateElement.addEventListener("translationFinished", () =>
instance.popperInstance.update()
);
},
onShow: () => {
translateElement.setAttribute(
"translate",
document.getSelection().toString()
);
},
});
}
})();

42
src/content_script/custom_elements.ts
View file

@ -2,33 +2,33 @@ import { browser } from "webextension-polyfill-ts";
import contents from "./spinner.scss?raw";
class LingoTranslate extends HTMLElement {
shadow: ShadowRoot;
constructor() {
super();
this.shadow = this.attachShadow({ mode: "open" });
this.attachShadow({ mode: "open" });
}
render = () => {
this.shadowRoot.innerHTML = "<lingo-loading></lingo-loading>";
const toTranslate = this.getAttribute("translate");
if (toTranslate) {
const translation = browser.runtime.sendMessage({
commandKind: commands.translate,
toTranslate: toTranslate,
});
translation.then((t: TranslationResponse) => {
if (t.src == this.getAttribute("translate")) {
this.shadowRoot.textContent = t.result;
this.dispatchEvent(new Event("translationFinished"));
}
});
}
};
attributeChangedCallback() {
this.render();
}
render = () => {
this.shadow.innerHTML = "<lingo-loading></lingo-loading>";
const toTranslate = this.getAttribute("toTranslate");
const translation = browser.runtime.sendMessage({
commandKind: commands.translate,
toTranslate: toTranslate,
});
translation.then((t) => (this.shadow.textContent = t.result));
};
attributeChangedCallback = (
attributeName: string,
oldValue: string,
newValue: string
) => {
if (attributeName === "toTranslate" && oldValue != newValue) this.render();
};
static get observedAttributes() {
return ["toTranslate"];
return ["translate"];
}
}
customElements.define("lingo-translate", LingoTranslate);