|
1 | 1 | import type { ReactiveController, ReactiveControllerHost } from 'lit'; |
2 | | -import { findElementFromEventPath } from '../util.js'; |
| 2 | +import { findElementFromEventPath, isEmpty } from '../util.js'; |
3 | 3 |
|
| 4 | +/** Configuration options for the RootClickController */ |
4 | 5 | type RootClickControllerConfig = { |
5 | | - hideCallback?: () => void; |
| 6 | + /** |
| 7 | + * An optional callback function to execute when an outside click occurs. |
| 8 | + * If not provided, the `hide()` method of the host will be called. |
| 9 | + */ |
| 10 | + onHide?: () => void; |
| 11 | + /** |
| 12 | + * An optional additional HTMLElement that, if clicked, should not trigger the hide action. |
| 13 | + * This is useful for elements like a toggle button that opens the component. |
| 14 | + */ |
6 | 15 | target?: HTMLElement; |
7 | 16 | }; |
8 | 17 |
|
| 18 | +/** Interface for the host element that the RootClickController will be attached to. */ |
9 | 19 | interface RootClickControllerHost extends ReactiveControllerHost, HTMLElement { |
| 20 | + /** |
| 21 | + * Indicates whether the host element is currently open or visible. |
| 22 | + */ |
10 | 23 | open: boolean; |
| 24 | + /** |
| 25 | + * If true, outside clicks will not trigger the hide action. |
| 26 | + */ |
11 | 27 | keepOpenOnOutsideClick?: boolean; |
| 28 | + /** |
| 29 | + * A method on the host to hide or close itself. |
| 30 | + * This will be called if `hideCallback` is not provided in the config. |
| 31 | + */ |
12 | 32 | hide(): void; |
13 | 33 | } |
14 | 34 |
|
| 35 | +let rootClickListenerActive = false; |
| 36 | + |
| 37 | +const HostConfigs = new WeakMap< |
| 38 | + RootClickControllerHost, |
| 39 | + RootClickControllerConfig |
| 40 | +>(); |
| 41 | + |
| 42 | +const ActiveHosts = new Set<RootClickControllerHost>(); |
| 43 | + |
| 44 | +function handleRootClick(event: MouseEvent): void { |
| 45 | + for (const host of ActiveHosts) { |
| 46 | + const config = HostConfigs.get(host); |
| 47 | + |
| 48 | + if (host.keepOpenOnOutsideClick) { |
| 49 | + continue; |
| 50 | + } |
| 51 | + |
| 52 | + const targets: Set<Element> = config?.target |
| 53 | + ? new Set([host, config.target]) |
| 54 | + : new Set([host]); |
| 55 | + |
| 56 | + if (!findElementFromEventPath((node) => targets.has(node), event)) { |
| 57 | + config?.onHide ? config.onHide.call(host) : host.hide(); |
| 58 | + } |
| 59 | + } |
| 60 | +} |
| 61 | + |
15 | 62 | /* blazorSuppress */ |
16 | | -export class RootClickController implements ReactiveController { |
| 63 | +/** |
| 64 | + * A Lit ReactiveController that manages global click listeners to hide a component |
| 65 | + * when a click occurs outside of the component or its specified target. |
| 66 | + * |
| 67 | + * This controller implements a singleton pattern for the document click listener, |
| 68 | + * meaning only one event listener is attached to `document` regardless of how many |
| 69 | + * instances of `RootClickController` are active. Each controller instance |
| 70 | + * subscribes to this single listener. |
| 71 | + */ |
| 72 | +class RootClickController implements ReactiveController { |
| 73 | + private readonly _host: RootClickControllerHost; |
| 74 | + private _config?: RootClickControllerConfig; |
| 75 | + |
17 | 76 | constructor( |
18 | | - private readonly host: RootClickControllerHost, |
19 | | - private config?: RootClickControllerConfig |
| 77 | + host: RootClickControllerHost, |
| 78 | + config?: RootClickControllerConfig |
20 | 79 | ) { |
21 | | - this.host.addController(this); |
22 | | - } |
| 80 | + this._host = host; |
| 81 | + this._config = config; |
| 82 | + this._host.addController(this); |
23 | 83 |
|
24 | | - private addEventListeners() { |
25 | | - if (!this.host.keepOpenOnOutsideClick) { |
26 | | - document.addEventListener('click', this, { capture: true }); |
| 84 | + if (this._config) { |
| 85 | + HostConfigs.set(this._host, this._config); |
27 | 86 | } |
28 | 87 | } |
29 | 88 |
|
30 | | - private removeEventListeners() { |
31 | | - document.removeEventListener('click', this, { capture: true }); |
32 | | - } |
33 | | - |
34 | | - private configureListeners() { |
35 | | - this.host.open ? this.addEventListeners() : this.removeEventListeners(); |
36 | | - } |
| 89 | + /** |
| 90 | + * Adds the host to the set of active hosts and ensures the global |
| 91 | + * document click listener is active if needed. |
| 92 | + */ |
| 93 | + private _addActiveHost(): void { |
| 94 | + ActiveHosts.add(this._host); |
37 | 95 |
|
38 | | - private shouldHide(event: PointerEvent) { |
39 | | - const targets = new Set<Element>([this.host]); |
| 96 | + if (this._config) { |
| 97 | + HostConfigs.set(this._host, this._config); |
40 | 98 |
|
41 | | - if (this.config?.target) { |
42 | | - targets.add(this.config.target); |
| 99 | + if (!rootClickListenerActive) { |
| 100 | + document.addEventListener('click', handleRootClick, { capture: true }); |
| 101 | + rootClickListenerActive = true; |
| 102 | + } |
43 | 103 | } |
44 | | - |
45 | | - return !findElementFromEventPath((node) => targets.has(node), event); |
46 | 104 | } |
47 | 105 |
|
48 | | - public handleEvent(event: PointerEvent) { |
49 | | - if (this.host.keepOpenOnOutsideClick) { |
50 | | - return; |
51 | | - } |
| 106 | + /** |
| 107 | + * Removes the host from the set of active hosts and removes the global |
| 108 | + * document click listener if no other hosts are active. |
| 109 | + */ |
| 110 | + private _removeActiveHost(): void { |
| 111 | + ActiveHosts.delete(this._host); |
52 | 112 |
|
53 | | - if (this.shouldHide(event)) { |
54 | | - this.hide(); |
| 113 | + if (isEmpty(ActiveHosts) && rootClickListenerActive) { |
| 114 | + document.removeEventListener('click', handleRootClick, { capture: true }); |
| 115 | + rootClickListenerActive = false; |
55 | 116 | } |
56 | 117 | } |
57 | 118 |
|
58 | | - private hide() { |
59 | | - this.config?.hideCallback |
60 | | - ? this.config.hideCallback.call(this.host) |
61 | | - : this.host.hide(); |
| 119 | + /** |
| 120 | + * Configures the active state of the controller based on the host's `open` property. |
| 121 | + * If `host.open` is true, the controller becomes active; otherwise, it becomes inactive. |
| 122 | + */ |
| 123 | + private _configureListeners(): void { |
| 124 | + this._host.open && !this._host.keepOpenOnOutsideClick |
| 125 | + ? this._addActiveHost() |
| 126 | + : this._removeActiveHost(); |
62 | 127 | } |
63 | 128 |
|
64 | | - public update(config?: RootClickControllerConfig) { |
| 129 | + /** Updates the controller configuration and active state. */ |
| 130 | + public update(config?: RootClickControllerConfig): void { |
65 | 131 | if (config) { |
66 | | - this.config = { ...this.config, ...config }; |
| 132 | + this._config = { ...this._config, ...config }; |
| 133 | + HostConfigs.set(this._host, this._config); |
67 | 134 | } |
68 | | - this.configureListeners(); |
| 135 | + |
| 136 | + this._configureListeners(); |
69 | 137 | } |
70 | 138 |
|
71 | | - public hostConnected() { |
72 | | - this.configureListeners(); |
| 139 | + /** @internal */ |
| 140 | + public hostConnected(): void { |
| 141 | + this._configureListeners(); |
73 | 142 | } |
74 | 143 |
|
75 | | - public hostDisconnected() { |
76 | | - this.removeEventListeners(); |
| 144 | + /** @internal */ |
| 145 | + public hostDisconnected(): void { |
| 146 | + this._removeActiveHost(); |
77 | 147 | } |
78 | 148 | } |
79 | 149 |
|
80 | | -export function addRootClickHandler( |
| 150 | +/** |
| 151 | + * Creates and adds a {@link RootClickController} instance with a {@link RootClickControllerConfig | configuration} |
| 152 | + * to the given {@link RootClickControllerHost | host}. |
| 153 | + */ |
| 154 | +export function addRootClickController( |
81 | 155 | host: RootClickControllerHost, |
82 | 156 | config?: RootClickControllerConfig |
83 | | -) { |
| 157 | +): RootClickController { |
84 | 158 | return new RootClickController(host, config); |
85 | 159 | } |
| 160 | + |
| 161 | +export type { RootClickController }; |
0 commit comments