flashlang/src/frontend/popup/popup.ts

48 lines
1 KiB
TypeScript
Raw Normal View History

2020-08-07 13:45:32 +02:00
import { Communicator } from "../../communication";
import "./popup.scss";
const con = new Communicator();
2020-08-07 21:52:32 +02:00
class Toggle extends HTMLButtonElement {
2020-08-07 13:45:32 +02:00
isON: boolean = false;
textContent: string = "OFF";
public set on(v: boolean) {
if (this.isON == v) {
return;
}
this.isON = v;
this.render();
}
public get on(): boolean {
return this.isON;
}
public render() {
this.textContent = this.on ? "ON" : "OFF";
}
constructor() {
super();
this.addEventListener("click", () => {
this.on = !this.on;
2020-08-07 21:52:32 +02:00
const toggleEvent = new CustomEvent("toggled", {
2020-08-07 13:45:32 +02:00
detail: this.on,
});
this.dispatchEvent(toggleEvent);
});
}
}
2020-08-07 21:52:32 +02:00
customElements.define("lingo-toggle", Toggle, {
2020-08-07 13:45:32 +02:00
extends: "button",
});
2020-08-09 13:02:28 +02:00
const toggle = <Toggle>document.querySelector("button[is=lingo-toggle]");
2020-08-07 21:52:32 +02:00
toggle.addEventListener("toggled", ((e: CustomEvent) => {
Communicator.setEnabled(e.detail);
}) as EventListener); //Hate to do this but ts forced me
2020-08-07 13:45:32 +02:00
con.setEnabledCallback = (v) => (toggle.on = v);
Communicator.getEnabled().then((v) => (toggle.on = v));