flashlang/src/frontend/popup/popup.ts

import { Communicator } from "../../communication";
import "./popup.scss";

const con = new Communicator();

class Toggle extends HTMLButtonElement {
	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;

			const toggleEvent = new CustomEvent("toggled", {
				detail: this.on,
			});
			this.dispatchEvent(toggleEvent);
		});
	}
}
customElements.define("lingo-toggle", Toggle, {
	extends: "button",
});

const toggle = <Toggle>document.querySelector("button[is=lingo-toggle]");
toggle.addEventListener("toggled", ((e: CustomEvent) => {
	Communicator.setEnabled(e.detail);
}) as EventListener); //Hate to do this but ts forced me

con.setEnabledCallback = (v) => (toggle.on = v);
Communicator.getEnabled().then((v) => (toggle.on = v));