List of JavaScript lifecycle events
All of the lifecycle events are described below and separated by page category. Note that there is one special event that fires only once at the beginning of the load of the application website,cdm-app:ready
.
These custom events fire at the document level, which means you can subscribe to the document itself. The CONTENTdm application provides a CustomEvent() object within the lifecycle of the application and page render. The detail within the function is the custom data or function to be executed.
JavaScript and CSS examples for additional customization examples.
Note: Please seeApplication
cdm-app:ready
- Available once the application is ready to use; the earliest time point in the application lifecycle.
Example:
document.addEventListener('cdm-app:ready', function(e){ // application ready to use // e is instance of CustomEvent });
Home page
The home page is the default page of a CONTENTdm site that appears for the bare URL, as well as at the /digital/ path. This event class is used for the built-in home page, as well as a custom HTML home page.
Event class | Description |
---|---|
cdm-home-page:enter |
The home page is about to be entered but has not yet rendered. |
cdm-home-page:ready |
The home page is ready to use. |
cdm-home-page:update |
The home page state is updated (e.g., a user navigates to a next/previous page of collection cards). |
cdm-home-page:leave |
The home page is about to be exited by the user. |
Example:
cdm-home-page:enter
document.addEventListener('cdm-home-page:enter', function(e){ // e is instance of CustomEvent // ... });
Search page
The search page renders at the /digital/search/ path. This event class is fired only when the collection scope of the search is for more than one collection.
Event class | Description |
---|---|
cdm-search-page:enter |
The search page is about to be entered but has not yet rendered. |
cdm-search-page:ready |
The search page is ready to use. |
cdm-search-page:update |
The search page state is updated. |
cdm-search-page:leave |
The search page is about to be exited by the user. |
Example:
cdm-search-page:enter
document.addEventListener('cdm-search-page:enter', function(e){ // e is instance of CustomEvent // ... });
Collection search page
The collection search page is a search that has a single-collection scope. If the search is modified to have two or more collections, then a different event class will be triggered (cdm-search-page).
Event class | Description |
---|---|
cdm-collection-search-page:enter |
The collection search page is about to be entered but has not yet rendered. |
cdm-collection-search-page:ready |
The collection search page is ready to use. |
cdm-collection-search-page:update |
The collection search page state is updated. |
cdm-collection-search-page:leave |
The collection search page is about to be exited by the user. |
Example:
cdm-collection-search-page:enter
document.addEventListener('cdm-collection-search-page:enter', function(e){ // e is instance of CustomEvent console.log(e.detail); // {collectionId: '...'} // ... });
Advanced search page
Event class | Description |
---|---|
cdm-advanced-search-page:enter |
The advanced search page is about to be entered but has not yet rendered. |
cdm-advanced-search-page:ready |
The advanced search page is ready to use. |
cdm-advanced-search-page:update |
The advanced search page state is updated. |
cdm-advanced-search-page:leave |
The advanced search page is about to be exited by the user. |
Example:
cdm-advanced-search-page:enter
document.addEventListener('cdm-advanced-search-page:enter', function(e){ // e is instance of CustomEvent // ... });
Collection landing page
Event class | Description |
---|---|
cdm-collection-landing-page:enter |
The collection landing page is about to be entered but has not yet rendered. |
cdm-collection-landing-page:ready |
The collection landing page is ready to use. |
cdm-collection-landing-page:update |
The collection landing page state is updated. |
cdm-collection-landing-page:leave |
The collection landing page is about to be exited by the user. |
Example:
cdm-collection-landing-page:enter
document.addEventListener('cdm-collection-landing-page:enter', function(e){ // e is instance of CustomEvent console.log(e.detail); // {collectionId: '...'} // ... });
Item page
Event class | Description |
---|---|
cdm-item-page:enter |
The item page is about to be entered but has not yet rendered. |
cdm-item-page:ready |
The item page is ready to use. |
cdm-item-page:update |
The item page state is updated. |
cdm-item-page:leave |
The item page is about to be exited by the user. |
Example:
cdm-item-page:enter
document.addEventListener('cdm-item-page:enter', function(e){ // e is instance of CustomEvent console.log(e.detail); // {collectionId: '...', itemId: '...'} // ... });
Custom page
The custom page events are triggered only for pages where the URL contains /custom/. If you have replaced the home page or a collection landing page with a custom HTML file, those pages will use the cdm-home-page and cdm-collection-landing-page event classes instead.
Event class | Description |
---|---|
cdm-custom-page:enter |
The custom page is about to be entered but has not yet rendered. |
cdm-custom-page:ready |
The custom page is ready to use. |
cdm-custom-page:update |
The custom page state is updated. |
cdm-custom-page:leave |
The custom page is about to be exited by the user. |
Example:
cdm-custom-page:enter
document.addEventListener('cdm-custom-page:enter', function(e){ // e is instance of CustomEvent // ... });
About page
Event class | Description |
---|---|
cdm-about-page:enter |
The about page is about to be entered but has not yet rendered. |
cdm-about-page:ready |
The about page is ready to use. |
cdm-about-page:update |
The about page state is updated. |
cdm-about-page:leave |
The about page is about to be exited by the user. |
Example:
cdm-about-page:enter
document.addEventListener('cdm-about-page:enter', function(e){ // e is instance of CustomEvent // ... });
Login page
Event class | Description |
---|---|
cdm-login-page:enter |
The login page is about to be entered but has not yet rendered. |
cdm-login-page:ready |
The login page is ready to use. |
cdm-login-page:update |
The login page state is updated. |
cdm-login-page:leave |
The login page is about to be exited by the user. |
Example:
cdm-login-page:enter
document.addEventListener('cdm-login-page:enter', function(e){ // e is instance of CustomEvent // ... });
Not found page
Event class | Description |
---|---|
cdm-notfound-page:enter |
The not found page is about to be entered but has not yet rendered. |
cdm-notfound-page:ready |
The not found page is ready to use. |
cdm-notfound-page:update |
The not found page state is updated. |
cdm-notfound-page:leave |
The not found page is about to be exited by the user. |
Example:
cdm-notfound-page:enter
document.addEventListener('cdm-notfound-page:enter', function(e){ // e is instance of CustomEvent // ... });
Saved Items page
Event class | Description |
---|---|
cdm-saved-items-page:enter |
The saved items page is about to be entered but has not yet rendered. |
cdm-saved-items-page:ready |
The saved items page is ready to use. |
cdm-saved-items-page:update |
The saved items page state is updated. |
cdm-saved-items-page:leave |
The saved items page is about to be exited by the user. |
Example:
cdm-saved-items-page:enter
document.addEventListener('cdm-saved-items-page:enter', function(e){ // e is instance of CustomEvent // ... });
Shared Items page
Event class | Description |
---|---|
cdm-shared-items-page:enter |
The shared items page is about to be entered but has not yet rendered. |
cdm-shared-items-page:ready |
The shared items page is ready to use. |
cdm-shared-items-page:update |
The shared items page state is updated. |
cdm-shared-items-page:leave |
The shared items page is about to be exited by the user. |
Example:
cdm-shared-items-page:enter
document.addEventListener('cdm-shared-items-page:enter', function(e){ // e is instance of CustomEvent // ... });