refactor(ui): Expando component

packages/userscript/source/ui/UserInterface.ts

@@ -1,7 +1,7 @@
 import { isNil, mustExist } from "../tools/Maybe";
 import { UserScript } from "../UserScript";
 import { BonfireSettingsUi } from "./BonfireSettingsUi";
-import { SettingsPanel } from "./components/SettingsPanel";
+import { ExpandoButton } from "./components/ExpandoButton";
 import { EngineSettingsUi } from "./EngineSettingsUi";
 import { FiltersSettingsUi } from "./FilterSettingsUi";
 import { OptionsSettingsUi } from "./OptionsSettingsUi";
@@ -78,14 +78,12 @@ export class UserInterface {
     optionsListElement.append(this._optionsUi.element);
     optionsListElement.append(this._filterUi.element);
 
-    const toggleOptionsVisiblity = SettingsPanel.makeItemsToggle(this._host, "");
-    this._engineUi.element.append(toggleOptionsVisiblity);
+    const expando = new ExpandoButton(this._host, "engine");
+    this._engineUi.element.append(expando.element);
 
     // Make _engineUI's expando button hide/show the other option groups
-    // Currently accesses the button via id.
-    const optionsToggle = toggleOptionsVisiblity;
     let sectionsVisible = false;
-    optionsToggle.on("click", () => {
+    expando.element.on("click", () => {
       sectionsVisible = !sectionsVisible;
       const optionsVisiblity = sectionsVisible;
       this._bonfireUi.panel.toggle(optionsVisiblity);
@@ -100,14 +98,6 @@ export class UserInterface {
       this._distributeUi.panel.toggle(optionsVisiblity);
       this._optionsUi.panel.toggle(optionsVisiblity);
       this._filterUi.panel.toggle(optionsVisiblity);
-
-      optionsToggle.text(optionsVisiblity ? "-" : "+");
-      optionsToggle.prop(
-        "title",
-        optionsVisiblity
-          ? this._host.engine.i18n("ui.itemsHide")
-          : this._host.engine.i18n("ui.itemsShow")
-      );
     });
 
     // Set up the "show activity summary" area.

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

@@ -0,0 +1,37 @@
+import { UserScript } from "../../UserScript";
+
+export class ExpandoButton {
+  readonly host: UserScript;
+  readonly element: JQuery<HTMLElement>;
+
+  /**
+   * Constructs an expando element that is commonly used to expand and
+   * collapses a section of the UI.
+   *
+   * @param host A reference to the host.
+   * @param id The ID of the section this is the expando for.
+   */
+  constructor(host: UserScript, id: string) {
+    const element = $("<div/>", {
+      id: `toggle-items-${id}`,
+      title: host.engine.i18n("ui.itemsShow"),
+      text: "+",
+    }).addClass("ks-expando-button");
+
+    this.element = element;
+    this.host = host;
+  }
+
+  setCollapsed() {
+    this.element.prop("title", this.host.engine.i18n("ui.itemsShow"));
+    this.element.text("+");
+  }
+  setExpanded() {
+    this.element.prop("title", this.host.engine.i18n("ui.itemsHide"));
+    this.element.text("-");
+  }
+
+  refreshUi() {
+    /* intentionally left blank */
+  }
+}

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

@@ -1,5 +1,6 @@
 import { SettingsSection } from "../../options/SettingsSection";
 import { UserScript } from "../../UserScript";
+import { ExpandoButton } from "./ExpandoButton";
 import { SettingListItem } from "./SettingListItem";
 import { SettingsList } from "./SettingsList";
 
@@ -8,7 +9,7 @@ export class SettingsPanel {
   readonly settings: SettingsSection;
   readonly element: JQuery<HTMLElement>;
   private readonly _element: SettingListItem;
-  readonly expando: JQuery<HTMLElement>;
+  private readonly _expando: ExpandoButton;
   readonly list: JQuery<HTMLElement>;
   readonly _list: SettingsList;
   private _mainChildVisible: boolean;
@@ -42,14 +43,15 @@ export class SettingsPanel {
     const list = new SettingsList(host, id);
 
     // The expando button for this panel.
-    const itemsElement = SettingsPanel.makeItemsToggle(host, id).text(
-      initiallyExpanded ? "-" : "+"
-    );
-    itemsElement.on("click", () => {
+    const expando = new ExpandoButton(host, id);
+    if (initiallyExpanded) {
+      expando.setExpanded();
+    }
+    expando.element.on("click", () => {
       this.toggle();
     });
 
-    element.element.append(itemsElement, list.element);
+    element.element.append(expando.element, list.element);
 
     if (initiallyExpanded) {
       list.element.toggle();
@@ -59,7 +61,7 @@ export class SettingsPanel {
     this._list = list;
     this._mainChildVisible = initiallyExpanded;
     this.element = element.element;
-    this.expando = itemsElement;
+    this._expando = expando;
     this.host = host;
     this.list = list.element;
     this.settings = settings;
@@ -73,28 +75,10 @@ export class SettingsPanel {
     this._mainChildVisible = expand !== undefined ? expand : !this._mainChildVisible;
     if (this._mainChildVisible) {
       this.list.show();
-      this.expando.prop("title", this.host.engine.i18n("ui.itemsHide"));
-      this.expando.text("-");
+      this._expando.setExpanded();
     } else {
       this.list.hide();
-      this.expando.prop("title", this.host.engine.i18n("ui.itemsShow"));
-      this.expando.text("+");
+      this._expando.setCollapsed();
     }
   }
-
-  /**
-   * Constructs an expando element that is commonly used to expand and
-   * collapses a section of the UI.
-   *
-   * @param host A reference to the host.
-   * @param id The ID of the section this is the expando for.
-   * @returns The constructed expando element.
-   */
-  static makeItemsToggle(host: UserScript, id: string): JQuery<HTMLElement> {
-    return $("<div/>", {
-      id: `toggle-items-${id}`,
-      title: host.engine.i18n("ui.itemsShow"),
-      text: "+",
-    }).addClass("ks-expando-button");
-  }
 }

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

@@ -0,0 +1,19 @@
+import { UserScript } from "../../UserScript";
+
+export abstract class UiComponent {
+  /**
+   * A reference to the host itself.
+   */
+  readonly host: UserScript;
+
+  /**
+   * The main DOM element for this component, in a JQuery wrapper.
+   */
+  abstract readonly element: JQuery<HTMLElement>;
+
+  constructor(host: UserScript) {
+    this.host = host;
+  }
+
+  abstract refreshUi(): void;
+}