Add a checkmark for active menu items
authorAlexander Ebert <ebert@woltlab.com>
Fri, 29 Sep 2023 15:29:43 +0000 (17:29 +0200)
committerTim Düsterhus <duesterhus@woltlab.com>
Thu, 5 Oct 2023 15:22:07 +0000 (17:22 +0200)
ts/WoltLabSuite/Core/Element/woltlab-core-menu-item.ts
wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-menu-item.js

index 46816ec9718fdfa312538d54fba95504e7ef4b64..ce00aab4532f73716cf85ebd040b7fe416aec4a6 100644 (file)
@@ -7,11 +7,17 @@ const enum MenuItemType {
 
 export class WoltlabCoreMenuItemElement extends HTMLElement {
   #type: MenuItemType = MenuItemType.Item;
+  #checkmark?: FaIcon;
 
   connectedCallback() {
     const shadow = this.attachShadow({ mode: "open" });
 
+    const checkmarkSlot = document.createElement("slot");
+    checkmarkSlot.name = "checkmark";
+    shadow.append(checkmarkSlot);
+
     const defaultSlot = document.createElement("slot");
+    defaultSlot.id = "slot";
     shadow.append(defaultSlot);
 
     this.tabIndex = -1;
@@ -22,11 +28,21 @@ export class WoltlabCoreMenuItemElement extends HTMLElement {
       this.setAttribute("role", "menuitemcheckbox");
 
       this.selected = this.hasAttribute("selected");
+
+      if (this.#checkmark === undefined) {
+        this.#checkmark = document.createElement("fa-icon");
+        this.#checkmark.setIcon("check");
+        this.#checkmark.slot = "checkmark";
+      }
+
+      this.append(this.#checkmark);
     } else {
       this.#type = MenuItemType.Item;
       this.setAttribute("role", "menuitem");
 
       this.removeAttribute("aria-checked");
+
+      this.#checkmark?.remove();
     }
   }
 
index 5dd2035e7af4d5e5869f7439c96452b46e868ee4..4d61ae7d643fe5ac640d38efcb4e1dbe783024b1 100644 (file)
@@ -5,9 +5,14 @@ define(["require", "exports", "tslib", "./woltlab-core-menu-group"], function (r
     woltlab_core_menu_group_1 = tslib_1.__importDefault(woltlab_core_menu_group_1);
     class WoltlabCoreMenuItemElement extends HTMLElement {
         #type = 1 /* MenuItemType.Item */;
+        #checkmark;
         connectedCallback() {
             const shadow = this.attachShadow({ mode: "open" });
+            const checkmarkSlot = document.createElement("slot");
+            checkmarkSlot.name = "checkmark";
+            shadow.append(checkmarkSlot);
             const defaultSlot = document.createElement("slot");
+            defaultSlot.id = "slot";
             shadow.append(defaultSlot);
             this.tabIndex = -1;
             this.disabled = this.hasAttribute("disabled");
@@ -15,11 +20,18 @@ define(["require", "exports", "tslib", "./woltlab-core-menu-group"], function (r
                 this.#type = 0 /* MenuItemType.Checkbox */;
                 this.setAttribute("role", "menuitemcheckbox");
                 this.selected = this.hasAttribute("selected");
+                if (this.#checkmark === undefined) {
+                    this.#checkmark = document.createElement("fa-icon");
+                    this.#checkmark.setIcon("check");
+                    this.#checkmark.slot = "checkmark";
+                }
+                this.append(this.#checkmark);
             }
             else {
                 this.#type = 1 /* MenuItemType.Item */;
                 this.setAttribute("role", "menuitem");
                 this.removeAttribute("aria-checked");
+                this.#checkmark?.remove();
             }
         }
         get selected() {