Class NCIBigFooter

The NCIBigFooter component is used to initialize the dynamic features of the usa-footer--nci-big variant of the usa-footer.

Default Options

The default options for the NCIBigFooter component are:

{
  subscribeInvalidEmailAlert: 'Enter a valid email address',
}
Copy

Initialization Examples

The easiest way to use the footer is to let the NCIDS automatically initialize your Footer HTML.

Just add the following to the top of your main Javascript file and it will add code to your javascript that initializes the NCIBigFooter with the default options.

import '@nciocpl/ncids-js/components/usa-footer/nci-big/auto-init';
Copy

If you need the ability to customize the footer or attach event listeners for analytics then you can manually initialize the footer features. Below are two examples of how to manually initialize the footer.

Example

You can initialize the NCIBigFooter component using these default options:

import { NCIBigFooter } from '@nciocpl/ncids-js/components/usa-footer/nci-big';
const footer = document.querySelector('.usa-footer.usa-footer--nci-big');
NCIBigFooter.create(footer);
Copy

Example

Below is an example of initializing the NCIBigFooter component overidding the subscribeInvalidEmail text with a Spanish translation.

import { NCIBigFooter } from '@nciocpl/ncids-js/components/usa-footer/nci-big';
const footer = document.querySelector('.usa-footer.usa-footer--nci-big');
NCIBigFooter.create(
  footer,
  {
    subscribeInvalidEmailAlert: 'Ingrese su dirección de correo electrónico',
  }
);
Copy

HTML Events

The NCIBigFooter component will dispatch the following custom HTML event types that can be used to track analytics or other needs when a visitor interacts with the footer.

• usa-footer:nav-links:collapse - Fired when a collapse button is clicked and content is collapsed.
• usa-footer:nav-links:expand - Fired when a collapse button is clicked and content is expanded.
• usa-footer:sign-up:submit - Fired when form validations pass and form is submitted.
• usa-footer:sign-up:error - Fired when form validations fail and form shows validation errors.

Example

const footer = document.querySelector('.usa-footer.usa-footer--nci-big');
NCIFooter.create(element);
element.addEventListener('usa-footer:nav-links:collapse', (event) => {
   console.log('Event occurred.');
});
Copy