Alert Banner

The Alert Banner Object contains messages and information relevant to users. When JavaScript is enabled the alert is visible at page landing allowing a user the option to close it. When a user closes the banner, it will be hidden for all page visits afterwards unless there is a new message or the alert’s cookie has expired or cleared. Click here to see a full page demonstration.

<article aria-hidden="false" class="c-alert-banner z-20 bg-status-info animated hidden:fadeInUp active print:hidden" data-alert-name="maintenance" data-js="alert-banner" id="aria-c-alert-banner" role="dialog">
  <div class="c-alert-banner-wrapper">
    <div class="c-alert-banner__content">
      <div class="c-alert-banner__icon">
        <svg aria-hidden="true" class="c-alert-banner__svg icon-4">
          <use xlink:href="#icon-info"></use>
        </svg>
      </div>
      <div class="c-alert-banner__body">ACCESS NYC will be undergoing maintenance Friday, February 2nd from 9pm to 11pm EST.</div>
    </div>
    <div class="c-alert-banner__closing">
      <button aria-controls="aria-c-alert-banner" aria-expanded="true" class="text-blue" data-js="alert-controller">
        <span class="sr-only">close & return to site</span>
        <svg aria-hidden="true" class="icon-ui icon-3">
          <use xlink:href="#icon-ui-x"></use>
        </svg>
      </button>
    </div>
  </div>
</article>

Alert Banner Usage

Global Script

The Alert Banner Object requires JavaScript for showing and hiding the alert. It uses a Cookie to store the dismissed state for hiding the banner after subsequent page visits if the user has dismissed it. To use the Alert Banner Object through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var access = new AccessNyc();
  access.alertBanner();
</script>

This will instantiate the Alert Banner Object and attach event listeners for the close option.

Module Import

The ES6 and IFFE modules all require importing and object instantiation in your main script. You must pass a dom selection of the Alert Banner Object to the instantiated class. A selector reference is stored in the class.

// ES6
import AlertBanner from 'src/objects/alert-banner/alert-banner';

<!-- IFFE -->
<script src="dist/objects/alert-banner/alert-banner.iffe.js"></script>

let element = document.querySelector(AlertBanner.selector);
new AlertBanner(element);

Dependencies and Polyfills

This script uses the Toggle Utility as a dependency and reqiures the same polyfills for IE11 support. See the “Toggle Usage” section for details on specific methods. Additionally, it uses JavaScript Cookie as a dependency.