attachEvents() — astro Function Reference

Architecture documentation for the attachEvents() function in toolbar.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient calls 7 called by 1

Entity Profile

DevToolbar→ ToolbarClient→ attachEvents() — astro Function Reference

Dependency Diagram

graph TD
  9028096c_54ca_ca1e_b2cb_f6201ef5a538["attachEvents()"]
  833f7e6d_4781_eb37_c633_27829bbb8361["AstroDevToolbar"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|defined in| 833f7e6d_4781_eb37_c633_27829bbb8361
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e["init()"]
  e295abb8_a27c_a9ba_5daf_4ea2ac1d163e -->|calls| 9028096c_54ca_ca1e_b2cb_f6201ef5a538
  f8b96f39_d45a_5dec_d67b_6b8090c40c52["getAppById()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| f8b96f39_d45a_5dec_d67b_6b8090c40c52
  8bc52765_9660_aff0_d7e3_374e4e252973["toggleAppStatus()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| 8bc52765_9660_aff0_d7e3_374e4e252973
  f19482b3_4368_602b_f84b_9255a7192aab["clearDelayedHide()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| f19482b3_4368_602b_f84b_9255a7192aab
  1f3e4d0c_afaf_aee1_6276_bff650989d71["isHidden()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| 1f3e4d0c_afaf_aee1_6276_bff650989d71
  58b99d65_15b1_0f24_50ad_f7878706a69c["setToolbarVisible()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| 58b99d65_15b1_0f24_50ad_f7878706a69c
  efc01d18_85ec_e25d_5ba4_8115b21ae4ec["getActiveApp()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| efc01d18_85ec_e25d_5ba4_8115b21ae4ec
  83396ffa_5052_1c41_a010_604b7208eaa3["triggerDelayedHide()"]
  9028096c_54ca_ca1e_b2cb_f6201ef5a538 -->|calls| 83396ffa_5052_1c41_a010_604b7208eaa3
  style 9028096c_54ca_ca1e_b2cb_f6201ef5a538 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/toolbar.ts lines 339–383

	attachEvents() {
		const items = this.shadowRoot.querySelectorAll<HTMLDivElement>('.item');
		items.forEach((item) => {
			item.addEventListener('click', async (event) => {
				const target = event.currentTarget;
				if (!target || !(target instanceof HTMLElement)) return;
				const id = target.dataset.appId;
				if (!id) return;
				const app = this.getAppById(id);
				if (!app) return;
				event.stopPropagation();
				await this.toggleAppStatus(app);
			});
		});

		(['mouseenter', 'focusin'] as const).forEach((event) => {
			this.devToolbarContainer!.addEventListener(event, () => {
				this.clearDelayedHide();
				if (this.isHidden()) {
					this.setToolbarVisible(true);
				}
			});
		});

		(['mouseleave', 'focusout'] as const).forEach((event) => {
			this.devToolbarContainer!.addEventListener(event, () => {
				this.clearDelayedHide();
				if (this.getActiveApp() || this.isHidden()) {
					return;
				}
				this.triggerDelayedHide();
			});
		});

		document.addEventListener('keyup', (event) => {
			if (event.key !== 'Escape') return;
			if (this.isHidden()) return;
			const activeApp = this.getActiveApp();
			if (activeApp) {
				this.toggleAppStatus(activeApp);
			} else {
				this.setToolbarVisible(false);
			}
		});
	}