Events

Haven dispatches DOM CustomEvents that bubble to document. Use these to hook into the embed lifecycle.

Listening for events

document.addEventListener('havenDirectoryInit', function (e) {
  console.log('Directory is ready', e.detail);
});

Event reference

Event	Fired when	Module
havenDirectoryInit	Directory list UI is ready	Directory
havenCalendarInit	Calendar list UI is ready	Calendar
havenMapLoad	Mapbox map has loaded	Directory, Calendar
havenFilterReady	Filter UI is rendered	Directory, Calendar
havenFilterToggle	A toggle filter changes	Directory, Calendar
havenFilterDropdown	A dropdown filter changes	Directory, Calendar
havenDirectoryBreadcrumbUpdate	Breadcrumb trail updates	Directory
havenSort	Favorites list is re-sorted	Directory, Calendar
havenFaveToggle	User toggles a favorite	Directory, Calendar
havenSetFaveCount	Favorite count updates	Directory, Calendar
changeMonth	Month picker month changes	Calendar (on picker element)

Common patterns

Wait for directory before custom JS

document.addEventListener('havenDirectoryInit', function () {
  // safe to query Haven-rendered DOM
  var items = document.querySelectorAll('.haven__item');
});

Wait for map before adding custom markers

document.addEventListener('havenMapLoad', function () {
  // map is interactive
});

React to filter changes

document.addEventListener('havenFilterDropdown', function (e) {
  console.log('Filter changed:', e.detail);
});

Init vs map load

When maps are enabled, some internal logic waits for havenMapLoad instead of the module init event. If you need to run code after the full experience (including map) is ready:

document.addEventListener('havenMapLoad', function () {
  // directory/calendar + map are ready
});

Without maps, listen for havenDirectoryInit or havenCalendarInit.

changeMonth

This event fires on the month picker element (not document):

document.getElementById('haven-date-filter').addEventListener('changeMonth', function (e) {
  console.log('Month changed');
});