closeOnOutsideClick() — astro Function Reference

Architecture documentation for the closeOnOutsideClick() function in window.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient

Entity Profile

DevToolbar→ ToolbarClient→ closeOnOutsideClick() — astro Function Reference

Dependency Diagram

graph TD
  b0ad9546_cdbe_4348_6a54_4007d077fddb["closeOnOutsideClick()"]
  bd769712_125e_47f5_295b_20dbbbe7a68d["window.ts"]
  b0ad9546_cdbe_4348_6a54_4007d077fddb -->|defined in| bd769712_125e_47f5_295b_20dbbbe7a68d
  style b0ad9546_cdbe_4348_6a54_4007d077fddb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/utils/window.ts lines 11–36

export function closeOnOutsideClick(
	eventTarget: EventTarget,
	additionalCheck?: (target: Element) => boolean,
) {
	function onPageClick(event: MouseEvent) {
		const target = event.target as Element | null;
		if (!target) return;
		if (!target.closest) return;
		if (target.closest('astro-dev-toolbar')) return;
		if (additionalCheck && additionalCheck(target)) return;
		eventTarget.dispatchEvent(
			new CustomEvent('toggle-app', {
				detail: {
					state: false,
				},
			}),
		);
	}
	eventTarget.addEventListener('app-toggled', (event: any) => {
		if (event.detail.state === true) {
			document.addEventListener('click', onPageClick, true);
		} else {
			document.removeEventListener('click', onPageClick, true);
		}
	});
}