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

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

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