Add setter to the toggle
This commit is contained in:
parent
1eb88d524f
commit
f63d03b87a
1 changed files with 15 additions and 7 deletions
|
@ -1,20 +1,28 @@
|
||||||
import { browser } from "webextension-polyfill-ts";
|
import { browser } from "webextension-polyfill-ts";
|
||||||
import "./popup.scss";
|
import "./popup.scss";
|
||||||
class ExtensionToggle extends HTMLButtonElement {
|
class ExtensionToggle extends HTMLButtonElement {
|
||||||
on: boolean = false;
|
isON: boolean = false;
|
||||||
innerHTML: string = "OFF";
|
innerHTML: string = "OFF";
|
||||||
constructor() {
|
|
||||||
super();
|
public set on(v: boolean) {
|
||||||
this.addEventListener("click", this.toggle);
|
if (this.isON == v) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
toggle() {
|
this.isON = v;
|
||||||
this.on = !this.on;
|
|
||||||
this.innerHTML = this.on ? "ON" : "OFF";
|
this.innerHTML = this.on ? "ON" : "OFF";
|
||||||
const toggleEvent = new CustomEvent("extensionToggled", {
|
const toggleEvent = new CustomEvent("extensionToggled", {
|
||||||
detail: this.on,
|
detail: this.on,
|
||||||
});
|
});
|
||||||
this.dispatchEvent(toggleEvent);
|
this.dispatchEvent(toggleEvent);
|
||||||
}
|
}
|
||||||
|
public get on(): boolean {
|
||||||
|
return this.isON;
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.addEventListener("click", () => (this.on = !this.on));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
customElements.define("extension-toggle", ExtensionToggle, {
|
customElements.define("extension-toggle", ExtensionToggle, {
|
||||||
extends: "button",
|
extends: "button",
|
||||||
|
|
Loading…
Reference in a new issue