refactor: Support readonly settings

This allows us to disable arbitrary settings in the UI.

packages/userscript/source/ui/ResourcesSettingsUi.ts

@@ -3,18 +3,18 @@ import { ucfirst } from "../tools/Format";
 import { UserScript } from "../UserScript";
 import { ConsumeButton } from "./components/ConsumeButton";
 import { SettingListItem } from "./components/SettingListItem";
+import { SettingsPanel } from "./components/SettingsPanel";
 import { StockButton } from "./components/StockButton";
-import { SettingsSectionUi } from "./SettingsSectionUi";
 
-export class ResourcesSettingsUi extends SettingsSectionUi<ResourcesSettings> {
+export class ResourcesSettingsUi extends SettingsPanel<ResourcesSettings> {
   private readonly _resources: Array<SettingListItem>;
 
   constructor(host: UserScript, settings: ResourcesSettings) {
     const label = host.engine.i18n("ui.resources");
     super(host, label, settings);
 
     // Disable checkbox. Resource control is always active.
-    $("input", this.element).prop("disabled", true);
+    this.readOnly = true;
 
     this._list.addEventListener("enableAll", () => {
       this._resources.forEach(item => (item.settings.enabled = true));

packages/userscript/source/ui/components/SettingLimitedMaxListItem.ts

@@ -40,7 +40,7 @@ export class SettingLimitedMaxListItem extends SettingLimitedListItem {
     upgradeIndicator = false,
     additionalClasses = []
   ) {
-    super(host, label, setting, handler, delimiter, upgradeIndicator, additionalClasses);
+    super(host, label, setting, handler, delimiter, upgradeIndicator);
 
     this.maxButton = new MaxButton(host, label, setting);
     this.element.append(this.maxButton.element);

packages/userscript/source/ui/components/SettingListItem.ts

@@ -7,6 +7,8 @@ export class SettingListItem extends UiComponent {
   readonly element: JQuery<HTMLElement>;
   readonly checkbox: JQuery<HTMLElement>;
 
+  readOnly: boolean;
+
   /**
    * Construct a new setting element.
    * This is a simple checkbox with a label.
@@ -20,6 +22,7 @@ export class SettingListItem extends UiComponent {
    * @param delimiter Should there be additional padding below this element?
    * @param upgradeIndicator Should an indicator be rendered in front of the elemnt,
    * to indicate that this is an upgrade of a prior setting?
+   * @param readOnly Should the user be prevented from changing the value of the input?
    */
   constructor(
     host: UserScript,
@@ -30,7 +33,8 @@ export class SettingListItem extends UiComponent {
       onUnCheck: () => void;
     },
     delimiter = false,
-    upgradeIndicator = false
+    upgradeIndicator = false,
+    readOnly = false
   ) {
     super(host);
 
@@ -47,6 +51,8 @@ export class SettingListItem extends UiComponent {
       type: "checkbox",
     }).addClass("ks-checkbox");
 
+    this.readOnly = readOnly;
+
     checkbox.on("change", () => {
       if (checkbox.is(":checked") && setting.enabled === false) {
         handler.onCheck();
@@ -68,5 +74,6 @@ export class SettingListItem extends UiComponent {
   refreshUi() {
     super.refreshUi();
     this.checkbox.prop("checked", this.settings.enabled);
+    this.checkbox.prop("disabled", this.readOnly);
   }
 }

packages/userscript/source/ui/components/SettingsPanel.ts

@@ -25,6 +25,12 @@ export class SettingsPanel<TSetting extends Setting = Setting>
   get checkbox() {
     return this._element.checkbox;
   }
+  get readOnly() {
+    return this._element.readOnly;
+  }
+  set readOnly(value: boolean) {
+    this._element.readOnly = value;
+  }
 
   /**
    * Constructs a settings panel that is used to contain a major section of the UI.