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

Style the translation custom element

Browse source
This commit is contained in:
a 2020-08-07 18:09:20 +02:00
parent e3b9833c6f
commit dc9a38cc7d
2 changed files with 35 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/frontend/content_script/custom_elements.ts
View file

@ -1,25 +1,32 @@
import { Communicator } from "../../communication"; import { Communicator } from "../../communication";
import contents from "./spinner.scss?raw"; import spinnerCSS from "./spinner.scss?raw";
import translationCSS from "./translation.scss?raw";
class LingoTranslate extends HTMLElement { class LingoTranslate extends HTMLElement {
loadingElm: LingoLoading;
translationElm: LingoTranslation;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `<lingo-loading></lingo-loading> <lingo-translation></lingo-translation>`;
this.loadingElm = this.shadowRoot.querySelector("lingo-loading");
this.translationElm = this.shadowRoot.querySelector("lingo-translation");
} }
render = () => { render = () => {
this.shadowRoot.innerHTML = "<lingo-loading></lingo-loading>"; this.loadingElm.hidden = false;
this.translationElm.hidden = true;
const toTranslate = this.getAttribute("translate"); const toTranslate = this.getAttribute("translate");
if (toTranslate) { if (toTranslate) {
const translation = Communicator.translate(toTranslate); const translation = Communicator.translate(toTranslate);
translation.then((t: Translation) => { translation.then((t: Translation) => {
if (t.src == this.getAttribute("translate")) { if (t.src == this.getAttribute("translate")) {
this.shadowRoot.innerHTML = ""; this.loadingElm.hidden = true;
this.translationElm.hidden = false;
let translationElement = document.createElement("lingo-translation"); this.translationElm.setAttribute("src", t.src);
translationElement.setAttribute("src", t.src); this.translationElm.setAttribute("translation", t.result);
translationElement.setAttribute("translation", t.result);
this.shadowRoot.appendChild(translationElement);
this.dispatchEvent(new Event("translationFinished")); this.dispatchEvent(new Event("translationFinished"));
} }
}); });
@ -44,7 +51,7 @@ class LingoLoading extends HTMLElement {
spinner.id = "spinner"; spinner.id = "spinner";
const style = document.createElement("style"); const style = document.createElement("style");
style.textContent = contents; style.textContent = spinnerCSS;
shadow.appendChild(style); shadow.appendChild(style);
shadow.appendChild(spinner); shadow.appendChild(spinner);
} }
@ -57,21 +64,29 @@ class LingoTranslation extends HTMLElement {
addToCollection: HTMLButtonElement; addToCollection: HTMLButtonElement;
constructor() { constructor() {
super(); super();
const shadow = this.attachShadow({ mode: "open" }); this.attachShadow({ mode: "open" });
this.translateElm = document.createElement("span"); let style = document.createElement("style");
this.srcElm = document.createElement("span"); style.textContent = translationCSS;
this.addToCollection = document.createElement("button"); this.shadowRoot.appendChild(style);
this.shadowRoot.innerHTML = `
<div id="translation">
<span id="src"></span> - <span id="translated"></span>
</div>
<button is="toggleButton"> Add to collection </button>
`;
this.srcElm = this.shadowRoot.querySelector("#src");
this.translateElm = this.shadowRoot.querySelector("#translated");
this.addToCollection = this.shadowRoot.querySelector("button");
this.addToCollection.addEventListener("click", () => this.addToCollection.addEventListener("click", () =>
Communicator.addFlashcard({ Communicator.addFlashcard({
src: this.getAttribute("src"), src: this.getAttribute("src"),
result: this.getAttribute("translation"), result: this.getAttribute("translation"),
}) })
); );
shadow.appendChild(this.translateElm);
shadow.appendChild(this.srcElm);
shadow.appendChild(this.addToCollection);
} }
render = () => { render = () => {

4
src/frontend/content_script/translation.scss Normal file
View file

@ -0,0 +1,4 @@
lingo-translation {
display: flex;
width: 100%;
}