Implement the selection of multiple items

Author: dtdesign

ts/WoltLabSuite/WebComponent/woltlab-core-list-box.ts

@@ -2,16 +2,16 @@ import HTMLParsedElement from "./html-parsed-element";
 import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
 
 {
-  type ChangePayload = { selected: string };
-
   interface WoltlabCoreListBoxEventMap {
-    change: CustomEvent<ChangePayload>;
+    change: CustomEvent<void>;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
   class WoltlabCoreListBoxElement extends HTMLParsedElement {
+    #multiple = false;
     #position = -1;
     #selected = "";
+    #selectedValues: string[] = [];
     readonly #formInput: HTMLInputElement;
     readonly #knownItems: WeakSet<WoltlabCoreListItemElement> = new WeakSet();
     readonly #shadow: ShadowRoot;
@@ -24,20 +24,21 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
       style.textContent = `
 :host {
   background-color: var(--wcfDropdownBackground);
-	border-radius: 4px;
-	box-shadow: var(--wcfBoxShadow);
-	color: var(--wcfDropdownText);
+  border-radius: 4px;
+  box-shadow: var(--wcfBoxShadow);
+  color: var(--wcfDropdownText);
   display: flex;
-  flex-direction: column;
-	min-width: 160px !important;
-	padding: 4px 0;
-	pointer-events: all;
-	position: fixed;
-	text-align: left;
-	z-index: 450;
+  min-width: 160px !important;
+  padding: 4px 0;
+  pointer-events: all;
+  position: fixed;
+  text-align: left;
+  z-index: 450;
 }
 
 .content {
+  display: flex;
+  flex-direction: column;
   overflow: auto;
 }
       `;
@@ -69,12 +70,6 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
       });
 
       this.addEventListener("keydown", (event) => {
-        if (event.key.length === 1) {
-          event.preventDefault();
-          this.#focusFirstMatchingItem(event.key);
-          return;
-        }
-
         switch (event.key) {
           case "ArrowDown":
             event.preventDefault();
@@ -92,22 +87,42 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
             break;
 
           case "Enter":
-            event.preventDefault();
-            this.#selectItem();
+            if (!this.#multiple) {
+              event.preventDefault();
+              this.#selectItem();
+            }
             break;
 
           case "Home":
             event.preventDefault();
             this.#focusFirstItem();
             break;
+
+          case " ":
+            // The space is always intercepted because in a single selection
+            // list it would trigger a scroll event.
+            event.preventDefault();
+
+            if (this.#multiple) {
+              this.#selectItem();
+            }
+            break;
+
+          default:
+            if (event.key.length === 1 && !event.ctrlKey && !event.altKey && !event.metaKey) {
+              event.preventDefault();
+              this.#focusFirstMatchingItem(event.key);
+            }
+            break;
         }
       });
     }
 
     parsedCallback() {
       this.classList.add("listBox");
       this.role = "listbox";
-      this.ariaMultiSelectable = "false";
+      this.#multiple = this.hasAttribute("multiple");
+      this.ariaMultiSelectable = String(this.#multiple);
       this.ariaOrientation = "vertical";
       this.tabIndex = 0;
 
@@ -135,12 +150,8 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
         if (!this.#knownItems.has(element)) {
           this.#knownItems.add(element);
 
-          element.addEventListener("change", (event) => {
-            if (event.detail.selected) {
-              this.#changeSelection(element.value);
-            } else {
-              throw new Error("TODO: not implemented");
-            }
+          element.addEventListener("change", () => {
+            this.#updateSelection(element);
           });
         }
       }
@@ -149,29 +160,37 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
       this.#updateFormInput(this.name);
     }
 
-    #changeSelection(value: string): void {
-      this.#selected = value;
-      this.setAttribute("selected", value);
+    #updateSelection(changedItem: WoltlabCoreListItemElement): void {
+      const items = this.#getItems();
+
+      if (this.#multiple) {
+        this.#selectedValues = items.filter((item) => item.selected).map((item) => item.value);
+
+        const position = items.indexOf(changedItem);
+        this.#setFocus(items, position);
+      } else {
+        const { value } = changedItem;
 
-      for (const item of this.#getItems()) {
-        if (item.selected) {
-          if (item.value !== value) {
+        for (const item of items) {
+          if (!item.selected) {
+            continue;
+          }
+
+          if (changedItem === undefined) {
+            item.selected = false;
+          } else if (item.value === value) {
+            this.#selected = value;
+          } else {
             item.selected = false;
           }
-        } else if (item.value === value) {
-          item.selected = true;
         }
       }
 
-      if (this.#formInput !== undefined) {
+      /*if (this.#formInput !== undefined) {
         this.#formInput.value = value;
-      }
+      }*/
 
-      const event = new CustomEvent<ChangePayload>("change", {
-        detail: {
-          selected: value,
-        },
-      });
+      const event = new CustomEvent<void>("change");
       this.dispatchEvent(event);
     }
 
@@ -290,7 +309,7 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
         return;
       }
 
-      this.#changeSelection(item.value);
+      item.toggle();
     }
 
     #updateFormInput(name: string): void {
@@ -311,17 +330,33 @@ import { WoltlabCoreListItemElement } from "./woltlab-core-list-item";
       );
     }
 
-    get selected(): string {
+    get selected(): string | undefined {
+      if (this.#multiple) {
+        return undefined;
+      }
+
       return this.#selected;
     }
 
+    get selectedValues(): string[] | undefined {
+      if (this.#multiple) {
+        return this.#selectedValues;
+      }
+
+      return undefined;
+    }
+
     get name(): string {
       return this.getAttribute("name") || "";
     }
 
     set name(name: string) {
       this.#updateFormInput(name);
     }
+
+    get multiple(): boolean {
+      return this.#multiple;
+    }
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging

ts/WoltLabSuite/WebComponent/woltlab-core-list-item.ts

@@ -3,27 +3,42 @@ let idCounter = 0;
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging
 export class WoltlabCoreListItemElement extends HTMLElement {
   #shadow: ShadowRoot | undefined = undefined;
+  #multiple = false;
+  readonly #checkbox: HTMLInputElement;
+
+  constructor() {
+    super();
+
+    this.#checkbox = document.createElement("input");
+    this.#checkbox.type = "checkbox";
+    this.#checkbox.inert = true;
+  }
 
   connectedCallback() {
     this.role = "option";
     this.classList.add("listBox__item");
-    if (this.ariaSelected === null) {
-      this.ariaSelected = "false";
+
+    this.#multiple = false;
+    // We cannot use a proper `instanceof` check here as it would create a
+    // circular dependency.
+    if (this.parentElement?.tagName === "WOLTLAB-CORE-LIST-BOX") {
+      this.#multiple = this.parentElement.hasAttribute("multiple");
+    }
+
+    if (this.#multiple) {
+      this.ariaChecked = String(this.selected);
+      this.removeAttribute("aria-selected");
+    } else {
+      this.ariaSelected = String(this.selected);
+      this.removeAttribute("aria-checked");
     }
 
     if (!this.id) {
       this.id = "woltlabCoreListItem" + idCounter++;
     }
 
     this.addEventListener("click", () => {
-      this.selected = true;
-
-      const event = new CustomEvent<WoltlabCoreListItemChangePayload>("change", {
-        detail: {
-          selected: this.selected,
-        },
-      });
-      this.dispatchEvent(event);
+      this.toggle();
     });
 
     const shadow = this.#getShadow();
@@ -57,7 +72,7 @@ html[data-color-scheme="dark"] :host {
   grid-area: icon;
 }
 
-:host(:not([selected])) .icon {
+:host(:not([aria-selected="true"])) .icon ::slotted(fa-icon) {
   visibility: hidden;
 }
 
@@ -71,6 +86,10 @@ html[data-color-scheme="dark"] :host {
   white-space: nowrap;
   word-wrap: normal;
 }
+
+input {
+  pointer-events: none;
+}
     `;
 
     const iconWrapper = document.createElement("div");
@@ -89,13 +108,17 @@ html[data-color-scheme="dark"] :host {
 
     shadow.append(style, iconWrapper, contentWrapper);
 
-    const icon = document.createElement("fa-icon");
-    icon.setIcon("check");
-    icon.slot = "icon";
-
     this.querySelector('slot[name="icon"]')?.remove();
 
-    this.append(icon);
+    if (this.#multiple) {
+      iconWrapper.append(this.#checkbox);
+    } else {
+      const icon = document.createElement("fa-icon");
+      icon.setIcon("check");
+      icon.slot = "icon";
+
+      this.append(icon);
+    }
   }
 
   #getShadow(): ShadowRoot {
@@ -106,15 +129,47 @@ html[data-color-scheme="dark"] :host {
     return this.#shadow;
   }
 
+  toggle(): void {
+    let hasChanged = false;
+    if (this.#multiple) {
+      this.selected = !this.selected;
+
+      hasChanged = true;
+    } else if (!this.selected) {
+      this.selected = true;
+
+      hasChanged = true;
+    }
+
+    if (hasChanged) {
+      const event = new CustomEvent<void>("change");
+      this.dispatchEvent(event);
+    }
+  }
+
   get selected(): boolean {
-    return this.ariaSelected === "true";
+    return this.ariaSelected === "true" || this.ariaChecked === "true";
   }
 
   set selected(selected: boolean) {
-    if (selected) {
-      this.ariaSelected = "true";
+    if (selected === this.selected) {
+      return;
+    }
+
+    if (this.#multiple) {
+      this.#checkbox.checked = selected;
+
+      if (selected) {
+        this.ariaChecked = "true";
+      } else {
+        this.ariaChecked = "false";
+      }
     } else {
-      this.ariaSelected = "false";
+      if (selected) {
+        this.ariaSelected = "true";
+      } else {
+        this.ariaSelected = "false";
+      }
     }
   }
 
@@ -133,14 +188,16 @@ html[data-color-scheme="dark"] :host {
   get value(): string {
     return this.getAttribute("value") || "";
   }
+
+  get multiple(): boolean {
+    return this.#multiple;
+  }
 }
 
 window.customElements.define("woltlab-core-list-item", WoltlabCoreListItemElement);
 
-type WoltlabCoreListItemChangePayload = { selected: boolean };
-
 interface WoltlabCoreListItemEventMap {
-  change: CustomEvent<WoltlabCoreListItemChangePayload>;
+  change: CustomEvent<void>;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-declaration-merging