@kitten-science/kitten-scientists
Version:
Add-on for the wonderful incremental browser game: https://kittensgame.com/web/
99 lines • 3.38 kB
JavaScript
import { redirectErrorsToConsole } from "@oliversalzburg/js-utils/errors/console.js";
import styles from "./Button.module.css";
import { UiComponent } from "./UiComponent.js";
/**
* A button that has a label and can optionally have an SVG icon.
*/
export class Button extends UiComponent {
_iconElement;
readOnly;
inactive;
ineffective;
/**
* Constructs a `Button`.
*
* @param host - A reference to the host.
* @param label - The text to display on the button.
* @param pathData - The SVG path data of the icon.
* @param options - Options for the icon button.
*/
constructor(parent, label, pathData = null, options) {
super(parent, {
...options,
onRefresh: () => {
if (this.readOnly) {
this.element.addClass(styles.readonly);
}
else {
this.element.removeClass(styles.readonly);
}
if (this.inactive) {
this.element.addClass(styles.inactive);
}
else {
this.element.removeClass(styles.inactive);
}
if (this.ineffective) {
this.element.addClass(styles.ineffective);
}
else {
this.element.removeClass(styles.ineffective);
}
options?.onRefresh?.();
},
});
this.element = $("<div/>", { title: options?.title }).addClass(styles.button).text(label);
if (options?.border !== false) {
this.element.addClass(styles.bordered);
}
if (options?.alignment === "right") {
this.element.addClass(styles.alignRight);
}
if (pathData !== null) {
this._iconElement = $(`<svg class="${styles.buttonIcon}" style="width: 18px; height: 18px;" viewBox="0 -960 960 960" fill="currentColor"><path d="${pathData}"/></svg>`);
if (options?.alignment === "right") {
this.element.append(this._iconElement);
}
else {
this.element.prepend(this._iconElement);
}
}
for (const className of options?.classes ?? []) {
this.element.addClass(className);
}
this.element.on("click", () => {
if (this.readOnly) {
return;
}
this.click().catch(redirectErrorsToConsole(console));
});
this.readOnly = options?.readOnly ?? false;
this.inactive = options?.inactive ?? false;
this.ineffective = false;
}
toString() {
return `[${Button.name}#${this.componentId}]`;
}
updateLabel(label) {
this.element.text(label);
if (this._iconElement !== undefined) {
if (this.options.alignment === "right") {
this.element.append(this._iconElement);
}
else {
this.element.prepend(this._iconElement);
}
}
}
updateTitle(title) {
this.element.prop("title", title);
}
async click() {
if (this.readOnly) {
return;
}
await this.options?.onClick?.call(this);
this.requestRefresh();
}
}
//# sourceMappingURL=Button.js.map