@kitten-science/kitten-scientists/lib/ui/components/SettingListItem.js

Add-on for the wonderful incremental browser game: https://kittensgame.com/web/

import { isNil } from "@oliversalzburg/js-utils/data/nil.js";
import { redirectErrorsToConsole } from "@oliversalzburg/js-utils/errors/console.js";
import { LabelListItem } from "./LabelListItem.js";
import { default as styles, default as stylesSettingListItem } from "./SettingListItem.module.css";
export class SettingListItem extends LabelListItem {
    setting;
    checkbox;
    readOnly;
    /**
     * Construct a new setting element.
     * This is a simple checkbox with a label.
     *
     * @param host The userscript instance.
     * @param label The label on the setting element.
     * @param setting The setting this element is linked to.
     * @param options Options for this list item.
     */
    constructor(parent, setting, label, options) {
        super(parent, label, {
            ...options,
            onRefresh: () => {
                if (this.setting.enabled) {
                    this.element.addClass(styles.checked);
                }
                else {
                    this.element.removeClass(styles.checked);
                }
                if (this.readOnly) {
                    this.element.addClass(stylesSettingListItem.readonly);
                }
                else {
                    this.element.removeClass(stylesSettingListItem.readonly);
                }
                if (!isNil(this.checkbox)) {
                    this.checkbox.prop("checked", this.setting.enabled);
                    this.checkbox.prop("disabled", this.readOnly);
                }
                options?.onRefresh?.();
            },
        });
        this.element.addClass(styles.setting);
        const id = `ks-setting${this.componentId}`;
        const checkbox = $("<input/>", {
            id,
            type: "checkbox",
        }).addClass(styles.checkbox);
        this.readOnly = options?.readOnly ?? false;
        checkbox.prop("disabled", this.readOnly);
        checkbox.on("change", (_event) => {
            if (checkbox.is(":checked") && !setting.enabled) {
                this.check().catch(redirectErrorsToConsole(console));
            }
            else if (!checkbox.is(":checked") && setting.enabled) {
                this.uncheck().catch(redirectErrorsToConsole(console));
            }
        });
        this.elementLabel.before(checkbox);
        this.elementLabel.prop("for", id);
        this.checkbox = checkbox;
        this.setting = setting;
    }
    toString() {
        return `[${SettingListItem.name}#${this.componentId}]: '${this.elementLabel.text()}'`;
    }
    async check(isBatchProcess = false) {
        this.setting.enabled = true;
        await this.options?.onCheck?.call(isBatchProcess);
        this.requestRefresh();
    }
    async uncheck(isBatchProcess = false) {
        this.setting.enabled = false;
        await this.options.onUnCheck?.call(isBatchProcess);
        this.requestRefresh();
    }
}
//# sourceMappingURL=SettingListItem.js.map