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));
|