|
1 |
| -import { ComponentProps, ComputedSubject, DisplayComponent, FSComponent, Subject, VNode } from "@microsoft/msfs-sdk" |
2 |
| -import "./Dropdown.css" |
3 |
| - |
4 |
| -export class Dropdown extends DisplayComponent<ComponentProps> { |
5 |
| - private readonly dropdownButtonRef = FSComponent.createRef<HTMLDivElement>() |
6 |
| - private readonly dropdownMenuRef = FSComponent.createRef<HTMLUListElement>() |
7 |
| - |
8 |
| - private readonly dropdownButtonText = Subject.create<string>("Select an item") |
9 |
| - |
10 |
| - private navigationDataFormat: null | string = null |
11 |
| - |
12 |
| - public render(): VNode { |
13 |
| - return ( |
14 |
| - <div class="dropdown"> |
15 |
| - <div ref={this.dropdownButtonRef} class="dropdown-toggle"> |
16 |
| - {this.dropdownButtonText} |
17 |
| - </div> |
18 |
| - <ul ref={this.dropdownMenuRef} class="dropdown-menu" /> |
19 |
| - </div> |
20 |
| - ) |
21 |
| - } |
22 |
| - |
23 |
| - public onAfterRender(node: VNode): void { |
24 |
| - const dropdownButton = this.dropdownButtonRef.instance |
25 |
| - const dropdownMenu = this.dropdownMenuRef.instance |
26 |
| - |
27 |
| - dropdownButton.addEventListener("click", function () { |
28 |
| - dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block" |
29 |
| - }) |
30 |
| - |
31 |
| - // Close the dropdown when clicking outside of it |
32 |
| - document.addEventListener("click", this.onDropdownItemClick.bind(this)) |
33 |
| - } |
34 |
| - |
35 |
| - public onDropdownItemClick(event: Event): void { |
36 |
| - const dropdownButton = this.dropdownButtonRef.instance |
37 |
| - const dropdownMenu = this.dropdownMenuRef.instance |
38 |
| - |
39 |
| - const target = event.target as HTMLElement |
40 |
| - if (!target) { |
41 |
| - return |
42 |
| - } |
43 |
| - if (!dropdownMenu.contains(target) && !dropdownButton.contains(target)) { |
44 |
| - dropdownMenu.style.display = "none" |
45 |
| - } else if (dropdownMenu.contains(target)) { |
46 |
| - this.dropdownButtonText.set(target.textContent as string) |
47 |
| - const navigationDataFormat = target.dataset.navigationDataFormat |
48 |
| - if (navigationDataFormat) { |
49 |
| - this.navigationDataFormat = navigationDataFormat |
50 |
| - } |
51 |
| - } |
52 |
| - } |
53 |
| - |
54 |
| - public addDropdownItem(text: string, format: string): void { |
55 |
| - const dropdownItem = document.createElement("li") |
56 |
| - dropdownItem.textContent = text |
57 |
| - dropdownItem.dataset.navigationDataFormat = format |
58 |
| - this.dropdownMenuRef.instance.appendChild(dropdownItem) |
59 |
| - } |
60 |
| - |
61 |
| - public getnavigationDataFormat(): string | null { |
62 |
| - return this.navigationDataFormat |
63 |
| - } |
64 |
| -} |
| 1 | +import { ComponentProps, ComputedSubject, DisplayComponent, FSComponent, Subject, VNode } from "@microsoft/msfs-sdk" |
| 2 | +import "./Dropdown.css" |
| 3 | + |
| 4 | +export class Dropdown extends DisplayComponent<ComponentProps> { |
| 5 | + private readonly dropdownButtonRef = FSComponent.createRef<HTMLDivElement>() |
| 6 | + private readonly dropdownMenuRef = FSComponent.createRef<HTMLUListElement>() |
| 7 | + |
| 8 | + private readonly dropdownButtonText = Subject.create<string>("Select an item") |
| 9 | + |
| 10 | + private navigationDataFormat: null | string = null |
| 11 | + |
| 12 | + public render(): VNode { |
| 13 | + return ( |
| 14 | + <div class="dropdown"> |
| 15 | + <div ref={this.dropdownButtonRef} class="dropdown-toggle"> |
| 16 | + {this.dropdownButtonText} |
| 17 | + </div> |
| 18 | + <ul ref={this.dropdownMenuRef} class="dropdown-menu" /> |
| 19 | + </div> |
| 20 | + ) |
| 21 | + } |
| 22 | + |
| 23 | + public onAfterRender(node: VNode): void { |
| 24 | + super.onAfterRender(node) |
| 25 | + |
| 26 | + const dropdownButton = this.dropdownButtonRef.instance |
| 27 | + const dropdownMenu = this.dropdownMenuRef.instance |
| 28 | + |
| 29 | + dropdownButton.addEventListener("click", function () { |
| 30 | + dropdownMenu.style.display = dropdownMenu.style.display === "block" ? "none" : "block" |
| 31 | + }) |
| 32 | + |
| 33 | + // Close the dropdown when clicking outside of it |
| 34 | + document.addEventListener("click", this.onDropdownItemClick.bind(this)) |
| 35 | + } |
| 36 | + |
| 37 | + public onDropdownItemClick(event: Event): void { |
| 38 | + const dropdownButton = this.dropdownButtonRef.instance |
| 39 | + const dropdownMenu = this.dropdownMenuRef.instance |
| 40 | + |
| 41 | + const target = event.target as HTMLElement |
| 42 | + if (!target) { |
| 43 | + return |
| 44 | + } |
| 45 | + if (!dropdownMenu.contains(target) && !dropdownButton.contains(target)) { |
| 46 | + dropdownMenu.style.display = "none" |
| 47 | + } else if (dropdownMenu.contains(target)) { |
| 48 | + this.dropdownButtonText.set(target.textContent as string) |
| 49 | + const navigationDataFormat = target.dataset.navigationDataFormat |
| 50 | + if (navigationDataFormat) { |
| 51 | + this.navigationDataFormat = navigationDataFormat |
| 52 | + } |
| 53 | + } |
| 54 | + } |
| 55 | + |
| 56 | + public addDropdownItem(text: string, format: string): void { |
| 57 | + const dropdownItem = document.createElement("li") |
| 58 | + dropdownItem.textContent = text |
| 59 | + dropdownItem.dataset.navigationDataFormat = format |
| 60 | + this.dropdownMenuRef.instance.appendChild(dropdownItem) |
| 61 | + } |
| 62 | + |
| 63 | + public getnavigationDataFormat(): string | null { |
| 64 | + return this.navigationDataFormat |
| 65 | + } |
| 66 | +} |
0 commit comments