Panel events

Panel dispatches custom events.

Panel fires its custom events from the [data-panel] element. They bubble, so listen on the panel itself or on document.

Available events

Fires just before the panel opens. This is the hook for loading content: hand a promise to e.detail.promise and the open waits until it settles.

Detail:

trigger: HTMLElement | null
The element that initiated the open, or null if opened programmatically.
signal: AbortSignal
Aborted if the open is cancelled before the promise resolves.
promise: Promise | null
Set this to a promise to delay the open.
JavaScript 
panelEl.addEventListener('panel:beforeopen', e => {
	e.detail.promise = fetch('/api/content', { signal: e.detail.signal })
		.then(r => r.text())
		.then(html => { panelEl.querySelector('.panel-wrapper').innerHTML = html; });
});

Or skip the event and use the convenience method:

JavaScript 
panel.onBeforeOpen(async (el, signal) => {
	const html = await fetch('/content', { signal }).then(r => r.text());
	el.querySelector('.panel-wrapper').innerHTML = html;
}, { once: true });

Fires when the open animation starts.

Detail:

trigger: HTMLElement | null
The element that initiated the open, or null if opened programmatically.

Fires once the panel is fully open and the transition has finished.

Detail:

trigger: HTMLElement | null
The element that initiated the open, or null if opened programmatically.

Fires when the close animation starts.

Detail:

trigger: HTMLElement | null
The element that last opened the panel, or null if closed programmatically.

Fires once the panel is fully closed and the transition has finished.

Detail:

trigger: HTMLElement | null
The element that last opened the panel, or null if closed programmatically.

Fires when the panel stops being a collapsible disclosure and becomes plain expanded content, or the other way round. See the static option. It does not fire on init: that is the panel's starting state, not a change.

Detail:

static: boolean
true when the panel just became static, false when it became collapsible again (which lands it closed).

Listening to events

JavaScript 
document.querySelector('#my-panel').addEventListener('panel:opened', e => {
	console.log('Opened by', e.detail.trigger);
});

document.querySelector('#my-panel').addEventListener('panel:closed', () => {
	console.log('Panel closed');
});

Examples

Open this panel and the video plays; close it and the video pauses and rewinds to the start. The events are logged to the console so you can watch the order they fire in.

JavaScript 
const panel = document.getElementById('my-panel');
const video = panel.querySelector('video');

panel.addEventListener('panel:opened',  () => video.play());
panel.addEventListener('panel:closing', () => video.pause());
panel.addEventListener('panel:closed',  () => { video.currentTime = 0; });