fix(ui): Unable to set reset conditions

The regular "trigger" UI element is not the correct one to set the reset conditions. We now have an appropriate button for these values.

packages/userscript/source/ui/ResetBonfireSettingsUi.ts

@@ -2,6 +2,7 @@ import { ResetBonfireSettings } from "../options/ResetBonfireSettings";
 import { SettingTrigger } from "../options/Settings";
 import { UserScript } from "../UserScript";
 import { IconSettingsPanel } from "./components/IconSettingsPanel";
+import { SettingTriggerLimitListItem } from "./components/SettingTriggerLimitListItem";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 
 export class ResetBonfireSettingsUi extends IconSettingsPanel<ResetBonfireSettings> {
@@ -215,7 +216,7 @@ export class ResetBonfireSettingsUi extends IconSettingsPanel<ResetBonfireSettin
  delimiter = false,
  upgradeIndicator = false
  ) {
- return new SettingTriggerListItem(
+ return new SettingTriggerLimitListItem(
  this._host,
  i18nName,
  option,

packages/userscript/source/ui/ResetReligionSettingsUi.ts

@@ -2,6 +2,7 @@ import { ResetReligionSettings } from "../options/ResetReligionSettings";
 import { SettingTrigger } from "../options/Settings";
 import { UserScript } from "../UserScript";
 import { IconSettingsPanel } from "./components/IconSettingsPanel";
+import { SettingTriggerLimitListItem } from "./components/SettingTriggerLimitListItem";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 
 export class ResetReligionSettingsUi extends IconSettingsPanel<ResetReligionSettings> {
@@ -166,7 +167,7 @@ export class ResetReligionSettingsUi extends IconSettingsPanel<ResetReligionSett
  delimiter = false,
  upgradeIndicator = false
  ) {
- return new SettingTriggerListItem(
+ return new SettingTriggerLimitListItem(
  this._host,
  i18nName,
  option,

packages/userscript/source/ui/ResetSpaceSettingsUi.ts

@@ -2,6 +2,7 @@ import { ResetSpaceSettings } from "../options/ResetSpaceSettings";
 import { SettingTrigger } from "../options/Settings";
 import { UserScript } from "../UserScript";
 import { IconSettingsPanel } from "./components/IconSettingsPanel";
+import { SettingTriggerLimitListItem } from "./components/SettingTriggerLimitListItem";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 
 export class ResetSpaceSettingsUi extends IconSettingsPanel<ResetSpaceSettings> {
@@ -148,7 +149,7 @@ export class ResetSpaceSettingsUi extends IconSettingsPanel<ResetSpaceSettings>
  delimiter = false,
  upgradeIndicator = false
  ) {
- return new SettingTriggerListItem(
+ return new SettingTriggerLimitListItem(
  this._host,
  i18nName,
  option,

packages/userscript/source/ui/ResetTimeSettingsUi.ts

@@ -2,6 +2,7 @@ import { ResetTimeSettings } from "../options/ResetTimeSettings";
 import { SettingTrigger } from "../options/Settings";
 import { UserScript } from "../UserScript";
 import { IconSettingsPanel } from "./components/IconSettingsPanel";
+import { SettingTriggerLimitListItem } from "./components/SettingTriggerLimitListItem";
 import { SettingTriggerListItem } from "./components/SettingTriggerListItem";
 
 export class ResetTimeSettingsUi extends IconSettingsPanel<ResetTimeSettings> {
@@ -86,7 +87,7 @@ export class ResetTimeSettingsUi extends IconSettingsPanel<ResetTimeSettings> {
  delimiter = false,
  upgradeIndicator = false
  ) {
- return new SettingTriggerListItem(
+ return new SettingTriggerLimitListItem(
  this._host,
  i18nName,
  option,

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

@@ -24,10 +24,8 @@ export class MaxButton extends UiComponent {
  );
 
  if (value !== null) {
- const limit = SettingsSectionUi.renderLimit(value, host);
  host.updateSettings(() => (setting.max = value));
- element[0].title = limit;
- element[0].innerText = host.engine.i18n("ui.max", [limit]);
+ this.refreshUi();
  }
 
  if (handler.onClick) {

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

@@ -0,0 +1,31 @@
+import { SettingTrigger } from "../../options/Settings";
+import { UserScript } from "../../UserScript";
+import { SettingListItem } from "./SettingListItem";
+import { TriggerLimitButton } from "./TriggerLimitButton";
+
+export class SettingTriggerLimitListItem extends SettingListItem {
+ readonly triggerButton: TriggerLimitButton;
+
+ constructor(
+ host: UserScript,
+ label: string,
+ setting: SettingTrigger,
+ handler: {
+ onCheck: () => void;
+ onUnCheck: () => void;
+ },
+ delimiter = false,
+ upgradeIndicator = false,
+ additionalClasses = []
+ ) {
+ super(host, label, setting, handler, delimiter, upgradeIndicator, additionalClasses);
+
+ this.triggerButton = new TriggerLimitButton(host, label, setting);
+ this.element.append(this.triggerButton.element);
+ }
+
+ refreshUi() {
+ super.refreshUi();
+ this.triggerButton.refreshUi();
+ }
+}

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

@@ -4,7 +4,6 @@ import { SettingsSectionUi } from "../SettingsSectionUi";
 import { UiComponent } from "./UiComponent";
 
 export class TriggerButton extends UiComponent {
- readonly _host: UserScript;
  readonly setting: SettingTrigger;
  readonly element: JQuery<HTMLElement>;
 
@@ -38,7 +37,6 @@ export class TriggerButton extends UiComponent {
  });
 
  this.element = element;
- this._host = host;
  this.setting = setting;
  }
 

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

@@ -0,0 +1,48 @@
+import { SettingTrigger } from "../../options/Settings";
+import { UserScript } from "../../UserScript";
+import { SettingsSectionUi } from "../SettingsSectionUi";
+import { UiComponent } from "./UiComponent";
+
+export class TriggerLimitButton extends UiComponent {
+ readonly setting: SettingTrigger;
+ readonly element: JQuery<HTMLElement>;
+
+ constructor(
+ host: UserScript,
+ label: string,
+ setting: SettingTrigger,
+ handler: { onClick?: () => void } = {}
+ ) {
+ super(host);
+
+ const element = $("<div/>").addClass("ks-text-button").addClass("ks-max-button");
+
+ element.on("click", () => {
+ const value = SettingsSectionUi.promptLimit(
+ host.engine.i18n("ui.trigger.set", [label]),
+ setting.trigger.toString()
+ );
+
+ if (value !== null) {
+ host.updateSettings(() => (setting.trigger = value));
+ this.refreshUi();
+ }
+
+ if (handler.onClick) {
+ handler.onClick();
+ }
+ });
+
+ this.element = element;
+ this.setting = setting;
+ }
+
+ refreshUi() {
+ this.element[0].title = this.setting.trigger.toFixed();
+ this.element.text(
+ this._host.engine.i18n("ui.trigger", [
+ SettingsSectionUi.renderLimit(this.setting.trigger, this._host),
+ ])
+ );
+ }
+}