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.