Class USASiteAlert

The USASiteAlert component is used to initialize the .usa-site-alert component.

Initialization examples

The easiest way to user the site alert is to let the NCIDS automatically initialize your site alert HTML.

Add the following to the top of your main Javascript file, and it will add trigger the Javascript initialization of the USASiteAlert.

Example

import '@nciocpl/ncids-js/usa-site-alert/auto-init';
Copy

If you need access to the site alert instance to further customize your site, you can manually initialize the site alert:

Example

import { USASiteAlert } from '@nciocpl/ncids-js/usa-site-alert';

// Find the site alert HTML element.
const siteAlertEl = document.querySelector('.usa-site-alert');

// Initialize the component.
const siteAlert = USASiteAlert.create(siteAlertEl);
Copy

Making a dismissible site alert

If you are using the auto initializer, you can add the data attribute data-site-alert-closable to the site alert to make it dismissible.

If you are manually initializing the site alert and need to add te ability to close the site alert, you can pass in an argument to the initializer:

Example

import { USASiteAlert } from '@nciocpl/ncids-js/usa-site-alert';

// Find the site alert HTML element.
const siteAlertEl = document.querySelector('.usa-site-alert');

USASiteAlert.create(siteAlertEl, {
  closeable: true,
    });
Copy

HTML Events

The site alert component will dispatch the following CustomEvent types that can be used to track analytics or other needs when a visitor interacts with the component:

• usa-site-alert:content:expand - Dispatched with SiteAlertCollapseOptions when site alert is toggled open.
• usa-site-alert:content:collapse - Dispatched with SiteAlertCollapseOptions when site alert is toggled close.
• usa-site-alert:close-button:close - Dispatched with SiteAlertCloseButtonOptions when the close button on the site alert is clicked.

Example

import { USASiteAlert } from '@nciocpl/ncids-js/usa-site-alert';

// Find the site alert HTML element.
const siteAlertEl = document.querySelector('.usa-site-alert');

// Initialize the component.
const siteAlert = USASiteAlert.create(siteAlertEl);

// Attach an event handler to the site alert to listen for custom events.
siteAlert.addEventListener('usa-site-alert:content:expand', (event) => {
   // Add your analytics code here.
   console.log('Event occurred.');
});
Copy