Use the DOM as the source of truth

Author: dtdesign

ts/WoltLabSuite/WebComponent/woltlab-core-label-picker.ts

@@ -1,60 +1,39 @@
 {
   class WoltlabCoreLabelPickerElement extends HTMLElement {
+    #button: HTMLButtonElement | undefined = undefined;
+    #input: HTMLInputElement | undefined = undefined;
     #labels: Map<number, string> | undefined = undefined;
-    #name: string = "";
-    #selected: number = 0;
 
     connectedCallback() {
       this.#setupLabels();
 
       this.innerHTML = "";
 
-      const selected = parseInt(this.getAttribute("selected")!);
-      this.removeAttribute("selected");
-      if (!Number.isNaN(selected)) {
-        this.selected = selected;
+      if (!this.value) {
+        this.value = 0;
       }
 
-      const name = this.getAttribute("name")!;
-      this.removeAttribute("name");
-      if (this.#name === "") {
-        this.#name = name || "labelIDs[]";
+      if (!this.name) {
+        this.name = "labelIDs";
       }
 
       this.classList.add("dropdown");
 
-      const button = document.createElement("button");
-      button.type = "button";
-      button.classList.add("dropdownToggle");
-      button.append(this.#getLabel(this.selected));
-
-      const dropdownMenu = document.createElement("ol");
-      dropdownMenu.classList.add("dropdownMenu");
-
-      const input = document.createElement("input");
-      input.type = "hidden";
-      input.name = this.name;
-      input.value = "0";
-
-      for (const [labelId, html] of this.#labels!) {
-        const button2 = document.createElement("button");
-        button2.type = "button";
-        button2.innerHTML = html;
-        button2.addEventListener("click", () => {
-          this.selected = labelId;
-
-          button.innerHTML = "";
-          button.append(this.#getLabel(this.selected));
-
-          input.value = this.#selected.toString();
-        });
+      if (this.#button === undefined) {
+        this.#button = document.createElement("button");
+        this.#button.type = "button";
+        this.#button.classList.add("dropdownToggle");
+        this.#button.append(this.#getLabel(this.value));
+      }
 
-        const listItem = document.createElement("li");
-        listItem.append(button2);
-        dropdownMenu.append(listItem);
+      if (this.#input === undefined) {
+        this.#input = document.createElement("input");
+        this.#input.type = "hidden";
+        this.#input.name = this.name;
+        this.#input.value = this.value.toString();
       }
 
-      this.append(button, dropdownMenu, input);
+      this.append(this.#button, this.#buildSelection(), this.#input);
     }
 
     #setupLabels(): void {
@@ -88,20 +67,84 @@
       return template.content.cloneNode(true);
     }
 
-    get selected(): number {
-      return this.#selected;
+    #buildSelection(): HTMLElement {
+      const dropdownMenu = document.createElement("ol");
+      dropdownMenu.classList.add("dropdownMenu");
+
+      for (const [labelId, html] of this.#labels!) {
+        dropdownMenu.append(this.#createListItem(labelId, html));
+      }
+
+      if (!this.required) {
+        const divider = document.createElement("li");
+        divider.classList.add("dropdownDivider");
+
+        const emptySelection = this.#createListItem(0, this.#getEmptyLabel().outerHTML);
+        dropdownMenu.append(divider, emptySelection);
+      }
+
+      return dropdownMenu;
+    }
+
+    #createListItem(labelId: number, html: string): HTMLLIElement {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.innerHTML = html;
+      button.addEventListener("click", () => {
+        this.value = labelId;
+      });
+
+      const listItem = document.createElement("li");
+      listItem.append(button);
+
+      return listItem;
     }
 
-    set selected(selected: number) {
-      if (this.#labels?.has(selected)) {
-        this.#selected = selected;
+    get value(): number {
+      return parseInt(this.getAttribute("value") || "");
+    }
 
-        // TODO: update the button label
+    set value(value: number) {
+      if (value !== 0 && !this.#labels?.has(value)) {
+        throw new Error(`There is no label with the id ${value}.`);
+      }
+
+      this.setAttribute("value", value.toString());
+
+      if (this.#button !== undefined && this.#input !== undefined) {
+        this.#button.innerHTML = "";
+        this.#button.append(this.#getLabel(this.value));
+
+        this.#input.value = value.toString();
       }
     }
 
     get name(): string {
-      return this.#name;
+      return this.getAttribute("name") || "";
+    }
+
+    set name(name: string) {
+      if (name === "") {
+        throw new Error("The name cannot be empty.");
+      }
+
+      this.setAttribute("name", name);
+
+      if (this.#input !== undefined) {
+        this.#input.name = name;
+      }
+    }
+
+    get required(): boolean {
+      return this.hasAttribute("required");
+    }
+
+    set required(required: boolean) {
+      if (required) {
+        this.setAttribute("required", "");
+      } else {
+        this.removeAttribute("required");
+      }
     }
   }