DOM Containers

Haven expects specific DOM elements on your page. You provide the containers; Haven renders content into them.

Required

Main app container

<div id="haven-app"></div>

Property	Value
Default selector	#haven-app
Override	selector in .directory.init() or .calendar.init()

This is where the product/event list and detail views render.

Optional (external containers)

These containers live outside #haven-app. Haven renders into them when the corresponding option is configured.

Breadcrumb

<div id="haven-breadcrumb-directory"></div>

breadcrumb: {
  enabled: true,
  selector: '#haven-breadcrumb-directory',
}

Filter

<div id="haven-filter-directory"></div>

filter: {
  selector: '#haven-filter-directory',
  fields: { /* ... */ },
}

Ongoing events sidebar (calendar)

<div id="haven-app--ongoing">
  <h2>Ongoing Events</h2>
  <div id="haven-list--ongoing"></div>
</div>

ongoing: {
  selector: '#haven-list--ongoing',
  container: '#haven-app--ongoing',
}

Haven shows/hides container automatically based on whether ongoing events exist and the current view state.

Generated containers

Haven creates internal wrapper elements. You can control their IDs:

Option	Default	Description
options.id	haven-list	ID of the list wrapper inside the selector

For example, with id: 'haven-calendar', Haven generates:

<div id="haven-app">
  <div id="haven-calendar" class="haven__calendar">
    <ul class="haven__list">
      <!-- items -->
    </ul>
  </div>
</div>

Recommended page structure

Full directory

<div id="haven-container">
  <div id="haven-breadcrumb-directory"></div>
  <div id="haven-filter-directory"></div>
  <div id="haven-app"></div>
</div>

Calendar with ongoing sidebar

<div id="main">
  <div id="haven-app"></div>
  <div id="haven-app--ongoing">
    <h2>Ongoing Events</h2>
    <div id="haven-list--ongoing"></div>
  </div>
</div>

Minimal widget

<div id="haven-upcoming-widget">
  <h2>Upcoming Events</h2>
  <div id="haven-upcoming"></div>
</div>

Map element

When includeMap: true, Haven generates a map element with ID haven-map--{options.id} (e.g. haven-map--haven-list). The map is inserted according to map.mapAttachment.

Lightbox element

The lightbox is created dynamically and appended to the document body. No container is required.

CSS classes on body

Haven adds view classes to <body> for styling:

Class	When
haven__view--directory-list	Directory list view
haven__view--calendar-daily	Calendar daily view
(others)	Based on module and format

Theme CSS targets these classes for layout control.