PMX Overlay:

Intro

Module to generate an overlay and trap focus on the active element

Getting Started

1import EventEmitter from 'eventemitter3';
2import focusTrap from 'focus-trap';
3import overlay from 'pmx-overlay';
4
5const emitter = new EventEmitter();
6const el = document.querySelector('.Overlay');
7const targetEl = document.querySelector('.Menu');
8const config = {
9  el, // Element to be used as the overlay
10  targetEl, // The element that is gonna be active when the overlay gets activated.
11            // This element will gain focus as soon as the overlay
12  events: new Map([
13    ['activate', 'pmx:activate'], // the overlay will get activated when this event (along the
14                                  // targetEl) gets triggered
15    ['deactivate', 'pmx:deactivate'], // the overlay will get deactivated when this event (along
16                                      // the targetEl) gets triggered
17  ]),
18};
19const shared = {
20  focusTrap,
21  emitter,
22};
23const o = overlay();
24o.init(config, shared);

How to use

Setup

The module is exported as an UMD module so it can be used with AMD, CommonJS, ES Modules and in the browser.

• Install the dependency Using Yarn

1yarn add pmx-overlay

or using NPM

1npm install pmx-overlay --save

• Include the module

CommonJS

1const inert = require('pmx-overlay').default;

ES2015 modules

1import inert from 'pmx-overlay';

API

.init(config, shared):

Initializes the component.

.stop(config, shared)

Stops the component by removing all added mutations.

Browser Support

• IE 10+
• Chrome
• Firefox
• Safari

Dependencies

• focus-trap
• EventEmitter3

This library has been written with some ES2015 features that need to be polyfilled:

• Map
• Object.assign